@tmorrow/cre8-wc 2.3.5 → 2.3.9

package/dist/assets/{primary-nav.stories--d9sFv8Q.js → primary-nav.stories-BEQISTOI.js}

@@ -1,5 +1,5 @@
-import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0YLoqh.js";import{o as w}from"./if-defined-Bh0SnORx.js";import{C as x,n as m}from"./cre8-element-D4jUl3yv.js";import{r as z}from"./state-ClQJCb1N.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const k=y`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as y,b as i}from"./iframe-DDPT8KPE.js";import{s as b}from"./spread-B6c5bbZ0.js";import{o as w}from"./if-defined-D9Db4BBK.js";import{C as x,n as m}from"./cre8-element-D6gzFubi.js";import{r as k}from"./state-Ds0pqCS8.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const _=y`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -96,23 +96,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -120,23 +120,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -144,32 +144,32 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -177,23 +177,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -201,23 +201,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -225,23 +225,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -249,23 +249,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -273,23 +273,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -297,23 +297,23 @@ import{a as y,b as r}from"./iframe-DgoqrgRr.js";import{s as b}from"./spread-Cc0Y
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -329,7 +329,6 @@ body {
   font-size: var(--cre8-typography-body-default-font-size);
   font-weight: var(--cre8-typography-body-default-font-weight);
   line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
@@ -337,7 +336,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -632,7 +631,7 @@ span.ripple {
   white-space: nowrap;
   width: 100%;
   margin: 0;
-  padding: 1rem 2rem;
+  padding: var(--cre8-padding-16) var(--cre8-spacing-32);
   color: var(--cre8-primary-nav-link-color, var(--cre8-color-header-menu-content-default));
   text-decoration: none;
   transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
@@ -663,12 +662,12 @@ span.ripple {
 }
 @media all and (min-width: 960px) {
   .cre8-c-primary-nav__link {
-    padding: 1rem 0.5rem;
+    padding: var(--cre8-padding-16) var(--cre8-padding-8);
   }
 }
 @media all and (min-width: 960px) {
   .cre8-c-primary-nav__link {
-    padding: 1rem;
+    padding: var(--cre8-padding-16);
     border-bottom: none;
   }
 }
@@ -694,7 +693,7 @@ cre8-icon-legacy {
 }
 @media all and (min-width: 960px) {
   cre8-icon-legacy {
-    margin-left: 0.5rem;
+    margin-left: var(--cre8-spacing-8);
   }
 }
 
@@ -738,8 +737,8 @@ cre8-icon-legacy {
   /* 1 */
   height: auto;
   /* 1 */
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-top: var(--cre8-spacing-32);
+  padding-bottom: var(--cre8-spacing-32);
   background: var(--cre8-color-bg-default);
   opacity: 1;
   /* 1 */
@@ -760,19 +759,19 @@ cre8-icon-legacy {
 .cre8-c-primary-nav__item--megamenu .cre8-c-primary-nav__item-panel-inner {
   max-width: 70rem;
   /* 1 */
-  padding-right: 2rem;
-  padding-left: 2rem;
+  padding-right: var(--cre8-spacing-32);
+  padding-left: var(--cre8-spacing-32);
   margin: 0 auto;
   /* 1 */
 }
 
 .cre8-c-primary-nav__item-before {
-  margin-right: 0.5rem;
+  margin-right: var(--cre8-spacing-8);
 }
 
 .cre8-c-primary-nav__item-after {
-  margin-left: 0.5rem;
-}`;var _=Object.defineProperty,p=(n,e,i,l)=>{for(var t=void 0,o=n.length-1,s;o>=0;o--)(s=n[o])&&(t=s(e,i,t)||t);return t&&_(e,i,t),t};const f=class f extends x{constructor(){super(),this.text="Nav item",this.href="#",this.iconName="caret-down",this._handleOnClickOutside=this._handleOnClickOutside.bind(this),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){this.setAttribute("role","listitem"),super.connectedCallback(),document.addEventListener("mousedown",this._handleOnClickOutside,!1)}disconnectedCallback(){document.removeEventListener("mousedown",this._handleOnClickOutside,!1),super.disconnectedCallback()}_handleOnClickOutside(e){if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const i=e.composedPath().includes(this.shadowRoot.host);this.isActive&&!i&&(this.isActive=!1)}_clickHandler(e){e.preventDefault(),this.parentNode&&this.parentNode.querySelectorAll("cre8-primary-nav-item").forEach(l=>{l!==this&&(l.isActive=!1)}),this.isActive=!this.isActive}_closePanel(){this.isActive=!1}_handleOnKeyDown(e){if(e.key==="Escape"&&this.isActive===!0){this._closePanel();const i=this.shadowRoot?.querySelector(".cre8-c-primary-nav__link");i&&setTimeout(()=>{i.focus()},1)}}render(){const e=this.componentClassNames("cre8-c-primary-nav__item",{"cre8-is-active":this.isActive===!0,"cre8-c-primary-nav__item--megamenu":this.megaMenu===!0});return this.megaMenu?r`
+  margin-left: var(--cre8-spacing-8);
+}`;var z=Object.defineProperty,l=(n,e,t,s)=>{for(var r=void 0,o=n.length-1,p;o>=0;o--)(p=n[o])&&(r=p(e,t,r)||r);return r&&z(e,t,r),r};const f=class f extends x{constructor(){super(),this.text="Nav item",this.href="#",this.iconName="caret-down",this._handleOnClickOutside=this._handleOnClickOutside.bind(this),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){this.setAttribute("role","listitem"),super.connectedCallback(),document.addEventListener("mousedown",this._handleOnClickOutside,!1)}disconnectedCallback(){document.removeEventListener("mousedown",this._handleOnClickOutside,!1),super.disconnectedCallback()}_handleOnClickOutside(e){if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const t=e.composedPath().includes(this.shadowRoot.host);this.isActive&&!t&&(this.isActive=!1)}_clickHandler(e){e.preventDefault(),this.parentNode&&this.parentNode.querySelectorAll("cre8-primary-nav-item").forEach(s=>{s!==this&&(s.isActive=!1)}),this.isActive=!this.isActive}_closePanel(){this.isActive=!1}_handleOnKeyDown(e){if(e.key==="Escape"&&this.isActive===!0){this._closePanel();const t=this.shadowRoot?.querySelector(".cre8-c-primary-nav__link");t&&setTimeout(()=>{t.focus()},1)}}render(){const e=this.componentClassNames("cre8-c-primary-nav__item",{"cre8-is-active":this.isActive===!0,"cre8-c-primary-nav__item--megamenu":this.megaMenu===!0});return this.megaMenu?i`
             <div class="${e}" @keydown=${this._handleOnKeyDown}>
                 <div class="cre8-c-primary-nav__item-content">
                     <button
@@ -780,13 +779,13 @@ cre8-icon-legacy {
                         @click=${this._clickHandler}
                         aria-expanded=${this.isActive===!0}
                     >
-                        ${this.slotNotEmpty("itemBefore")&&r`
+                        ${this.slotNotEmpty("itemBefore")&&i`
                             <div class="cre8-c-primary-nav__item-before">
                                 <slot name="itemBefore"></slot>
                             </div>
                         `}
                         ${this.text}
-                        ${this.slotNotEmpty("itemAfter")&&r`
+                        ${this.slotNotEmpty("itemAfter")&&i`
                             <div class="cre8-c-primary-nav__item-after">
                                 <slot name="itemAfter"></slot>
                             </div>
@@ -800,17 +799,17 @@ cre8-icon-legacy {
                     </div>
                 </div>
             </div>
-        `:r`
+        `:i`
             <div class="${e}">
                 <div class="cre8-c-primary-nav__item-content">
                     <a class="cre8-c-primary-nav__link" href="${this.href}">
-                        ${this.slotNotEmpty("itemBefore")&&r`
+                        ${this.slotNotEmpty("itemBefore")&&i`
                             <div class="cre8-c-primary-nav__item-before">
                                 <slot name="itemBefore"></slot>
                             </div>
                         `}
                         ${this.text}
-                        ${this.slotNotEmpty("itemAfter")&&r`
+                        ${this.slotNotEmpty("itemAfter")&&i`
                             <div class="cre8-c-primary-nav__item-after">
                                 <slot name="itemAfter"></slot>
                             </div>
@@ -818,8 +817,8 @@ cre8-icon-legacy {
                     </a>
                 </div>
             </div>
-        `}};f.styles=[k];let a=f;p([m()],a.prototype,"text");p([m()],a.prototype,"href");p([m()],a.prototype,"iconName");p([m({type:Boolean,reflect:!0})],a.prototype,"megaMenu");p([z()],a.prototype,"isActive");customElements.get("cre8-primary-nav-item")===void 0&&customElements.define("cre8-primary-nav-item",a);const I=y`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+        `}};f.styles=[_];let a=f;l([m()],a.prototype,"text");l([m()],a.prototype,"href");l([m()],a.prototype,"iconName");l([m({type:Boolean,reflect:!0})],a.prototype,"megaMenu");l([k()],a.prototype,"isActive");customElements.get("cre8-primary-nav-item")===void 0&&customElements.define("cre8-primary-nav-item",a);const I=y`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -892,23 +891,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -916,23 +915,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -940,23 +939,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -964,32 +963,32 @@ cre8-icon-legacy {
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -997,23 +996,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -1021,23 +1020,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -1045,23 +1044,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -1069,23 +1068,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -1093,23 +1092,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -1117,23 +1116,23 @@ cre8-icon-legacy {
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -1149,7 +1148,6 @@ body {
   font-size: var(--cre8-typography-body-default-font-size);
   font-weight: var(--cre8-typography-body-default-font-weight);
   line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
@@ -1157,7 +1155,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -1438,21 +1436,21 @@ span.ripple {
   .cre8-c-primary-nav__list {
     flex-direction: row; /* 1 */
   }
-}`;var R=Object.defineProperty,u=(n,e,i,l)=>{for(var t=void 0,o=n.length-1,s;o>=0;o--)(s=n[o])&&(t=s(e,i,t)||t);return t&&R(e,i,t),t};const v=class v extends x{constructor(){super(...arguments),this.navAriaLabel="main"}render(){const e=this.componentClassNames("cre8-c-primary-nav",{"cre8-c-primary-nav--side-by-side":this.behavior==="side-by-side","cre8-c-primary-nav--inverted":this.inverted===!0});return r`
+}`;var R=Object.defineProperty,u=(n,e,t,s)=>{for(var r=void 0,o=n.length-1,p;o>=0;o--)(p=n[o])&&(r=p(e,t,r)||r);return r&&R(e,t,r),r};const v=class v extends x{constructor(){super(...arguments),this.navAriaLabel="main"}render(){const e=this.componentClassNames("cre8-c-primary-nav",{"cre8-c-primary-nav--side-by-side":this.behavior==="side-by-side","cre8-c-primary-nav--inverted":this.inverted===!0});return i`
       <nav aria-label="${this.navAriaLabel}" class="${e}">
         <ul class="cre8-c-primary-nav__list">
           <slot></slot>
         </ul>
       </nav>
-    `}};v.styles=[I];let d=v;u([m({type:Boolean,reflect:!0})],d.prototype,"inverted");u([m()],d.prototype,"behavior");u([m()],d.prototype,"navAriaLabel");customElements.get("cre8-primary-nav")===void 0&&customElements.define("cre8-primary-nav",d);const V={title:"Cre8 Components/Primary Nav",component:"cre8-primary-nav",parameters:{status:{type:"inProgress"}}},c=n=>r`<cre8-primary-nav ${b(n)}>
+    `}};v.styles=[I];let d=v;u([m({type:Boolean,reflect:!0})],d.prototype,"inverted");u([m()],d.prototype,"behavior");u([m()],d.prototype,"navAriaLabel");customElements.get("cre8-primary-nav")===void 0&&customElements.define("cre8-primary-nav",d);const V={title:"Cre8 Components/Primary Nav",component:"cre8-primary-nav",parameters:{status:{type:"inProgress"}}},c=n=>i`<cre8-primary-nav ${b(n)}>
   <cre8-primary-nav-item href="#" text="Nav item 1"></cre8-primary-nav-item>
   <cre8-primary-nav-item href="#" text="Nav item 2"></cre8-primary-nav-item>
   <cre8-primary-nav-item href="#" text="Nav item 3"></cre8-primary-nav-item>
-</cre8-primary-nav>`,g=()=>r`<cre8-primary-nav behavior="side-by-side">
+</cre8-primary-nav>`,g=()=>i`<cre8-primary-nav behavior="side-by-side">
   <cre8-primary-nav-item href="#" text="Nav item 1"></cre8-primary-nav-item>
   <cre8-primary-nav-item href="#" text="Nav item 2"></cre8-primary-nav-item>
   <cre8-primary-nav-item href="#" text="Nav item 3"></cre8-primary-nav-item>
-</cre8-primary-nav>`,h=()=>r`
+</cre8-primary-nav>`,h=()=>i`
 <cre8-text-passage size="sm">
   <p>A div is added around the primary nav in this instance to create a position relative wrapper for the megamenu to be positioned to. This wrapper will be the header when actually used.</p>
 </cre8-text-passage>