@usecapsule/core-components 2.0.8 → 3.0.0

package/dist/types/constants.d.ts

@@ -1,3 +1,17 @@
 import { Theme } from './interface';
 export declare const MOBILE_SIZE = 480;
 export declare const DEFAULT_THEME: Theme;
+export declare const COLOR_MIXES: number[];
+export declare const UTILITY_COLORS: {
+    red: string;
+    yellow: string;
+    green: string;
+};
+export declare const DEFAULT_Z_INDICES: {
+    modalNoOverlay: number;
+    appBar: number;
+    overlay: number;
+    modal: number;
+    drawer: number;
+    modalWrapper: number;
+};

package/dist/types/interface.d.ts

@@ -144,4 +144,39 @@ export interface CustomPalette {
             error?: string;
         };
     };
+    switch?: {
+        surface?: {
+            default?: string;
+            checked?: string;
+        };
+        thumb?: {
+            default?: string;
+            checked?: string;
+        };
+    };
+    checkbox?: {
+        surface?: {
+            default?: string;
+            checked?: string;
+        };
+        border?: {
+            default?: string;
+            checked?: string;
+        };
+        icon?: string;
+    };
+    radio?: {
+        surface?: {
+            default?: string;
+            checked?: string;
+        };
+        border?: {
+            default?: string;
+            checked?: string;
+        };
+    };
+    card?: {
+        surface?: string;
+        border?: string;
+    };
 }

package/dist/types/utils/theme/utils.d.ts

@@ -3,3 +3,4 @@ export declare const isColor: (strColor: any) => boolean;
 export declare const getCssColors: (customPalette: CustomPalette) => {
     [k: string]: string;
 };
+export declare const overlayMix: (baseColor: string, overlayColor: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "2.0.8",
+  "version": "3.0.0",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@stencil/core": "^4.7.0",
+    "color-blend": "^4.0.0",
     "color2k": "^2.0.3",
     "gsap": "^3.12.5",
     "lottie-web": "^5.12.2",
@@ -50,5 +51,5 @@
     "stencil-inline-svg": "^1.1.0",
     "ts-node": "^10.9.2"
   },
-  "gitHead": "6b30facdd7a9341f879ce6f9f69db1d2d5a2e169"
+  "gitHead": "bedd55452c8b4f262ffadc9dfd091a8a0146ddca"
 }

package/dist/capsule/p-6b02ea8d.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as a,H as r}from"./p-b2997f3c.js";const c=":host{display:flex;flex-wrap:wrap}";const f=c;const e=class{constructor(a){s(this,a)}render(){return a(r,{key:"5f061d20ff017b612a4bada01c66992795cbabe1"},a("slot",{key:"ba35af68f6f00e8b12ff3c091935482beb10d27c"}))}};e.style=f;export{e as cpsl_row};
-//# sourceMappingURL=p-6b02ea8d.entry.js.map

package/dist/capsule/p-b2997f3c.js

@@ -1,3 +0,0 @@
-const t="capsule";let e;let n;let s=false;let l=false;let o=false;const c=(t,e="")=>{{return()=>{}}};const i=(t,e)=>{{return()=>{}}};const f="{visibility:hidden}.hydrated{visibility:inherit}";const r="slot-fb{display:contents}slot-fb[hidden]{display:none}";const u={};const a="http://www.w3.org/2000/svg";const d="http://www.w3.org/1999/xhtml";const v=t=>t!=null;const p=t=>{t=typeof t;return t==="object"||t==="function"};function h(t){var e,n,s;return(s=(n=(e=t.head)===null||e===void 0?void 0:e.querySelector('meta[name="csp-nonce"]'))===null||n===void 0?void 0:n.getAttribute("content"))!==null&&s!==void 0?s:undefined}const y=(t,e,...n)=>{let s=null;let l=null;let o=false;let c=false;const i=[];const f=e=>{for(let n=0;n<e.length;n++){s=e[n];if(Array.isArray(s)){f(s)}else if(s!=null&&typeof s!=="boolean"){if(o=typeof t!=="function"&&!p(s)){s=String(s)}if(o&&c){i[i.length-1].t+=s}else{i.push(o?m(null,s):s)}c=o}}};f(n);if(e){if(e.key){l=e.key}{const t=e.className||e.class;if(t){e.class=typeof t!=="object"?t:Object.keys(t).filter((e=>t[e])).join(" ")}}}const r=m(t,null);r.l=e;if(i.length>0){r.o=i}{r.i=l}return r};const m=(t,e)=>{const n={u:0,v:t,t:e,p:null,o:null};{n.l=null}{n.i=null}return n};const b={};const w=t=>t&&t.v===b;const $=(t,e)=>{if(t!=null&&!p(t)){if(e&4){return t==="false"?false:t===""||!!t}if(e&2){return parseFloat(t)}if(e&1){return String(t)}return t}return t};const g=t=>ht(t).$hostElement$;const S=(t,e,n)=>{const s=g(t);return{emit:t=>j(s,e,{bubbles:!!(n&4),composed:!!(n&2),cancelable:!!(n&1),detail:t})}};const j=(t,e,n)=>{const s=kt.ce(e,n);t.dispatchEvent(s);return s};const O=new WeakMap;const k=(t,e,n)=>{let s=St.get(t);if(Pt&&n){s=s||new CSSStyleSheet;if(typeof s==="string"){s=e}else{s.replaceSync(e)}}else{s=e}St.set(t,s)};const C=(t,e,n)=>{var s;const l=P(e);const o=St.get(l);t=t.nodeType===11?t:Ot;if(o){if(typeof o==="string"){t=t.head||t;let n=O.get(t);let c;if(!n){O.set(t,n=new Set)}if(!n.has(l)){{c=Ot.createElement("style");c.innerHTML=o;const e=(s=kt.h)!==null&&s!==void 0?s:h(Ot);if(e!=null){c.setAttribute("nonce",e)}t.insertBefore(c,t.querySelector("link"))}if(e.u&4){c.innerHTML+=r}if(n){n.add(l)}}}else if(!t.adoptedStyleSheets.includes(o)){t.adoptedStyleSheets=[...t.adoptedStyleSheets,o]}}return l};const M=t=>{const e=t.m;const n=t.$hostElement$;const s=e.u;const l=c("attachStyles",e.$);const o=C(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);if(s&10){n["s-sc"]=o;n.classList.add(o+"-h")}l()};const P=(t,e)=>"sc-"+t.$;const x=(t,e,n,s,l,o)=>{if(n!==s){let c=bt(t,e);let i=e.toLowerCase();if(e==="class"){const e=t.classList;const l=L(n);const o=L(s);e.remove(...l.filter((t=>t&&!o.includes(t))));e.add(...o.filter((t=>t&&!l.includes(t))))}else if(e==="style"){{for(const e in n){if(!s||s[e]==null){if(e.includes("-")){t.style.removeProperty(e)}else{t.style[e]=""}}}}for(const e in s){if(!n||s[e]!==n[e]){if(e.includes("-")){t.style.setProperty(e,s[e])}else{t.style[e]=s[e]}}}}else if(e==="key");else if(!c&&e[0]==="o"&&e[1]==="n"){if(e[2]==="-"){e=e.slice(3)}else if(bt(jt,i)){e=i.slice(2)}else{e=i[2]+e.slice(3)}if(n||s){const l=e.endsWith(U);e=e.replace(A,"");if(n){kt.rel(t,e,n,l)}if(s){kt.ael(t,e,s,l)}}}else{const i=p(s);if((c||i&&s!==null)&&!l){try{if(!t.tagName.includes("-")){const l=s==null?"":s;if(e==="list"){c=false}else if(n==null||t[e]!=l){t[e]=l}}else{t[e]=s}}catch(t){}}if(s==null||s===false){if(s!==false||t.getAttribute(e)===""){{t.removeAttribute(e)}}}else if((!c||o&4||l)&&!i){s=s===true?"":s;{t.setAttribute(e,s)}}}}};const E=/\s/;const L=t=>!t?[]:t.split(E);const U="Capture";const A=new RegExp(U+"$");const N=(t,e,n,s)=>{const l=e.p.nodeType===11&&e.p.host?e.p.host:e.p;const o=t&&t.l||u;const c=e.l||u;{for(s in o){if(!(s in c)){x(l,s,o[s],undefined,n,e.u)}}}for(s in c){x(l,s,o[s],c[s],n,e.u)}};const R=(t,s,o,c)=>{const i=s.o[o];let f=0;let r;let u;if(i.t!==null){r=i.p=Ot.createTextNode(i.t)}else{if(!l){l=i.v==="svg"}r=i.p=Ot.createElementNS(l?a:d,i.v);if(l&&i.v==="foreignObject"){l=false}{N(null,i,l)}if(v(e)&&r["s-si"]!==e){r.classList.add(r["s-si"]=e)}if(i.o){for(f=0;f<i.o.length;++f){u=R(t,i,f);if(u){r.appendChild(u)}}}{if(i.v==="svg"){l=false}else if(r.tagName==="foreignObject"){l=true}}}r["s-hn"]=n;return r};const T=(t,e,s,l,o,c)=>{let i=t;let f;if(i.shadowRoot&&i.tagName===n){i=i.shadowRoot}for(;o<=c;++o){if(l[o]){f=R(null,s,o);if(f){l[o].p=f;i.insertBefore(f,e)}}}};const W=(t,e,n)=>{for(let s=e;s<=n;++s){const e=t[s];if(e){const t=e.p;if(t){t.remove()}}}};const F=(t,e,n,s,l=false)=>{let o=0;let c=0;let i=0;let f=0;let r=e.length-1;let u=e[0];let a=e[r];let d=s.length-1;let v=s[0];let p=s[d];let h;let y;while(o<=r&&c<=d){if(u==null){u=e[++o]}else if(a==null){a=e[--r]}else if(v==null){v=s[++c]}else if(p==null){p=s[--d]}else if(H(u,v,l)){q(u,v,l);u=e[++o];v=s[++c]}else if(H(a,p,l)){q(a,p,l);a=e[--r];p=s[--d]}else if(H(u,p,l)){q(u,p,l);t.insertBefore(u.p,a.p.nextSibling);u=e[++o];p=s[--d]}else if(H(a,v,l)){q(a,v,l);t.insertBefore(a.p,u.p);a=e[--r];v=s[++c]}else{i=-1;{for(f=o;f<=r;++f){if(e[f]&&e[f].i!==null&&e[f].i===v.i){i=f;break}}}if(i>=0){y=e[i];if(y.v!==v.v){h=R(e&&e[c],n,i)}else{q(y,v,l);e[i]=undefined;h=y.p}v=s[++c]}else{h=R(e&&e[c],n,c);v=s[++c]}if(h){{u.p.parentNode.insertBefore(h,u.p)}}}}if(o>r){T(t,s[d+1]==null?null:s[d+1].p,n,s,c,d)}else if(c>d){W(e,o,r)}};const H=(t,e,n=false)=>{if(t.v===e.v){if(!n){return t.i===e.i}return true}return false};const q=(t,e,n=false)=>{const o=e.p=t.p;const c=t.o;const i=e.o;const f=e.v;const r=e.t;if(r===null){{l=f==="svg"?true:f==="foreignObject"?false:l}{if(f==="slot"&&!s);else{N(t,e,l)}}if(c!==null&&i!==null){F(o,c,e,i,n)}else if(i!==null){if(t.t!==null){o.textContent=""}T(o,null,e,i,0,i.length-1)}else if(c!==null){W(c,0,c.length-1)}if(l&&f==="svg"){l=false}}else if(t.t!==r){o.data=r}};const D=(t,l,o=false)=>{const c=t.$hostElement$;const i=t.m;const f=t.S||m(null,null);const r=w(l)?l:y(null,null,l);n=c.tagName;if(i.j){r.l=r.l||{};i.j.map((([t,e])=>r.l[e]=c[t]))}if(o&&r.l){for(const t of Object.keys(r.l)){if(c.hasAttribute(t)&&!["key","ref","style","class"].includes(t)){r.l[t]=c[t]}}}r.v=null;r.u|=4;t.S=r;r.p=f.p=c.shadowRoot||c;{e=c["s-sc"]}s=(i.u&1)!==0;q(f,r,o)};const I=(t,e)=>{if(e&&!t.O&&e["s-p"]){e["s-p"].push(new Promise((e=>t.O=e)))}};const V=(t,e)=>{{t.u|=16}if(t.u&4){t.u|=512;return}I(t,t.k);const n=()=>_(t,e);return Rt(n)};const _=(t,e)=>{const n=c("scheduleUpdate",t.m.$);const s=t.C;let l;if(e){{t.u|=256;if(t.M){t.M.map((([t,e])=>Y(s,t,e)));t.M=undefined}}{l=Y(s,"componentWillLoad")}}n();return z(l,(()=>G(t,s,e)))};const z=(t,e)=>B(t)?t.then(e):e();const B=t=>t instanceof Promise||t&&t.then&&typeof t.then==="function";const G=async(t,e,n)=>{var s;const l=t.$hostElement$;const o=c("update",t.m.$);const i=l["s-rc"];if(n){M(t)}const f=c("render",t.m.$);{J(t,e,l,n)}if(i){i.map((t=>t()));l["s-rc"]=undefined}f();o();{const e=(s=l["s-p"])!==null&&s!==void 0?s:[];const n=()=>K(t);if(e.length===0){n()}else{Promise.all(e).then(n);t.u|=4;e.length=0}}};const J=(t,e,n,s)=>{try{e=e.render();{t.u&=~16}{t.u|=2}{{{D(t,e,s)}}}}catch(e){wt(e,t.$hostElement$)}return null};const K=t=>{const e=t.m.$;const n=t.$hostElement$;const s=c("postUpdate",e);const l=t.C;const o=t.k;if(!(t.u&64)){t.u|=64;{Z(n)}{Y(l,"componentDidLoad")}s();{t.P(n);if(!o){X()}}}else{s()}{t.L(n)}{if(t.O){t.O();t.O=undefined}if(t.u&512){Nt((()=>V(t,false)))}t.u&=~(4|512)}};const Q=t=>{{const e=ht(t);const n=e.$hostElement$.isConnected;if(n&&(e.u&(2|16))===2){V(e,false)}return n}};const X=e=>{{Z(Ot.documentElement)}Nt((()=>j(jt,"appload",{detail:{namespace:t}})))};const Y=(t,e,n)=>{if(t&&t[e]){try{return t[e](n)}catch(t){wt(t)}}return undefined};const Z=t=>t.classList.add("hydrated");const tt=(t,e)=>ht(t).U.get(e);const et=(t,e,n,s)=>{const l=ht(t);const o=l.$hostElement$;const c=l.U.get(e);const i=l.u;const f=l.C;n=$(n,s.A[e][0]);const r=Number.isNaN(c)&&Number.isNaN(n);const u=n!==c&&!r;if((!(i&8)||c===undefined)&&u){l.U.set(e,n);if(f){if(s.N&&i&128){const t=s.N[e];if(t){t.map((t=>{try{f[t](n,c,e)}catch(t){wt(t,o)}}))}}if((i&(2|16))===2){V(l,false)}}}};const nt=(t,e,n)=>{var s;const l=t.prototype;if(e.A){if(t.watchers){e.N=t.watchers}const o=Object.entries(e.A);o.map((([t,[s]])=>{if(s&31||n&2&&s&32){Object.defineProperty(l,t,{get(){return tt(this,t)},set(n){et(this,t,n,e)},configurable:true,enumerable:true})}else if(n&1&&s&64){Object.defineProperty(l,t,{value(...e){var n;const s=ht(this);return(n=s===null||s===void 0?void 0:s.R)===null||n===void 0?void 0:n.then((()=>{var n;return(n=s.C)===null||n===void 0?void 0:n[t](...e)}))}})}}));if(n&1){const n=new Map;l.attributeChangedCallback=function(t,s,o){kt.jmp((()=>{var c;const i=n.get(t);if(this.hasOwnProperty(i)){o=this[i];delete this[i]}else if(l.hasOwnProperty(i)&&typeof this[i]==="number"&&this[i]==o){return}else if(i==null){const n=ht(this);const l=n===null||n===void 0?void 0:n.u;if(l&&!(l&8)&&l&128&&o!==s){const l=n.C;const i=(c=e.N)===null||c===void 0?void 0:c[t];i===null||i===void 0?void 0:i.forEach((e=>{if(l[e]!=null){l[e].call(l,o,s,t)}}))}return}this[i]=o===null&&typeof this[i]==="boolean"?false:o}))};t.observedAttributes=Array.from(new Set([...Object.keys((s=e.N)!==null&&s!==void 0?s:{}),...o.filter((([t,e])=>e[0]&15)).map((([t,s])=>{var l;const o=s[1]||t;n.set(o,t);if(s[0]&512){(l=e.j)===null||l===void 0?void 0:l.push([t,o])}return o}))]))}}return t};const st=async(t,e,n,s)=>{let l;if((e.u&32)===0){e.u|=32;const s=n.T;if(s){l=gt(n);if(l.then){const t=i();l=await l;t()}if(!l.isProxied){{n.N=l.watchers}nt(l,n,2);l.isProxied=true}const t=c("createInstance",n.$);{e.u|=8}try{new l(e)}catch(t){wt(t)}{e.u&=~8}{e.u|=128}t()}else{l=t.constructor;customElements.whenDefined(n.$).then((()=>e.u|=128))}if(l.style){let t=l.style;const e=P(n);if(!St.has(e)){const s=c("registerStyles",n.$);k(e,t,!!(n.u&1));s()}}}const o=e.k;const f=()=>V(e,true);if(o&&o["s-rc"]){o["s-rc"].push(f)}else{f()}};const lt=t=>{};const ot=t=>{if((kt.u&1)===0){const e=ht(t);const n=e.m;const s=c("connectedCallback",n.$);if(!(e.u&1)){e.u|=1;{let n=t;while(n=n.parentNode||n.host){if(n["s-p"]){I(e,e.k=n);break}}}if(n.A){Object.entries(n.A).map((([e,[n]])=>{if(n&31&&t.hasOwnProperty(e)){const n=t[e];delete t[e];t[e]=n}}))}{st(t,e,n)}}else{rt(t,e,n.W);if(e===null||e===void 0?void 0:e.C);else if(e===null||e===void 0?void 0:e.F){e.F.then((()=>lt()))}}s()}};const ct=t=>{{Y(t,"disconnectedCallback")}};const it=async t=>{if((kt.u&1)===0){const e=ht(t);{if(e.H){e.H.map((t=>t()));e.H=undefined}}if(e===null||e===void 0?void 0:e.C){ct(e.C)}else if(e===null||e===void 0?void 0:e.F){e.F.then((()=>ct(e.C)))}}};const ft=(t,e={})=>{var n;const s=c();const l=[];const o=e.exclude||[];const i=jt.customElements;const u=Ot.head;const a=u.querySelector("meta[charset]");const d=Ot.createElement("style");const v=[];let p;let y=true;Object.assign(kt,e);kt.q=new URL(e.resourcesUrl||"./",Ot.baseURI).href;let m=false;t.map((t=>{t[1].map((e=>{var n;const s={u:e[0],$:e[1],A:e[2],W:e[3]};if(s.u&4){m=true}{s.A=e[2]}{s.W=e[3]}{s.j=[]}{s.N=(n=e[4])!==null&&n!==void 0?n:{}}const c=s.$;const f=class extends HTMLElement{constructor(t){super(t);t=this;mt(t,s);if(s.u&1){{{t.attachShadow({mode:"open"})}}}}connectedCallback(){if(p){clearTimeout(p);p=null}if(y){v.push(this)}else{kt.jmp((()=>ot(this)))}}disconnectedCallback(){kt.jmp((()=>it(this)))}componentOnReady(){return ht(this).F}};s.T=t[0];if(!o.includes(c)&&!i.get(c)){l.push(c);i.define(c,nt(f,s,1))}}))}));if(l.length>0){if(m){d.textContent+=r}{d.textContent+=l+f}if(d.innerHTML.length){d.setAttribute("data-styles","");const t=(n=kt.h)!==null&&n!==void 0?n:h(Ot);if(t!=null){d.setAttribute("nonce",t)}u.insertBefore(d,a?a.nextSibling:u.firstChild)}}y=false;if(v.length){v.map((t=>t.connectedCallback()))}else{{kt.jmp((()=>p=setTimeout(X,30)))}}s()};const rt=(t,e,n,s)=>{if(n){n.map((([n,s,l])=>{const o=at(t,n);const c=ut(e,l);const i=dt(n);kt.ael(o,s,c,i);(e.H=e.H||[]).push((()=>kt.rel(o,s,c,i)))}))}};const ut=(t,e)=>n=>{try{{if(t.u&256){t.C[e](n)}else{(t.M=t.M||[]).push([e,n])}}}catch(t){wt(t)}};const at=(t,e)=>{if(e&8)return jt;return t};const dt=t=>Ct?{passive:(t&1)!==0,capture:(t&2)!==0}:(t&2)!==0;const vt=t=>kt.h=t;const pt=new WeakMap;const ht=t=>pt.get(t);const yt=(t,e)=>pt.set(e.C=t,e);const mt=(t,e)=>{const n={u:0,$hostElement$:t,m:e,U:new Map};{n.R=new Promise((t=>n.L=t))}{n.F=new Promise((t=>n.P=t));t["s-p"]=[];t["s-rc"]=[]}rt(t,n,e.W);return pt.set(t,n)};const bt=(t,e)=>e in t;const wt=(t,e)=>(0,console.error)(t,e);const $t=new Map;const gt=(t,e,n)=>{const s=t.$.replace(/-/g,"_");const l=t.T;const o=$t.get(l);if(o){return o[s]}
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${l}.entry.js${""}`).then((t=>{{$t.set(l,t)}return t[s]}),wt)};const St=new Map;const jt=typeof window!=="undefined"?window:{};const Ot=jt.document||{head:{}};const kt={u:0,q:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,s)=>t.addEventListener(e,n,s),rel:(t,e,n,s)=>t.removeEventListener(e,n,s),ce:(t,e)=>new CustomEvent(t,e)};const Ct=(()=>{let t=false;try{Ot.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=true}}))}catch(t){}return t})();const Mt=t=>Promise.resolve(t);const Pt=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(t){}return false})();const xt=[];const Et=[];const Lt=(t,e)=>n=>{t.push(n);if(!o){o=true;if(e&&kt.u&4){Nt(At)}else{kt.raf(At)}}};const Ut=t=>{for(let e=0;e<t.length;e++){try{t[e](performance.now())}catch(t){wt(t)}}t.length=0};const At=()=>{Ut(xt);{Ut(Et);if(o=xt.length>0){kt.raf(At)}}};const Nt=t=>Mt().then(t);const Rt=Lt(Et,true);export{b as H,ft as b,S as c,Q as f,g,y as h,Mt as p,yt as r,vt as s};
-//# sourceMappingURL=p-b2997f3c.js.map