@descope/web-components-ui 1.0.59 → 1.0.61

package/dist/umd/832.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[832],{8522:(t,e,s)=>{s.d(e,{V:()=>n});class n extends HTMLElement{}},9201:(t,e,s)=>{s.d(e,{o:()=>i,t:()=>a});const n=(t,e,{excludeAttrs:s=[],includeAttrs:n=[]})=>{e(...Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!n.length||n.includes(t.name)))).map((t=>t.name))),new MutationObserver((t=>{for(const o of t)"attributes"!==o.type||s.includes(o.attributeName)||n.length&&!n.includes(o.attributeName)||e([o.attributeName])})).observe(t,{attributes:!0})},o=(t,e,s={})=>(...n)=>{n.forEach((n=>{const o=s[n]||n,a=t.getAttribute(n);null!==a?e.getAttribute(o)!==a&&e.setAttribute(o,a):e.removeAttribute(o)}))},a=(t,e,s)=>{n(t,o(t,e),s),n(e,o(e,t),s)},i=(t,e,s={})=>{n(t,o(t,e,s.mapAttrs),s)}},3535:(t,e,s)=>{s.d(e,{SP:()=>r,wj:()=>i,zy:()=>l});var n=s(6225);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class a{constructor(){this.styleMap=new Map}add(t,e,s){this.styleMap.has(t)||this.styleMap.set(t,[]),this.styleMap.set(t,[...this.styleMap.get(t),{property:e,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((t,[e,s])=>t+`${e} { \n${s.map((({property:t,value:e})=>`${t}: ${e}`)).join(";\n")} \n}\n\n`),"")}}const i=(t,e,s)=>{const i=new a;return Object.keys(s).forEach((a=>{const r=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>Object.assign({},s,t))):[Object.assign({},s,e)]:[s]})(a,s[a]),l=(0,n.Tk)(t,a);r.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>"function"==typeof e?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),s,o(l))}))})),i.toString()},r=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,n.Tk)(t,s)})),{}),l=(t={})=>[t,{...t,selector:()=>`:host${t.selector||""}`}]},893:(t,e,s)=>{s.d(e,{_:()=>n});const n=(t="")=>e=>class extends e{connectedCallback(){super.connectedCallback?.(),this.shadowRoot.querySelector(this.baseSelector+t).addEventListener("mouseover",(t=>{this.shadowRoot.host.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.shadowRoot.host.removeAttribute("hover")),{once:!0})}))}}},832:(t,e,s)=>{s.d(e,{Ae:()=>m,qC:()=>y,DM:()=>h,yk:()=>a,e4:()=>i,iY:()=>p,y7:()=>u});var n=s(6225),o=s(3535);const a=({mappings:t={},nestedMappings:e={}})=>s=>{const a=Object.keys(t).map((t=>(0,n.E3)("st",t)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...a]}static get cssVarList(){return(0,o.SP)(s.componentName,{...t,...e})}#t=null;constructor(){super(),this.#e(),this.#s()}#s(){this.#t=document.createElement("style"),this.#t.id="style-mixin-overrides",this.#t.innerText="* {}",this.shadowRoot.prepend(this.#t)}#n(t,e){const o=this.#t.sheet?.cssRules[0].style,a=(0,n.Tk)(s.componentName,t.replace(/^st-/,""));e?o?.setProperty(a,e):o?.removeProperty(a)}#e(){const e=document.createElement("style");e.id="style-mixin-component",e.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,t),this.shadowRoot.prepend(e)}#o(){const t=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,a=s.componentName;if(this.shadowRoot.host.classList.add(a),t.querySelector(`style#${n}`))return;const i=document.createElement("style");i.id=n,i.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${a}`).join("")}`,e),"#document"===t.nodeName?t.head.append(i):t.append(i)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),a.includes(t)&&this.#n(t,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((t=>{a.includes(t.nodeName)&&this.#n(t.nodeName,t.value)})))}}},i=t=>class extends t{#t=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.baseSelector} { cursor: inherit }`}#a(t){t?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#a("true"===s)}};var r=s(8522),l=s(893),c=s(9201);const h=({componentName:t,wrappedEleName:e,slots:s=[],style:n,excludeAttrsSync:o=[]})=>{const a=`\n\t\t<style id="create-proxy"></style>\n\t\t<${e}>\n\t\t<slot></slot>\n\t\t${s.map((t=>`<slot name="${t}" slot="${t}"></slot>`)).join("")}\n\t\t</${e}>\n\t`;class i extends r.V{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=a,this.hostElement=this.shadowRoot.host,this.baseSelector=e,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(e),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{this.proxyElement.focus()})),this.proxyElement.onkeydown=t=>{t.shiftKey&&9===t.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.addEventListener=(...t)=>this.proxyElement.addEventListener(...t),(0,c.t)(this.proxyElement,this.hostElement,{excludeAttrs:o}))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return y((0,l._)())(i)},d=["invalid","has-error-message"],u=t=>class extends t{static get formAssociated(){return!0}#i;constructor(){super(),this.#i=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(t){const e=this.getAttribute(t);e&&this.proxyElement.setAttribute("error-message",e),d.forEach((t=>this.proxyElement.setAttribute(t,"true")))}validate(){const{valueMissing:t,patternMismatch:e,typeMismatch:s}=this.validity;t?this.setValidationAttribute("data-errormessage-value-missing"):(s||e)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){if(super.connectedCallback?.(),this.baseEle=this.shadowRoot.querySelector(this.baseSelector),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),this.inputElement??=this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0]||this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0],!this.inputElement)throw Error("no input was found");var t,e;t=this.inputElement,e="value",Object.defineProperty(this,e,{set:function(s){return t[e]=s},get:function(){return t[e]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#i.setValidity(this.inputElement.validity,this.inputElement.validationMessage)},this.inputElement.oninput=()=>{this.value=this.inputElement.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>this.inputElement.reportValidity()),0),this.validate()},this.inputElement.oninvalid=()=>{this.validate()}}},m=t=>class extends t{#r(){const e=this.shadowRoot.host.tagName.toLowerCase();if(!t.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(e!==t.componentName)throw Error(`component name mismatch, expected "${t.componentName}", current "${e}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#r()}},p=t=>(0,n.E3)("descope",t),y=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e)},6225:(t,e,s)=>{s.d(e,{E3:()=>o,GL:()=>n,Tk:()=>a});const n=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...t)=>n(t.join("-")),a=(...t)=>`--${o(...t.filter((t=>!!t)))}`}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[832],{9989:(t,e,s)=>{s.d(e,{V:()=>n});class n extends HTMLElement{}},9201:(t,e,s)=>{s.d(e,{Db:()=>a,oP:()=>i,tg:()=>r});const n=(t,e,{excludeAttrs:s=[],includeAttrs:n=[]})=>{e(...Array.from(t.attributes).filter((t=>!s.includes(t.name)&&(!n.length||n.includes(t.name)))).map((t=>t.name))),new MutationObserver((t=>{for(const o of t)"attributes"!==o.type||s.includes(o.attributeName)||n.length&&!n.includes(o.attributeName)||e([o.attributeName])})).observe(t,{attributes:!0})},o=(t,e,s={})=>(...n)=>{n.forEach((n=>{const o=s[n]||n,r=t.getAttribute(n);null!==r?e.getAttribute(o)!==r&&e.setAttribute(o,r):e.removeAttribute(o)}))},r=(t,e,s)=>{n(t,o(t,e),s),n(e,o(e,t),s)},i=(t,e,s={})=>{n(t,o(t,e,s.mapAttrs),s)},a=(t,e,s=[])=>{if(!s.length)return;const n=s.reduce(((t,s)=>Object.assign(t,{[s]:{get:()=>e[s],set(t){e[s]=t}}})),{});Object.defineProperties(t,n)}},3535:(t,e,s)=>{s.d(e,{SP:()=>a,wj:()=>i,zy:()=>l});var n=s(6225);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class r{constructor(){this.styleMap=new Map}add(t,e,s){this.styleMap.has(t)||this.styleMap.set(t,[]),this.styleMap.set(t,[...this.styleMap.get(t),{property:e,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((t,[e,s])=>t+`${e} { \n${s.map((({property:t,value:e})=>`${t}: ${e}`)).join(";\n")} \n}\n\n`),"")}}const i=(t,e,s)=>{const i=new r;return Object.keys(s).forEach((r=>{const a=((t,e)=>{const s={selector:"",property:(0,n.GL)(t)};return e&&Object.keys(e).length?Array.isArray(e)?e.map((t=>Object.assign({},s,t))):[Object.assign({},s,e)]:[s]})(r,s[r]),l=(0,n.Tk)(t,r);a.forEach((({selector:t,property:s})=>{i.add(((t="",e="")=>"function"==typeof e?e(t):`${t}${/^[A-Za-z]/.test(e)?` ${e}`:e}`)(e,t),s,o(l))}))})),i.toString()},a=(t,e)=>Object.keys(e).reduce(((e,s)=>Object.assign(e,{[s]:(0,n.Tk)(t,s)})),{}),l=(t={})=>[t,{...t,selector:()=>`:host${t.selector||""}`}]},893:(t,e,s)=>{s.d(e,{_:()=>n});const n=(t="")=>e=>class extends e{connectedCallback(){super.connectedCallback?.(),this.shadowRoot.querySelector(this.baseSelector+t).addEventListener("mouseover",(t=>{this.shadowRoot.host.setAttribute("hover","true"),t.target.addEventListener("mouseleave",(()=>this.shadowRoot.host.removeAttribute("hover")),{once:!0})}))}}},832:(t,e,s)=>{s.d(e,{Ae:()=>m,qC:()=>y,DM:()=>h,yk:()=>r,e4:()=>i,iY:()=>p,y7:()=>u});var n=s(6225),o=s(3535);const r=({mappings:t={},nestedMappings:e={}})=>s=>{const r=Object.keys(t).map((t=>(0,n.E3)("st",t)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...r]}static get cssVarList(){return(0,o.SP)(s.componentName,{...t,...e})}#t=null;constructor(){super(),this.#e(),this.#s()}#s(){this.#t=document.createElement("style"),this.#t.id="style-mixin-overrides",this.#t.innerText="* {}",this.shadowRoot.prepend(this.#t)}#n(t,e){const o=this.#t.sheet?.cssRules[0].style,r=(0,n.Tk)(s.componentName,t.replace(/^st-/,""));e?o?.setProperty(r,e):o?.removeProperty(r)}#e(){const e=document.createElement("style");e.id="style-mixin-component",e.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,t),this.shadowRoot.prepend(e)}#o(){const t=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,r=s.componentName;if(this.shadowRoot.host.classList.add(r),t.querySelector(`style#${n}`))return;const i=document.createElement("style");i.id=n,i.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${r}`).join("")}`,e),"#document"===t.nodeName?t.head.append(i):t.append(i)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),r.includes(t)&&this.#n(t,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((t=>{r.includes(t.nodeName)&&this.#n(t.nodeName,t.value)})))}}},i=t=>class extends t{#t=null;static get observedAttributes(){return[...t.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.baseSelector} { cursor: inherit }`}#r(t){t?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#r("true"===s)}};var a=s(9989),l=s(893),c=s(9201);const h=({componentName:t,wrappedEleName:e,slots:s=[],style:n,excludeAttrsSync:o=[],includeAttrsSync:r=[],includeForwardProps:i=[]})=>{const h=`\n\t\t<style id="create-proxy"></style>\n\t\t<${e}>\n\t\t<slot></slot>\n\t\t${s.map((t=>`<slot name="${t}" slot="${t}"></slot>`)).join("")}\n\t\t</${e}>\n\t`;class d extends a.V{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=h,this.hostElement=this.shadowRoot.host,this.baseSelector=e,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(e),(0,c.Db)(this.hostElement,this.proxyElement,i),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{this.proxyElement.focus()})),this.proxyElement.onkeydown=t=>{t.shiftKey&&9===t.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.addEventListener=(...t)=>this.proxyElement.addEventListener(...t),(0,c.tg)(this.proxyElement,this.hostElement,{excludeAttrs:o,includeAttrs:r}))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return y((0,l._)())(d)},d=["invalid","has-error-message"],u=t=>class extends t{static get formAssociated(){return!0}#i;constructor(){super(),this.#i=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(t){const e=this.getAttribute(t);e&&this.proxyElement.setAttribute("error-message",e),d.forEach((t=>this.proxyElement.setAttribute(t,"true")))}validate(){const{valueMissing:t,patternMismatch:e,typeMismatch:s}=this.validity;t?this.setValidationAttribute("data-errormessage-value-missing"):(s||e)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){if(super.connectedCallback?.(),this.baseEle=this.shadowRoot.querySelector(this.baseSelector),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),this.inputElement??=this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0]||this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0],!this.inputElement)throw Error("no input was found");var t,e;t=this.inputElement,e="value",Object.defineProperty(this,e,{set:function(s){return t[e]=s},get:function(){return t[e]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#i.setValidity(this.inputElement.validity,this.inputElement.validationMessage)},this.inputElement.oninput=()=>{this.value=this.inputElement.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>this.inputElement.reportValidity()),0),this.validate()},this.inputElement.oninvalid=()=>{this.validate()}}},m=t=>class extends t{#a(){const e=this.shadowRoot.host.tagName.toLowerCase();if(!t.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(e!==t.componentName)throw Error(`component name mismatch, expected "${t.componentName}", current "${e}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#a()}},p=t=>(0,n.E3)("descope",t),y=(...t)=>e=>t.reduceRight(((t,e)=>e(t)),e)},6225:(t,e,s)=>{s.d(e,{E3:()=>o,GL:()=>n,Tk:()=>r});const n=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...t)=>n(t.join("-")),r=(...t)=>`--${o(...t.filter((t=>!!t)))}`}}]);

package/dist/umd/942.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[942],{4942:(o,t,s)=>{s.d(t,{s:()=>c});var e=s(9201);const h=(o,t)=>{t.append(...o.childNodes),o.appendChild(t)},c=({nestingElementTagName:o,nestingElementDestSlotName:t,forwardAttrOptions:s})=>c=>{const d=()=>Object.assign(document.createElement(o),{slot:t});let i;const a=()=>i;return class extends c{constructor(){var t;super(),t=()=>{a().disconnect(this.shadowRoot.host);const t=this.shadowRoot.host.querySelector(o),c=this.shadowRoot.host.childNodes.length>0;!t&&c?h(this.shadowRoot.host,d()):t&&c?(this.shadowRoot.host.querySelector(child).remove(),h(this.shadowRoot.host,d())):t&&!c&&this.shadowRoot.host.querySelector(child).remove(),this.shadowRoot.host.querySelector(o)&&(0,e.o)(this.shadowRoot.host,this.shadowRoot.host.querySelector(o),s),a().observe(this.shadowRoot.host,{childList:!0})},i=new MutationObserver((o=>{for(const s of o)"childList"===s.type&&t()}))}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.host.childNodes.length>0&&(h(this.shadowRoot.host,d()),(0,e.o)(this.shadowRoot.host,this.shadowRoot.host.querySelector(o),s)),a().observe(this.shadowRoot.host,{childList:!0})}}}}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[942],{4942:(o,t,s)=>{s.d(t,{s:()=>c});var e=s(9201);const h=(o,t)=>{t.append(...o.childNodes),o.appendChild(t)},c=({nestingElementTagName:o,nestingElementDestSlotName:t,forwardAttrOptions:s})=>c=>{const d=()=>Object.assign(document.createElement(o),{slot:t});let i;const a=()=>i;return class extends c{constructor(){var t;super(),t=()=>{a().disconnect(this.shadowRoot.host);const t=this.shadowRoot.host.querySelector(o),c=this.shadowRoot.host.childNodes.length>0;!t&&c?h(this.shadowRoot.host,d()):t&&c?(this.shadowRoot.host.querySelector(child).remove(),h(this.shadowRoot.host,d())):t&&!c&&this.shadowRoot.host.querySelector(child).remove(),this.shadowRoot.host.querySelector(o)&&(0,e.oP)(this.shadowRoot.host,this.shadowRoot.host.querySelector(o),s),a().observe(this.shadowRoot.host,{childList:!0})},i=new MutationObserver((o=>{for(const s of o)"childList"===s.type&&t()}))}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.host.childNodes.length>0&&(h(this.shadowRoot.host,d()),(0,e.oP)(this.shadowRoot.host,this.shadowRoot.host.querySelector(o),s)),a().observe(this.shadowRoot.host,{childList:!0})}}}}}]);

package/dist/umd/descope-combo-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[247],{2798:(e,t,o)=>{o.r(t),o.d(t,{Combo:()=>p});var n=o(832),c=o(8522);o(3029),o(9357);const s=document.createElement("template"),d=(0,n.iY)("combo");s.innerHTML="\n  <descope-button></descope-button>\n  <descope-text-field></descope-text-field>\n";class p extends c.V{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(s.content.cloneNode(!0))}}customElements.define(d,p)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[247],{2798:(e,t,o)=>{o.r(t),o.d(t,{Combo:()=>p});var n=o(9989),c=o(832);o(3029),o(9357);const s=document.createElement("template"),d=(0,c.iY)("combo");s.innerHTML="\n  <descope-button></descope-button>\n  <descope-text-field></descope-text-field>\n";class p extends n.V{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(s.content.cloneNode(!0))}}customElements.define(d,p)}}]);

package/dist/umd/descope-container-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[317],{147:(t,e,o)=>{o.r(e),o.d(e,{Container:()=>a});var n=o(832),r=o(3535),s=o(8522);const d=(0,n.iY)("container");class i extends s.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t:host > slot {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<slot></slot>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > slot"}}const a=(0,n.qC)((0,n.yk)({mappings:{height:(0,r.zy)(),width:(0,r.zy)(),verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],display:{},flexDirection:{},justifyContent:{},alignItems:{},gap:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{}}}),n.e4,n.Ae)(i);customElements.define(d,a)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[317],{147:(t,e,o)=>{o.r(e),o.d(e,{Container:()=>a});var n=o(832),r=o(3535),s=o(9989);const d=(0,n.iY)("container");class i extends s.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t:host > slot {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<slot></slot>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > slot"}}const a=(0,n.qC)((0,n.yk)({mappings:{height:(0,r.zy)(),width:(0,r.zy)(),verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],display:{},flexDirection:{},justifyContent:{},alignItems:{},gap:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{}}}),n.e4,n.Ae)(i);customElements.define(d,a)}}]);

package/dist/umd/descope-divider-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[178],{6446:(t,e,n)=>{n.r(e),n.d(e,{Divider:()=>m});var o=n(832),s=n(4942),r=n(3535),i=n(8522),l=n(8801);const d=(0,o.iY)("divider");class a extends i.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t\t:host > div::before,\n\t\t\t\t:host > div::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t\t::slotted(*) {\n\t\t\t\t\tflex-grow: 0;\n\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"text\"></slot>\n\t\t\t</div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,before:p,after:h,slotted:f}={root:{selector:""},before:{selector:"::before"},after:{selector:"::after"},slotted:{selector:()=>"::slotted(*)"}},m=(0,o.qC)((0,s.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["mode","variant"],excludeAttrs:[]}}),(0,o.yk)({mappings:{minHeight:c,alignItems:c,alignSelf:c,flexDirection:c,padding:f,width:(0,r.zy)(),height:[p,h],backgroundColor:[p,h],opacity:[p,h],textWidth:{...f,property:"width"}},nestedMappings:{fontStyle:{selector:l.Z.componentName,property:l.Z.cssVarList.fontStyle}}}),o.e4,o.Ae)(a);n(1876),customElements.define(d,m)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[178],{6446:(t,e,n)=>{n.r(e),n.d(e,{Divider:()=>m});var o=n(832),s=n(4942),r=n(3535),i=n(9989),l=n(8801);const d=(0,o.iY)("divider");class a extends i.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t:host > div {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t\t:host > div::before,\n\t\t\t\t:host > div::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t\t::slotted(*) {\n\t\t\t\t\tflex-grow: 0;\n\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"text\"></slot>\n\t\t\t</div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,before:p,after:h,slotted:f}={root:{selector:""},before:{selector:"::before"},after:{selector:"::after"},slotted:{selector:()=>"::slotted(*)"}},m=(0,o.qC)((0,s.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["mode","variant"],excludeAttrs:[]}}),(0,o.yk)({mappings:{minHeight:c,alignItems:c,alignSelf:c,flexDirection:c,padding:f,width:(0,r.zy)(),height:[p,h],backgroundColor:[p,h],opacity:[p,h],textWidth:{...f,property:"width"}},nestedMappings:{fontStyle:{selector:l.Z.componentName,property:l.Z.cssVarList.fontStyle}}}),o.e4,o.Ae)(a);n(1876),customElements.define(d,m)}}]);

package/dist/umd/descope-link-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[58],{8029:(t,e,o)=>{o.r(e),o.d(e,{Link:()=>m});var n=o(832),s=o(9201),r=o(3535),a=o(4942),c=o(893),l=o(8522),i=o(8801);const d=(0,n.iY)("link");class p extends l.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML='\n\t\t<style>\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t</style>\n\t\t<div>\n\t\t\t<a>\n\t\t\t\t<slot name="text"></slot>\n\t\t\t</a>\n\t\t</div>\n\t\t',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),(0,s.o)(this.shadowRoot.host,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),this.baseSelector=":host > div"}}const{anchor:h}={anchor:{selector:"> a"}},m=(0,n.qC)((0,a.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["variant","italic","uppercase","lowercase"]}}),(0,n.yk)({mappings:{width:(0,r.zy)(),textAlign:{},color:h,cursor:h,borderBottomWidth:h,borderBottomStyle:h,borderBottomColor:h},nestedMappings:{color:{selector:i.Z.componentName,property:i.Z.cssVarList.color}}}),(0,c._)(h.selector),n.e4,n.Ae)(p);o(1876),customElements.define(d,m)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[58],{8029:(t,e,o)=>{o.r(e),o.d(e,{Link:()=>m});var n=o(832),s=o(9201),r=o(3535),a=o(4942),c=o(893),l=o(9989),i=o(8801);const d=(0,n.iY)("link");class p extends l.V{static get componentName(){return d}constructor(){super();const t=document.createElement("template");t.innerHTML='\n\t\t<style>\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t</style>\n\t\t<div>\n\t\t\t<a>\n\t\t\t\t<slot name="text"></slot>\n\t\t\t</a>\n\t\t</div>\n\t\t',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),(0,s.oP)(this.shadowRoot.host,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),this.baseSelector=":host > div"}}const{anchor:h}={anchor:{selector:"> a"}},m=(0,n.qC)((0,a.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["variant","italic","uppercase","lowercase"]}}),(0,n.yk)({mappings:{width:(0,r.zy)(),textAlign:{},color:h,cursor:h,borderBottomWidth:h,borderBottomStyle:h,borderBottomColor:h},nestedMappings:{color:{selector:i.Z.componentName,property:i.Z.cssVarList.color}}}),(0,c._)(h.selector),n.e4,n.Ae)(p);o(1876),customElements.define(d,m)}}]);

package/dist/umd/descope-loader-linear-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[453],{9929:(t,e,n)=>{n.r(e),n.d(e,{LoaderLinear:()=>d});var o=n(832),a=n(3535),r=n(8522);const i=(0,o.iY)("loader-linear");class s extends r.V{static get componentName(){return i}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes tilt {\n\t\t\t\t\t0% { transform: translateX(0); }\n\t\t\t\t\t50% { transform: translateX(400%); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\tdiv::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tanimation-name: tilt;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,after:l}={root:{},after:{selector:"::after"}},d=(0,o.qC)((0,o.yk)({mappings:{display:c,width:(0,a.zy)(c),height:[c,l],borderRadius:[c,l],surfaceColor:[{property:"background-color"}],barColor:[{...l,property:"background-color"}],barWidth:{...l,property:"width"},animationDuration:[c,l],animationTimingFunction:[c,l],animationIterationCount:[c,l]}}),o.e4,o.Ae)(s);customElements.define(i,d)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[453],{9929:(t,e,n)=>{n.r(e),n.d(e,{LoaderLinear:()=>d});var o=n(832),a=n(3535),r=n(9989);const i=(0,o.iY)("loader-linear");class s extends r.V{static get componentName(){return i}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes tilt {\n\t\t\t\t\t0% { transform: translateX(0); }\n\t\t\t\t\t50% { transform: translateX(400%); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\tdiv::after {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tanimation-name: tilt;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const{root:c,after:l}={root:{},after:{selector:"::after"}},d=(0,o.qC)((0,o.yk)({mappings:{display:c,width:(0,a.zy)(c),height:[c,l],borderRadius:[c,l],surfaceColor:[{property:"background-color"}],barColor:[{...l,property:"background-color"}],barWidth:{...l,property:"width"},animationDuration:[c,l],animationTimingFunction:[c,l],animationIterationCount:[c,l]}}),o.e4,o.Ae)(s);customElements.define(i,d)}}]);

package/dist/umd/descope-loader-radial-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[72],{7603:(t,e,o)=>{o.r(e),o.d(e,{LoaderRadial:()=>p});var n=o(832),r=o(3535),i=o(8522);const s=(0,n.iY)("loader-radial");class a extends i.V{static get componentName(){return s}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes spin {\n\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tanimation-name: spin;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const p=(0,n.qC)((0,n.yk)({mappings:{display:{},width:(0,r.zy)({}),height:{},spinnerWidth:{property:"border-width"},spinnerStyle:{property:"border-style"},spinnerRadius:{property:"border-radius"},spinnerTopColor:{property:"border-top-color"},spinnerBottomColor:{property:"border-bottom-color"},spinnerRightColor:{property:"border-right-color"},spinnerLeftColor:{property:"border-left-color"},color:{},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),n.e4,n.Ae)(a);customElements.define(s,p)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[72],{7603:(t,e,o)=>{o.r(e),o.d(e,{LoaderRadial:()=>p});var n=o(832),r=o(3535),i=o(9989);const s=(0,n.iY)("loader-radial");class a extends i.V{static get componentName(){return s}constructor(){super();const t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n\t\t\t\t@keyframes spin {\n\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t}\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\t:host > div {\n\t\t\t\t\tanimation-name: spin;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div></div>\n\t\t",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const p=(0,n.qC)((0,n.yk)({mappings:{display:{},width:(0,r.zy)({}),height:{},spinnerWidth:{property:"border-width"},spinnerStyle:{property:"border-style"},spinnerRadius:{property:"border-radius"},spinnerTopColor:{property:"border-top-color"},spinnerBottomColor:{property:"border-bottom-color"},spinnerRightColor:{property:"border-right-color"},spinnerLeftColor:{property:"border-left-color"},color:{},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),n.e4,n.Ae)(a);customElements.define(s,p)}}]);

package/dist/umd/descope-logo-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,e,n)=>{n.r(e),n.d(e,{Logo:()=>r});var s=n(832),o=n(8522);const c=(0,s.iY)("logo");let l;class a extends o.V{static get componentName(){return c}constructor(){super();const t=document.createElement("template");t.innerHTML=`\n\t\t<style>\n\t\t\t${l}\n\t\t</style>\n\t\t<div></div>`,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const i=(0,s.qC)((0,s.yk)({mappings:{height:{},width:{},url:{},fallbackUrl:{}}}),s.e4,s.Ae)(a);l=`\n:host {\n\tdisplay: inline-block;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${i.cssVarList.url}, var(${i.cssVarList.fallbackUrl}));\n}\n`;const r=i;customElements.define(c,r)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,e,n)=>{n.r(e),n.d(e,{Logo:()=>r});var s=n(832),o=n(9989);const c=(0,s.iY)("logo");let l;class a extends o.V{static get componentName(){return c}constructor(){super();const t=document.createElement("template");t.innerHTML=`\n\t\t<style>\n\t\t\t${l}\n\t\t</style>\n\t\t<div></div>`,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div"}}const i=(0,s.qC)((0,s.yk)({mappings:{height:{},width:{},url:{},fallbackUrl:{}}}),s.e4,s.Ae)(a);l=`\n:host {\n\tdisplay: inline-block;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${i.cssVarList.url}, var(${i.cssVarList.fallbackUrl}));\n}\n`;const r=i;customElements.define(c,r)}}]);

package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[841],{7361:(t,e,i)=>{i.d(e,{f:()=>r,Z:()=>u});var s=i(832);const n=t=>{t?.focus(),t?.setSelectionRange(1,1)},r=(0,s.iY)("passcode-internal");class a extends HTMLElement{static get observedAttributes(){return["disabled","bordered","size"]}static get componentName(){return r}static get formAssociated(){return!0}#t;constructor(){super();const t=document.createElement("template"),e=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tst-width="35px"\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="none"\n\t\t></descope-text-field>\n\t`));t.innerHTML=`\n\t\t<div>\n\t\t\t${e.join("")}\n\t\t</div>\n\t\t`,this.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div",this.#t=this.attachInternals(),this.inputs=Array.from(this.querySelectorAll("descope-text-field"))}checkValidity(){return this.#t.validity.valid?this.inputs.forEach((t=>t.removeAttribute("has-error-message"))):(this.inputs.forEach((t=>t.setAttribute("has-error-message","true"))),this.oninvalid?.()),this.#t.validity.valid}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}get value(){return this.inputs.map((({value:t})=>t)).join("")}set value(t){}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return`^$|^\\d{${this.digits},}$`}get valueMissingErrMsg(){return"Please fill out this field."}get patternMismatchErrMsg(){return`Must be a ${this.digits} digits number.`}get validity(){return this.#t.validity}get validationMessage(){return this.#t.validationMessage}reportValidity(){this.#t.reportValidity()}formAssociatedCallback(){this.setValidity?.()}setValidity=()=>{this.isRequired&&!this.value?this.#t.setValidity({valueMissing:!0},this.valueMissingErrMsg):this.pattern&&!new RegExp(this.pattern).test(this.value)?this.#t.setValidity({patternMismatch:!0},this.patternMismatchErrMsg):this.#t.setValidity({})};async connectedCallback(){this.setValidity(),this.initInputs(),this.onfocus=()=>{this.inputs[0].focus()}}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),i=Math.min(e+1,this.inputs.length-1);return this.inputs[i]}getPrevInput(t){const e=this.getInputIdx(t),i=Math.max(e-1,0);return this.inputs[i]}fillDigits(t,e){for(let i=0;i<t.length;i+=1){e.value=t[i]??"";const s=this.getNextInput(e);if(s===e)break;e=s}!e.hasAttribute("focused")&&n(e)}initInputs(){this.inputs.forEach((t=>{t.addEventListener("blur",(()=>{const t=setTimeout((()=>{this.dispatchEvent(new Event("blur"))}));this.inputs.forEach((e=>e.addEventListener("focus",(()=>clearTimeout(t)),{once:!0})))})),t.oninput=e=>{const i=(t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]})(t.value);i.length?this.fillDigits(i,t):t.value="",this.setValidity()},t.onkeydown=({key:e})=>{if("Backspace"===e){t.value="";const e=this.getPrevInput(t);!e.hasAttribute("focused")&&setTimeout((()=>{n(e)}))}else e.match(/^(\d)$/g)&&(t.value="");this.setValidity()}}))}attributeChangedCallback(t,e,i){e!==i&&a.observedAttributes.includes(t)&&this.inputs.forEach((e=>e.setAttribute(t,i)))}}const u=a},4775:(t,e,i)=>{i.r(e);var s=i(7361);customElements.define(s.f,s.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[841],{7361:(t,e,i)=>{i.d(e,{f:()=>r,Z:()=>u});var s=i(832);const n=t=>{t?.focus(),t?.setSelectionRange(1,1)},r=(0,s.iY)("passcode-internal");class a extends HTMLElement{static get observedAttributes(){return["disabled","bordered","size","required","pattern"]}static get componentName(){return r}static get formAssociated(){return!0}#t;constructor(){super();const t=document.createElement("template"),e=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tst-width="35px"\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="none"\n\t\t></descope-text-field>\n\t`));t.innerHTML=`\n\t\t<div>\n\t\t\t${e.join("")}\n\t\t</div>\n\t\t`,this.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div",this.#t=this.attachInternals(),this.inputs=Array.from(this.querySelectorAll("descope-text-field"))}checkValidity(){return this.#t.validity.valid?this.inputs.forEach((t=>t.removeAttribute("has-error-message"))):(this.inputs.forEach((t=>t.setAttribute("has-error-message","true"))),this.oninvalid?.()),this.#t.validity.valid}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}get value(){return this.inputs.map((({value:t})=>t)).join("")}set value(t){}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return`^$|^\\d{${this.digits},}$`}get valueMissingErrMsg(){return"Please fill out this field."}get patternMismatchErrMsg(){return`Must be a ${this.digits} digits number.`}get validity(){return this.#t.validity}get validationMessage(){return this.#t.validationMessage}reportValidity(){this.#t.reportValidity()}formAssociatedCallback(){this.setValidity?.()}setValidity=()=>{this.isRequired&&!this.value?this.#t.setValidity({valueMissing:!0},this.valueMissingErrMsg):this.pattern&&!new RegExp(this.pattern).test(this.value)?this.#t.setValidity({patternMismatch:!0},this.patternMismatchErrMsg):this.#t.setValidity({})};async connectedCallback(){this.setValidity(),this.initInputs(),this.onfocus=()=>{this.inputs[0].focus()}}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),i=Math.min(e+1,this.inputs.length-1);return this.inputs[i]}getPrevInput(t){const e=this.getInputIdx(t),i=Math.max(e-1,0);return this.inputs[i]}fillDigits(t,e){for(let i=0;i<t.length;i+=1){e.value=t[i]??"";const s=this.getNextInput(e);if(s===e)break;e=s}!e.hasAttribute("focused")&&n(e)}initInputs(){this.inputs.forEach((t=>{t.addEventListener("blur",(()=>{const t=setTimeout((()=>{this.dispatchEvent(new Event("blur"))}));this.inputs.forEach((e=>e.addEventListener("focus",(()=>clearTimeout(t)),{once:!0})))})),t.oninput=e=>{const i=(t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]})(t.value);i.length?this.fillDigits(i,t):t.value="",this.setValidity()},t.onkeydown=({key:e})=>{if("Backspace"===e){t.value="";const e=this.getPrevInput(t);!e.hasAttribute("focused")&&setTimeout((()=>{n(e)}))}else e.match(/^(\d)$/g)&&(t.value="");this.setValidity()}}))}attributeChangedCallback(t,e,i){e!==i&&(["required","pattern"].includes(t)?this.setValidity():a.observedAttributes.includes(t)&&this.inputs.forEach((e=>e.setAttribute(t,i))))}}const u=a},4775:(t,e,i)=>{i.r(e);var s=i(7361);customElements.define(s.f,s.Z)}}]);

package/dist/umd/descope-passcode-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(832),a=n(4447),r=n(9063),o=n(7361);const d=(0,i.iY)("passcode"),{borderStyle:s,borderWidth:l,...p}=a.Z,c=(0,i.qC)((0,i.yk)({mappings:{...p},nestedMappings:{borderColor:{selector:r.Z.componentName,property:r.Z.cssVarList.borderColor}}}),i.e4,i.y7,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}connectedCallback(){super.connectedCallback?.();const t=document.createElement("template");t.innerHTML=`\n      <${o.f} \n        bordered="true" \n        name="code" \n        tabindex="0"\n        slot="input"\n        required="${this.shadowRoot.host.getAttribute("required")}"\n        pattern="${this.shadowRoot.host.getAttribute("pattern")}"\n      ></${o.f}>\n      `;const e=Object.assign(document.createElement("slot"),{name:"input",slot:"input",part:"input"});this.proxyElement.appendChild(e),this.proxyElement._setFocused=()=>{},this.shadowRoot.host.appendChild(t.content.cloneNode(!0)),this.inputElement=this.querySelector(o.f),this.inputElement.addEventListener("blur",(()=>{this.proxyElement.validate()}))}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      --vaadin-field-default-width: auto;\n    }\n\n    ::slotted([slot='input']) {\n      -webkit-mask-image: none;\n      display: flex;\n      gap: 2px;\n      align-items: center;\n      padding: 0;\n    }\n\n    vaadin-text-field::part(input-field) {\n      background-color: transparent;\n      padding: 0;\n    }\n\n    ${u}\n    `,excludeAttrsSync:["tabindex"],componentName:d})),u=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${c.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${c.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`,f=c;n(9357),n(4775),customElements.define(d,f)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(832),a=n(4447),d=n(9063),o=n(7361),r=n(9201);const s=(0,i.iY)("passcode"),{borderStyle:l,borderWidth:p,...c}=a.Z,u=(0,i.qC)((0,i.yk)({mappings:{...c},nestedMappings:{borderColor:{selector:d.Z.componentName,property:d.Z.cssVarList.borderColor}}}),i.e4,i.y7,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}connectedCallback(){super.connectedCallback?.();const t=document.createElement("template");t.innerHTML=`\n      <${o.f} \n        bordered="true" \n        name="code" \n        tabindex="0"\n        slot="input"\n      ></${o.f}>\n      `;const e=Object.assign(document.createElement("slot"),{name:"input",slot:"input",part:"input"});this.proxyElement.appendChild(e),this.proxyElement._setFocused=()=>{},this.shadowRoot.host.appendChild(t.content.cloneNode(!0)),this.inputElement=this.querySelector(o.f),(0,r.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["required","pattern"]}),this.inputElement.addEventListener("blur",(()=>{this.proxyElement.validate()}))}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      --vaadin-field-default-width: auto;\n    }\n\n    ::slotted([slot='input']) {\n      -webkit-mask-image: none;\n      display: flex;\n      gap: 2px;\n      align-items: center;\n      padding: 0;\n    }\n\n    vaadin-text-field::part(input-field) {\n      background-color: transparent;\n      padding: 0;\n    }\n\n    ${f}\n    `,excludeAttrsSync:["tabindex"],componentName:s})),f=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${u.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${u.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`,h=u;n(9357),n(4775),customElements.define(s,h)}}]);

package/dist/umd/descope-text-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[528],{8801:(e,t,o)=>{o.d(t,{Z:()=>l,f:()=>c});var n=o(832),s=o(3535),r=o(8522);const c=(0,n.iY)("text");class a extends r.V{static get componentName(){return c}constructor(){super();const e=document.createElement("template");e.innerHTML="<slot></slot>",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.baseSelector=":host > slot"}}const l=(0,n.qC)((0,n.yk)({mappings:{fontFamily:{},lineHeight:{},fontStyle:{},fontSize:{},fontWeight:{},width:{},color:{},letterSpacing:{},textShadow:{},borderWidth:{},borderStyle:{},borderColor:{},textTransform:{},textAlign:(0,s.zy)(),display:(0,s.zy)()}}),n.e4,n.Ae)(a)},1876:(e,t,o)=>{o.r(t),o.d(t,{Text:()=>n.Z});var n=o(8801);customElements.define(n.f,n.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[528],{8801:(e,t,o)=>{o.d(t,{Z:()=>l,f:()=>c});var n=o(832),s=o(3535),r=o(9989);const c=(0,n.iY)("text");class a extends r.V{static get componentName(){return c}constructor(){super();const e=document.createElement("template");e.innerHTML="<slot></slot>",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.baseSelector=":host > slot"}}const l=(0,n.qC)((0,n.yk)({mappings:{fontFamily:{},lineHeight:{},fontStyle:{},fontSize:{},fontWeight:{},width:{},color:{},letterSpacing:{},textShadow:{},borderWidth:{},borderStyle:{},borderColor:{},textTransform:{},textAlign:(0,s.zy)(),display:(0,s.zy)()}}),n.e4,n.Ae)(a)},1876:(e,t,o)=>{o.r(t),o.d(t,{Text:()=>n.Z});var n=o(8801);customElements.define(n.f,n.Z)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.59",
+	"version": "1.0.61",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/descope-combo/index.js

@@ -1,5 +1,5 @@
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 import { getComponentName } from '../../componentsHelpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
 import '../descope-button';
 import '../descope-text-field';
 

package/src/components/descope-container/Container.js

@@ -6,7 +6,7 @@ import {
 	componentNameValidationMixin
 } from '../../componentsHelpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 
 export const componentName = getComponentName('container');
 

package/src/components/descope-divider/Divider.js

@@ -7,7 +7,7 @@ import {
 } from '../../componentsHelpers';
 import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 import Text from '../descope-text/Text';
 
 export const componentName = getComponentName('divider');

package/src/components/descope-link/Link.js

@@ -9,7 +9,7 @@ import { forwardAttrs } from '../../componentsHelpers/createProxy/helpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
 import { hoverableMixin } from '../../componentsHelpers/hoverableMixin';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 import Text from '../descope-text/Text';
 
 export const componentName = getComponentName('link');

package/src/components/descope-loader-linear/LoaderLinear.js

@@ -6,7 +6,7 @@ import {
 	componentNameValidationMixin
 } from '../../componentsHelpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 
 export const componentName = getComponentName('loader-linear');
 

package/src/components/descope-loader-radial/LoaderRadial.js

@@ -6,7 +6,7 @@ import {
 	componentNameValidationMixin
 } from '../../componentsHelpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 
 export const componentName = getComponentName('loader-radial');
 

package/src/components/descope-logo/Logo.js

@@ -5,7 +5,7 @@ import {
 	compose,
 	componentNameValidationMixin
 } from '../../componentsHelpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 
 export const componentName = getComponentName('logo');
 

package/src/components/descope-passcode/Passcode.js

@@ -12,6 +12,7 @@ import textFieldMappings from '../descope-text-field/textFieldMappings';
 export const componentName = getComponentName('passcode');
 import TextField from '../descope-text-field/TextField';
 import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
+import { forwardAttrs } from '../../componentsHelpers/createProxy/helpers';
 
 const customMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -27,15 +28,12 @@ const customMixin = (superclass) =>
 			super.connectedCallback?.();
 			const template = document.createElement('template');
 
-			//forward required & pattern TODO use forwardAttrs
 			template.innerHTML = `
       <${descopeInternalComponentName} 
         bordered="true" 
         name="code" 
         tabindex="0"
         slot="input"
-        required="${this.shadowRoot.host.getAttribute('required')}"
-        pattern="${this.shadowRoot.host.getAttribute('pattern')}"
       ></${descopeInternalComponentName}>
       `;
 
@@ -49,11 +47,13 @@ const customMixin = (superclass) =>
 
 			// we want to control when the element is out of focus
 			// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
-			this.proxyElement._setFocused = () => {};
+			this.proxyElement._setFocused = () => { };
 
 			this.shadowRoot.host.appendChild(template.content.cloneNode(true));
 			this.inputElement = this.querySelector(descopeInternalComponentName);
 
+			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] })
+
 			// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
 			this.inputElement.addEventListener('blur', () => {
 				this.proxyElement.validate();

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -8,7 +8,9 @@ class PasscodeInternal extends HTMLElement {
 		return [
 			'disabled',
 			'bordered',
-			'size'
+			'size',
+			'required',
+			'pattern'
 		];
 	}
 
@@ -202,9 +204,15 @@ class PasscodeInternal extends HTMLElement {
 		oldValue,
 		newValue
 	) {
-		if (oldValue !== newValue &&
-			PasscodeInternal.observedAttributes.includes(attrName)) {
-			this.inputs.forEach((input) => input.setAttribute(attrName, newValue))
+		const validationRelatedAttributes = ['required', 'pattern'];
+
+		if (oldValue !== newValue) {
+			if (validationRelatedAttributes.includes(attrName)) {
+				this.setValidity()
+			}
+			else if (PasscodeInternal.observedAttributes.includes(attrName)) {
+				this.inputs.forEach((input) => input.setAttribute(attrName, newValue))
+			}
 		}
 	}
 }

package/src/components/descope-text/Text.js

@@ -6,7 +6,7 @@ import {
 	componentNameValidationMixin
 } from '../../componentsHelpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
-import { DescopeBaseClass } from '../DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 
 export const componentName = getComponentName('text');
 

package/src/componentsHelpers/createProxy/helpers.js

@@ -57,3 +57,18 @@ export const forwardAttrs = (source, dest, options = {}) => {
 		options
 	);
 };
+
+export const forwardProps = (src, target, props = []) => {
+	if(!props.length) return;
+
+	const config = props.reduce((acc, prop) => Object.assign(acc, {[prop] : {
+		get () {
+			return target[prop]
+		},
+		set (v) {
+			target[prop] = v
+		}
+	}}), {})
+
+	Object.defineProperties(src, config)
+}

package/src/componentsHelpers/createProxy/index.js

@@ -1,14 +1,16 @@
 import { compose } from '..';
-import { DescopeBaseClass } from '../../components/DescopeBaseClass';
+import { DescopeBaseClass } from '../../baseClasses/DescopeBaseClass';
 import { hoverableMixin } from '../hoverableMixin';
-import { syncAttrs } from './helpers';
+import { syncAttrs, forwardProps } from './helpers';
 
 export const createProxy = ({
 	componentName,
 	wrappedEleName,
 	slots = [],
 	style,
-	excludeAttrsSync = []
+	excludeAttrsSync = [],
+	includeAttrsSync = [],
+	includeForwardProps = []
 }) => {
 	const template = `
 		<style id="create-proxy"></style>
@@ -34,6 +36,10 @@ export const createProxy = ({
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
+
+				// this is needed for components that uses props, such as combo box
+				forwardProps(this.hostElement, this.proxyElement, includeForwardProps)
+
 				this.setAttribute('tabindex', '0');
 
 				// we want to focus on the proxy element when focusing our WC
@@ -58,7 +64,8 @@ export const createProxy = ({
 					this.proxyElement.addEventListener(...args);
 
 				syncAttrs(this.proxyElement, this.hostElement, {
-					excludeAttrs: excludeAttrsSync
+					excludeAttrs: excludeAttrsSync,
+					includeAttrs: includeAttrsSync
 				});
 			}
 		}