@nanoporetech-digital/components 1.13.13 → 1.13.14

package/dist/nano-components/p-0298347c.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-89a5c54a.system.js"],(function(t){"use strict";var o,e,r,i;return{setters:[function(t){o=t.r;e=t.h;r=t.g},function(t){i=t.h}],execute:function(){var n=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:.25;--scrim-opacity-to:.7;--padding:0;color:var(--theme-color)}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var s=t("nano_hero",function(){function t(t){var r=this;o(this,t);this.isLegacy=false;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.HeroContent=function(){return[!r.hasIconBox&&r.hasCtas?e("div",{class:"hero__ctas"},e("slot",{name:"secondary-ctas"})):"",e("div",{class:"hero__scrim"},e("slot",{name:"scrim"})),e("nano-grid",{class:"hero__content",xlCols:2,xlSize:r.largeScreenBP},e("nano-grid-item",{gridStates:"xl-col-span-2"},e("div",{class:"hero__breadcrumbs"},e("slot",{name:"breadcrumb"}))),e("nano-grid-item",{gridStates:r.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},e("div",{class:"hero__primary"},e("div",{class:"hero__primary-content"},e("slot",{name:"back-btn"}),e("div",null,e("slot",{name:"primary-content"}))))),r.hasSecondaryContent&&e("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},e("div",{class:"hero__secondary"},e("slot",{name:"secondary-content"}),r.hasIconBox&&e("div",{class:"hero__icon-box"},e("slot",{name:"icon-box"}),e("slot",{name:"icon-box-item"})),r.hasQuote&&e("div",{class:"hero__quote-content"},e("span",{class:"hero__quote"},e("slot",{name:"quote"})),e("div",{class:"hero__quote-author"},e("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!i(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return e("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":t,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},e("div",{class:"hero__bg-wrap"},!!this.imgSrc&&e("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},e(this.HeroContent,null)),!this.imgSrc&&[e("div",{class:"hero__bg-slot"},e("slot",{name:"background"})),e(this.HeroContent,null)]))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}());s.style=n}}}));
-//# sourceMappingURL=p-0298347c.system.entry.js.map

package/dist/nano-components/p-0298347c.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","hostRef","_this","this","isLegacy","imgSrcSet","largeScreenBP","theme","level","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"gMAAA,IAAMA,EAAU,mpOC+BHC,EAAIC,EAAA,YAAA,WALjB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,eAOUA,KAAAC,SAAW,MA4CXD,KAAAE,UAAqB,KAGrBF,KAAAG,cAAwB,IAGxBH,KAAAI,MAA0B,OAG1BJ,KAAAK,MAAuB,MAiDvBL,KAAAM,YAAc,WACpB,MAAO,EACJP,EAAKQ,YAAcR,EAAKS,QACvBC,EAAA,MAAA,CAAKC,MAAM,cACTD,EAAA,OAAA,CAAME,KAAK,oBACP,GAIRF,EAAA,MAAA,CAAKC,MAAM,eACTD,EAAA,OAAA,CAAME,KAAK,WAEbF,EAAA,YAAA,CAAWC,MAAM,gBAAgBE,OAAQ,EAAGC,OAAQd,EAAKI,eACvDM,EAAA,iBAAA,CAAgBK,WAAW,iBACzBL,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,OAAA,CAAME,KAAK,iBAGfF,EAAA,iBAAA,CACEK,WACEf,EAAKgB,oBACD,8CACA,+CAGNN,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,MAAA,CAAKC,MAAM,yBACTD,EAAA,OAAA,CAAME,KAAK,aACXF,EAAA,MAAA,KACEA,EAAA,OAAA,CAAME,KAAK,wBAKlBZ,EAAKgB,qBACJN,EAAA,iBAAA,CAAgBK,WAAW,+CACzBL,EAAA,MAAA,CAAKC,MAAM,mBACTD,EAAA,OAAA,CAAME,KAAK,sBACVZ,EAAKQ,YACJE,EAAA,MAAA,CAAKC,MAAM,kBACTD,EAAA,OAAA,CAAME,KAAK,aACXF,EAAA,OAAA,CAAME,KAAK,mBAGdZ,EAAKiB,UACJP,EAAA,MAAA,CAAKC,MAAM,uBACTD,EAAA,OAAA,CAAMC,MAAM,eACVD,EAAA,OAAA,CAAME,KAAK,WAEbF,EAAA,MAAA,CAAKC,MAAM,sBACTD,EAAA,OAAA,CAAME,KAAK,wBA3I7Bd,EAAAoB,UAAAC,iBAAA,WAEElB,KAAKmB,YACFC,QACC,SAACC,GACC,OAAAA,EAAMC,UAAY,MACjBD,EAAME,mBAAmBC,UAAUC,SAAS,YAEhDC,SAAQ,SAACL,GACRA,EAAMM,mBACJ,WACA,sDAMR9B,EAAAoB,UAAAW,kBAAA,WACE5B,KAAK6B,aAAaH,SAAQ,SAACI,GAAS,OAAAA,EAAKN,UAAUO,OAAO,WAC1D,GACE/B,KAAK6B,aAAa7B,KAAK6B,aAAaG,OAAS,IAC7ChC,KAAK6B,aAAa7B,KAAK6B,aAAaG,OAAS,GAAGR,UAEhDxB,KAAK6B,aAAa7B,KAAK6B,aAAaG,OAAS,GAAGR,UAAUS,IAAI,SAmB1DpC,EAAAoB,UAAAiB,mBAAA,WAAA,IAAAnC,EAAAC,KACN,GAAIA,KAAKmC,GAAInC,KAAKmC,GAAGC,aACrB,IAAMD,EAAMnC,KAAKmC,GAAK,IAAIE,kBAAiB,WACzC,OAAAtC,EAAKuC,2BAEPH,EAAGI,QAAQvC,KAAKwC,KAAM,CAAEC,UAAW,QAG7B5C,EAAAoB,UAAAqB,sBAAA,WACNtC,KAAKQ,UAAYR,KAAKwC,KAAKE,cAAc,2BACzC1C,KAAK6B,aAAec,MAAMC,KACxB5C,KAAKwC,KAAKK,iBAAiB,2BAE7B7C,KAAKO,aACDP,KAAKwC,KAAKE,cAAc,wBACxB1C,KAAK6B,aAAaG,OACtBhC,KAAK8C,WAAa9C,KAAKwC,KAAKE,cAAc,kBAC1C1C,KAAKmB,YAAcwB,MAAMC,KACvB5C,KAAKwC,KAAKK,iBAAiB,wBAE7B7C,KAAKe,sBACDf,KAAKwC,KAAKE,cAAc,wBACxB1C,KAAKwC,KAAKE,cAAc,qBACxB1C,KAAKwC,KAAKE,cAAc,6BACxB1C,KAAKwC,KAAKE,cAAc,8BAC5B1C,KAAK+C,QACD/C,KAAKwC,KAAKE,cAAc,0BAA4B1C,KAAKgD,OAC7DhD,KAAKiD,aAAejD,KAAKwC,KAAKE,cAAc,qBAC5C1C,KAAKgB,WAAahB,KAAKwC,KAAKE,cAAc,mBAG5C7C,EAAAoB,UAAAiC,kBAAA,WACElD,KAAKC,UAAYkD,EAAanD,KAAKwC,OAGrC3C,EAAAoB,UAAAmC,qBAAA,WACE,GAAIpD,KAAKmC,GAAInC,KAAKmC,GAAGC,cAGvBvC,EAAAoB,UAAAoC,iBAAA,WACErD,KAAKkC,sBAGPrC,EAAAoB,UAAAqC,kBAAA,WACEtD,KAAKsC,yBAgEPzC,EAAAoB,UAAAsC,OAAA,WACE,IAAMC,EACJxD,KAAKwC,KAAKiB,MAAQ,OACjBzD,KAAKwC,KAAKkB,cAA2BD,MAAQ,MAEhD,OACEhD,EAAA,MAAA,CACEC,MAAO,CACLiD,KAAM,KACNC,cAAe5D,KAAKI,QAAU,QAC9ByD,kBAAmB7D,KAAKe,oBACxB+C,gBAAiB9D,KAAKO,WACtBwD,YAAaP,EACbQ,cAAehE,KAAK8C,SACpBmB,eAAgBjE,KAAKC,SACrBiE,qBAAsBlE,KAAKmB,YAAYa,OACvCmC,cAAenE,KAAK+C,MACpBqB,gBAAiBpE,KAAKiD,WACtBoB,YAAarE,KAAKK,QAAU,QAG9BI,EAAA,MAAA,CAAKC,MAAM,mBACNV,KAAKgD,QACNvC,EAAA,WAAA,CACEC,MAAM,YACN4D,KAAM,MACNC,WAAU,KACVC,OAAQxE,KAAKE,UACbuE,IAAKzE,KAAKgD,QAEVvC,EAACT,KAAKM,YAAW,QAGnBN,KAAKgD,QAAU,CACfvC,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,CAAME,KAAK,gBAEbF,EAACT,KAAKM,YAAW,sSA1MZ","sourcesContent":["@import \"../../global/style/utilities/globals\";\n@import \"../../global/style/nano-theme/colours\";\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n  */\n\n  display: block;\n\n  --nano-loader-base: #{$color-black};\n  --nano-loader-tint: #{lighten($color-black, 20%)};\n  --theme-color: #{$color-white};\n  --theme-tint-color: #{$color-lightblue};\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: .25;\n  --scrim-opacity-to: .7;\n  --padding: 0;\n\n  color: var(--theme-color);\n}\n\n:host([theme=\"light\"]) {\n  --nano-loader-base: #{$color-white};\n  --nano-loader-tint: #{lighten($color-white, 20%)};\n  --theme-color: #{$color-black};\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: .25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n  .hero__primary-content {\n    --color: #{$color-black};\n  }\n}\n\n.hero {\n  position: relative;\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n  &__bg-wrap {\n    overflow: hidden;\n  }\n  &__bg-slot {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n    @media (max-width: 58em) {\n      margin-bottom: -48px;\n    }\n    display: flex;\n    justify-content: flex-end;\n    padding: 32px 32px 0;\n    margin-bottom: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot=\"secondary-ctas\"]),\n    &::slotted(a.button[slot=\"secondary-ctas\"]) {\n      padding: .25rem .5rem !important;\n      font-size: .875rem !important;\n      margin: 0 .25rem !important;\n    }\n  }\n  &__img {\n    display: block;\n    --padding: inherit;\n  }\n  &__breadcrumbs {\n    display: none;\n    margin: 20px 14px 0;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    .is-xl & {\n      margin: 0 50px;\n      max-width: 50%;\n    }\n    .is-xxl & {\n      margin: 0 83px;\n    }\n\n    ::slotted(*[slot=\"breadcrumb\"]),\n    &::slotted(*[slot=\"breadcrumb\"]) {\n      font-size: .85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-bottom: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n    ::slotted(a[slot=\"breadcrumb\"]),\n    &::slotted(a[slot=\"breadcrumb\"]) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n    ::slotted(.slash[slot=\"breadcrumb\"]),\n    &::slotted(.slash[slot=\"breadcrumb\"]) {\n      color: var(--theme-color);\n      position: relative;\n      margin: 0 .5rem;\n      display: inline-block;\n    }\n  }\n  &__scrim {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: 0;\n    background: linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%);\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n  &__content {\n    max-width: 1440px;\n    --grid-row-gap: 0;\n    margin: 0 auto;\n    position: relative;\n\n    &.is-xl {\n      margin-top: 50px;\n      max-width: 1540px;\n    }\n    &.is-xxl {\n      margin-top: 83px;\n      max-width: 1606px;\n    }\n  }\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin: 0 16px;\n    }\n    .hero--backbtn & {\n      margin-left: 0;\n    }\n\n    ::slotted(nano-icon-button[slot=\"back-btn\"]),\n    &::slotted(nano-icon-button[slot=\"back-btn\"]) {\n      font-size: 2rem;\n    }\n\n    .is-xl & {\n      margin: 0 0 50px 50px;\n\n      ::slotted(nano-icon-button[slot=\"back-btn\"]),\n      &::slotted(nano-icon-button[slot=\"back-btn\"]) {\n        @include margin(0, 0, 0, -3rem);\n      }\n    }\n    .is-xxl & {\n      margin: 0 0 83px 83px;\n    }\n  }\n  &__primary-content {\n    max-width: 45rem;\n    --color: #ffffff;\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding: 10px 0 0 0;\n      }\n    }\n\n    ::slotted(h1[slot=\"primary-content\"]),\n    &::slotted(h1[slot=\"primary-content\"]) {\n      line-height: 26px!important;\n      margin-top: 0!important;\n      margin-bottom:18px!important;\n      font-size: 2rem!important;\n    }\n    .is-xl & {\n      ::slotted(h1[slot=\"primary-content\"]),\n      &::slotted(h1[slot=\"primary-content\"]) {\n        line-height: 31px!important;\n        margin-bottom: 30px!important;\n      }\n      ::slotted(.button[slot=\"primary-content\"]),\n      &::slotted(.button[slot=\"primary-content\"]) {\n        margin-top: 20px!important;\n      }\n    }\n\n  }\n  &__secondary {\n    display: none;\n    height: 100%;\n    padding: 0 14px 20px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    .is-xl & {\n      padding: 0 50px 50px;\n      justify-content: flex-end;\n    }\n    .is-xxl & {\n      padding: 0 83px 83px;\n    }\n  }\n  &__icon-box {\n    background: rgba(0, 0, 0, 0.7);\n    padding: 24px;\n    width: 100%;\n    margin-bottom: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    .is-xl & {\n      max-width: 410px;\n      flex: 0 1 410px;\n    }\n\n    // for silly IE\n    &::slotted([slot=\"icon-box-item\"] nano-icon) {\n      color: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n    }\n    ::slotted([slot=\"icon-box-item\"]) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: .8125rem;\n      margin-bottom: 20px;\n    }\n    ::slotted(.last[slot=\"icon-box-item\"]),\n    &::slotted(.last[slot=\"icon-box-item\"]) {\n      margin-bottom: 0;\n    }\n  }\n  &__quote-content {\n    margin-top: auto;\n    text-align: center;\n    width: 100%;\n\n    .is-xl & {\n      max-width: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n  &__quote {\n    &::before, &::after {\n      content: '\"';\n      font-size: 2.5rem;\n      font-weight: 700;\n      font-style: italic;\n      color: #abb6b8;\n      display: inline;\n    }\n    ::slotted([slot=\"quote\"]),\n    &::slotted([slot=\"quote\"]) {\n      font-size: 32px;\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n\n      .is-xl & {\n        font-size: 42px;\n      }\n    }\n  }\n  &__quote-author {\n    text-align: right;\n    text-align: end;\n    font-size: 1rem;\n    opacity: .8;\n  }\n  &--sub {\n    .hero__content.is-xl {\n      margin-top: 40px;\n      .hero__primary {\n        margin: 0 0 40px 50px;\n      }\n      .hero__secondary {\n        padding: 0 50px 50px 40px;\n      }\n      ::slotted(.button[slot=\"primary-content\"]),\n      &::slotted(.button[slot=\"primary-content\"]) {\n        margin-top: 8px!important;\n      }\n      ::slotted(h1[slot=\"primary-content\"]),\n      &::slotted(h1[slot=\"primary-content\"]) {\n        margin-bottom: 18px!important;\n      }\n    }\n    .hero__content.is-xxl {\n      .hero__primary {\n        margin: 0 0 40px 83px;\n      }\n      .hero__secondary {\n        padding: 0 83px 83px 40px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n  private isLegacy = false;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for backgronund image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  connectedCallback() {\n    this.isLegacy = !hasShadowDom(this.host);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <nano-grid-item gridStates=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </nano-grid-item>\n        <nano-grid-item\n          gridStates={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </nano-grid-item>\n        {this.hasSecondaryContent && (\n          <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </nano-grid-item>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <div\n        class={{\n          hero: true,\n          'hero--light': this.theme === 'light',\n          'hero--secondary': this.hasSecondaryContent,\n          'hero--iconbox': this.hasIconBox,\n          'hero--rtl': rtl,\n          'hero--scrim': this.hasScrim,\n          'hero--legacy': this.isLegacy,\n          'hero--breadcrumb': !!this.breadCrumbs.length,\n          'hero--hasbg': this.hasBg,\n          'hero--backbtn': this.hasBackBtn,\n          'hero--sub': this.level === 'sub',\n        }}\n      >\n        <div class=\"hero__bg-wrap\">\n          {!!this.imgSrc && (\n            <nano-img\n              class=\"hero__img\"\n              lazy={false}\n              background\n              srcSet={this.imgSrcSet}\n              src={this.imgSrc}\n            >\n              <this.HeroContent />\n            </nano-img>\n          )}\n          {!this.imgSrc && [\n            <div class=\"hero__bg-slot\">\n              <slot name=\"background\" />\n            </div>,\n            <this.HeroContent />,\n          ]}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-03775d12.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js"],(function(t){"use strict";var e,o;return{setters:[function(t){e=t.r;o=t.h}],execute:function(){var i=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}.aspect-ratio{position:relative}.aspect-ratio ::slotted(*){position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}.aspect-ratio--cover ::slotted(embed),.aspect-ratio--cover ::slotted(iframe),.aspect-ratio--cover ::slotted(img),.aspect-ratio--cover ::slotted(video){-o-object-fit:cover !important;object-fit:cover !important}.aspect-ratio--contain ::slotted(embed),.aspect-ratio--contain ::slotted(iframe),.aspect-ratio--contain ::slotted(img),.aspect-ratio--contain ::slotted(video){-o-object-fit:contain !important;object-fit:contain !important}";var a=t("nano_aspect_ratio",function(){function t(t){var o=this;e(this,t);this.aspectRatio="16:9";this.fit="cover";this.handleSlotChange=function(){o.setAspectRatio()}}t.prototype.handleAspectRatioChange=function(){this.setAspectRatio()};t.prototype.setAspectRatio=function(){var t=this.aspectRatio.split(":");var e=parseInt(t[0]);var o=parseInt(t[1]);this.base.style.paddingBottom=e&&o?o/e*100+"%":null};t.prototype.render=function(){var t=this;return o("div",{ref:function(e){return t.base=e},part:"base",class:{"aspect-ratio":true,"aspect-ratio--cover":this.fit==="cover","aspect-ratio--contain":this.fit==="contain"}},o("slot",{onSlotchange:this.handleSlotChange}))};Object.defineProperty(t,"watchers",{get:function(){return{aspectRatio:["handleAspectRatioChange"]}},enumerable:false,configurable:true});return t}());a.style=i}}}));
-//# sourceMappingURL=p-03775d12.system.entry.js.map

package/dist/nano-components/p-03775d12.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","src/components/aspect-ratio/aspect-ratio.tsx"],"names":["aspectRatioCss","AspectRadio","exports","class_1","hostRef","_this","this","aspectRatio","fit","handleSlotChange","setAspectRatio","prototype","handleAspectRatioChange","split","x","parseInt","y","base","style","paddingBottom","render","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":"0IAAA,IAAMA,EAAiB,svBCaVC,EAAWC,EAAA,oBAAA,WALxB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,eAUUA,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,WACzBJ,EAAKK,kBALPP,EAAAQ,UAAAC,wBAAA,WACEN,KAAKI,kBAOCP,EAAAQ,UAAAD,eAAA,WACN,IAAMG,EAAQP,KAAKC,YAAYM,MAAM,KACrC,IAAMC,EAAIC,SAASF,EAAM,IACzB,IAAMG,EAAID,SAASF,EAAM,IACzBP,KAAKW,KAAKC,MAAMC,cAAgBL,GAAKE,EAAQA,EAAIF,EAAK,IAAG,IAAM,MAGjEX,EAAAQ,UAAAS,OAAA,WAAA,IAAAf,EAAAC,KACE,OACEe,EAAA,MAAA,CACEC,IAAK,SAACC,GAAE,OAAMlB,EAAKY,KAAOM,GAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBrB,KAAKE,MAAQ,QACpCoB,wBAAyBtB,KAAKE,MAAQ,YAGxCa,EAAA,OAAA,CAAMQ,aAAcvB,KAAKG,uKArCT","sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true,\n})\nexport class AspectRadio implements ComponentInterface {\n  base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  };\n\n  private setAspectRatio() {\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.base = el)}\n        part=\"base\"\n        class={{\n          'aspect-ratio': true,\n          'aspect-ratio--cover': this.fit === 'cover',\n          'aspect-ratio--contain': this.fit === 'contain',\n        }}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-038efc59.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as r,e as i,g as a}from"./p-7a6bc3c5.js";import{u as s,l as o}from"./p-5af040f4.js";import{M as n}from"./p-8c9e74c7.js";import"./p-a0ddf496.js";import"./p-a5917bdc.js";let l=0;const h=class{constructor(r){t(this,r),this.nanoShow=e(this,"nano-show",7),this.nanoAfterShow=e(this,"nano-after-show",7),this.nanoHide=e(this,"nano-hide",7),this.nanoAfterHide=e(this,"nano-after-hide",7),this.nanoOverlayDismiss=e(this,"nano-overlay-dismiss",7),this.componentId="drawer-"+ ++l,this.hasFooter=!1,this.isVisible=!1,this.open=!1,this.label="",this.placement="end",this.contained=!1,this.noHeader=!1,this.type="overlay"}handleOpenChange(){this.open?this.show():this.hide()}handleTypeChange(){if("push"===this.type||"reveal"===this.type)return this.contentEle?void 0:(this.type="overlay",void console.warn("a valid contentSelector must be set"))}handleContentSelector(){this.contentEle=this.contentSelector?this.host.ownerDocument.querySelector(this.contentSelector):null}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this),this.handleTransitionEnd=this.handleTransitionEnd.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleOverlayClick=this.handleOverlayClick.bind(this),this.handleSlotChange=this.handleSlotChange.bind(this),this.modal=new n(this.host)}componentWillLoad(){this.open&&this.show(),this.handleContentSelector()}disconnectedCallback(){s(this.host)}async show(){this.isVisible||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,this.contained||(this.modal.activate(),o(this.host)),!this.contentEle||"push"!==this.type&&"reveal"!==this.type||(this.contentEle.style.right="0",this.contentEle.style.transition="all ease 250ms",this.contentEle.style.position="relative",this.contentEle.style.overflow="hidden",setTimeout((()=>this.contentEle.style.right="25rem"),0))))}async hide(){this.isVisible&&(this.nanoHide.emit().defaultPrevented?this.open=!0:(this.open=!1,this.modal.deactivate(),s(this.host),this.contentEle&&(this.contentEle.style.transition="",this.contentEle.style.position="",this.contentEle.style.overflow="",this.contentEle.style.right="")))}handleCloseClick(){this.hide()}handleKeyDown(t){"Escape"===t.key&&this.hide()}handleOverlayClick(){this.nanoOverlayDismiss.emit().defaultPrevented||this.hide()}handleSlotChange(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')}handleTransitionEnd(t){"transform"===t.propertyName&&t.target.classList.contains("drawer__panel")&&(this.isVisible=this.open,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open&&this.panel.focus())}render(){return r(i,{dir:"rtl"===this.host.ownerDocument.dir?"rtl":null},r("div",{ref:t=>this.drawer=t,part:"base",class:{drawer:!0,"drawer--open":this.open,"drawer--visible":this.isVisible,["drawer--"+this.type]:!0,["drawer--"+this.placement]:!0,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},r("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),r("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:0},!this.noHeader&&r("header",{part:"header",class:"drawer__header"},r("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},r("slot",{name:"label"},this.label||String.fromCharCode(65279)))),r("div",{part:"body",class:"drawer__body"},r("slot",null)),r("footer",{part:"footer",class:"drawer__footer"},r("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}}};h.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";export{h as nano_drawer}
-//# sourceMappingURL=p-038efc59.entry.js.map

package/dist/nano-components/p-038efc59.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/drawer/drawer.tsx","src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow"],"names":["id","Drawer","[object Object]","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","show","hide","contentEle","console","warn","contentSelector","host","ownerDocument","querySelector","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","handleContentSelector","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","nanoHide","deactivate","event","key","nanoOverlayDismiss","propertyName","target","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","h","Host","dir","ref","el","drawer","part","class","drawer--open","drawer--visible","drawer--contained","drawer--fixed","drawer--has-footer","onKeyDown","onTransitionEnd","onClick","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n  public drawer: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event({ eventName: 'nano-show' }) nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event({ eventName: 'nano-after-show' }) nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event({ eventName: 'nano-hide' }) nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event({ eventName: 'nano-after-hide' }) nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event({ eventName: 'nano-overlay-dismiss' })\n  nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          ref={(el) => (this.drawer = el)}\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\n                  <slot name=\"label\">\n                    {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                    {this.label || String.fromCharCode(65279)}\n                  </slot>\n                </span>\n                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n :host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n  \n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}"]}

package/dist/nano-components/p-03aea014.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o}from"./p-7a6bc3c5.js";const s=class{constructor(o){t(this,o),this.optId="nano-option-"+i++,this.label="",this.value="",this.selected=!1,this.disabled=!1}render(){return o("div",{id:this.optId,role:"option","data-value":this.value,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},o("slot",{name:"start"}),this.label?this.label:o("slot",null),o("slot",{name:"end"}))}};let i=0;s.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{display:none !important}:host *{display:none !important}";export{s as nano_select_option}
-//# sourceMappingURL=p-03aea014.entry.js.map

package/dist/nano-components/p-03aea014.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/select/select-option.scss?tag=nano-select-option&encapsulation=shadow","src/components/select/select-option.tsx"],"names":["SelectOption","[object Object]","hostRef","this","optId","optIds","label","value","selected","disabled","h","id","role","data-value","aria-selected","aria-disabled","name"],"mappings":"2CAAA,MCSaA,EAAY,MALzBC,YAAAC,aAMUC,KAAAC,MAAQ,eAAeC,IAOvBF,KAAAG,MAAgB,GAKhBH,KAAAI,MAAgB,GAKhBJ,KAAAK,UAAoB,EAKpBL,KAAAM,UAAoB,EAE5BR,SACE,OACES,EAAA,MAAA,CACEC,GAAIR,KAAKC,MACTQ,KAAK,SAAQC,aACDV,KAAKI,MAAKO,gBACPX,KAAKK,SAAW,OAAS,QAAOO,gBAChCZ,KAAKM,SAAW,OAAS,SAExCC,EAAA,OAAA,CAAMM,KAAK,UACVb,KAAKG,MAAQH,KAAKG,MAAQI,EAAA,OAAA,MAC3BA,EAAA,OAAA,CAAMM,KAAK,WAMnB,IAAIX,EAAS,UDnDW","sourcesContent":["@import '../../global/style/utilities/globals';\n\n:host {\n  // for now.. as it doesn't work.\n  display: none !important;\n  \n  * {\n    display: none !important;\n  }\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n\n  // opacity: inherit;\n  // display: block;\n  // color: var(--color) !important;\n  // margin: var(--margin);\n\n  // ::slotted(*),\n  // &::slotted(*),\n  // * {\n  //   box-sizing: border-box;\n  // }\n\n  // ::slotted(button),\n  // &::slotted(button),\n  // button {\n  //   background: none;\n  //   border: none;\n  // }\n\n  // ::slotted(button),\n  // &::slotted(button),\n  // ::slotted(a),\n  // &::slotted(a),\n  // button,\n  // a {\n  //   @include text-inherit();\n  //   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n  //   display: var(--display, block);\n  //   white-space: nowrap;\n\n  //   color: var(--color) !important;\n  //   background-color: var(--bg-color);\n  //   display: block;\n  // }\n\n  // ::slotted(nano-icon[slot=\"icon-start\"]) {\n  //   @include padding(null, var(--padding-end), null, null);\n  // }\n\n  // ::slotted(nano-icon[slot=\"icon-end\"]) {\n  //   @include padding(null, null, null, var(--padding-start));\n  // }\n}","import { Component, Prop, h } from '@stencil/core';\n/**\n * Select options to be used with [select](/story/nano-components-select) elements\n */\n@Component({\n  tag: 'nano-select-option',\n  styleUrl: 'select-option.scss',\n  shadow: true,\n})\nexport class SelectOption {\n  private optId = `nano-option-${optIds++}`;\n\n  // @Element() private el: HTMLNanoSelectOptionElement;\n\n  /**\n   * Label of the option\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Value of the option\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        id={this.optId}\n        role=\"option\"\n        data-value={this.value}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot name=\"start\" />\n        {this.label ? this.label : <slot />}\n        <slot name=\"end\" />\n      </div>\n    );\n  }\n}\n\nlet optIds = 0;\n"]}

package/dist/nano-components/p-0421488e.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-12a93bc3.system.js","./p-a057ad2d.system.js","./p-89a5c54a.system.js"],(function(t){"use strict";var o,n,e,r,i,a,s,c,l,d;return{setters:[function(t){o=t.r;n=t.c;e=t.i;r=t.f;i=t.h;a=t.e;s=t.g},function(t){c=t.i},function(t){l=t.c},function(t){d=t.d}],execute:function(){var b=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #F9F9FB);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height .2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #0084a9));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--btn-text-color--open:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-text-color--hover:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff))}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);color:inherit;display:inline-block;text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';var h=t("nano_details",function(){function t(t){var e=this;o(this,t);this.nanoOpened=n(this,"nanoOpened",7);this.nanoClosed=n(this,"nanoClosed",7);this.slideId="nano-details-"+u++;this.stateChanging=false;this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.onKeyDown=function(t){switch(t.key){case"Enter":case" ":e.open=!e.open;break}};this.onMouseDown=function(){if(e.stateChanging)return;e.open=!e.open}}t.prototype.toggleClick=function(){this.stateChanging=true;if(this.open)this.show();else this.hide()};t.prototype.hide=function(){var t=this;this.nanoClosed.emit(this.open);d(this.contentEl,"is-shown",false).then((function(){return t.stateChanging=false}));this.contentEl.style.height="0px"};t.prototype.show=function(){var t=this;this.nanoOpened.emit();d(this.contentEl,"is-shown",true).then((function(){return t.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"};t.prototype.resize=function(){var t=this;if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;e((function(){if(t.contentArea.scrollHeight>0){r((function(){t.contentEl.style.height=t.contentArea.scrollHeight+"px"}))}}))};t.prototype.componentWillLoad=function(){var t=this;this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((function(){t.isLoading=false}),100)};t.prototype.componentDidLoad=function(){var t=this;if(this.open){setTimeout((function(){t.show()}),0)}};t.prototype.connectedCallback=function(){var t=this;var o=this.mo=new MutationObserver((function(){return t.resize()}));o.observe(this.el,{childList:true,subtree:true,attributes:true});var n=this.ro=new c((function(){return t.resize()}));n.observe(this.el)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()};t.prototype.render=function(){var t=this;return i(a,{class:Object.assign({},l(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""}},this.hasStartSlot?i("span",{class:"icon icon--start",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{class:"icon icon--end",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:function(o){return t.contentEl=o},tabindex:"-1",id:this.slideId},i("div",{ref:function(o){return t.contentArea=o},class:"content__area"},i("slot",null)))))};Object.defineProperty(t.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["toggleClick"]}},enumerable:false,configurable:true});return t}());var u=0;h.style=b}}}));
-//# sourceMappingURL=p-0421488e.system.entry.js.map

package/dist/nano-components/p-0421488e.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","exports","class_1","hostRef","_this","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","prototype","toggleClick","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","resize","readTask","writeTask","componentWillLoad","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","componentDidLoad","connectedCallback","mo","MutationObserver","observe","childList","subtree","attributes","ro","ResizeObserver","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{$color-offwhite});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n  --padding: 1em;\n\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{$color-offwhite});\n\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height .2s ease-out;\n\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-text-color--hover: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n}\n\nbutton {\n  @include input-cover;\n  padding: var(--btn-padding);\n  color: inherit;\n  display: inline-block;\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: .3s ease background, .3s ease color, .15s ease box-shadow;\n\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: .3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      @include margin(0, var(--padding), 0, 0);\n    }\n\n    &--end {\n      @include margin(0, 0, 0, var(--padding));\n\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: .2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), .2s ease border-radius;\n  }\n\n  >* {\n    opacity: 0;\n    transition: opacity .2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, displayTransition } from '../../utils/utils';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          // this.contentEl.style.transition = 'none';\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n          // this.contentEl.style.transition = '';\n        });\n      }\n    });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: true });\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n          >\n            {this.hasStartSlot ? (\n              <span\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}

package/dist/nano-components/p-072bce75.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,a,o,n){function e(t){return t instanceof o?t:new o((function(a){a(t)}))}return new(o||(o=Promise))((function(o,r){function i(t){try{l(n.next(t))}catch(a){r(a)}}function s(t){try{l(n["throw"](t))}catch(a){r(a)}}function l(t){t.done?o(t.value):e(t.value).then(i,s)}l((n=n.apply(t,a||[])).next())}))};var __generator=this&&this.__generator||function(t,a){var o={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,e,r,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(t){return function(a){return l([t,a])}}function l(i){if(n)throw new TypeError("Generator is already executing.");while(o)try{if(n=1,e&&(r=i[0]&2?e["return"]:i[0]?e["throw"]||((r=e["return"])&&r.call(e),0):e.next)&&!(r=r.call(e,i[1])).done)return r;if(e=0,r)i=[i[0]&2,r.value];switch(i[0]){case 0:case 1:r=i;break;case 4:o.label++;return{value:i[1],done:false};case 5:o.label++;e=i[1];i=[0];continue;case 7:i=o.ops.pop();o.trys.pop();continue;default:if(!(r=o.trys,r=r.length>0&&r[r.length-1])&&(i[0]===6||i[0]===2)){o=0;continue}if(i[0]===3&&(!r||i[1]>r[0]&&i[1]<r[3])){o.label=i[1];break}if(i[0]===6&&o.label<r[1]){o.label=r[1];r=i;break}if(r&&o.label<r[2]){o.label=r[2];o.ops.push(i);break}if(r[2])o.ops.pop();o.trys.pop();continue}i=a.call(t,o)}catch(s){i=[6,s];e=0}finally{n=r=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-3b21dfce.system.js","./p-12a93bc3.system.js","./p-f00d0c25.system.js","./p-b346b2cb.system.js","./p-89a5c54a.system.js","./p-c58dee82.system.js","./p-3d1c1c19.system.js","./p-a057ad2d.system.js","./p-d4454d55.system.js","./p-22b50344.system.js"],(function(t){"use strict";var a,o,n,e,r,i,s,l,c,b,d,u;return{setters:[function(t){a=t.r;o=t.c;n=t.h;e=t.e;r=t.g},function(t){i=t.i},function(t){s=t.s},function(t){l=t.f},function(t){c=t.d},function(t){b=t.C},function(t){d=t.a},function(t){u=t.c},function(){},function(){}],execute:function(){var p=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:5px;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#0084a9;--shadow-opacity:0.1;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--tab-indicator-size:var(--indicator-size);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#0084a9;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--tab-text-color:rgba(var(--nano-color-base-rgb), .7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #007090))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease;transition:var(--indicator-transition) transform ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0px;mask-position:0px;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius)}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';var h=t("nano_tab_group",function(){function t(t){var n=this;a(this,t);this.nanoTabShow=o(this,"nanoTabShow",7);this.nanoTabHide=o(this,"nanoTabHide",7);this.initialTouchX=null;this.initialTouchY=null;this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.isLegacy=!document.head.attachShadow;this.placement="top";this.noScrollControls=false;this.storeMethod="session";this.updateScrollControls=function(){if(n.noScrollControls){n.hasScrollControls=false}else{n.hasScrollControls=["top"].includes(n.placement)&&n.nav.scrollWidth>n.nav.clientWidth&&n.nav.scrollWidth>n.tabs.clientWidth}};this.handleClick=function(t){var a=t.target;var o=a.closest("nano-tab");if(o)n.setActiveTab(o)};this.handleKeyDown=function(t){if(["Enter"," "].includes(t.key)){var a=t.target;var o=a.closest("nano-tab");if(o){n.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){var e=document.activeElement;if(e&&e.tagName.toLowerCase()==="nano-tab"){var r=n.getAllTabs();var i=r.indexOf(e);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(n.isRtl&&t.key==="ArrowRight"||!n.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(n.isRtl&&t.key==="ArrowLeft"||!n.isRtl&&t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus();if(["top"].includes(n.placement)){s(r[i],n.nav,"horizontal","center")}t.preventDefault()}}};this.handleTabScroll=function(){if(!n.hasScrollControls){n.hideControlLeft=n.hideControlRight=true;return}var t=n.isRtl?n.nav.scrollLeft===0:n.nav.scrollWidth-n.nav.scrollLeft===n.nav.clientWidth;var a=n.isRtl?n.nav.scrollWidth+n.nav.scrollLeft===n.nav.clientWidth:n.nav.scrollLeft===0;if(a){n.hideControlLeft=true;n.hideControlRight=false}else if(t){n.hideControlLeft=false;n.hideControlRight=true}else{n.hideControlRight=false;n.hideControlLeft=false}};this.handleBtnClick=function(t){if(t===void 0){t=false}var a=n.getNavWidth();var o;if(t)o=n.nav.scrollLeft+a-20;else o=n.nav.scrollLeft-a+20;try{n.nav.scroll({left:o,behavior:"smooth"})}catch(e){n.nav.scrollLeft=o}};this.handleTouchStart=function(t){var a=t.changedTouches[0];n.initialTouchX=a.pageX;n.initialTouchY=a.pageY};this.handleTouchEnd=function(t){var a=t.changedTouches[0];var o=a.pageX-n.initialTouchX;var e=a.pageY-n.initialTouchY;var r=70;var i=n.initialTouchX-a.clientX;var s=n.initialTouchY-a.clientY;var l=Math.abs(o)>=r&&Math.abs(e)<=r;var c=n.getAllTabs();var b=c.findIndex((function(t){return t.active}));if(l){var d=o<0&&n.placement==="top"||o>0&&n.placement!=="top"?1:-1;if(c[b+d]){n.setActiveTab(c[b+d]);if(Math.abs(i)>Math.abs(s)){if(i>0)n.activePanel.setAttribute("animation-dir","left");else n.activePanel.setAttribute("animation-dir","right")}}}n.initialTouchX=null;n.initialTouchY=null}}t.prototype.handleTabNameChange=function(){var t=this;if(this.activeTab&&this.activeTab.panel===this.tab)return;var a=this.getAllTabs().find((function(a){return a.panel===t.tab}));this.setActiveTab(a)};t.prototype.handlePlacementChange=function(){this.syncActiveTabIndicator()};t.prototype.handleNoScrollControlsChange=function(){this.updateScrollControls()};t.prototype.hideRightBtn=function(){if(!this.rightBtn)return;c(this.rightBtn,"is-shown",!this.hideControlRight)};t.prototype.hideLeftBtn=function(){if(!this.leftBtn)return;c(this.leftBtn,"is-shown",!this.hideControlLeft)};t.prototype.watchScrollControls=function(){var t=this;if(this.hasScrollControls)setTimeout((function(a){return t.handleTabScroll()}),20);else setTimeout((function(a){t.hideControlLeft=t.hideControlRight=true}),20)};t.prototype.show=function(t){return __awaiter(this,void 0,void 0,(function(){var a,o;return __generator(this,(function(n){if(this.activeTab&&this.activeTab.panel===t)return[2];a=this.getAllTabs();o=a.find((function(a){return a.panel===t}));if(o)this.setActiveTab(o);return[2]}))}))};t.prototype.getAllTabs=function(t){if(t===void 0){t=false}var a=Array.from(this.host.querySelectorAll("nano-tab"));if(t)return a;return a.filter((function(t){return!t.disabled}))};t.prototype.getAllPanels=function(){return Array.from(this.host.querySelectorAll("nano-tab-content"))};t.prototype.getActiveTab=function(){return this.getAllTabs().find((function(t){return t.active}))};t.prototype.setActiveTab=function(t,a){var o=this;if(a===void 0){a=true}if(t&&t!==this.activeTab&&!t.disabled){var n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllTabs().map((function(t){return t.active=t===o.activeTab}));this.getAllPanels().map((function(t){if(t.name===o.activeTab.panel){t.active=true;o.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}};t.prototype.setAriaLabels=function(){var t=this.getAllTabs();var a=this.getAllPanels();t.map((function(t){var o=a.find((function(a){return a.name===t.panel}));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))};t.prototype.syncActiveTabIndicator=function(){var t=this;this.getAllTabs(true).forEach((function(a){return a.setAttribute("direction",t.placement==="top"?"horizontal":"vertical")}));var a=this.getActiveTab();var o=a.clientWidth;var n=a.clientHeight;var e=d(a,this.nav);var r=e.top+this.nav.scrollTop;var i=e.left+this.nav.scrollLeft;switch(this.placement){case"top":this.activeTabIndicator.style.width=o+"px";this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform="translateX("+i+"px)";break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=n+"px";this.activeTabIndicator.style.transform="translateY("+r+"px)";break}};t.prototype.getNavWidth=function(){if(!this.nav)return 0;var t=getComputedStyle(this.nav);var a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)};t.prototype.componentDidLoad=function(){var t=this;var a=new IntersectionObserver((function(a,o){if(a[0].intersectionRatio>0){t.setAriaLabels();t.setActiveTab(t.getActiveTab()||t.getAllTabs()[0],false);if(t.storeId)b.init(t,["tab"],t.storeMethod,t.storeId);o.unobserve(a[0].target)}}));a.observe(this.host);l.observe(this.tabGroup);if(this.leftBtn){l.observe(this.leftBtn);l.observe(this.rightBtn)}this.resizeObserver=new i((function(){return t.updateScrollControls()}));this.resizeObserver.observe(this.nav);this.mutationObserver=new MutationObserver((function(a){if(a.some((function(t){return!["aria-labelledby","aria-controls"].includes(t.attributeName)}))){setTimeout((function(){return t.setAriaLabels()}))}setTimeout((function(){return t.handleTabScroll()}),500)}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true});requestAnimationFrame((function(){return t.updateScrollControls()}))};t.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};t.prototype.disconnectedCallback=function(){if(this.mutationObserver)this.mutationObserver.disconnect();l.unobserve(this.tabGroup);if(this.leftBtn){l.unobserve(this.leftBtn);l.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)};t.prototype.render=function(){var t=this;this.isRtl=this.host.ownerDocument.dir==="rtl";return n(e,{class:Object.assign(Object.assign({},u(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},n("div",{part:"base",ref:function(a){return t.tabGroup=a},class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{class:"nano-tab-group__nav-container"},this.placement==="top"&&n("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:function(a){return t.leftBtn=a},onClick:function(){return t.handleBtnClick(false)}},n("nano-icon",{name:"light/chevron-left"})),n("div",{ref:function(a){return t.nav=a},key:"nav",part:"nav",class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:function(a){return t.tabs=a},part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},n("div",{ref:function(a){return t.activeTabIndicator=a},part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs"}))),this.placement==="top"&&n("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:function(a){return t.rightBtn=a},onClick:function(){return t.handleBtnClick(true)}},n("nano-icon",{name:"light/chevron-right"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",null))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}},enumerable:false,configurable:true});return t}());h.style=p}}}));
-//# sourceMappingURL=p-072bce75.system.entry.js.map

package/dist/nano-components/p-072bce75.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","exports","class_1","hostRef","_this","this","initialTouchX","initialTouchY","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllTabs","index_1","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","prototype","handleTabNameChange","activeTab","panel","find","handlePlacementChange","syncActiveTabIndicator","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","setTimeout","_","show","includeDisabled","Array","from","host","querySelectorAll","filter","disabled","getAllPanels","getActiveTab","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","setAriaLabels","panels","getAttribute","forEach","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","observe","focusVisible","tabGroup","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","mutations","some","mutation","attributeName","attributes","childList","subtree","requestAnimationFrame","connectedCallback","dir","ownerDocument","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@import \"../../global/style/utilities/globals\";\n@import \"../../global/style/nano-theme/form\";\n@import \"../../global/style/nano-theme/base\";\n@import \"../../global/style/nano-theme/layers\";\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{$color-lightblue} on placement 'top' and #{$color-blue} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{$color-lightgrey};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentColor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{$color-blue} on placement 'top' and #{$color-darkgrey} on placement 'start';\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{$color-lightblue};\n  --indicator-track-color: #{$color-lightgrey};\n  --indicator-size: 5px;\n\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{$color-blue};\n\n  --shadow-opacity: 0.1;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --tab-indicator-size: var(--indicator-size);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{$color-lightblue};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\n  }\n}\n\n:host([placement=\"start\"]), :host([placement=\"end\"]) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{$color-darkgrey};\n  --indicator-color: #{$color-blue};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), .7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      left: 0;\n    }\n\n    &--right {\n      right: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity)) ;\n        height: 10px;\n        position: absolute;\n        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(var(--tabs-padding-top), var(--tabs-padding-end), var(--tabs-padding-bottom), var(--tabs-padding-start));\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n      mask-repeat: no-repeat;\n      mask-image: linear-gradient(\n        to left,\n        rgba(0,0,0,0) 0,\n        rgba(0,0,0,0) var(--tabs-padding-start),\n        rgba(0,0,0,1) calc(var(--tabs-padding-start) * 2),\n        rgba(0,0,0,1) calc(100% - (var(--tabs-padding-end) * 2)),\n        rgba(0,0,0,0) calc(100% - var(--tabs-padding-end)),\n        rgba(0,0,0,0)\n      );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n        @include padding(var(--tabs-padding-top), var(--tabs-padding-end), var(--tabs-padding-bottom), 0);\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0px;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n      @include border-radius(0, var(--content-border-radius), var(--content-border-radius), 0)\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n  displayTransition,\n  createColorClasses,\n  getOffset,\n} from '../../utils/utils';\nimport { Color } from '../../interface';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header = a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllTabs().find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  private getAllTabs(includeDisabled = false) {\n    const tabs = Array.from(this.host.querySelectorAll('nano-tab')) as [\n      HTMLNanoTabElement\n    ];\n    if (includeDisabled) return tabs;\n    return tabs.filter((el: any) => !el.disabled);\n  }\n\n  private getAllPanels() {\n    return Array.from(this.host.querySelectorAll('nano-tab-content')) as [\n      HTMLNanoTabContentElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (tab && tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n      // active tab can be changed on init - this won't be ready. No big thing\n      // try {\n      this.syncActiveTabIndicator();\n      if (['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n      // }\n      // catch(e) {}\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs(true).forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab();\n    const width = tab.clientWidth;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.nav);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left + this.nav.scrollLeft;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    var xDiff = this.initialTouchX - touch.clientX;\n    var yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllTabs();\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(\n            mutation.attributeName\n          );\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n      setTimeout(() => this.handleTabScroll(), 500);\n    });\n    this.mutationObserver.observe(this.host, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\">\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              key=\"nav\"\n              part=\"nav\"\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-0a29f13a.system.js

@@ -1,14 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(r,e){for(var t=0,n=e.length,a=r.length;t<n;t++,a++)r[a]=e[t];return r};System.register([],(function(r){"use strict";return{execute:function(){
-/**
-       * @license
-       * Copyright Google Inc. All Rights Reserved.
-       *
-       * Use of this source code is governed by an MIT-style license that can be
-       * found in the LICENSE file at https://angular.io/license
-       *
-       * This file is a port of shadowCSS from webcomponents.js to TypeScript.
-       * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
-       * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
-       */
-var e=function(r){var e=[];var t=0;var n;r=r.replace(/(\[[^\]]*\])/g,(function(r,n){var a="__ph-"+t+"__";e.push(n);t++;return a}));n=r.replace(/(:nth-[-\w]+)(\([^)]+\))/g,(function(r,n,a){var s="__ph-"+t+"__";e.push(a);t++;return n+s}));var a={content:n,placeholders:e};return a};var t=function(r,e){return e.replace(/__ph-(\d+)__/g,(function(e,t){return r[+t]}))};var n="-shadowcsshost";var a="-shadowcssslotted";var s="-shadowcsscontext";var c=")(?:\\(("+"(?:\\([^)(]*\\)|[^)(]*)+?"+")\\))?([^,{]*)";var o=new RegExp("("+n+c,"gim");var i=new RegExp("("+s+c,"gim");var v=new RegExp("("+a+c,"gim");var u=n+"-no-combinator";var l=/-shadowcsshost-no-combinator([^\s]*)/;var f=[/::shadow/g,/::content/g];var p="([>\\s~+[.,{:][\\s\\S]*)?$";var h=/-shadowcsshost/gim;var g=/:host/gim;var d=/::slotted/gim;var m=/:host-context/gim;var _=/\/\*\s*[\s\S]*?\*\//g;var x=function(r){return r.replace(_,"")};var w=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;var S=function(r){return r.match(w)||[]};var b=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;var W=/([{}])/g;var O="{";var j="}";var E="%BLOCK%";var R=function(r,e){var t=k(r);var n=0;return t.escapedString.replace(b,(function(){var r=[];for(var a=0;a<arguments.length;a++){r[a]=arguments[a]}var s=r[2];var c="";var o=r[4];var i="";if(o&&o.startsWith("{"+E)){c=t.blocks[n++];o=o.substring(E.length+1);i="{"}var v={selector:s,content:c};var u=e(v);return""+r[1]+u.selector+r[3]+i+u.content+o}))};var k=function(r){var e=r.split(W);var t=[];var n=[];var a=0;var s=[];for(var c=0;c<e.length;c++){var o=e[c];if(o===j){a--}if(a>0){s.push(o)}else{if(s.length>0){n.push(s.join(""));t.push(E);s=[]}t.push(o)}if(o===O){a++}}if(s.length>0){n.push(s.join(""));t.push(E)}var i={escapedString:t.join(""),blocks:n};return i};var y=function(r){r=r.replace(m,s).replace(g,n).replace(d,a);return r};var T=function(r,e,t){return r.replace(e,(function(){var r=[];for(var e=0;e<arguments.length;e++){r[e]=arguments[e]}if(r[2]){var n=r[2].split(",");var a=[];for(var s=0;s<n.length;s++){var c=n[s].trim();if(!c)break;a.push(t(u,c,r[3]))}return a.join(",")}else{return u+r[3]}}))};var A=function(r,e,t){return r+e.replace(n,"")+t};var C=function(r){return T(r,o,A)};var L=function(r,e,t){if(e.indexOf(n)>-1){return A(r,e,t)}else{return r+e+t+", "+e+" "+r+t}};var B=function(r,e){var t="."+e+" > ";var n=[];r=r.replace(v,(function(){var r=[];for(var e=0;e<arguments.length;e++){r[e]=arguments[e]}if(r[2]){var a=r[2].trim();var s=r[3];var c=t+a+s;var o="";for(var i=r[4]-1;i>=0;i--){var v=r[5][i];if(v==="}"||v===","){break}o=v+o}var l=o+c;var f=""+o.trimRight()+c.trim();if(l.trim()!==f.trim()){var p=f+", "+l;n.push({orgSelector:l,updatedSelector:p})}return c}else{return u+r[3]}}));return{selectors:n,cssText:r}};var I=function(r){return T(r,i,L)};var K=function(r){return f.reduce((function(r,e){return r.replace(e," ")}),r)};var $=function(r){var e=/\[/g;var t=/\]/g;r=r.replace(e,"\\[").replace(t,"\\]");return new RegExp("^("+r+")"+p,"m")};var M=function(r,e){var t=$(e);return!t.test(r)};var U=function(r,e,t){h.lastIndex=0;if(h.test(r)){var n="."+t;return r.replace(l,(function(r,e){return e.replace(/([^:]*)(:*)(.*)/,(function(r,e,t,a){return e+n+t+a}))})).replace(h,n+" ")}return e+" "+r};var q=function(r,n,a){var s=/\[is=([^\]]*)\]/g;n=n.replace(s,(function(r){var e=[];for(var t=1;t<arguments.length;t++){e[t-1]=arguments[t]}return e[0]}));var c="."+n;var o=function(r){var e=r.trim();if(!e){return""}if(r.indexOf(u)>-1){e=U(r,n,a)}else{var t=r.replace(h,"");if(t.length>0){var s=t.match(/([^:]*)(:*)(.*)/);if(s){e=s[1]+c+s[2]+s[3]}}}return e};var i=e(r);r=i.content;var v="";var l=0;var f;var p=/( |>|\+|~(?!=))\s*/g;var g=r.indexOf(u)>-1;var d=!g;while((f=p.exec(r))!==null){var m=f[1];var _=r.slice(l,f.index).trim();d=d||_.indexOf(u)>-1;var x=d?o(_):_;v+=x+" "+m+" ";l=p.lastIndex}var w=r.substring(l);d=d||w.indexOf(u)>-1;v+=d?o(w):w;return t(i.placeholders,v)};var z=function(r,e,t,n){return r.split(",").map((function(r){if(n&&r.indexOf("."+n)>-1){return r.trim()}if(M(r,e)){return q(r,e,t).trim()}else{return r.trim()}})).join(", ")};var D=function(r,e,t,n,a){return R(r,(function(r){var a=r.selector;var s=r.content;if(r.selector[0]!=="@"){a=z(r.selector,e,t,n)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){s=D(r.content,e,t,n)}var c={selector:a.replace(/\s{2,}/g," ").trim(),content:s};return c}))};var F=function(r,e,t,n,a){r=y(r);r=C(r);r=I(r);var s=B(r,n);r=s.cssText;r=K(r);if(e){r=D(r,e,t,n)}r=r.replace(/-shadowcsshost-no-combinator/g,"."+t);r=r.replace(/>\s*\*\s+([^{, ]+)/gm," $1 ");return{cssText:r.trim(),slottedSelectors:s.selectors}};var G=r("scopeCss",(function(r,e,t){var n=e+"-h";var a=e+"-s";var s=S(r);r=x(r);var c=[];if(t){var o=function(r){var e="/*!@___"+c.length+"___*/";var t="/*!@"+r.selector+"*/";c.push({placeholder:e,comment:t});r.selector=e+r.selector;return r};r=R(r,(function(r){if(r.selector[0]!=="@"){return o(r)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){r.content=R(r.content,o);return r}return r}))}var i=F(r,e,n,a);r=__spreadArray([i.cssText],s).join("\n");if(t){c.forEach((function(e){var t=e.placeholder,n=e.comment;r=r.replace(t,n)}))}i.slottedSelectors.forEach((function(e){r=r.replace(e.orgSelector,e.updatedSelector)}));return r}))}}}));
-//# sourceMappingURL=p-0a29f13a.system.js.map

package/dist/nano-components/p-0a29f13a.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/@stencil/core/internal/client/shadow-css.js"],"names":["safeSelector","selector","placeholders","index","content","replace","_","keep","replaceBy","push","pseudo","exp","ss","restoreSafeSelector","_polyfillHost","_polyfillSlotted","_polyfillHostContext","_parenSuffix","_cssColonHostRe","RegExp","_cssColonHostContextRe","_cssColonSlottedRe","_polyfillHostNoCombinator","_polyfillHostNoCombinatorRe","_shadowDOMSelectorsRe","_selectorReSuffix","_polyfillHostRe","_colonHostRe","_colonSlottedRe","_colonHostContextRe","_commentRe","stripComments","input","_commentWithHashRe","extractCommentsWithHash","match","_ruleRe","_curlyRe","OPEN_CURLY","CLOSE_CURLY","BLOCK_PLACEHOLDER","processRules","ruleCallback","inputWithEscapedBlocks","escapeBlocks","nextBlockIndex","escapedString","m","_i","arguments","length","suffix","contentPrefix","startsWith","blocks","substring","cssRule","rule","inputParts","split","resultParts","escapedBlocks","bracketCount","currentBlockParts","partIndex","part","join","strEscapedBlocks","insertPolyfillHostInCssText","convertColonRule","cssText","regExp","partReplacer","parts","r","i","p","trim","colonHostPartReplacer","host","convertColonHost","colonHostContextPartReplacer","indexOf","convertColonSlotted","slotScopeId","slotClass","selectors","compound","slottedSelector","prefixSelector","char","orgSelector","addedSelector","trimRight","updatedSelector","convertColonHostContext","convertShadowDOMSelectors","reduce","result","pattern","makeScopeMatcher","scopeSelector","lre","rre","selectorNeedsScoping","re","test","applySimpleSelectorScope","hostSelector","lastIndex","replaceBy_1","before","colon","after","applyStrictSelectorScope","isRe","className","_scopeSelectorPart","scopedP","t","matches","safeContent","scopedSelector","startIndex","res","sep","hasHost","shouldScope","exec","separator","part_1","slice","scopedPart","scopeSelectorText","slotSelector","map","shallowPart","scopeSelectors","commentOriginalSelector","scopeCssText","scopeId","hostScopeId","slotted","slottedSelectors","scopeCss","exports","commentsWithHash","orgSelectors","processCommentedSelector_1","placeholder","comment","scoped","__spreadArray","forEach","_a"],"mappings":"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","sourcesContent":["/*\n Stencil Client Platform v2.5.8 | MIT Licensed | https://stenciljs.com\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n *\n * This file is a port of shadowCSS from webcomponents.js to TypeScript.\n * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js\n * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts\n */\nconst safeSelector = (selector) => {\n    const placeholders = [];\n    let index = 0;\n    let content;\n    // Replaces attribute selectors with placeholders.\n    // The WS in [attr=\"va lue\"] would otherwise be interpreted as a selector separator.\n    selector = selector.replace(/(\\[[^\\]]*\\])/g, (_, keep) => {\n        const replaceBy = `__ph-${index}__`;\n        placeholders.push(keep);\n        index++;\n        return replaceBy;\n    });\n    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.\n    // WS and \"+\" would otherwise be interpreted as selector separators.\n    content = selector.replace(/(:nth-[-\\w]+)(\\([^)]+\\))/g, (_, pseudo, exp) => {\n        const replaceBy = `__ph-${index}__`;\n        placeholders.push(exp);\n        index++;\n        return pseudo + replaceBy;\n    });\n    const ss = {\n        content,\n        placeholders,\n    };\n    return ss;\n};\nconst restoreSafeSelector = (placeholders, content) => {\n    return content.replace(/__ph-(\\d+)__/g, (_, index) => placeholders[+index]);\n};\nconst _polyfillHost = '-shadowcsshost';\nconst _polyfillSlotted = '-shadowcssslotted';\n// note: :host-context pre-processed to -shadowcsshostcontext.\nconst _polyfillHostContext = '-shadowcsscontext';\nconst _parenSuffix = ')(?:\\\\((' + '(?:\\\\([^)(]*\\\\)|[^)(]*)+?' + ')\\\\))?([^,{]*)';\nconst _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');\nconst _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');\nconst _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');\nconst _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';\nconst _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\\s]*)/;\nconst _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];\nconst _selectorReSuffix = '([>\\\\s~+[.,{:][\\\\s\\\\S]*)?$';\nconst _polyfillHostRe = /-shadowcsshost/gim;\nconst _colonHostRe = /:host/gim;\nconst _colonSlottedRe = /::slotted/gim;\nconst _colonHostContextRe = /:host-context/gim;\nconst _commentRe = /\\/\\*\\s*[\\s\\S]*?\\*\\//g;\nconst stripComments = (input) => {\n    return input.replace(_commentRe, '');\n};\nconst _commentWithHashRe = /\\/\\*\\s*#\\s*source(Mapping)?URL=[\\s\\S]+?\\*\\//g;\nconst extractCommentsWithHash = (input) => {\n    return input.match(_commentWithHashRe) || [];\n};\nconst _ruleRe = /(\\s*)([^;\\{\\}]+?)(\\s*)((?:{%BLOCK%}?\\s*;?)|(?:\\s*;))/g;\nconst _curlyRe = /([{}])/g;\nconst OPEN_CURLY = '{';\nconst CLOSE_CURLY = '}';\nconst BLOCK_PLACEHOLDER = '%BLOCK%';\nconst processRules = (input, ruleCallback) => {\n    const inputWithEscapedBlocks = escapeBlocks(input);\n    let nextBlockIndex = 0;\n    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {\n        const selector = m[2];\n        let content = '';\n        let suffix = m[4];\n        let contentPrefix = '';\n        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {\n            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];\n            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);\n            contentPrefix = '{';\n        }\n        const cssRule = {\n            selector,\n            content,\n        };\n        const rule = ruleCallback(cssRule);\n        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;\n    });\n};\nconst escapeBlocks = (input) => {\n    const inputParts = input.split(_curlyRe);\n    const resultParts = [];\n    const escapedBlocks = [];\n    let bracketCount = 0;\n    let currentBlockParts = [];\n    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {\n        const part = inputParts[partIndex];\n        if (part === CLOSE_CURLY) {\n            bracketCount--;\n        }\n        if (bracketCount > 0) {\n            currentBlockParts.push(part);\n        }\n        else {\n            if (currentBlockParts.length > 0) {\n                escapedBlocks.push(currentBlockParts.join(''));\n                resultParts.push(BLOCK_PLACEHOLDER);\n                currentBlockParts = [];\n            }\n            resultParts.push(part);\n        }\n        if (part === OPEN_CURLY) {\n            bracketCount++;\n        }\n    }\n    if (currentBlockParts.length > 0) {\n        escapedBlocks.push(currentBlockParts.join(''));\n        resultParts.push(BLOCK_PLACEHOLDER);\n    }\n    const strEscapedBlocks = {\n        escapedString: resultParts.join(''),\n        blocks: escapedBlocks,\n    };\n    return strEscapedBlocks;\n};\nconst insertPolyfillHostInCssText = (selector) => {\n    selector = selector\n        .replace(_colonHostContextRe, _polyfillHostContext)\n        .replace(_colonHostRe, _polyfillHost)\n        .replace(_colonSlottedRe, _polyfillSlotted);\n    return selector;\n};\nconst convertColonRule = (cssText, regExp, partReplacer) => {\n    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule\n    return cssText.replace(regExp, (...m) => {\n        if (m[2]) {\n            const parts = m[2].split(',');\n            const r = [];\n            for (let i = 0; i < parts.length; i++) {\n                const p = parts[i].trim();\n                if (!p)\n                    break;\n                r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));\n            }\n            return r.join(',');\n        }\n        else {\n            return _polyfillHostNoCombinator + m[3];\n        }\n    });\n};\nconst colonHostPartReplacer = (host, part, suffix) => {\n    return host + part.replace(_polyfillHost, '') + suffix;\n};\nconst convertColonHost = (cssText) => {\n    return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);\n};\nconst colonHostContextPartReplacer = (host, part, suffix) => {\n    if (part.indexOf(_polyfillHost) > -1) {\n        return colonHostPartReplacer(host, part, suffix);\n    }\n    else {\n        return host + part + suffix + ', ' + part + ' ' + host + suffix;\n    }\n};\nconst convertColonSlotted = (cssText, slotScopeId) => {\n    const slotClass = '.' + slotScopeId + ' > ';\n    const selectors = [];\n    cssText = cssText.replace(_cssColonSlottedRe, (...m) => {\n        if (m[2]) {\n            const compound = m[2].trim();\n            const suffix = m[3];\n            const slottedSelector = slotClass + compound + suffix;\n            let prefixSelector = '';\n            for (let i = m[4] - 1; i >= 0; i--) {\n                const char = m[5][i];\n                if (char === '}' || char === ',') {\n                    break;\n                }\n                prefixSelector = char + prefixSelector;\n            }\n            const orgSelector = prefixSelector + slottedSelector;\n            const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;\n            if (orgSelector.trim() !== addedSelector.trim()) {\n                const updatedSelector = `${addedSelector}, ${orgSelector}`;\n                selectors.push({\n                    orgSelector,\n                    updatedSelector,\n                });\n            }\n            return slottedSelector;\n        }\n        else {\n            return _polyfillHostNoCombinator + m[3];\n        }\n    });\n    return {\n        selectors,\n        cssText,\n    };\n};\nconst convertColonHostContext = (cssText) => {\n    return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);\n};\nconst convertShadowDOMSelectors = (cssText) => {\n    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);\n};\nconst makeScopeMatcher = (scopeSelector) => {\n    const lre = /\\[/g;\n    const rre = /\\]/g;\n    scopeSelector = scopeSelector.replace(lre, '\\\\[').replace(rre, '\\\\]');\n    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');\n};\nconst selectorNeedsScoping = (selector, scopeSelector) => {\n    const re = makeScopeMatcher(scopeSelector);\n    return !re.test(selector);\n};\nconst applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {\n    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()\n    _polyfillHostRe.lastIndex = 0;\n    if (_polyfillHostRe.test(selector)) {\n        const replaceBy = `.${hostSelector}`;\n        return selector\n            .replace(_polyfillHostNoCombinatorRe, (_, selector) => {\n            return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {\n                return before + replaceBy + colon + after;\n            });\n        })\n            .replace(_polyfillHostRe, replaceBy + ' ');\n    }\n    return scopeSelector + ' ' + selector;\n};\nconst applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {\n    const isRe = /\\[is=([^\\]]*)\\]/g;\n    scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);\n    const className = '.' + scopeSelector;\n    const _scopeSelectorPart = (p) => {\n        let scopedP = p.trim();\n        if (!scopedP) {\n            return '';\n        }\n        if (p.indexOf(_polyfillHostNoCombinator) > -1) {\n            scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);\n        }\n        else {\n            // remove :host since it should be unnecessary\n            const t = p.replace(_polyfillHostRe, '');\n            if (t.length > 0) {\n                const matches = t.match(/([^:]*)(:*)(.*)/);\n                if (matches) {\n                    scopedP = matches[1] + className + matches[2] + matches[3];\n                }\n            }\n        }\n        return scopedP;\n    };\n    const safeContent = safeSelector(selector);\n    selector = safeContent.content;\n    let scopedSelector = '';\n    let startIndex = 0;\n    let res;\n    const sep = /( |>|\\+|~(?!=))\\s*/g;\n    // If a selector appears before :host it should not be shimmed as it\n    // matches on ancestor elements and not on elements in the host's shadow\n    // `:host-context(div)` is transformed to\n    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`\n    // the `div` is not part of the component in the 2nd selectors and should not be scoped.\n    // Historically `component-tag:host` was matching the component so we also want to preserve\n    // this behavior to avoid breaking legacy apps (it should not match).\n    // The behavior should be:\n    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)\n    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a\n    //   `:host-context(tag)`)\n    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;\n    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present\n    let shouldScope = !hasHost;\n    while ((res = sep.exec(selector)) !== null) {\n        const separator = res[1];\n        const part = selector.slice(startIndex, res.index).trim();\n        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n        const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;\n        scopedSelector += `${scopedPart} ${separator} `;\n        startIndex = sep.lastIndex;\n    }\n    const part = selector.substring(startIndex);\n    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;\n    // replace the placeholders with their original values\n    return restoreSafeSelector(safeContent.placeholders, scopedSelector);\n};\nconst scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {\n    return selector\n        .split(',')\n        .map((shallowPart) => {\n        if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {\n            return shallowPart.trim();\n        }\n        if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {\n            return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();\n        }\n        else {\n            return shallowPart.trim();\n        }\n    })\n        .join(', ');\n};\nconst scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {\n    return processRules(cssText, (rule) => {\n        let selector = rule.selector;\n        let content = rule.content;\n        if (rule.selector[0] !== '@') {\n            selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);\n        }\n        else if (rule.selector.startsWith('@media') ||\n            rule.selector.startsWith('@supports') ||\n            rule.selector.startsWith('@page') ||\n            rule.selector.startsWith('@document')) {\n            content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);\n        }\n        const cssRule = {\n            selector: selector.replace(/\\s{2,}/g, ' ').trim(),\n            content,\n        };\n        return cssRule;\n    });\n};\nconst scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {\n    cssText = insertPolyfillHostInCssText(cssText);\n    cssText = convertColonHost(cssText);\n    cssText = convertColonHostContext(cssText);\n    const slotted = convertColonSlotted(cssText, slotScopeId);\n    cssText = slotted.cssText;\n    cssText = convertShadowDOMSelectors(cssText);\n    if (scopeId) {\n        cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);\n    }\n    cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);\n    cssText = cssText.replace(/>\\s*\\*\\s+([^{, ]+)/gm, ' $1 ');\n    return {\n        cssText: cssText.trim(),\n        slottedSelectors: slotted.selectors,\n    };\n};\nconst scopeCss = (cssText, scopeId, commentOriginalSelector) => {\n    const hostScopeId = scopeId + '-h';\n    const slotScopeId = scopeId + '-s';\n    const commentsWithHash = extractCommentsWithHash(cssText);\n    cssText = stripComments(cssText);\n    const orgSelectors = [];\n    if (commentOriginalSelector) {\n        const processCommentedSelector = (rule) => {\n            const placeholder = `/*!@___${orgSelectors.length}___*/`;\n            const comment = `/*!@${rule.selector}*/`;\n            orgSelectors.push({ placeholder, comment });\n            rule.selector = placeholder + rule.selector;\n            return rule;\n        };\n        cssText = processRules(cssText, (rule) => {\n            if (rule.selector[0] !== '@') {\n                return processCommentedSelector(rule);\n            }\n            else if (rule.selector.startsWith('@media') ||\n                rule.selector.startsWith('@supports') ||\n                rule.selector.startsWith('@page') ||\n                rule.selector.startsWith('@document')) {\n                rule.content = processRules(rule.content, processCommentedSelector);\n                return rule;\n            }\n            return rule;\n        });\n    }\n    const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);\n    cssText = [scoped.cssText, ...commentsWithHash].join('\\n');\n    if (commentOriginalSelector) {\n        orgSelectors.forEach(({ placeholder, comment }) => {\n            cssText = cssText.replace(placeholder, comment);\n        });\n    }\n    scoped.slottedSelectors.forEach((slottedSelector) => {\n        cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);\n    });\n    return cssText;\n};\n\nexport { scopeCss };\n"]}

package/dist/nano-components/p-0c0ee653.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,i as r,f as n,h as i,e,g as a}from"./p-7a6bc3c5.js";import{i as s}from"./p-6a284815.js";import{c as d}from"./p-d3af43d2.js";import{d as l}from"./p-c930d4f5.js";const b=class{constructor(r){t(this,r),this.nanoOpened=o(this,"nanoOpened",7),this.nanoClosed=o(this,"nanoClosed",7),this.slideId="nano-details-"+c++,this.stateChanging=!1,this.isLoading=!0,this.label="",this.open=!1,this.noHandle=!1,this.iconRotation=90,this.onKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open}},this.onMouseDown=()=>{this.stateChanging||(this.open=!this.open)}}toggleClick(){this.stateChanging=!0,this.open?this.show():this.hide()}hide(){this.nanoClosed.emit(this.open),l(this.contentEl,"is-shown",!1).then((()=>this.stateChanging=!1)),this.contentEl.style.height="0px"}show(){this.nanoOpened.emit(),l(this.contentEl,"is-shown",!0).then((()=>this.stateChanging=!1)),this.contentEl.style.height=this.contentArea.scrollHeight+"px"}resize(){this.open&&this.contentArea&&this.contentEl&&!this.stateChanging&&r((()=>{this.contentArea.scrollHeight>0&&n((()=>{this.contentEl.style.height=this.contentArea.scrollHeight+"px"}))}))}componentWillLoad(){this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]'),this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]'),setTimeout((()=>{this.isLoading=!1}),100)}componentDidLoad(){this.open&&setTimeout((()=>{this.show()}),0)}connectedCallback(){(this.mo=new MutationObserver((()=>this.resize()))).observe(this.el,{childList:!0,subtree:!0,attributes:!0}),(this.ro=new s((()=>this.resize()))).observe(this.el)}disconnectedCallback(){this.mo&&this.mo.disconnect(),this.ro&&this.ro.disconnect()}render(){return i(e,{class:Object.assign({},d(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""}},this.hasStartSlot?i("span",{class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:t=>this.contentEl=t,tabindex:"-1",id:this.slideId},i("div",{ref:t=>this.contentArea=t,class:"content__area"},i("slot",null)))))}get el(){return a(this)}static get watchers(){return{open:["toggleClick"]}}};let c=0;b.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #F9F9FB);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height .2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #0084a9));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--btn-text-color--open:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-text-color--hover:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff))}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);color:inherit;display:inline-block;text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';export{b as nano_details}
-//# sourceMappingURL=p-0c0ee653.entry.js.map

package/dist/nano-components/p-0c0ee653.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["Details","[object Object]","hostRef","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","mo","MutationObserver","resize","observe","childList","subtree","attributes","ro","ResizeObserver","disconnect","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{$color-offwhite});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n  --padding: 1em;\n\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{$color-offwhite});\n\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height .2s ease-out;\n\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-text-color--hover: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n}\n\nbutton {\n  @include input-cover;\n  padding: var(--btn-padding);\n  color: inherit;\n  display: inline-block;\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: .3s ease background, .3s ease color, .15s ease box-shadow;\n\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: .3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      @include margin(0, var(--padding), 0, 0);\n    }\n\n    &--end {\n      @include margin(0, 0, 0, var(--padding));\n\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: .2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), .2s ease border-radius;\n  }\n\n  >* {\n    opacity: 0;\n    transition: opacity .2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, displayTransition } from '../../utils/utils';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          // this.contentEl.style.transition = 'none';\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n          // this.contentEl.style.transition = '';\n        });\n      }\n    });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: true });\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n          >\n            {this.hasStartSlot ? (\n              <span\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}