@descope/web-components-ui 1.0.56 → 1.0.58

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:()=>a,t:()=>i});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,i=t.getAttribute(n);null!==i?e.getAttribute(o)!==i&&e.setAttribute(o,i):e.removeAttribute(o)}))},i=(t,e,s)=>{n(t,o(t,e),s),n(e,o(e,t),s)},a=(t,e,s={})=>{n(t,o(t,e,s.mapAttrs),s)}},3535:(t,e,s)=>{s.d(e,{SP:()=>r,wj:()=>a,zy:()=>l});var n=s(6225);const o=(t,...e)=>`var(${t}${e.length?` , ${o(...e)}`:""})`;class i{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 a=(t,e,s)=>{const a=new i;return Object.keys(s).forEach((i=>{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]})(i,s[i]),l=(0,n.Tk)(t,i);r.forEach((({selector:t,property:s})=>{a.add(((t="",e="")=>"function"==typeof e?e(t):`${t}${e}`)(e,t),s,o(l))}))})),a.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:()=>i,e4:()=>a,iY:()=>p,y7:()=>u});var n=s(6225),o=s(3535);const i=({mappings:t={},nestedMappings:e={}})=>s=>{const i=Object.keys(t).map((t=>(0,n.E3)("st",t)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...i]}static get cssVarList(){return(0,o.SP)(s.componentName,t)}#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,i=(0,n.Tk)(s.componentName,t.replace(/^st-/,""));e?o?.setProperty(i,e):o?.removeProperty(i)}#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`,i=s.componentName;if(this.shadowRoot.host.classList.add(i),t.querySelector(`style#${n}`))return;const a=document.createElement("style");a.id=n,a.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${i}`).join("")}`,e),"#document"===t.nodeName?t.head.append(a):t.append(a)}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),i.includes(t)&&this.#n(t,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((t=>{i.includes(t.nodeName)&&this.#n(t.nodeName,t.value)})))}}},a=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 }`}#i(t){t?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),"draggable"===t&&this.#i("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 i=`\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 a extends r.V{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=i,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._)())(a)},d=["invalid","has-error-message"],u=t=>class extends t{static get formAssociated(){return!0}#a;constructor(){super(),this.#a=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.#a.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:()=>i});const n=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...t)=>n(t.join("-")),i=(...t)=>`--${o(...t.filter((t=>!!t)))}`}}]);
+"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)))}`}}]);

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:()=>f});var o=n(832),s=n(4942),i=n(3535),r=n(8522);const l=(0,o.iY)("divider");class d extends r.V{static get componentName(){return l}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:a,before:c,after:h,slotted:p}={root:{selector:""},before:{selector:"::before"},after:{selector:"::after"},slotted:{selector:()=>"::slotted(*)"}},f=(0,o.qC)((0,s.s)({nestingElementTagName:"descope-text",nestingElementDestSlotName:"text",forwardAttrOptions:{includeAttrs:["mode","variant"],excludeAttrs:[]}}),(0,o.yk)({mappings:{minHeight:a,alignItems:a,alignSelf:a,flexDirection:a,padding:p,width:(0,i.zy)(),height:[c,h],backgroundColor:[c,h],opacity:[c,h],textWidth:{...p,property:"width"}}}),o.e4,o.Ae)(d);n(1876),customElements.define(l,f)}}]);
+"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)}}]);

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(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)}}]);

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),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)}}]);

package/package.json

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

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

@@ -8,6 +8,7 @@ import {
 import { enforceNestingElementsStylesMixin } from '../../componentsHelpers/enforceNestingElementsStylesMixin';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 import { DescopeBaseClass } from '../DescopeBaseClass';
+import Text from '../descope-text/Text';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends DescopeBaseClass {
@@ -76,6 +77,12 @@ const Divider = compose(
 			backgroundColor: [before, after],
 			opacity: [before, after],
 			textWidth: { ...slotted, property: 'width' }
+		},
+		nestedMappings: {
+			fontStyle: {
+				selector: Text.componentName,
+				property: Text.cssVarList.fontStyle
+			}
 		}
 	}),
 	draggableMixin,

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

@@ -77,7 +77,7 @@ const Link = compose(
 		},
 		nestedMappings: {
 			color: {
-				selector: ` ${Text.componentName}`,
+				selector: Text.componentName,
 				property: Text.cssVarList.color
 			}
 		}

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

@@ -1,34 +1,34 @@
 import {
-  getComponentName,
-  createStyleMixin,
-  draggableMixin,
-  createProxy,
-  inputMixin,
-  compose,
-  componentNameValidationMixin
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
 } from '../../componentsHelpers';
 import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 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 TextField from '../descope-text-field/TextField';
+import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
 
 const customMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-    constructor() {
-      super();
-    }
+	class DraggableMixinClass extends superclass {
+		constructor() {
+			super();
+		}
 
-    get digits() {
-      return Number.parseInt(this.getAttribute('digits')) || 6
-    }
+		get digits() {
+			return Number.parseInt(this.getAttribute('digits')) || 6;
+		}
 
-    connectedCallback() {
-      super.connectedCallback?.();
-      const template = document.createElement('template');
+		connectedCallback() {
+			super.connectedCallback?.();
+			const template = document.createElement('template');
 
-      //forward required & pattern TODO use forwardAttrs
-      template.innerHTML = `
+			//forward required & pattern TODO use forwardAttrs
+			template.innerHTML = `
       <${descopeInternalComponentName} 
         bordered="true" 
         name="code" 
@@ -37,49 +37,54 @@ const customMixin = (superclass) =>
         required="${this.shadowRoot.host.getAttribute('required')}"
         pattern="${this.shadowRoot.host.getAttribute('pattern')}"
       ></${descopeInternalComponentName}>
-      `
+      `;
 
-      // we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
-      const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' })
-      this.proxyElement.appendChild(slotEle)
+			// we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
+			const slotEle = Object.assign(document.createElement('slot'), {
+				name: 'input',
+				slot: 'input',
+				part: 'input'
+			});
+			this.proxyElement.appendChild(slotEle);
 
-      // 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 = () => { }
+			// 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.shadowRoot.host.appendChild(template.content.cloneNode(true))
-      this.inputElement = this.querySelector(descopeInternalComponentName)
+			this.shadowRoot.host.appendChild(template.content.cloneNode(true));
+			this.inputElement = this.querySelector(descopeInternalComponentName);
 
-      // we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
-      this.inputElement.addEventListener('blur', () => {
-        this.proxyElement.validate()
-      })
-    }
-  }
+			// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
+			this.inputElement.addEventListener('blur', () => {
+				this.proxyElement.validate();
+			});
+		}
+	};
 
-const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
+const { borderStyle, borderWidth, ...restTextFieldMappings } =
+	textFieldMappings;
 
 const Passcode = compose(
-  createStyleMixin({
-    mappings: {
-      ...restTextFieldMappings,
-    },
-    nestedMappings: {
-      borderColor: {
-        selector: ` ${TextField.componentName}`,
-        property: TextField.cssVarList.borderColor
-      }
-    }
-  }),
-  draggableMixin,
-  inputMixin,
-  componentNameValidationMixin,
-  customMixin
+	createStyleMixin({
+		mappings: {
+			...restTextFieldMappings
+		},
+		nestedMappings: {
+			borderColor: {
+				selector: TextField.componentName,
+				property: TextField.cssVarList.borderColor
+			}
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin,
+	customMixin
 )(
-  createProxy({
-    slots: [],
-    wrappedEleName: 'vaadin-text-field',
-    style: () => `
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
     :host {
       --vaadin-field-default-width: auto;
     }
@@ -99,9 +104,9 @@ const Passcode = compose(
 
     ${overrides}
     `,
-    excludeAttrsSync: ['tabindex'],
-    componentName
-  })
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
 );
 
 const overrides = `

package/src/componentsHelpers/createStyleMixin/helpers.js

@@ -9,7 +9,11 @@ const createCssSelector = (
 ) =>
 	typeof relativeSelectorOrSelectorFn === 'function'
 		? relativeSelectorOrSelectorFn(baseSelector)
-		: `${baseSelector}${relativeSelectorOrSelectorFn}`;
+		: `${baseSelector}${
+				/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+					? ` ${relativeSelectorOrSelectorFn}`
+					: relativeSelectorOrSelectorFn
+		  }`;
 
 class StyleBuilder {
 	constructor() {

package/src/componentsHelpers/createStyleMixin/index.js

@@ -3,107 +3,112 @@ import { createStyle, createCssVarsList } from './helpers';
 
 export const createStyleMixin =
 	({ mappings = {}, nestedMappings = {} }) =>
-		(superclass) => {
-			const styleAttributes = Object.keys(mappings).map((key) =>
-				kebabCaseJoin('st', key)
-			);
-			return class CustomStyleMixinClass extends superclass {
-				static get observedAttributes() {
-					const superAttrs = superclass.observedAttributes || [];
-					return [...superAttrs, ...styleAttributes];
+	(superclass) => {
+		const styleAttributes = Object.keys(mappings).map((key) =>
+			kebabCaseJoin('st', key)
+		);
+		return class CustomStyleMixinClass extends superclass {
+			static get observedAttributes() {
+				const superAttrs = superclass.observedAttributes || [];
+				return [...superAttrs, ...styleAttributes];
+			}
+
+			static get cssVarList() {
+				return createCssVarsList(superclass.componentName, {
+					...mappings,
+					...nestedMappings
+				});
+			}
+
+			#styleEle = null;
+
+			constructor() {
+				super();
+
+				this.#createComponentStyle();
+				this.#createAttrOverrideStyle();
+			}
+
+			#createAttrOverrideStyle() {
+				this.#styleEle = document.createElement('style');
+				this.#styleEle.id = 'style-mixin-overrides';
+
+				this.#styleEle.innerText = '* {}';
+				this.shadowRoot.prepend(this.#styleEle);
+			}
+
+			#updateAttrOverrideStyle(attrName, value) {
+				const style = this.#styleEle.sheet?.cssRules[0].style;
+				const varName = getCssVarName(
+					superclass.componentName,
+					attrName.replace(/^st-/, '')
+				);
+
+				if (value) style?.setProperty(varName, value);
+				else style?.removeProperty(varName);
+			}
+
+			#createComponentStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-component';
+				themeStyle.innerHTML = createStyle(
+					superclass.componentName,
+					this.baseSelector,
+					mappings
+				);
+				this.shadowRoot.prepend(themeStyle);
+			}
+
+			#createComponentNestingStyle() {
+				// we need these selectors to be more specific from the theme selectors
+				// in order to do it, we are repeating the class name for specificity
+				const numOfClassNameSpecifier = 3;
+
+				const rootNode = this.shadowRoot.host.getRootNode();
+				const styleId = `${superclass.componentName}-style-mixin-component`;
+
+				const className = superclass.componentName;
+				this.shadowRoot.host.classList.add(className);
+
+				if (rootNode.querySelector(`style#${styleId}`)) return;
+
+				const themeStyle = document.createElement('style');
+				themeStyle.id = styleId;
+				themeStyle.innerHTML = createStyle(
+					superclass.componentName,
+					`${superclass.componentName}${Array(numOfClassNameSpecifier)
+						.fill(`.${className}`)
+						.join('')}`,
+					nestedMappings
+				);
+
+				// rootNode can be either a shadow DOM or a light DOM
+				if (rootNode.nodeName === '#document') {
+					rootNode.head.append(themeStyle);
+				} else {
+					rootNode.append(themeStyle);
 				}
+			}
 
-				static get cssVarList() {
-					return createCssVarsList(superclass.componentName, mappings);
-				}
-
-				#styleEle = null;
-
-				constructor() {
-					super();
-
-					this.#createComponentStyle();
-					this.#createAttrOverrideStyle();
-				}
-
-				#createAttrOverrideStyle() {
-					this.#styleEle = document.createElement('style');
-					this.#styleEle.id = 'style-mixin-overrides';
-
-					this.#styleEle.innerText = '* {}';
-					this.shadowRoot.prepend(this.#styleEle);
-				}
-
-				#updateAttrOverrideStyle(attrName, value) {
-					const style = this.#styleEle.sheet?.cssRules[0].style;
-					const varName = getCssVarName(
-						superclass.componentName,
-						attrName.replace(/^st-/, '')
-					);
+			attributeChangedCallback(attrName, oldValue, newValue) {
+				super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-					if (value) style?.setProperty(varName, value);
-					else style?.removeProperty(varName);
+				if (styleAttributes.includes(attrName)) {
+					this.#updateAttrOverrideStyle(attrName, newValue);
 				}
-
-				#createComponentStyle() {
-					const themeStyle = document.createElement('style');
-					themeStyle.id = 'style-mixin-component';
-					themeStyle.innerHTML = createStyle(
-						superclass.componentName,
-						this.baseSelector,
-						mappings
-					);
-					this.shadowRoot.prepend(themeStyle);
-				}
-
-				#createComponentNestingStyle() {
-					// we need these selectors to be more specific from the theme selectors
-					// in order to do it, we are repeating the class name for specificity
-					const numOfClassNameSpecifier = 3
-
-					const rootNode = this.shadowRoot.host.getRootNode()
-					const styleId = `${superclass.componentName}-style-mixin-component`
-
-					const className = superclass.componentName
-					this.shadowRoot.host.classList.add(className)
-
-					if(rootNode.querySelector(`style#${styleId}`)) return;
-
-					const themeStyle = document.createElement('style');
-					themeStyle.id = styleId;
-					themeStyle.innerHTML = createStyle(
-						superclass.componentName,
-						`${superclass.componentName}${Array(numOfClassNameSpecifier).fill(`.${className}`).join('')}`,
-						nestedMappings
-					);
-
-					// rootNode can be either a shadow DOM or a light DOM
-					if (rootNode.nodeName === '#document') {
-						rootNode.head.append(themeStyle)
-					} else {
-						rootNode.append(themeStyle)
-					}
-				}
-
-				attributeChangedCallback(attrName, oldValue, newValue) {
-					super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-					if (styleAttributes.includes(attrName)) {
-						this.#updateAttrOverrideStyle(attrName, newValue);
-					}
-				}
-
-				connectedCallback() {
-					super.connectedCallback?.();
-					if (this.shadowRoot.isConnected) {
-						this.#createComponentNestingStyle();
-
-						Array.from(this.attributes).forEach(attr => {
-							if (styleAttributes.includes(attr.nodeName)) {
-								this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
-							}
-						});
-					}
+			}
+
+			connectedCallback() {
+				super.connectedCallback?.();
+				if (this.shadowRoot.isConnected) {
+					this.#createComponentNestingStyle();
+
+					Array.from(this.attributes).forEach((attr) => {
+						if (styleAttributes.includes(attr.nodeName)) {
+							this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
+						}
+					});
 				}
-			};
+			}
 		};
+	};

package/src/theme/components/divider.js

@@ -18,6 +18,9 @@ const divider = {
 		[vars.flexDirection]: 'column',
 		[vars.minHeight]: '200px',
 		[vars.textWidth]: 'max-content'
+	},
+	_italic: {
+		[vars.fontStyle]: 'italic'
 	}
 };
 

package/src/theme/globals.js

@@ -1,5 +1,6 @@
 import { getThemeRefs } from '../themeHelpers';
 import { genColors } from '../themeHelpers/processColors';
+import button from './components/button';
 
 export const colors = genColors({
 	surface: {