diff --git a/archived/v4/build/p-i2s3rn6x.entry.js b/archived/v4/build/p-i2s3rn6x.entry.js
index a3ff42c..603ec97 100644
--- a/archived/v4/build/p-i2s3rn6x.entry.js
+++ b/archived/v4/build/p-i2s3rn6x.entry.js
@@ -1 +1 @@
-import{r as s,c as i,h as t,g as o}from"./p-5f00bf62.js";const a=class{constructor(t){s(this,t),this.hadIconOnce=!1,this.clearToast=i(this,"clearToast",7),this.toggleHeaderSearch=i(this,"toggleHeaderSearch",7)}handleCodeClick(s){const i=this.el.querySelector(".toast-bar__section:first-child"),t=document.createElement("textarea");t.value=`<ion-icon name="${s}"></ion-icon>`,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),this.showCopiedConfirm&&(window.clearTimeout(this.showCopiedConfirm),this.showCopiedConfirm=0),i.classList.add("copied"),this.showCopiedConfirm=window.setTimeout(()=>{i.classList.remove("copied"),this.showCopiedConfirm=0},1500)}componentDidLoad(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),!1),this.el.addEventListener("touchend",this.handleTouchEnd.bind(this),!1)}handleTouchStart(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchStartY=s.changedTouches[0].screenY)}handleTouchEnd(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchEndY=s.changedTouches[0].screenY,this.touchEndY>this.touchStartY&&this.clearToast.emit())}render(){let s,i,o,a=null;return this.selectedIcon&&(this.hadIconOnce||(this.hadIconOnce=!0),o=this.selectedIcon.name,"logo"===(i=this.selectedIcon.icons[0].startsWith("logo-")?"logo":this.selectedIconType)&&(o="logo-"+o),s=8*`<ion-icon name="${o}"></ion-icon>`.length+32,a=this.selectedIcon.icons.map(s=>{let i;switch(s.substr(0,s.indexOf("-"))){case"ios":i="iOS STYLE";break;case"md":i="MATERIAL STYLE";break;case"logo":i="LOGO"}return t("div",{class:"toast-bar__section"},t("div",{class:"toast-bar__section-header"},t("h6",null,i)),t("div",{class:"btn-group"},t("div",{class:"btn btn--gray btn--small btn--icon"},t("i",{class:"ion ion-"+s})),t("a",{class:"btn btn--gray btn--small",download:`/ionicons/svg/${s}.svg`,href:`/ionicons/svg/${s}.svg`},t("i",{class:"ion ion-md-download"}),"SVG")))})),t("div",{class:`toast-bar ${this.selectedIcon?"isVisible":""} ${!this.selectedIcon&&this.hadIconOnce?"isHidden":""} ${this.hadIconOnce?"":"preload"}`,onClick:s=>s.stopPropagation()},t("div",{class:"container"},t("div",{class:"toast-bar--inner"},this.selectedIcon&&t("h4",null,this.selectedIcon.name),this.selectedIcon&&t("div",{class:"toast-bar__details"},t("div",{class:"toast-bar__section",style:{maxWidth:s+"px"}},t("div",{class:"toast-bar__section-header"},t("div",null,t("h6",null,"Web component code"),t("span",{class:"confirmation"},t("i",{class:"ion ion-md-checkmark"}),"Copied")),t("stencil-route-link",{url:`/usage#${i}-${this.selectedIcon.name}`,onClick:()=>this.toggleHeaderSearch.emit("hide")},"Usage",t("i",{class:"ion ion-ios-arrow-forward"}))),t("code",null,t("span",{class:"hover-highlight",onClick:()=>this.handleCodeClick(o)},"<",t("span",{class:"yellow"},"ion-icon")," ",t("span",{class:"orange"},"name"),"=",t("span",{class:"green"},`"${o}"`),">","</",t("span",{class:"yellow"},"ion-icon"),">"))),a))))}get el(){return o(this)}static get style(){return"toast-bar .toast-bar{position:fixed;padding:12px 0;left:0;bottom:0;width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}toast-bar .toast-bar.isVisible{-webkit-animation-name:slideIn;animation-name:slideIn;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:1}\@-webkit-keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}\@keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}toast-bar .toast-bar.isHidden{-webkit-animation-name:slideOut;animation-name:slideOut;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}\@keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}toast-bar .toast-bar.preload{opacity:0}toast-bar .toast-bar--inner{background-color:var(--color-shark);height:80px;border-radius:15px;padding:0 20px 0 30px;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08);box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08)}toast-bar .toast-bar--inner h4{color:#fff;margin:0;white-space:nowrap;margin-right:30px}toast-bar .toast-bar__details{-ms-flex:1 0 auto;flex:1 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}toast-bar .toast-bar__section-header,toast-bar .toast-bar__section-header>div{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}toast-bar .toast-bar__section-header{height:10px;margin-bottom:7px}toast-bar .toast-bar__section-header h6{display:inline-block}toast-bar .toast-bar__section-header a{-webkit-transition:border .3s;transition:border .3s;color:var(--color-melrose);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border-bottom:1px solid transparent}toast-bar .toast-bar__section-header a:hover{border-bottom-color:var(--color-melrose-dark)}toast-bar .toast-bar__section-header i{margin-left:3px}toast-bar .toast-bar__section:not(:first-child){margin-left:20px}toast-bar .toast-bar__section:first-child{position:relative;max-width:none}toast-bar .toast-bar__details code{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;line-height:14px;height:32px;padding:0 12px;cursor:text;overflow:hidden}\@supports (display:grid){toast-bar .toast-bar__section:not(:first-child){-ms-flex:0;flex:0}toast-bar .toast-bar__section:first-child{-ms-flex:1;flex:1}toast-bar .toast-bar__details code{overflow-x:auto}}toast-bar .toast-bar__details code>span{position:absolute;white-space:nowrap}toast-bar .toast-bar__section .confirmation{font-size:11px;font-family:Eina;font-weight:600;color:#aec6ff;display:-ms-flexbox;display:flex;opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px);margin-left:12px}toast-bar .toast-bar__section .confirmation .ion{color:#aec6ff;font-size:14px;margin-right:4px}toast-bar .toast-bar__section.copied .confirmation{-webkit-animation-name:slideInOut;animation-name:slideInOut;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}\@keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}toast-bar .toast-bar__details code:hover .hover-highlight{background-color:#5882b2}\@media screen and (max-width:768px){toast-bar .toast-bar__section:not(:first-child){display:none}}\@media screen and (max-width:540px){toast-bar .toast-bar--inner{padding:16px;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;height:auto}toast-bar .toast-bar--inner h4{margin:0 0 16px}toast-bar .toast-bar__section{max-width:100%!important}toast-bar .toast-bar__details{-ms-flex:0 0 auto;flex:0 0 auto;width:100%}}"}};export{a as toast_bar};
\ No newline at end of file
+import{r as s,c as i,h as t,g as o}from"./p-5f00bf62.js";const a=class{constructor(t){s(this,t),this.hadIconOnce=!1,this.clearToast=i(this,"clearToast",7),this.toggleHeaderSearch=i(this,"toggleHeaderSearch",7)}handleCodeClick(s){const i=this.el.querySelector(".toast-bar__section:first-child"),t=document.createElement("textarea");t.value=`<ion-icon name="${s}"></ion-icon>`,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),this.showCopiedConfirm&&(window.clearTimeout(this.showCopiedConfirm),this.showCopiedConfirm=0),i.classList.add("copied"),this.showCopiedConfirm=window.setTimeout(()=>{i.classList.remove("copied"),this.showCopiedConfirm=0},1500)}componentDidLoad(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),!1),this.el.addEventListener("touchend",this.handleTouchEnd.bind(this),!1)}handleTouchStart(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchStartY=s.changedTouches[0].screenY)}handleTouchEnd(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchEndY=s.changedTouches[0].screenY,this.touchEndY>this.touchStartY&&this.clearToast.emit())}render(){let s,i,o,a=null;return this.selectedIcon&&(this.hadIconOnce||(this.hadIconOnce=!0),o=this.selectedIcon.name,"logo"===(i=this.selectedIcon.icons[0].startsWith("logo-")?"logo":this.selectedIconType)&&(o="logo-"+o),s=8*`<ion-icon name="${o}"></ion-icon>`.length+32,a=this.selectedIcon.icons.map(s=>{let i;switch(s.substr(0,s.indexOf("-"))){case"ios":i="iOS STYLE";break;case"md":i="MATERIAL STYLE";break;case"logo":i="LOGO"}return t("div",{class:"toast-bar__section"},t("div",{class:"toast-bar__section-header"},t("h6",null,i)),t("div",{class:"btn-group"},t("div",{class:"btn btn--gray btn--small btn--icon"},t("i",{class:"ion ion-"+s})),t("a",{class:"btn btn--gray btn--small",download:`/v4/ionicons/svg/${s}.svg`,href:`/v4/ionicons/svg/${s}.svg`},t("i",{class:"ion ion-md-download"}),"SVG")))})),t("div",{class:`toast-bar ${this.selectedIcon?"isVisible":""} ${!this.selectedIcon&&this.hadIconOnce?"isHidden":""} ${this.hadIconOnce?"":"preload"}`,onClick:s=>s.stopPropagation()},t("div",{class:"container"},t("div",{class:"toast-bar--inner"},this.selectedIcon&&t("h4",null,this.selectedIcon.name),this.selectedIcon&&t("div",{class:"toast-bar__details"},t("div",{class:"toast-bar__section",style:{maxWidth:s+"px"}},t("div",{class:"toast-bar__section-header"},t("div",null,t("h6",null,"Web component code"),t("span",{class:"confirmation"},t("i",{class:"ion ion-md-checkmark"}),"Copied")),t("stencil-route-link",{url:`/usage#${i}-${this.selectedIcon.name}`,onClick:()=>this.toggleHeaderSearch.emit("hide")},"Usage",t("i",{class:"ion ion-ios-arrow-forward"}))),t("code",null,t("span",{class:"hover-highlight",onClick:()=>this.handleCodeClick(o)},"<",t("span",{class:"yellow"},"ion-icon")," ",t("span",{class:"orange"},"name"),"=",t("span",{class:"green"},`"${o}"`),">","</",t("span",{class:"yellow"},"ion-icon"),">"))),a))))}get el(){return o(this)}static get style(){return"toast-bar .toast-bar{position:fixed;padding:12px 0;left:0;bottom:0;width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}toast-bar .toast-bar.isVisible{-webkit-animation-name:slideIn;animation-name:slideIn;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:1}\@-webkit-keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}\@keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}toast-bar .toast-bar.isHidden{-webkit-animation-name:slideOut;animation-name:slideOut;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}\@keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}toast-bar .toast-bar.preload{opacity:0}toast-bar .toast-bar--inner{background-color:var(--color-shark);height:80px;border-radius:15px;padding:0 20px 0 30px;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08);box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08)}toast-bar .toast-bar--inner h4{color:#fff;margin:0;white-space:nowrap;margin-right:30px}toast-bar .toast-bar__details{-ms-flex:1 0 auto;flex:1 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}toast-bar .toast-bar__section-header,toast-bar .toast-bar__section-header>div{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}toast-bar .toast-bar__section-header{height:10px;margin-bottom:7px}toast-bar .toast-bar__section-header h6{display:inline-block}toast-bar .toast-bar__section-header a{-webkit-transition:border .3s;transition:border .3s;color:var(--color-melrose);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border-bottom:1px solid transparent}toast-bar .toast-bar__section-header a:hover{border-bottom-color:var(--color-melrose-dark)}toast-bar .toast-bar__section-header i{margin-left:3px}toast-bar .toast-bar__section:not(:first-child){margin-left:20px}toast-bar .toast-bar__section:first-child{position:relative;max-width:none}toast-bar .toast-bar__details code{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;line-height:14px;height:32px;padding:0 12px;cursor:text;overflow:hidden}\@supports (display:grid){toast-bar .toast-bar__section:not(:first-child){-ms-flex:0;flex:0}toast-bar .toast-bar__section:first-child{-ms-flex:1;flex:1}toast-bar .toast-bar__details code{overflow-x:auto}}toast-bar .toast-bar__details code>span{position:absolute;white-space:nowrap}toast-bar .toast-bar__section .confirmation{font-size:11px;font-family:Eina;font-weight:600;color:#aec6ff;display:-ms-flexbox;display:flex;opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px);margin-left:12px}toast-bar .toast-bar__section .confirmation .ion{color:#aec6ff;font-size:14px;margin-right:4px}toast-bar .toast-bar__section.copied .confirmation{-webkit-animation-name:slideInOut;animation-name:slideInOut;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}\@keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}toast-bar .toast-bar__details code:hover .hover-highlight{background-color:#5882b2}\@media screen and (max-width:768px){toast-bar .toast-bar__section:not(:first-child){display:none}}\@media screen and (max-width:540px){toast-bar .toast-bar--inner{padding:16px;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;height:auto}toast-bar .toast-bar--inner h4{margin:0 0 16px}toast-bar .toast-bar__section{max-width:100%!important}toast-bar .toast-bar__details{-ms-flex:0 0 auto;flex:0 0 auto;width:100%}}"}};export{a as toast_bar};
diff --git a/docs/v4/build/p-i2s3rn6x.entry.js b/docs/v4/build/p-i2s3rn6x.entry.js
index a3ff42c..603ec97 100644
--- a/docs/v4/build/p-i2s3rn6x.entry.js
+++ b/docs/v4/build/p-i2s3rn6x.entry.js
@@ -1 +1 @@
-import{r as s,c as i,h as t,g as o}from"./p-5f00bf62.js";const a=class{constructor(t){s(this,t),this.hadIconOnce=!1,this.clearToast=i(this,"clearToast",7),this.toggleHeaderSearch=i(this,"toggleHeaderSearch",7)}handleCodeClick(s){const i=this.el.querySelector(".toast-bar__section:first-child"),t=document.createElement("textarea");t.value=`<ion-icon name="${s}"></ion-icon>`,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),this.showCopiedConfirm&&(window.clearTimeout(this.showCopiedConfirm),this.showCopiedConfirm=0),i.classList.add("copied"),this.showCopiedConfirm=window.setTimeout(()=>{i.classList.remove("copied"),this.showCopiedConfirm=0},1500)}componentDidLoad(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),!1),this.el.addEventListener("touchend",this.handleTouchEnd.bind(this),!1)}handleTouchStart(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchStartY=s.changedTouches[0].screenY)}handleTouchEnd(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchEndY=s.changedTouches[0].screenY,this.touchEndY>this.touchStartY&&this.clearToast.emit())}render(){let s,i,o,a=null;return this.selectedIcon&&(this.hadIconOnce||(this.hadIconOnce=!0),o=this.selectedIcon.name,"logo"===(i=this.selectedIcon.icons[0].startsWith("logo-")?"logo":this.selectedIconType)&&(o="logo-"+o),s=8*`<ion-icon name="${o}"></ion-icon>`.length+32,a=this.selectedIcon.icons.map(s=>{let i;switch(s.substr(0,s.indexOf("-"))){case"ios":i="iOS STYLE";break;case"md":i="MATERIAL STYLE";break;case"logo":i="LOGO"}return t("div",{class:"toast-bar__section"},t("div",{class:"toast-bar__section-header"},t("h6",null,i)),t("div",{class:"btn-group"},t("div",{class:"btn btn--gray btn--small btn--icon"},t("i",{class:"ion ion-"+s})),t("a",{class:"btn btn--gray btn--small",download:`/ionicons/svg/${s}.svg`,href:`/ionicons/svg/${s}.svg`},t("i",{class:"ion ion-md-download"}),"SVG")))})),t("div",{class:`toast-bar ${this.selectedIcon?"isVisible":""} ${!this.selectedIcon&&this.hadIconOnce?"isHidden":""} ${this.hadIconOnce?"":"preload"}`,onClick:s=>s.stopPropagation()},t("div",{class:"container"},t("div",{class:"toast-bar--inner"},this.selectedIcon&&t("h4",null,this.selectedIcon.name),this.selectedIcon&&t("div",{class:"toast-bar__details"},t("div",{class:"toast-bar__section",style:{maxWidth:s+"px"}},t("div",{class:"toast-bar__section-header"},t("div",null,t("h6",null,"Web component code"),t("span",{class:"confirmation"},t("i",{class:"ion ion-md-checkmark"}),"Copied")),t("stencil-route-link",{url:`/usage#${i}-${this.selectedIcon.name}`,onClick:()=>this.toggleHeaderSearch.emit("hide")},"Usage",t("i",{class:"ion ion-ios-arrow-forward"}))),t("code",null,t("span",{class:"hover-highlight",onClick:()=>this.handleCodeClick(o)},"<",t("span",{class:"yellow"},"ion-icon")," ",t("span",{class:"orange"},"name"),"=",t("span",{class:"green"},`"${o}"`),">","</",t("span",{class:"yellow"},"ion-icon"),">"))),a))))}get el(){return o(this)}static get style(){return"toast-bar .toast-bar{position:fixed;padding:12px 0;left:0;bottom:0;width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}toast-bar .toast-bar.isVisible{-webkit-animation-name:slideIn;animation-name:slideIn;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:1}\@-webkit-keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}\@keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}toast-bar .toast-bar.isHidden{-webkit-animation-name:slideOut;animation-name:slideOut;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}\@keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}toast-bar .toast-bar.preload{opacity:0}toast-bar .toast-bar--inner{background-color:var(--color-shark);height:80px;border-radius:15px;padding:0 20px 0 30px;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08);box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08)}toast-bar .toast-bar--inner h4{color:#fff;margin:0;white-space:nowrap;margin-right:30px}toast-bar .toast-bar__details{-ms-flex:1 0 auto;flex:1 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}toast-bar .toast-bar__section-header,toast-bar .toast-bar__section-header>div{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}toast-bar .toast-bar__section-header{height:10px;margin-bottom:7px}toast-bar .toast-bar__section-header h6{display:inline-block}toast-bar .toast-bar__section-header a{-webkit-transition:border .3s;transition:border .3s;color:var(--color-melrose);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border-bottom:1px solid transparent}toast-bar .toast-bar__section-header a:hover{border-bottom-color:var(--color-melrose-dark)}toast-bar .toast-bar__section-header i{margin-left:3px}toast-bar .toast-bar__section:not(:first-child){margin-left:20px}toast-bar .toast-bar__section:first-child{position:relative;max-width:none}toast-bar .toast-bar__details code{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;line-height:14px;height:32px;padding:0 12px;cursor:text;overflow:hidden}\@supports (display:grid){toast-bar .toast-bar__section:not(:first-child){-ms-flex:0;flex:0}toast-bar .toast-bar__section:first-child{-ms-flex:1;flex:1}toast-bar .toast-bar__details code{overflow-x:auto}}toast-bar .toast-bar__details code>span{position:absolute;white-space:nowrap}toast-bar .toast-bar__section .confirmation{font-size:11px;font-family:Eina;font-weight:600;color:#aec6ff;display:-ms-flexbox;display:flex;opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px);margin-left:12px}toast-bar .toast-bar__section .confirmation .ion{color:#aec6ff;font-size:14px;margin-right:4px}toast-bar .toast-bar__section.copied .confirmation{-webkit-animation-name:slideInOut;animation-name:slideInOut;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}\@keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}toast-bar .toast-bar__details code:hover .hover-highlight{background-color:#5882b2}\@media screen and (max-width:768px){toast-bar .toast-bar__section:not(:first-child){display:none}}\@media screen and (max-width:540px){toast-bar .toast-bar--inner{padding:16px;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;height:auto}toast-bar .toast-bar--inner h4{margin:0 0 16px}toast-bar .toast-bar__section{max-width:100%!important}toast-bar .toast-bar__details{-ms-flex:0 0 auto;flex:0 0 auto;width:100%}}"}};export{a as toast_bar};
\ No newline at end of file
+import{r as s,c as i,h as t,g as o}from"./p-5f00bf62.js";const a=class{constructor(t){s(this,t),this.hadIconOnce=!1,this.clearToast=i(this,"clearToast",7),this.toggleHeaderSearch=i(this,"toggleHeaderSearch",7)}handleCodeClick(s){const i=this.el.querySelector(".toast-bar__section:first-child"),t=document.createElement("textarea");t.value=`<ion-icon name="${s}"></ion-icon>`,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),this.showCopiedConfirm&&(window.clearTimeout(this.showCopiedConfirm),this.showCopiedConfirm=0),i.classList.add("copied"),this.showCopiedConfirm=window.setTimeout(()=>{i.classList.remove("copied"),this.showCopiedConfirm=0},1500)}componentDidLoad(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),!1),this.el.addEventListener("touchend",this.handleTouchEnd.bind(this),!1)}handleTouchStart(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchStartY=s.changedTouches[0].screenY)}handleTouchEnd(s){s.target.classList.contains("toast-bar--inner")&&(s.preventDefault(),this.touchEndY=s.changedTouches[0].screenY,this.touchEndY>this.touchStartY&&this.clearToast.emit())}render(){let s,i,o,a=null;return this.selectedIcon&&(this.hadIconOnce||(this.hadIconOnce=!0),o=this.selectedIcon.name,"logo"===(i=this.selectedIcon.icons[0].startsWith("logo-")?"logo":this.selectedIconType)&&(o="logo-"+o),s=8*`<ion-icon name="${o}"></ion-icon>`.length+32,a=this.selectedIcon.icons.map(s=>{let i;switch(s.substr(0,s.indexOf("-"))){case"ios":i="iOS STYLE";break;case"md":i="MATERIAL STYLE";break;case"logo":i="LOGO"}return t("div",{class:"toast-bar__section"},t("div",{class:"toast-bar__section-header"},t("h6",null,i)),t("div",{class:"btn-group"},t("div",{class:"btn btn--gray btn--small btn--icon"},t("i",{class:"ion ion-"+s})),t("a",{class:"btn btn--gray btn--small",download:`/v4/ionicons/svg/${s}.svg`,href:`/v4/ionicons/svg/${s}.svg`},t("i",{class:"ion ion-md-download"}),"SVG")))})),t("div",{class:`toast-bar ${this.selectedIcon?"isVisible":""} ${!this.selectedIcon&&this.hadIconOnce?"isHidden":""} ${this.hadIconOnce?"":"preload"}`,onClick:s=>s.stopPropagation()},t("div",{class:"container"},t("div",{class:"toast-bar--inner"},this.selectedIcon&&t("h4",null,this.selectedIcon.name),this.selectedIcon&&t("div",{class:"toast-bar__details"},t("div",{class:"toast-bar__section",style:{maxWidth:s+"px"}},t("div",{class:"toast-bar__section-header"},t("div",null,t("h6",null,"Web component code"),t("span",{class:"confirmation"},t("i",{class:"ion ion-md-checkmark"}),"Copied")),t("stencil-route-link",{url:`/usage#${i}-${this.selectedIcon.name}`,onClick:()=>this.toggleHeaderSearch.emit("hide")},"Usage",t("i",{class:"ion ion-ios-arrow-forward"}))),t("code",null,t("span",{class:"hover-highlight",onClick:()=>this.handleCodeClick(o)},"<",t("span",{class:"yellow"},"ion-icon")," ",t("span",{class:"orange"},"name"),"=",t("span",{class:"green"},`"${o}"`),">","</",t("span",{class:"yellow"},"ion-icon"),">"))),a))))}get el(){return o(this)}static get style(){return"toast-bar .toast-bar{position:fixed;padding:12px 0;left:0;bottom:0;width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}toast-bar .toast-bar.isVisible{-webkit-animation-name:slideIn;animation-name:slideIn;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:1}\@-webkit-keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}\@keyframes slideIn{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}toast-bar .toast-bar.isHidden{-webkit-animation-name:slideOut;animation-name:slideOut;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-timing-function:var(--easeOutExpo);animation-timing-function:var(--easeOutExpo);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}\@keyframes slideOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}99%{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}toast-bar .toast-bar.preload{opacity:0}toast-bar .toast-bar--inner{background-color:var(--color-shark);height:80px;border-radius:15px;padding:0 20px 0 30px;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08);box-shadow:0 16px 32px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.08)}toast-bar .toast-bar--inner h4{color:#fff;margin:0;white-space:nowrap;margin-right:30px}toast-bar .toast-bar__details{-ms-flex:1 0 auto;flex:1 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}toast-bar .toast-bar__section-header,toast-bar .toast-bar__section-header>div{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}toast-bar .toast-bar__section-header{height:10px;margin-bottom:7px}toast-bar .toast-bar__section-header h6{display:inline-block}toast-bar .toast-bar__section-header a{-webkit-transition:border .3s;transition:border .3s;color:var(--color-melrose);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border-bottom:1px solid transparent}toast-bar .toast-bar__section-header a:hover{border-bottom-color:var(--color-melrose-dark)}toast-bar .toast-bar__section-header i{margin-left:3px}toast-bar .toast-bar__section:not(:first-child){margin-left:20px}toast-bar .toast-bar__section:first-child{position:relative;max-width:none}toast-bar .toast-bar__details code{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;line-height:14px;height:32px;padding:0 12px;cursor:text;overflow:hidden}\@supports (display:grid){toast-bar .toast-bar__section:not(:first-child){-ms-flex:0;flex:0}toast-bar .toast-bar__section:first-child{-ms-flex:1;flex:1}toast-bar .toast-bar__details code{overflow-x:auto}}toast-bar .toast-bar__details code>span{position:absolute;white-space:nowrap}toast-bar .toast-bar__section .confirmation{font-size:11px;font-family:Eina;font-weight:600;color:#aec6ff;display:-ms-flexbox;display:flex;opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px);margin-left:12px}toast-bar .toast-bar__section .confirmation .ion{color:#aec6ff;font-size:14px;margin-right:4px}toast-bar .toast-bar__section.copied .confirmation{-webkit-animation-name:slideInOut;animation-name:slideInOut;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}\@-webkit-keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}\@keyframes slideInOut{0%{opacity:0;-webkit-transform:translateY(5px);transform:translateY(5px)}10%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}90%{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-5px);transform:translateY(-5px)}}toast-bar .toast-bar__details code:hover .hover-highlight{background-color:#5882b2}\@media screen and (max-width:768px){toast-bar .toast-bar__section:not(:first-child){display:none}}\@media screen and (max-width:540px){toast-bar .toast-bar--inner{padding:16px;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;height:auto}toast-bar .toast-bar--inner h4{margin:0 0 16px}toast-bar .toast-bar__section{max-width:100%!important}toast-bar .toast-bar__details{-ms-flex:0 0 auto;flex:0 0 auto;width:100%}}"}};export{a as toast_bar};