@foxy.io/elements 1.45.0-beta.3 → 1.45.0-beta.5

package/dist/cdn/{shared-c3d1d247.js → shared-e54135f0.js}

@@ -1,4 +1,4 @@
-import{t as e}from"./shared-387d7254.js";import{d as t}from"./shared-3db3f3c3.js";
+import{t as e}from"./shared-7a87cd33.js";import{d as t}from"./shared-5bcf861e.js";
 /**
 @license
 Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -12,7 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 @license
 Copyright (c) 2017 Vaadin Ltd.
 This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/const d=e=>class extends e{static get properties(){return{_hasVaadinItemMixin:{value:!0},disabled:{type:Boolean,value:!1,observer:"_disabledChanged",reflectToAttribute:!0},selected:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_selectedChanged"},_value:String}}get value(){return void 0!==this._value?this._value:this.textContent.trim()}set value(e){this._value=e}ready(){super.ready();const e=this.getAttribute("value");null!==e&&(this.value=e),this.addEventListener("focus",(e=>this._setFocused(!0)),!0),this.addEventListener("blur",(e=>this._setFocused(!1)),!0),this.addEventListener("mousedown",(e=>{this._setActive(this._mousedown=!0);const t=()=>{this._setActive(this._mousedown=!1),document.removeEventListener("mouseup",t)};document.addEventListener("mouseup",t)})),this.addEventListener("keydown",(e=>this._onKeydown(e))),this.addEventListener("keyup",(e=>this._onKeyup(e)))}disconnectedCallback(){super.disconnectedCallback(),this.hasAttribute("active")&&this._setFocused(!1)}_selectedChanged(e){this.setAttribute("aria-selected",e)}_disabledChanged(e){e?(this.selected=!1,this.setAttribute("aria-disabled","true"),this.blur()):this.removeAttribute("aria-disabled")}_setFocused(e){e?(this.setAttribute("focused",""),this._mousedown||this.setAttribute("focus-ring","")):(this.removeAttribute("focused"),this.removeAttribute("focus-ring"),this._setActive(!1))}_setActive(e){e?this.setAttribute("active",""):this.removeAttribute("active")}_onKeydown(e){/^( |SpaceBar|Enter)$/.test(e.key)&&!e.defaultPrevented&&(e.preventDefault(),this._setActive(!0))}_onKeyup(e){this.hasAttribute("active")&&(this._setActive(!1),this.click())}}
+*/const h=e=>class extends e{static get properties(){return{_hasVaadinItemMixin:{value:!0},disabled:{type:Boolean,value:!1,observer:"_disabledChanged",reflectToAttribute:!0},selected:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_selectedChanged"},_value:String}}get value(){return void 0!==this._value?this._value:this.textContent.trim()}set value(e){this._value=e}ready(){super.ready();const e=this.getAttribute("value");null!==e&&(this.value=e),this.addEventListener("focus",(e=>this._setFocused(!0)),!0),this.addEventListener("blur",(e=>this._setFocused(!1)),!0),this.addEventListener("mousedown",(e=>{this._setActive(this._mousedown=!0);const t=()=>{this._setActive(this._mousedown=!1),document.removeEventListener("mouseup",t)};document.addEventListener("mouseup",t)})),this.addEventListener("keydown",(e=>this._onKeydown(e))),this.addEventListener("keyup",(e=>this._onKeyup(e)))}disconnectedCallback(){super.disconnectedCallback(),this.hasAttribute("active")&&this._setFocused(!1)}_selectedChanged(e){this.setAttribute("aria-selected",e)}_disabledChanged(e){e?(this.selected=!1,this.setAttribute("aria-disabled","true"),this.blur()):this.removeAttribute("aria-disabled")}_setFocused(e){e?(this.setAttribute("focused",""),this._mousedown||this.setAttribute("focus-ring","")):(this.removeAttribute("focused"),this.removeAttribute("focus-ring"),this._setActive(!1))}_setActive(e){e?this.setAttribute("active",""):this.removeAttribute("active")}_onKeydown(e){/^( |SpaceBar|Enter)$/.test(e.key)&&!e.defaultPrevented&&(e.preventDefault(),this._setActive(!0))}_onKeyup(e){this.hasAttribute("active")&&(this._setActive(!1),this.click())}}
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
@@ -22,4 +22,4 @@ http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
 found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
 part of the polymer project is also subject to an additional IP rights grant
 found at http://polymer.github.io/PATENTS.txt
-*/;var h=new Set;const u={properties:{_parentResizable:{type:Object,observer:"_parentResizableChanged"},_notifyingDescendant:{type:Boolean,value:!1}},listeners:{"iron-request-resize-notifications":"_onIronRequestResizeNotifications"},created:function(){this._interestedResizables=[],this._boundNotifyResize=this.notifyResize.bind(this),this._boundOnDescendantIronResize=this._onDescendantIronResize.bind(this)},attached:function(){this._requestResizeNotifications()},detached:function(){this._parentResizable?this._parentResizable.stopResizeNotificationsFor(this):(h.delete(this),window.removeEventListener("resize",this._boundNotifyResize)),this._parentResizable=null},notifyResize:function(){this.isAttached&&(this._interestedResizables.forEach((function(e){this.resizerShouldNotify(e)&&this._notifyDescendant(e)}),this),this._fireResize())},assignParentResizable:function(e){this._parentResizable&&this._parentResizable.stopResizeNotificationsFor(this),this._parentResizable=e,e&&-1===e._interestedResizables.indexOf(this)&&(e._interestedResizables.push(this),e._subscribeIronResize(this))},stopResizeNotificationsFor:function(e){var t=this._interestedResizables.indexOf(e);t>-1&&(this._interestedResizables.splice(t,1),this._unsubscribeIronResize(e))},_subscribeIronResize:function(e){e.addEventListener("iron-resize",this._boundOnDescendantIronResize)},_unsubscribeIronResize:function(e){e.removeEventListener("iron-resize",this._boundOnDescendantIronResize)},resizerShouldNotify:function(e){return!0},_onDescendantIronResize:function(t){this._notifyingDescendant?t.stopPropagation():e||this._fireResize()},_fireResize:function(){this.fire("iron-resize",null,{node:this,bubbles:!1})},_onIronRequestResizeNotifications:function(e){var i=t(e).rootTarget;i!==this&&(i.assignParentResizable(this),this._notifyDescendant(i),e.stopPropagation())},_parentResizableChanged:function(e){e&&window.removeEventListener("resize",this._boundNotifyResize)},_notifyDescendant:function(e){this.isAttached&&(this._notifyingDescendant=!0,e.notifyResize(),this._notifyingDescendant=!1)},_requestResizeNotifications:function(){if(this.isAttached)if("loading"===document.readyState){var e=this._requestResizeNotifications.bind(this);document.addEventListener("readystatechange",(function t(){document.removeEventListener("readystatechange",t),e()}))}else this._findParent(),this._parentResizable?this._parentResizable._interestedResizables.forEach((function(e){e!==this&&e._findParent()}),this):(h.forEach((function(e){e!==this&&e._findParent()}),this),window.addEventListener("resize",this._boundNotifyResize),this.notifyResize())},_findParent:function(){this.assignParentResizable(null),this.fire("iron-request-resize-notifications",null,{node:this,bubbles:!0,cancelable:!0}),this._parentResizable?h.delete(this):h.add(this)}};export{d as I,a,u as b};
+*/;var d=new Set;const u={properties:{_parentResizable:{type:Object,observer:"_parentResizableChanged"},_notifyingDescendant:{type:Boolean,value:!1}},listeners:{"iron-request-resize-notifications":"_onIronRequestResizeNotifications"},created:function(){this._interestedResizables=[],this._boundNotifyResize=this.notifyResize.bind(this),this._boundOnDescendantIronResize=this._onDescendantIronResize.bind(this)},attached:function(){this._requestResizeNotifications()},detached:function(){this._parentResizable?this._parentResizable.stopResizeNotificationsFor(this):(d.delete(this),window.removeEventListener("resize",this._boundNotifyResize)),this._parentResizable=null},notifyResize:function(){this.isAttached&&(this._interestedResizables.forEach((function(e){this.resizerShouldNotify(e)&&this._notifyDescendant(e)}),this),this._fireResize())},assignParentResizable:function(e){this._parentResizable&&this._parentResizable.stopResizeNotificationsFor(this),this._parentResizable=e,e&&-1===e._interestedResizables.indexOf(this)&&(e._interestedResizables.push(this),e._subscribeIronResize(this))},stopResizeNotificationsFor:function(e){var t=this._interestedResizables.indexOf(e);t>-1&&(this._interestedResizables.splice(t,1),this._unsubscribeIronResize(e))},_subscribeIronResize:function(e){e.addEventListener("iron-resize",this._boundOnDescendantIronResize)},_unsubscribeIronResize:function(e){e.removeEventListener("iron-resize",this._boundOnDescendantIronResize)},resizerShouldNotify:function(e){return!0},_onDescendantIronResize:function(t){this._notifyingDescendant?t.stopPropagation():e||this._fireResize()},_fireResize:function(){this.fire("iron-resize",null,{node:this,bubbles:!1})},_onIronRequestResizeNotifications:function(e){var i=t(e).rootTarget;i!==this&&(i.assignParentResizable(this),this._notifyDescendant(i),e.stopPropagation())},_parentResizableChanged:function(e){e&&window.removeEventListener("resize",this._boundNotifyResize)},_notifyDescendant:function(e){this.isAttached&&(this._notifyingDescendant=!0,e.notifyResize(),this._notifyingDescendant=!1)},_requestResizeNotifications:function(){if(this.isAttached)if("loading"===document.readyState){var e=this._requestResizeNotifications.bind(this);document.addEventListener("readystatechange",(function t(){document.removeEventListener("readystatechange",t),e()}))}else this._findParent(),this._parentResizable?this._parentResizable._interestedResizables.forEach((function(e){e!==this&&e._findParent()}),this):(d.forEach((function(e){e!==this&&e._findParent()}),this),window.addEventListener("resize",this._boundNotifyResize),this.notifyResize())},_findParent:function(){this.assignParentResizable(null),this.fire("iron-request-resize-notifications",null,{node:this,bubbles:!0,cancelable:!0}),this._parentResizable?d.delete(this):d.add(this)}};export{h as I,a,u as b};

package/dist/cdn/{shared-7fa24559.js → shared-e7a2b31d.js}

@@ -1,4 +1,4 @@
-import{P as e}from"./shared-3db3f3c3.js";
+import{P as e}from"./shared-5bcf861e.js";
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

package/dist/cdn/{shared-e6d5f375.js → shared-f1e48b0e.js}

@@ -1,4 +1,4 @@
-import{aq as e,ar as t,as as s,at as a,au as i,av as n,aw as r,ax as l,o,ay as d,az as A,aA as u,aB as h,aC as c,aD as m,aE as p,m as v,_ as g,aF as y}from"./shared-7fec42f2.js";import"./shared-c1b71162.js";import"./shared-a6cf5b1f.js";import"./shared-ed24a3f9.js";import"./shared-5574ea83.js";import{T as b}from"./shared-ac44a3a5.js";import"./shared-caac6517.js";import"./shared-dda75cab.js";import{d as _,P as f,A as x,c as w,h as E,L as k}from"./shared-ba5c42c7.js";import"./shared-0d01cd66.js";import{O as C}from"./shared-1abfcf87.js";import{p as S}from"./shared-64210e53.js";import{a as $,y as I,x as T,z as B}from"./shared-387d7254.js";import{I as M}from"./shared-0ea750af.js";import{s as V}from"./shared-53e476fd.js";import{i as D}from"./shared-e1e4d8f5.js";import"./shared-db758d3b.js";import"./shared-d35ed355.js";import"./shared-ab9dfa48.js";import{h as j,P as L}from"./shared-3bc9eaf7.js";import{E as Q,T as P}from"./shared-46efbc40.js";import{L as R}from"./shared-302f3391.js";import{C as O}from"./shared-24998349.js";import{b as q}from"./shared-c3d1d247.js";import"./shared-7fa24559.js";import{a as F,F as N}from"./shared-3db3f3c3.js";var U={raise:e,send:t,sendParent:s,sendUpdate:a,log:i,cancel:n,start:r,stop:l,assign:o,after:d,done:A,respond:u,forwardTo:h,escalate:c,choose:m,pure:p};const G=_((e=>t=>{const{element:s,name:a,strings:i}=t.committer;if(2!==i.length||""!==i[0]||""!==i[1])throw new Error("live directive bindings must not contain any static values");if(t.committer.parts.length>1)throw new Error("live directive must be the only directive for an attribute or property");if(t instanceof f)s[a]!==e&&t.setValue(e);else{if(!(t instanceof x))throw new Error("live directive can only be used on attributes or properties");s.getAttribute(a)!==e&&t.setValue(e)}}));class W extends CustomEvent{constructor(e){super("change",{detail:e})}}class H extends CustomEvent{constructor(e){super("change",{detail:e})}}class Y extends CustomEvent{constructor(e){super("change",{detail:e})}}class K extends Y{}class J extends H{}let z,Z,X=e=>e;class ee extends($(M(k))){constructor(){super(...arguments),this.label="",this.value="",this.disabled=!1,this.readonly=!1,this.errorMessage="",this.__i18n={formatValue:e=>e.join(""),parseValue:e=>{const{count:t,units:s}=S(e);return[t.toString(),s]}},this.__getItems=v((e=>{const t=S(e).count;return[{value:"d",label:this.t("day",{count:t})},{value:"w",label:this.t("week",{count:t})},{value:"m",label:this.t("month",{count:t})},{value:"y",label:this.t("year",{count:t})}]}))}static get properties(){return g(g({},super.properties),{},{checkValidity:{attribute:!1},errorMessage:{type:String,attribute:"error-message"},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},label:{type:String},value:{type:String}})}static get styles(){return w(z||(z=X`:host{display:block}vaadin-custom-field{width:100%;font-size:0;line-height:0;padding-top:0!important}vaadin-custom-field::part(label){padding-bottom:var(--lumo-space-s)}vaadin-custom-field::part(error-message)[aria-hidden=false]{padding-top:var(--lumo-space-xs)}vaadin-combo-box,vaadin-integer-field{width:calc(50% - (var(--lumo-space-s)/ 2))}vaadin-integer-field{margin-right:var(--lumo-space-s);padding:0}vaadin-combo-box::part(text-field){padding:0}`))}render(){return E(Z||(Z=X` <vaadin-custom-field data-testid="field" .i18n="${0}" .label="${0}" .value="${0}" ?disabled="${0}" ?readonly="${0}" .errorMessage="${0}" .checkValidity="${0}" @change="${0}"> <vaadin-integer-field data-testid="value" min="1" max="999" has-controls prevent-invalid-input ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-integer-field> <vaadin-combo-box data-testid="units" item-value-path="value" item-label-path="label" .items="${0}" ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-combo-box> </vaadin-custom-field> `),this.__i18n,this.label,G(this.value),this.disabled,this.readonly,this.errorMessage,this.checkValidity,this.__handleChange,!this.checkValidity(),this.disabled,this.readonly,this.__getItems(this.value),!this.checkValidity(),this.disabled,this.readonly)}updated(e){super.updated(e);const t=this.renderRoot.firstElementChild;t.value!==this.value&&(t.value=this.value)}checkValidity(){return!0}__handleChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new J(this.value))}}const te=y({id:"choice",type:"parallel",context:{defaultCustomValue:"",customValue:null,custom:!1,items:[],value:null,type:"text",min:null,max:null},states:{mutability:{initial:"editable",states:{editable:{},readonly:{}},on:{SET_READONLY:[{target:".editable",cond:"isPayloadFalsey"},{target:".readonly",cond:"isPayloadTruthy"}]}},interactivity:{initial:"enabled",states:{enabled:{},disabled:{}},on:{SET_DISABLED:[{target:".enabled",cond:"isPayloadFalsey"},{target:".disabled",cond:"isPayloadTruthy"}]}},selection:{initial:"unknown",states:{unknown:{always:[{target:"multiple",cond:"isValueArray"},{target:"single"}]},none:{},single:{},multiple:{}}},extension:{initial:"unknown",states:{unknown:{always:[{target:"present",cond:"hasCustom"},{target:"absent"}]},absent:{},present:{initial:"unknown",states:{unknown:{always:[{target:"selected",cond:"hasCustomValue"},{target:"available"}]},available:{on:{SET_TYPE:{actions:"setType"}}},selected:{initial:"unknown",states:{unknown:{always:[{target:"number",cond:"showsNumberField"},{target:"integer",cond:"showsIntegerField"},{target:"textarea",cond:"showsTextarea"},{target:"frequency",cond:"showsFrequency"},{target:"text"}]},text:{},frequency:{},textarea:{},integer:{type:"parallel",states:{min:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMinConstraint"},{target:"none"}]},none:{},custom:{}}},max:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMaxConstraint"},{target:"none"}]},none:{},custom:{}}}}},number:{type:"parallel",states:{min:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMinConstraint"},{target:"none"}]},none:{},custom:{}}},max:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMaxConstraint"},{target:"none"}]},none:{},custom:{}}}}}}}}}}}},on:{SET_DEFAULT_CUSTOM_VALUE:{actions:"setDefaultCustomValue"},SET_CUSTOM:{actions:"setCustom",target:[".selection.unknown",".extension.unknown"]},SET_VALUE:{actions:"setValue",target:[".selection.unknown",".extension.unknown"]},SET_ITEMS:{actions:"setItems",target:[".selection.unknown",".extension.unknown"]},SET_TYPE:{actions:"setType",target:".extension.unknown"},SET_MIN:{actions:"setMin",target:".extension.unknown"},SET_MAX:{actions:"setMax",target:".extension.unknown"}}},{guards:{isPayloadFalsey:(e,t)=>!t.data,isPayloadTruthy:(e,t)=>!!t.data,isValueArray:e=>Array.isArray(e.value),showsIntegerField:e=>"integer"===e.type,showsNumberField:e=>"number"===e.type,showsFrequency:e=>"frequency"===e.type,showsTextarea:e=>"textarea"===e.type,hasMinConstraint:e=>"number"==typeof e.min,hasMaxConstraint:e=>"number"==typeof e.max,hasCustomValue:e=>"string"==typeof e.customValue,hasCustom:e=>e.custom},actions:{setDefaultCustomValue:U.assign({defaultCustomValue:(e,t)=>t.data}),setValue:U.assign({value:(e,t)=>t.data,customValue:(e,t)=>Array.isArray(t.data)?t.data.find((t=>!e.items.includes(t))):e.items.includes(t.data)?null:t.data}),setCustom:U.assign({custom:(e,t)=>t.data}),setItems:U.assign({items:(e,t)=>t.data}),setType:U.assign({type:(e,t)=>t.data}),setMin:U.assign({min:(e,t)=>t.data}),setMax:U.assign({max:(e,t)=>t.data})}});let se,ae,ie,ne,re,le,oe,de,Ae,ue,he,ce,me,pe,ve=e=>e;const ge=`@foxy.io/elements::other[${(Math.pow(10,10)*Math.random()).toFixed(0)}]`;class ye extends I{constructor(){super(...arguments),this.getText=e=>e,this.__service=D(te).onChange((()=>this.requestUpdate())).onTransition((({changed:e})=>e&&this.requestUpdate())).start()}static get scopedElements(){return{"vaadin-integer-field":customElements.get("vaadin-integer-field"),"vaadin-number-field":customElements.get("vaadin-number-field"),"vaadin-text-field":customElements.get("vaadin-text-field"),"x-frequency-input":ee,"vaadin-text-area":customElements.get("vaadin-text-area"),"iron-icon":customElements.get("iron-icon")}}static get styles(){return[super.styles,w(ie||(ie=ve`:host{--item-width:calc((var(--lumo-space-m) * 2) + 1.25rem)}.ml-xxl{margin-left:var(--item-width)}.item{height:var(--lumo-size-l);width:var(--item-width)}.radio{height:1.25rem;width:1.25rem}.check{height:1.125rem;width:1.125rem}.dot{height:.5rem;width:.5rem}`))]}static get properties(){return g(g({},super.properties),{},{defaultCustomValue:{type:String,attribute:"default-custom-value"},disabled:{type:Boolean},readonly:{type:Boolean},custom:{type:Boolean},type:{type:String},min:{type:Number},max:{type:Number},value:{type:Array},items:{type:Array},getText:{attribute:!1}})}get defaultCustomValue(){return this.__service.state.context.defaultCustomValue}set defaultCustomValue(e){this.__service.send("SET_DEFAULT_CUSTOM_VALUE",{data:e})}get readonly(){return this.__service.state.matches("mutability.readonly")}set readonly(e){this.__service.send("SET_READONLY",{data:e})}get disabled(){return this.__service.state.matches("interactivity.disabled")}set disabled(e){this.__service.send("SET_DISABLED",{data:e})}get custom(){return this.__service.state.matches("extension.present")}set custom(e){this.__service.send("SET_CUSTOM",{data:e})}get type(){return this.__service.state.context.type}set type(e){this.__service.send("SET_TYPE",{data:e})}get min(){return this.__service.state.context.min}set min(e){this.__service.send("SET_MIN",{data:e})}get max(){return this.__service.state.context.max}set max(e){this.__service.send("SET_MAX",{data:e})}get value(){return this.__service.state.context.value}set value(e){this.__service.send("SET_VALUE",{data:e})}get items(){return this.__service.state.context.items}set items(e){this.__service.send("SET_ITEMS",{data:e})}render(){const e=this.custom?[...this.items,ge]:this.items,t=Array.isArray(this.value),s=this.__service.state.matches("extension.present.selected"),a=E(ne||(ne=ve` ${0} `),e.map(((e,a,i)=>{var n;const r=this.custom&&a===i.length-1,l=r?s:t?!!(null===(n=this.value)||void 0===n?void 0:n.includes(e)):e===String(this.value),o=this.disabled||!this._isI18nReady,d=V({value:r?ge:e,name:t?e:"choice","data-testid":`item-${e}`,"?disabled":o,"@change":t=>{if(this.readonly)return t.preventDefault();const s=t.target.checked,a=e===ge?this.defaultCustomValue:e,i=this.value;Array.isArray(i)?this.value=e===ge?s?[...i,a]:i.slice(0,i.length-1):s?[a,...i]:i.filter((e=>e!==a)):this.value=s?a:null,this.dispatchEvent(new W(this.value))}}),A=E(re||(re=ve` <div> ${0} </div> `),e===ge?this._t("choice.other").toString():E(le||(le=ve`<slot name="${0}">${0}</slot>`),`${e}-label`,this.getText(e)));return E(oe||(oe=ve` <div class="ml-xxl border-t border-contrast-10 ${0}"></div> ${0} <div class="mr-m ml-xxl"> ${0} ${0} </div> `),a?"":"hidden",t?function(e,t,s,a,i){const n="transition ease-in-out duration-200",r=`${n} transform ${s?"scale-100":"scale-0"} ${e?"text-contrast-70":"text-tint"}`;return E(ae||(ae=ve` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0 text-primary-contrast"> <div class="check rounded-s ${0} ${0} ${0} focus-within-shadow-outline"> <iron-icon icon="lumo:checkmark" class="block w-full h-full ${0}"></iron-icon> <input type="checkbox" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),n,e?"":t?s?"bg-primary-50":"bg-contrast-10":s?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",r,s,a,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,o,l,d,A):function(e,t,s,a,i){const n="transition ease-in-out duration-200",r=`${n} ${t||e?"":"shadow-xs"} transform ${s?"scale-100":"scale-0"} ${e?"bg-contrast-70":"bg-tint"}`;return E(se||(se=ve` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0"> <div class="flex radio rounded-full ${0} ${0} ${0} focus-within-shadow-outline"> <div class="dot m-auto rounded-full ${0}"></div> <input type="radio" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),n,e?"":t?s?"bg-primary-50":"bg-contrast-10":s?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",r,s,a,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,o,l,d,A),e===ge&&s?this.__field:"",e!==ge?E(de||(de=ve`<slot name="${0}"></slot>`),e):"")})));return E(Ae||(Ae=ve`<form>${0}</form> `),a)}get __field(){const e=V({placeholder:this._t("choice.other").toString(),class:"w-full mb-m",value:this.__service.state.context.customValue,max:this.max,min:this.min,ns:this.ns,"?disabled":this.disabled,"?readonly":this.readonly,"data-testid":"field","@change":e=>{e.stopPropagation();const t=e.target.value;Array.isArray(this.value)?this.value=this.value.slice(0,this.value.length-1).concat(t):this.value=t,this.dispatchEvent(new W(this.value))}});return"frequency"===this.type?E(ue||(ue=ve`<x-frequency-input ...="${0}"></x-frequency-input>`),e):"integer"===this.type?E(he||(he=ve`<vaadin-integer-field ...="${0}" has-controls></vaadin-integer-field>`),e):"number"===this.type?E(ce||(ce=ve`<vaadin-number-field ...="${0}" has-controls></vaadin-number-field>`),e):"textarea"===this.type?E(me||(me=ve`<vaadin-text-area ...="${0}"></vaadin-text-area>`),e):E(pe||(pe=ve`<vaadin-text-field ...="${0}"></vaadin-text-field>`),e)}}const be=j`<dom-module id="lumo-list-box" theme-for="vaadin-list-box">
+import{aq as e,ar as t,as as s,at as a,au as i,av as n,aw as r,ax as l,o,ay as d,az as A,aA as u,aB as h,aC as c,aD as m,aE as p,m as v,_ as g,aF as y}from"./shared-7fec42f2.js";import"./shared-9e8344bf.js";import"./shared-b5a0d106.js";import"./shared-937e58bf.js";import"./shared-1091aa45.js";import{T as b}from"./shared-529a82a3.js";import"./shared-7d15992f.js";import"./shared-6c25eb72.js";import{d as _,P as f,A as x,c as w,h as E,L as k}from"./shared-ba5c42c7.js";import"./shared-85feff39.js";import{O as C}from"./shared-df7d368c.js";import{p as S}from"./shared-10da9bf0.js";import{a as $,y as I,x as T,z as B}from"./shared-7a87cd33.js";import{I as M}from"./shared-0ea750af.js";import{s as V}from"./shared-53e476fd.js";import{i as D}from"./shared-e1e4d8f5.js";import"./shared-a268320e.js";import"./shared-809d503c.js";import"./shared-85ed835a.js";import{h as j,P as L}from"./shared-433eea12.js";import{E as Q,T as P}from"./shared-64e243c4.js";import{L as R}from"./shared-3615b419.js";import{C as O}from"./shared-5963a49e.js";import{b as q}from"./shared-e54135f0.js";import"./shared-e7a2b31d.js";import{a as F,F as N}from"./shared-5bcf861e.js";var U={raise:e,send:t,sendParent:s,sendUpdate:a,log:i,cancel:n,start:r,stop:l,assign:o,after:d,done:A,respond:u,forwardTo:h,escalate:c,choose:m,pure:p};const G=_((e=>t=>{const{element:s,name:a,strings:i}=t.committer;if(2!==i.length||""!==i[0]||""!==i[1])throw new Error("live directive bindings must not contain any static values");if(t.committer.parts.length>1)throw new Error("live directive must be the only directive for an attribute or property");if(t instanceof f)s[a]!==e&&t.setValue(e);else{if(!(t instanceof x))throw new Error("live directive can only be used on attributes or properties");s.getAttribute(a)!==e&&t.setValue(e)}}));class W extends CustomEvent{constructor(e){super("change",{detail:e})}}class H extends CustomEvent{constructor(e){super("change",{detail:e})}}class Y extends CustomEvent{constructor(e){super("change",{detail:e})}}class K extends Y{}class J extends H{}let z,Z,X=e=>e;class ee extends($(M(k))){constructor(){super(...arguments),this.label="",this.value="",this.disabled=!1,this.readonly=!1,this.errorMessage="",this.__i18n={formatValue:e=>e.join(""),parseValue:e=>{const{count:t,units:s}=S(e);return[t.toString(),s]}},this.__getItems=v((e=>{const t=S(e).count;return[{value:"d",label:this.t("day",{count:t})},{value:"w",label:this.t("week",{count:t})},{value:"m",label:this.t("month",{count:t})},{value:"y",label:this.t("year",{count:t})}]}))}static get properties(){return g(g({},super.properties),{},{checkValidity:{attribute:!1},errorMessage:{type:String,attribute:"error-message"},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},label:{type:String},value:{type:String}})}static get styles(){return w(z||(z=X`:host{display:block}vaadin-custom-field{width:100%;font-size:0;line-height:0;padding-top:0!important}vaadin-custom-field::part(label){padding-bottom:var(--lumo-space-s)}vaadin-custom-field::part(error-message)[aria-hidden=false]{padding-top:var(--lumo-space-xs)}vaadin-combo-box,vaadin-integer-field{width:calc(50% - (var(--lumo-space-s)/ 2))}vaadin-integer-field{margin-right:var(--lumo-space-s);padding:0}vaadin-combo-box::part(text-field){padding:0}`))}render(){return E(Z||(Z=X` <vaadin-custom-field data-testid="field" .i18n="${0}" .label="${0}" .value="${0}" ?disabled="${0}" ?readonly="${0}" .errorMessage="${0}" .checkValidity="${0}" @change="${0}"> <vaadin-integer-field data-testid="value" min="1" max="999" has-controls prevent-invalid-input ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-integer-field> <vaadin-combo-box data-testid="units" item-value-path="value" item-label-path="label" .items="${0}" ?invalid="${0}" ?disabled="${0}" ?readonly="${0}"> </vaadin-combo-box> </vaadin-custom-field> `),this.__i18n,this.label,G(this.value),this.disabled,this.readonly,this.errorMessage,this.checkValidity,this.__handleChange,!this.checkValidity(),this.disabled,this.readonly,this.__getItems(this.value),!this.checkValidity(),this.disabled,this.readonly)}updated(e){super.updated(e);const t=this.renderRoot.firstElementChild;t.value!==this.value&&(t.value=this.value)}checkValidity(){return!0}__handleChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new J(this.value))}}const te=y({id:"choice",type:"parallel",context:{defaultCustomValue:"",customValue:null,custom:!1,items:[],value:null,type:"text",min:null,max:null},states:{mutability:{initial:"editable",states:{editable:{},readonly:{}},on:{SET_READONLY:[{target:".editable",cond:"isPayloadFalsey"},{target:".readonly",cond:"isPayloadTruthy"}]}},interactivity:{initial:"enabled",states:{enabled:{},disabled:{}},on:{SET_DISABLED:[{target:".enabled",cond:"isPayloadFalsey"},{target:".disabled",cond:"isPayloadTruthy"}]}},selection:{initial:"unknown",states:{unknown:{always:[{target:"multiple",cond:"isValueArray"},{target:"single"}]},none:{},single:{},multiple:{}}},extension:{initial:"unknown",states:{unknown:{always:[{target:"present",cond:"hasCustom"},{target:"absent"}]},absent:{},present:{initial:"unknown",states:{unknown:{always:[{target:"selected",cond:"hasCustomValue"},{target:"available"}]},available:{on:{SET_TYPE:{actions:"setType"}}},selected:{initial:"unknown",states:{unknown:{always:[{target:"number",cond:"showsNumberField"},{target:"integer",cond:"showsIntegerField"},{target:"textarea",cond:"showsTextarea"},{target:"frequency",cond:"showsFrequency"},{target:"text"}]},text:{},frequency:{},textarea:{},integer:{type:"parallel",states:{min:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMinConstraint"},{target:"none"}]},none:{},custom:{}}},max:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMaxConstraint"},{target:"none"}]},none:{},custom:{}}}}},number:{type:"parallel",states:{min:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMinConstraint"},{target:"none"}]},none:{},custom:{}}},max:{initial:"unknown",states:{unknown:{always:[{target:"custom",cond:"hasMaxConstraint"},{target:"none"}]},none:{},custom:{}}}}}}}}}}}},on:{SET_DEFAULT_CUSTOM_VALUE:{actions:"setDefaultCustomValue"},SET_CUSTOM:{actions:"setCustom",target:[".selection.unknown",".extension.unknown"]},SET_VALUE:{actions:"setValue",target:[".selection.unknown",".extension.unknown"]},SET_ITEMS:{actions:"setItems",target:[".selection.unknown",".extension.unknown"]},SET_TYPE:{actions:"setType",target:".extension.unknown"},SET_MIN:{actions:"setMin",target:".extension.unknown"},SET_MAX:{actions:"setMax",target:".extension.unknown"}}},{guards:{isPayloadFalsey:(e,t)=>!t.data,isPayloadTruthy:(e,t)=>!!t.data,isValueArray:e=>Array.isArray(e.value),showsIntegerField:e=>"integer"===e.type,showsNumberField:e=>"number"===e.type,showsFrequency:e=>"frequency"===e.type,showsTextarea:e=>"textarea"===e.type,hasMinConstraint:e=>"number"==typeof e.min,hasMaxConstraint:e=>"number"==typeof e.max,hasCustomValue:e=>"string"==typeof e.customValue,hasCustom:e=>e.custom},actions:{setDefaultCustomValue:U.assign({defaultCustomValue:(e,t)=>t.data}),setValue:U.assign({value:(e,t)=>t.data,customValue:(e,t)=>Array.isArray(t.data)?t.data.find((t=>!e.items.includes(t))):e.items.includes(t.data)?null:t.data}),setCustom:U.assign({custom:(e,t)=>t.data}),setItems:U.assign({items:(e,t)=>t.data}),setType:U.assign({type:(e,t)=>t.data}),setMin:U.assign({min:(e,t)=>t.data}),setMax:U.assign({max:(e,t)=>t.data})}});let se,ae,ie,ne,re,le,oe,de,Ae,ue,he,ce,me,pe,ve=e=>e;const ge=`@foxy.io/elements::other[${(Math.pow(10,10)*Math.random()).toFixed(0)}]`;class ye extends I{constructor(){super(...arguments),this.getText=e=>e,this.__service=D(te).onChange((()=>this.requestUpdate())).onTransition((({changed:e})=>e&&this.requestUpdate())).start()}static get scopedElements(){return{"vaadin-integer-field":customElements.get("vaadin-integer-field"),"vaadin-number-field":customElements.get("vaadin-number-field"),"vaadin-text-field":customElements.get("vaadin-text-field"),"x-frequency-input":ee,"vaadin-text-area":customElements.get("vaadin-text-area"),"iron-icon":customElements.get("iron-icon")}}static get styles(){return[super.styles,w(ie||(ie=ve`:host{--item-width:calc((var(--lumo-space-m) * 2) + 1.25rem)}.ml-xxl{margin-left:var(--item-width)}.item{height:var(--lumo-size-l);width:var(--item-width)}.radio{height:1.25rem;width:1.25rem}.check{height:1.125rem;width:1.125rem}.dot{height:.5rem;width:.5rem}`))]}static get properties(){return g(g({},super.properties),{},{defaultCustomValue:{type:String,attribute:"default-custom-value"},disabled:{type:Boolean},readonly:{type:Boolean},custom:{type:Boolean},type:{type:String},min:{type:Number},max:{type:Number},value:{type:Array},items:{type:Array},getText:{attribute:!1}})}get defaultCustomValue(){return this.__service.state.context.defaultCustomValue}set defaultCustomValue(e){this.__service.send("SET_DEFAULT_CUSTOM_VALUE",{data:e})}get readonly(){return this.__service.state.matches("mutability.readonly")}set readonly(e){this.__service.send("SET_READONLY",{data:e})}get disabled(){return this.__service.state.matches("interactivity.disabled")}set disabled(e){this.__service.send("SET_DISABLED",{data:e})}get custom(){return this.__service.state.matches("extension.present")}set custom(e){this.__service.send("SET_CUSTOM",{data:e})}get type(){return this.__service.state.context.type}set type(e){this.__service.send("SET_TYPE",{data:e})}get min(){return this.__service.state.context.min}set min(e){this.__service.send("SET_MIN",{data:e})}get max(){return this.__service.state.context.max}set max(e){this.__service.send("SET_MAX",{data:e})}get value(){return this.__service.state.context.value}set value(e){this.__service.send("SET_VALUE",{data:e})}get items(){return this.__service.state.context.items}set items(e){this.__service.send("SET_ITEMS",{data:e})}render(){const e=this.custom?[...this.items,ge]:this.items,t=Array.isArray(this.value),s=this.__service.state.matches("extension.present.selected"),a=E(ne||(ne=ve` ${0} `),e.map(((e,a,i)=>{var n;const r=this.custom&&a===i.length-1,l=r?s:t?!!(null===(n=this.value)||void 0===n?void 0:n.includes(e)):e===String(this.value),o=this.disabled||!this._isI18nReady,d=V({value:r?ge:e,name:t?e:"choice","data-testid":`item-${e}`,"?disabled":o,"@change":t=>{if(this.readonly)return t.preventDefault();const s=t.target.checked,a=e===ge?this.defaultCustomValue:e,i=this.value;Array.isArray(i)?this.value=e===ge?s?[...i,a]:i.slice(0,i.length-1):s?[a,...i]:i.filter((e=>e!==a)):this.value=s?a:null,this.dispatchEvent(new W(this.value))}}),A=E(re||(re=ve` <div> ${0} </div> `),e===ge?this._t("choice.other").toString():E(le||(le=ve`<slot name="${0}">${0}</slot>`),`${e}-label`,this.getText(e)));return E(oe||(oe=ve` <div class="ml-xxl border-t border-contrast-10 ${0}"></div> ${0} <div class="mr-m ml-xxl"> ${0} ${0} </div> `),a?"":"hidden",t?function(e,t,s,a,i){const n="transition ease-in-out duration-200",r=`${n} transform ${s?"scale-100":"scale-0"} ${e?"text-contrast-70":"text-tint"}`;return E(ae||(ae=ve` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0 text-primary-contrast"> <div class="check rounded-s ${0} ${0} ${0} focus-within-shadow-outline"> <iron-icon icon="lumo:checkmark" class="block w-full h-full ${0}"></iron-icon> <input type="checkbox" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),n,e?"":t?s?"bg-primary-50":"bg-contrast-10":s?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",r,s,a,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,o,l,d,A):function(e,t,s,a,i){const n="transition ease-in-out duration-200",r=`${n} ${t||e?"":"shadow-xs"} transform ${s?"scale-100":"scale-0"} ${e?"bg-contrast-70":"bg-tint"}`;return E(se||(se=ve` <label class="group flex items-center ${0}"> <div class="item flex items-center justify-center flex-shrink-0"> <div class="flex radio rounded-full ${0} ${0} ${0} focus-within-shadow-outline"> <div class="dot m-auto rounded-full ${0}"></div> <input type="radio" class="sr-only" .checked="${0}" ...="${0}"> </div> </div> <div class="font-lumo leading-m ${0}">${0}</div> </label> `),t||e?"":"cursor-pointer","border "+(e?"border-dashed border-contrast-30":"border-transparent"),n,e?"":t?s?"bg-primary-50":"bg-contrast-10":s?"bg-primary":"bg-contrast-20 group-hover-bg-contrast-30",r,s,a,t?"text-disabled":e?"text-secondary":"text-body",i)}(this.readonly,o,l,d,A),e===ge&&s?this.__field:"",e!==ge?E(de||(de=ve`<slot name="${0}"></slot>`),e):"")})));return E(Ae||(Ae=ve`<form>${0}</form> `),a)}get __field(){const e=V({placeholder:this._t("choice.other").toString(),class:"w-full mb-m",value:this.__service.state.context.customValue,max:this.max,min:this.min,ns:this.ns,"?disabled":this.disabled,"?readonly":this.readonly,"data-testid":"field","@change":e=>{e.stopPropagation();const t=e.target.value;Array.isArray(this.value)?this.value=this.value.slice(0,this.value.length-1).concat(t):this.value=t,this.dispatchEvent(new W(this.value))}});return"frequency"===this.type?E(ue||(ue=ve`<x-frequency-input ...="${0}"></x-frequency-input>`),e):"integer"===this.type?E(he||(he=ve`<vaadin-integer-field ...="${0}" has-controls></vaadin-integer-field>`),e):"number"===this.type?E(ce||(ce=ve`<vaadin-number-field ...="${0}" has-controls></vaadin-number-field>`),e):"textarea"===this.type?E(me||(me=ve`<vaadin-text-area ...="${0}"></vaadin-text-area>`),e):E(pe||(pe=ve`<vaadin-text-field ...="${0}"></vaadin-text-field>`),e)}}const be=j`<dom-module id="lumo-list-box" theme-for="vaadin-list-box">
   <template>
     <style>
       :host {

package/dist/cdn/{shared-7933d898.js → shared-f8519b17.js}

@@ -1,2 +1,2 @@
-import{I as e}from"./shared-92c211bd.js";import{_ as r}from"./shared-7fec42f2.js";import{c as t,h as s}from"./shared-ba5c42c7.js";import{r as a}from"./shared-5fd5805c.js";let o,i,d,l,n,c=e=>e;customElements.define("foxy-internal-source-control",class extends e{constructor(){super(...arguments),this.__isErrorVisible=!1,this.__hovered=!1,this.__focused=!1}static get properties(){return r(r({},super.properties),{},{__isErrorVisible:{attribute:!1},__hovered:{attribute:!1},__focused:{attribute:!1}})}static get styles(){return[...super.styles,t(o||(o=c`.monospace{font-family:monospace}.resize-none{resize:none}.max-h-16em{max-height:16em}textarea::selection{background:var(--lumo-contrast-10pct)}`))]}renderControl(){var e;let r,t,o;return this.disabled?(r="bg-contrast-5 text-disabled",o="text-disabled",this.readonly?(r+=" border-dashed border-contrast-20",t="border-dashed border-contrast-30"):(r+=" border-transparent",t="border-contrast-10")):this.readonly?(r="border-dashed border-contrast-30 bg-transparent text-secondary",t="border-dashed border-contrast-30",o="text-secondary",this.__focused&&(t+=" ring-2 ring-primary-50")):this.__focused?(r="border-transparent bg-contrast-10 text-tertiary",t="border-primary-50 ring-1 ring-primary-50",o="text-body"):this.__hovered?(r="border-transparent bg-contrast-20 text-tertiary",t="border-contrast-20",o="text-body"):(r="border-transparent bg-contrast-10 text-tertiary",t="border-contrast-10",o="text-body"),s(i||(i=c` <label class="block h-full" @mouseenter="${0}" @mouseleave="${0}"> <div class="mb-s leading-s" ?hidden="${0}"> <div class="transition-colors text-l font-medium" part="label">${0}</div> <div class="transition-colors text-s text-secondary" part="helper-text"> ${0} </div> </div> <div class="max-h-16em h-full transition-colors flex-1 flex bg-base rounded overflow-auto border ${0}" part="editor"> <div class="h-full transition-colors monospace leading-s text-s text-right border-r ${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)"> ${0} </div> <textarea placeholder="${0}" class="bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none block w-full select-text transition-colors ${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" rows="1" .value="${0}" ?disabled="${0}" ?readonly="${0}" @focus="${0}" @blur="${0}" @input="${0}">
+import{I as e}from"./shared-1e14a3fe.js";import{_ as r}from"./shared-7fec42f2.js";import{c as t,h as s}from"./shared-ba5c42c7.js";import{r as a}from"./shared-5fd5805c.js";let o,i,d,l,n,c=e=>e;customElements.define("foxy-internal-source-control",class extends e{constructor(){super(...arguments),this.__isErrorVisible=!1,this.__hovered=!1,this.__focused=!1}static get properties(){return r(r({},super.properties),{},{__isErrorVisible:{attribute:!1},__hovered:{attribute:!1},__focused:{attribute:!1}})}static get styles(){return[...super.styles,t(o||(o=c`.monospace{font-family:monospace}.resize-none{resize:none}.max-h-16em{max-height:16em}textarea::selection{background:var(--lumo-contrast-10pct)}`))]}renderControl(){var e;let r,t,o;return this.disabled?(r="bg-contrast-5 text-disabled",o="text-disabled",this.readonly?(r+=" border-dashed border-contrast-20",t="border-dashed border-contrast-30"):(r+=" border-transparent",t="border-contrast-10")):this.readonly?(r="border-dashed border-contrast-30 bg-transparent text-secondary",t="border-dashed border-contrast-30",o="text-secondary",this.__focused&&(t+=" ring-2 ring-primary-50")):this.__focused?(r="border-transparent bg-contrast-10 text-tertiary",t="border-primary-50 ring-1 ring-primary-50",o="text-body"):this.__hovered?(r="border-transparent bg-contrast-20 text-tertiary",t="border-contrast-20",o="text-body"):(r="border-transparent bg-contrast-10 text-tertiary",t="border-contrast-10",o="text-body"),s(i||(i=c` <label class="block h-full" @mouseenter="${0}" @mouseleave="${0}"> <div class="mb-s leading-s" ?hidden="${0}"> <div class="transition-colors text-l font-medium" part="label">${0}</div> <div class="transition-colors text-s text-secondary" part="helper-text"> ${0} </div> </div> <div class="max-h-16em h-full transition-colors flex-1 flex bg-base rounded overflow-auto border ${0}" part="editor"> <div class="h-full transition-colors monospace leading-s text-s text-right border-r ${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)"> ${0} </div> <textarea placeholder="${0}" class="bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none block w-full select-text transition-colors ${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" rows="1" .value="${0}" ?disabled="${0}" ?readonly="${0}" @focus="${0}" @blur="${0}" @input="${0}">
           </textarea> </div> <div class="mt-s text-s leading-xs text-error" ?hidden="${0}"> ${0} </div> </label> `),(()=>this.__hovered=!0),(()=>this.__hovered=!1),!this.label&&!this.helperText,this.label,this.helperText,t,r,a(null!==(e=this._value.split("\n"))&&void 0!==e?e:[],((e,r)=>String(r)),((e,r)=>s(d||(d=c`<div>${0}${0}<span>${0}<span></span></span></div>`),r<9?s(l||(l=c`<span class="opacity-0">0</span>`)):"",r<99?s(n||(n=c`<span class="opacity-0">0</span>`)):"",r+1))),this.placeholder,o,this._value,this.disabled,this.readonly,(()=>this.__focused=!0),(()=>{this.__focused=!1,this.__isErrorVisible=!0}),(e=>{const r=e.currentTarget;this._value=r.value}),!this.__isErrorVisible||!this._errorMessage||this.disabled||this.readonly,this._errorMessage)}updated(e){super.updated(e),this.renderRoot.querySelectorAll("textarea").forEach((e=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`,e.style.overflowY="hidden"}))}get _value(){var e;return null!==(e=super._value)&&void 0!==e?e:""}set _value(e){super._value=e}});

package/dist/cdn/{shared-05e997ae.js → shared-f9d1baff.js}

@@ -1,4 +1,4 @@
-import"./shared-a6cf5b1f.js";import{h as e,G as t,P as r}from"./shared-3bc9eaf7.js";import{E as o,T as i,D as s}from"./shared-46efbc40.js";import{C as a}from"./shared-24998349.js";import"./shared-dc357e9d.js";import{F as l}from"./shared-3db3f3c3.js";import{I as n}from"./shared-92c211bd.js";import"./shared-64210e53.js";import{_ as d}from"./shared-7fec42f2.js";import{i as h}from"./shared-53e42a77.js";import{c,h as u}from"./shared-ba5c42c7.js";import{c as p}from"./shared-4e709717.js";import{x as b}from"./shared-387d7254.js";const m=e`<dom-module id="lumo-radio-button" theme-for="vaadin-radio-button">
+import"./shared-b5a0d106.js";import{h as e,G as t,P as r}from"./shared-433eea12.js";import{E as o,T as i,D as s}from"./shared-64e243c4.js";import{C as a}from"./shared-5963a49e.js";import"./shared-278b8790.js";import{F as l}from"./shared-5bcf861e.js";import{I as n}from"./shared-1e14a3fe.js";import"./shared-10da9bf0.js";import{_ as d}from"./shared-7fec42f2.js";import{i as h}from"./shared-53e42a77.js";import{c,h as u}from"./shared-ba5c42c7.js";import{c as p}from"./shared-4e709717.js";import{x as b}from"./shared-7a87cd33.js";const m=e`<dom-module id="lumo-radio-button" theme-for="vaadin-radio-button">
   <template>
     <style>
       :host {

package/dist/cdn/{shared-8ba4b5bf.js → shared-fc784ca0.js}

@@ -1 +1 @@
-import"./shared-ac44a3a5.js";import{I as e}from"./shared-92c211bd.js";import{_ as t}from"./shared-7fec42f2.js";import{c as s,h as i,s as r}from"./shared-ba5c42c7.js";import{i as a}from"./shared-53e42a77.js";import{c as l}from"./shared-4e709717.js";import{l as o}from"./shared-d0aed1c1.js";let d,n,u,h,p,c,f,m,v=e=>e;customElements.define("foxy-internal-text-control",class extends e{constructor(){super(...arguments),this.layout=null,this.prefix=null,this.suffix=null,this.__isErrorVisible=!1}static get properties(){return t(t({},super.properties),{},{layout:{},prefix:{},suffix:{},__isErrorVisible:{attribute:!1}})}static get styles(){return[super.styles,s(d||(d=v`input::-webkit-contacts-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;position:absolute;right:0}`))]}reportValidity(){this.__isErrorVisible=!0,super.reportValidity()}renderControl(){return"summary-item"===this.layout?this.__renderSummaryItemLayout():i(n||(n=v` <vaadin-text-field error-message="${0}" helper-text="${0}" placeholder="${0}" label="${0}" class="w-full" ?clear-button-visible="${0}" ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .value="${0}" @keydown="${0}" @input="${0}"> ${0} ${0} </vaadin-text-field> `),a(this._errorMessage),this.helperText,this.placeholder,this.label,!this.suffix,this.disabled,this.readonly,this._checkValidity,this._value,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),(e=>{const t=e.currentTarget;this._value=t.value}),this.prefix?i(u||(u=v`<div slot="prefix">${0}</div>`),this.prefix):"",this.suffix?i(h||(h=v`<div class="pr-s font-medium" slot="suffix">${0}</div>`),this.suffix):"")}get _value(){var e;return null!==(e=super._value)&&void 0!==e?e:""}set _value(e){super._value=e}__renderSummaryItemLayout(){return i(p||(p=v` <div class="leading-xs"> <div class="flex items-center gap-xs"> <label class="text-m text-body flex-1 whitespace-nowrap" for="input">${0}</label> ${0} <input placeholder="${0}" class="${0}" type="text" id="input" .value="${0}" ?disabled="${0}" ?readonly="${0}" @keydown="${0}" @blur="${0}" @input="${0}"> ${0} <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> <div style="max-width:32rem"> <p class="text-xs text-secondary">${0}</p> <p class="text-xs text-error" ?hidden="${0}"> ${0} </p> </div> </div> `),this.label,this.prefix?i(c||(c=v`<div>${0}</div>`),this.prefix):"",this.placeholder,l({"w-full appearance-none text-right bg-transparent transition-colors":!0,"text-m rounded-s focus-outline-none":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"font-medium":!this.readonly}),o(this._value),this.disabled,this.readonly,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),(()=>this.__isErrorVisible=!0),(e=>{e.stopPropagation(),this._value=e.target.value}),this.suffix?i(f||(f=v`<div class="font-medium text-secondary">${0}</div>`),this.suffix):"",this.t("clear"),l({"flex-shrink-0 rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,(()=>{this._value="",this.dispatchEvent(new CustomEvent("clear"))}),r(m||(m=v`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)),this.helperText,!this.__isErrorVisible||this.disabled||this.readonly,this._errorMessage)}});
+import"./shared-529a82a3.js";import{I as e}from"./shared-1e14a3fe.js";import{_ as t}from"./shared-7fec42f2.js";import{c as s,h as i,s as r}from"./shared-ba5c42c7.js";import{i as a}from"./shared-53e42a77.js";import{c as l}from"./shared-4e709717.js";import{l as o}from"./shared-d0aed1c1.js";let d,n,u,h,p,c,f,m,v=e=>e;customElements.define("foxy-internal-text-control",class extends e{constructor(){super(...arguments),this.layout=null,this.prefix=null,this.suffix=null,this.__isErrorVisible=!1}static get properties(){return t(t({},super.properties),{},{layout:{},prefix:{},suffix:{},__isErrorVisible:{attribute:!1}})}static get styles(){return[super.styles,s(d||(d=v`input::-webkit-contacts-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;position:absolute;right:0}`))]}reportValidity(){this.__isErrorVisible=!0,super.reportValidity()}renderControl(){return"summary-item"===this.layout?this.__renderSummaryItemLayout():i(n||(n=v` <vaadin-text-field error-message="${0}" helper-text="${0}" placeholder="${0}" label="${0}" class="w-full" ?clear-button-visible="${0}" ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .value="${0}" @keydown="${0}" @input="${0}"> ${0} ${0} </vaadin-text-field> `),a(this._errorMessage),this.helperText,this.placeholder,this.label,!this.suffix,this.disabled,this.readonly,this._checkValidity,this._value,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),(e=>{const t=e.currentTarget;this._value=t.value}),this.prefix?i(u||(u=v`<div slot="prefix">${0}</div>`),this.prefix):"",this.suffix?i(h||(h=v`<div class="pr-s font-medium" slot="suffix">${0}</div>`),this.suffix):"")}get _value(){var e;return null!==(e=super._value)&&void 0!==e?e:""}set _value(e){super._value=e}__renderSummaryItemLayout(){return i(p||(p=v` <div class="leading-xs"> <div class="flex items-center gap-xs"> <label class="text-m text-body flex-1 whitespace-nowrap" for="input">${0}</label> ${0} <input placeholder="${0}" class="${0}" type="text" id="input" .value="${0}" ?disabled="${0}" ?readonly="${0}" @keydown="${0}" @blur="${0}" @input="${0}"> ${0} <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> <div style="max-width:32rem"> <p class="text-xs text-secondary">${0}</p> <p class="text-xs text-error" ?hidden="${0}"> ${0} </p> </div> </div> `),this.label,this.prefix?i(c||(c=v`<div>${0}</div>`),this.prefix):"",this.placeholder,l({"w-full appearance-none text-right bg-transparent transition-colors":!0,"text-m rounded-s focus-outline-none":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"font-medium":!this.readonly}),o(this._value),this.disabled,this.readonly,(e=>{var t;return"Enter"===e.key&&(null===(t=this.nucleon)||void 0===t?void 0:t.submit())}),(()=>this.__isErrorVisible=!0),(e=>{e.stopPropagation(),this._value=e.target.value}),this.suffix?i(f||(f=v`<div class="font-medium text-secondary">${0}</div>`),this.suffix):"",this.t("clear"),l({"flex-shrink-0 rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,(()=>{this._value="",this.dispatchEvent(new CustomEvent("clear"))}),r(m||(m=v`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)),this.helperText,!this.__isErrorVisible||this.disabled||this.readonly,this._errorMessage)}});

package/dist/cdn/{shared-0eef6fb7.js → shared-fd5ff448.js}

@@ -1 +1 @@
-import{_ as e}from"./shared-7fec42f2.js";import{L as s,h as t}from"./shared-ba5c42c7.js";import{z as r}from"./shared-387d7254.js";let a,o=e=>e;class i extends s{constructor(){super(...arguments),this.frame=!1}static get properties(){return e(e({},super.properties),{},{frame:{type:Boolean}})}static get styles(){return r.styles}render(){return t(a||(a=o` <section class="space-y-s font-lumo antialiased"> <h3 class="${0}"> <slot name="header"></slot> </h3> <div class="rounded ${0}"> <slot></slot> </div> </section> `),"text-l font-medium text-body leading-none "+(this.frame?"":"pl-m"),this.frame?"bg-contrast-5 overflow-hidden":"")}}export{i as G};
+import{_ as e}from"./shared-7fec42f2.js";import{L as s,h as t}from"./shared-ba5c42c7.js";import{z as r}from"./shared-7a87cd33.js";let a,o=e=>e;class i extends s{constructor(){super(...arguments),this.frame=!1}static get properties(){return e(e({},super.properties),{},{frame:{type:Boolean}})}static get styles(){return r.styles}render(){return t(a||(a=o` <section class="space-y-s font-lumo antialiased"> <h3 class="${0}"> <slot name="header"></slot> </h3> <div class="rounded ${0}"> <slot></slot> </div> </section> `),"text-l font-medium text-body leading-none "+(this.frame?"":"pl-m"),this.frame?"bg-contrast-5 overflow-hidden":"")}}export{i as G};

package/dist/cdn/translations/template-config-form/en.json

@@ -411,6 +411,56 @@
       "option_hidden": "Hidden"
     }
   },
+  "csp": {
+    "label": "Checkout security",
+    "helper_text": "",
+    "csp-group-one": {
+      "label": "",
+      "helper_text": "",
+      "warning": "Please review the documentation for this functionality to ensure you understand potential impacts:",
+      "csp-enable-ro-csp": {
+        "label": "Enable Report-Only Content Security Policy",
+        "helper_text": "Test your policy without blocking content. This mode logs violations of the rules below, but still allows the content to load. As with enforced mode, Foxy-managed content (e.g., gateways, analytics) is always allowed and excluded from reporting.",
+        "checked": "Yes",
+        "unchecked": "No"
+      },
+      "csp-policy-report-script-src": {
+        "label": "Custom script sources",
+        "placeholder": "example.com, *.example.com",
+        "helper_text": "",
+        "v8n_too_long": "Domain names must not exceed 1000 characters."
+      },
+      "csp-policy-report-reporting-endpoint": {
+        "label": "Reporting URL",
+        "helper_text": "",
+        "placeholder": "Optional",
+        "v8n_too_long": "This field must not exceed 1000 characters."
+      }
+    },
+    "csp-group-two": {
+      "label": "",
+      "helper_text": "",
+      "warning": "This is security-related functionality that, when enabled, can stop custom scripts from loading on your checkout. Ensure you include any domains as custom script sources above, and review the documentation for this functionality:",
+      "csp-enable-csp": {
+        "label": "Enable Content Security Policy",
+        "helper_text": "Protects your checkout page by blocking remote content that isn’t explicitly allowed. Scripts and assets loaded by Foxy (including payment gateways and analytics) are always allowed, regardless of the settings below.",
+        "checked": "Yes",
+        "unchecked": "No"
+      },
+      "csp-policy-enforce-script-src": {
+        "label": "Custom script sources",
+        "placeholder": "example.com, *.example.com",
+        "helper_text": "",
+        "v8n_too_long": "Domain names must not exceed 1000 characters."
+      },
+      "csp-policy-enforce-reporting-endpoint": {
+        "label": "Reporting URL",
+        "helper_text": "",
+        "placeholder": "Optional",
+        "v8n_too_long": "This field must not exceed 1000 characters."
+      }
+    }
+  },
   "analytics-config": {
     "label": "3rd-party analytics",
     "helper_text": "",

package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.d.ts

@@ -1,6 +1,7 @@
 import type { Data } from './types';
 import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/types';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
@@ -14,6 +15,7 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  */
 export declare class TemplateConfigForm extends Base<Data> {
     static get properties(): PropertyDeclarations;
+    static get v8n(): NucleonV8N<Data, TemplateConfigForm>;
     /** URI of the `fx:countries` hAPI resource with `?include_regions=true`. */
     countries: string | null;
     /** @deprecated URI of the `fx:regions` hAPI resource. */
@@ -38,6 +40,10 @@ export declare class TemplateConfigForm extends Base<Data> {
     private readonly __checkoutTypeAccountGetValue;
     private readonly __customConfigGetValue;
     private readonly __customConfigSetValue;
+    private readonly __cspUsageGetValue;
+    private readonly __cspUsageSetValue;
+    private readonly __cspRoUsageGetValue;
+    private readonly __cspRoUsageSetValue;
     private readonly __defaultJSON;
     get hiddenSelector(): BooleanSelector;
     renderBody(): TemplateResult;

package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js

@@ -121,6 +121,40 @@ export class TemplateConfigForm extends Base {
             }
             this.edit({ json: JSON.stringify(formJson) });
         };
+        this.__cspUsageGetValue = () => {
+            const usage = this.__formJson.csp.usage;
+            return usage === 'enforce' || usage === 'both';
+        };
+        this.__cspUsageSetValue = (newValue) => {
+            const formJson = this.__formJson;
+            const oldUsage = formJson.csp.usage;
+            const map = {
+                false: { both: 'report', enforce: 'none' },
+                true: { report: 'both', none: 'enforce' },
+            };
+            const newUsage = map[String(newValue)][oldUsage];
+            if (newUsage) {
+                const newJson = { ...formJson, csp: { ...formJson.csp, usage: newUsage } };
+                this.edit({ json: JSON.stringify(newJson) });
+            }
+        };
+        this.__cspRoUsageGetValue = () => {
+            const usage = this.__formJson.csp.usage;
+            return usage === 'report' || usage === 'both';
+        };
+        this.__cspRoUsageSetValue = (newValue) => {
+            const formJson = this.__formJson;
+            const oldUsage = formJson.csp.usage;
+            const map = {
+                false: { both: 'enforce', report: 'none' },
+                true: { enforce: 'both', none: 'report' },
+            };
+            const newUsage = map[String(newValue)][oldUsage];
+            if (newUsage) {
+                const newJson = { ...formJson, csp: { ...formJson.csp, usage: newUsage } };
+                this.edit({ json: JSON.stringify(newJson) });
+            }
+        };
         this.__defaultJSON = JSON.stringify(getDefaultJSON());
     }
     static get properties() {
@@ -131,6 +165,34 @@ export class TemplateConfigForm extends Base {
             store: {},
         };
     }
+    static get v8n() {
+        return [
+            ({ json }) => {
+                var _a, _b;
+                const formJson = json ? JSON.parse(json) : getDefaultJSON();
+                const url = (_b = (_a = formJson.csp.policy_enforce) === null || _a === void 0 ? void 0 : _a.reporting_endpoint) !== null && _b !== void 0 ? _b : '';
+                return url.length <= 1000 || 'csp-policy-enforce-reporting-endpoint:v8n_too_long';
+            },
+            ({ json }) => {
+                var _a, _b;
+                const formJson = json ? JSON.parse(json) : getDefaultJSON();
+                const url = (_b = (_a = formJson.csp.policy_report) === null || _a === void 0 ? void 0 : _a.reporting_endpoint) !== null && _b !== void 0 ? _b : '';
+                return url.length <= 1000 || 'csp-policy-report-reporting-endpoint:v8n_too_long';
+            },
+            ({ json }) => {
+                var _a, _b;
+                const formJson = json ? JSON.parse(json) : getDefaultJSON();
+                const domains = (_b = (_a = formJson.csp.policy_enforce) === null || _a === void 0 ? void 0 : _a.script_src) !== null && _b !== void 0 ? _b : [];
+                return domains.every(d => d.length <= 1000) || 'csp-policy-enforce-script-src:v8n_too_long';
+            },
+            ({ json }) => {
+                var _a, _b;
+                const formJson = json ? JSON.parse(json) : getDefaultJSON();
+                const domains = (_b = (_a = formJson.csp.policy_report) === null || _a === void 0 ? void 0 : _a.script_src) !== null && _b !== void 0 ? _b : [];
+                return domains.every(d => d.length <= 1000) || 'csp-policy-report-script-src:v8n_too_long';
+            },
+        ];
+    }
     get hiddenSelector() {
         var _a, _b;
         const alwaysHidden = [super.hiddenSelector.toString()];
@@ -181,7 +243,7 @@ export class TemplateConfigForm extends Base {
         return new BooleanSelector(alwaysHidden.join(' ').trim());
     }
     renderBody() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const customCheckoutFieldRequirementsControls = [
             [
                 'billing_address1',
@@ -204,6 +266,8 @@ export class TemplateConfigForm extends Base {
             ['show_product_weight', 'show_product_category', 'show_product_code', 'show_product_options'],
             ['show_sub_frequency', 'show_sub_startdate', 'show_sub_nextdate', 'show_sub_enddate'],
         ];
+        const formCspUsage = this.__formJson.csp.usage;
+        const dataCspUsage = (_b = (_a = this.__dataJson) === null || _a === void 0 ? void 0 : _a.csp) === null || _b === void 0 ? void 0 : _b.usage;
         return html `
       ${this.renderHeader()}
 
@@ -354,7 +418,7 @@ export class TemplateConfigForm extends Base {
         <foxy-internal-template-config-form-filter-values-control
           json-template=${this.__defaultJSON}
           json-path="location_filtering.shipping_filter_values"
-          countries=${ifDefined((_a = this.countries) !== null && _a !== void 0 ? _a : void 0)}
+          countries=${ifDefined((_c = this.countries) !== null && _c !== void 0 ? _c : void 0)}
           property="json"
           infer="location-filtering-filter-values"
           .setValue=${this.__locationFilteringFilterValuesSetValue}
@@ -376,7 +440,7 @@ export class TemplateConfigForm extends Base {
         <foxy-internal-template-config-form-filter-values-control
           json-template=${this.__defaultJSON}
           json-path="location_filtering.shipping_filter_values"
-          countries=${ifDefined((_b = this.countries) !== null && _b !== void 0 ? _b : void 0)}
+          countries=${ifDefined((_d = this.countries) !== null && _d !== void 0 ? _d : void 0)}
           property="json"
           infer="location-filtering-shipping-filter-values"
         >
@@ -397,7 +461,7 @@ export class TemplateConfigForm extends Base {
         <foxy-internal-template-config-form-filter-values-control
           json-template=${this.__defaultJSON}
           json-path="location_filtering.billing_filter_values"
-          countries=${ifDefined((_c = this.countries) !== null && _c !== void 0 ? _c : void 0)}
+          countries=${ifDefined((_e = this.countries) !== null && _e !== void 0 ? _e : void 0)}
           property="json"
           infer="location-filtering-billing-filter-values"
         >
@@ -566,6 +630,120 @@ export class TemplateConfigForm extends Base {
         })}
       </div>
 
+      <foxy-internal-summary-control infer="csp" class="space-y-m" layout="section">
+        <foxy-internal-summary-control infer="csp-group-one">
+          <foxy-internal-switch-control
+            json-template=${this.__defaultJSON}
+            json-path="csp.usage"
+            property="json"
+            infer="csp-enable-ro-csp"
+            .getValue=${this.__cspRoUsageGetValue}
+            .setValue=${this.__cspRoUsageSetValue}
+          >
+          </foxy-internal-switch-control>
+
+          ${formCspUsage === 'report' || formCspUsage === 'both'
+            ? html `
+                <foxy-internal-text-control
+                  json-template=${this.__defaultJSON}
+                  json-path="csp.policy_report.reporting_endpoint"
+                  property="json"
+                  layout="summary-item"
+                  infer="csp-policy-report-reporting-endpoint"
+                >
+                </foxy-internal-text-control>
+
+                <foxy-internal-editable-list-control
+                  json-template=${this.__defaultJSON}
+                  json-path="csp.policy_report.script_src"
+                  property="json"
+                  layout="summary-item"
+                  infer="csp-policy-report-script-src"
+                  simple-value
+                >
+                </foxy-internal-editable-list-control>
+
+                ${dataCspUsage === 'none' || dataCspUsage === 'enforce'
+                ? html `
+                      <div
+                        class="flex items-start bg-primary-10"
+                        style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                      >
+                        ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 text-primary" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" /></svg>`}
+                        <p>
+                          <foxy-i18n infer="" key="warning"></foxy-i18n>
+                          <a
+                            target="_blank"
+                            class="inline-block rounded font-medium text-primary transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+                            href="https://wiki.foxycart.com/v/2.0/content_security_policy"
+                          >
+                            wiki.foxycart.com
+                          </a>
+                        </p>
+                      </div>
+                    `
+                : ''}
+              `
+            : ''}
+        </foxy-internal-summary-control>
+
+        <foxy-internal-summary-control infer="csp-group-two">
+          <foxy-internal-switch-control
+            json-template=${this.__defaultJSON}
+            json-path="csp.usage"
+            property="json"
+            infer="csp-enable-csp"
+            .getValue=${this.__cspUsageGetValue}
+            .setValue=${this.__cspUsageSetValue}
+          >
+          </foxy-internal-switch-control>
+
+          ${formCspUsage === 'enforce' || formCspUsage === 'both'
+            ? html `
+                <foxy-internal-text-control
+                  json-template=${this.__defaultJSON}
+                  json-path="csp.policy_enforce.reporting_endpoint"
+                  property="json"
+                  layout="summary-item"
+                  infer="csp-policy-enforce-reporting-endpoint"
+                >
+                </foxy-internal-text-control>
+
+                <foxy-internal-editable-list-control
+                  json-template=${this.__defaultJSON}
+                  json-path="csp.policy_enforce.script_src"
+                  property="json"
+                  layout="summary-item"
+                  infer="csp-policy-enforce-script-src"
+                  simple-value
+                >
+                </foxy-internal-editable-list-control>
+
+                ${dataCspUsage === 'none' || dataCspUsage === 'report'
+                ? html `
+                      <div
+                        class="flex items-start bg-error-10"
+                        style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                      >
+                        ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-error" style="width: 1.25em"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /></svg>`}
+                        <p>
+                          <foxy-i18n infer="" key="warning"></foxy-i18n>
+                          <a
+                            target="_blank"
+                            class="inline-block rounded font-medium text-error transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-error-50"
+                            href="https://wiki.foxycart.com/v/2.0/content_security_policy"
+                          >
+                            wiki.foxycart.com
+                          </a>
+                        </p>
+                      </div>
+                    `
+                : ''}
+              `
+            : ''}
+        </foxy-internal-summary-control>
+      </foxy-internal-summary-control>
+
       <foxy-internal-summary-control infer="analytics-config">
         <foxy-internal-switch-control
           json-template=${this.__defaultJSON}
@@ -715,7 +893,7 @@ export class TemplateConfigForm extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_d = this.store) !== null && _d !== void 0 ? _d : (_e = this.data) === null || _e === void 0 ? void 0 : _e._links['fx:store'].href)}
+        href=${ifDefined((_f = this.store) !== null && _f !== void 0 ? _f : (_g = this.data) === null || _g === void 0 ? void 0 : _g._links['fx:store'].href)}
         id="storeLoader"
         @update=${() => this.requestUpdate()}
       >