@tmorrow/cre8-wc 2.3.6 → 2.3.9

package/cdn/cre8-wc.min.js

@@ -3936,22 +3936,22 @@ span.ripple {
  * Button icon directly before button text
  */
 cre8-icon-legacy + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }
 
 cre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }
 
 /**
    * Button icon directly after button text
    */
 .cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon-legacy {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }
 
 .cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }
 
 /**
@@ -4029,7 +4029,7 @@ cre8-icon-legacy.cre8-u-is-vishidden {
 }
 
 span.cre8-c-button__icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   max-width: fit-content;
   min-width: 0px;
   width: auto;
@@ -4705,7 +4705,7 @@ span.ripple {
   --cre8-u-icon-display: flex;
   --cre8-u-icon-align-items: center;
   --cre8-u-icon-justify-content: center;
-  padding: 1.5rem 0.5rem;
+  padding: var(--cre8-padding-24) var(--cre8-padding-8);
 }
 
 .cre8-c-accordion-item--small cre8-heading button {
@@ -4747,9 +4747,9 @@ span.ripple {
 }
 
 .cre8-c-accordion-item__body {
-  margin-right: 0rem;
-  margin-left: 0rem;
-  padding: 0rem;
+  margin-right: 0;
+  margin-left: 0;
+  padding: 0;
   overflow: hidden;
   visibility: hidden;
   transition: height var(--cre8-anim-fade-quick) var(--cre8-anim-ease), visibility var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
@@ -4766,7 +4766,7 @@ span.ripple {
   line-height: var(--cre8-typography-body-default-line-height);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
-  padding: 0.5rem 3rem 0rem 0.5rem;
+  padding: var(--cre8-padding-8) var(--cre8-spacing-48) 0 var(--cre8-padding-8);
 }
 
 cre8-icon {
@@ -4791,8 +4791,8 @@ cre8-icon {
   display: flex;
   height: 2rem;
   justify-content: center;
-  margin-left: 0.5rem;
-  margin-right: 0.125rem;
+  margin-left: var(--cre8-spacing-8);
+  margin-right: var(--cre8-spacing-2);
   min-height: 2rem;
   min-width: 2rem;
   width: 2rem;
@@ -4830,7 +4830,7 @@ cre8-icon {
   background-color: var(--cre8-color-bg-transparent);
   border: var(--cre8-border-width-none);
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
+  padding: var(--cre8-padding-4) var(--cre8-padding-8);
   overflow-x: hidden;
   transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
   width: 100%;
@@ -4842,7 +4842,7 @@ cre8-icon {
   justify-content: flex-start;
 }
 .cre8-c-accordion-item__button.cre8-u-justify-content-start .cre8-c-accordion-item__icon-before {
-  margin-left: 0rem;
+  margin-left: 0;
 }
 .cre8-c-accordion-item__button:hover .cre8-c-accordion-item__icon {
   border-color: var(--cre8-color-button-primary-border-hover);
@@ -4876,11 +4876,11 @@ cre8-icon {
 }
 
 .cre8-c-accordion-item--icon-before .cre8-c-accordion-item__body {
-  margin-left: 2.5rem;
+  margin-left: var(--cre8-spacing-40);
 }
 
 .cre8-c-accordion-item__icon-before {
-  margin-right: 0.75rem;
+  margin-right: var(--cre8-spacing-12);
 }
 .cre8-c-accordion-item__icon-before h4[slot=header] {
   display: block;
@@ -5665,7 +5665,7 @@ span.ripple {
 .cre8-c-link__cta-wrapper {
   color: var(--cre8-color-button-primary-content);
   display: inline-flex;
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   padding: var(--cre8-spacing-4);
   background-color: var(--cre8-color-content-link);
   border-radius: var(--cre8-border-radius-round);
@@ -5677,15 +5677,15 @@ span.ripple {
 }
 
 .cre8-c-link__icon.before {
-  padding-right: 0.5rem;
+  padding-right: var(--cre8-padding-8);
 }
 
 .cre8-c-link__icon.after {
-  padding-left: 0.5rem;
+  padding-left: var(--cre8-padding-8);
 }
 
 ::slotted([slot=badge]) {
-  padding-left: 0.5rem;
+  padding-left: var(--cre8-padding-8);
 }
 
 .cre8-c-link--inverted .cre8-c-link__text {
@@ -7310,7 +7310,7 @@ cre8-text-passage[size=default] h1 {
 }
 cre8-text-passage h1,
 cre8-text-passage[size=default] h1 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -7340,7 +7340,7 @@ cre8-text-passage[size=default] h2 {
 }
 cre8-text-passage h2,
 cre8-text-passage[size=default] h2 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -7370,7 +7370,7 @@ cre8-text-passage[size=default] h3 {
 }
 cre8-text-passage h3,
 cre8-text-passage[size=default] h3 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -7400,7 +7400,7 @@ cre8-text-passage[size=default] h4 {
 }
 cre8-text-passage h4,
 cre8-text-passage[size=default] h4 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -7416,7 +7416,7 @@ cre8-text-passage[size=default] h5 {
   line-height: var(--cre8-typography-meta-large-line-height);
   text-decoration: var(--cre8-typography-meta-large-text-decoration);
   text-transform: var(--cre8-typography-meta-large-text-transform);
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -7438,7 +7438,7 @@ cre8-text-passage[size=default] {
 }
 cre8-text-passage ul,
 cre8-text-passage[size=default] ul {
-  margin-left: 1.25rem;
+  margin-left: var(--cre8-spacing-18);
   padding-left: 0;
 }
 cre8-text-passage,
@@ -7449,7 +7449,7 @@ cre8-text-passage[size=default] {
 }
 cre8-text-passage ol,
 cre8-text-passage[size=default] ol {
-  margin-left: 1.125rem;
+  margin-left: var(--cre8-spacing-18);
   padding-left: 0;
 }
 cre8-text-passage,
@@ -7477,7 +7477,7 @@ cre8-text-passage[size=default] {
 cre8-text-passage p,
 cre8-text-passage[size=default] p {
   margin-top: 0;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--cre8-spacing-24);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -7490,9 +7490,9 @@ cre8-text-passage[size=default] blockquote {
   font-style: italic;
   border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);
   color: var(--cre8-color-content-subtle);
-  padding-left: 1rem;
+  padding-left: var(--cre8-padding-16);
   margin-left: 0;
-  margin-bottom: 1rem;
+  margin-bottom: var(--cre8-spacing-16);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -7524,9 +7524,9 @@ cre8-text-passage[inverted] blockquote {
   color: var(--cre8-color-content-knockout);
   font-style: italic;
   border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);
-  padding-left: 1rem;
+  padding-left: var(--cre8-padding-16);
   margin-left: 0;
-  margin-bottom: 1rem;
+  margin-bottom: var(--cre8-spacing-16);
 }`,Jh=_`.cre8-u-content-knockout-brand {
   color: var(--cre8-color-content-knockout-brand);
 }
@@ -8154,7 +8154,7 @@ span.ripple {
 }
 
 ::slotted(.header) {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }`;var Qh=Object.defineProperty,ic=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&Qh(t,e,i),i};const Ed=class Ed extends I{constructor(){super(...arguments),this.size="default"}connectedCallback(){if(super.connectedCallback(),!document.head.querySelector("#cre8-text-passage-styles")){const e=document.createElement("style");e.id="cre8-text-passage-styles",e.innerHTML=Kh.cssText,document.head.appendChild(e)}}render(){const t=this.componentClassNames("cre8-c-text-passage",{"cre8-c-text-passage--default":this.size==="default"||void 0,"cre8-c-text-passage--inverted":this.inverted,"cre8-c-text-passage--small":this.size==="small","cre8-c-text-passage--large":this.size==="large"});return h`
       <div class="${t}">
         <slot></slot>
@@ -9611,7 +9611,7 @@ span.ripple {
 */
 cre8-icon {
   height: var(--cre8-icon-height, 1rem);
-  margin-right: 0.25rem;
+  margin-right: var(--cre8-spacing-4);
 }
 
 /**
@@ -10311,11 +10311,11 @@ span.ripple {
  */
 .cre8-c-band {
   background: var(--cre8-color-bg-subtle);
-  padding: 1.5rem 0;
+  padding: var(--cre8-padding-24) 0;
 }
 @media all and (min-width: 1200px) {
   .cre8-c-band {
-    padding: 2rem 0;
+    padding: var(--cre8-spacing-32) 0;
   }
 }
 
@@ -10940,7 +10940,7 @@ span.ripple {
   margin: 0;
   padding: 0;
   list-style: none;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
 }`;var du=Object.defineProperty,nc=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&du(t,e,i),i};const Nd=class Nd extends I{constructor(){super(...arguments),this.navAriaLabel="breadcrumbs"}buildComposition(){return this.items?this.items.map(t=>({tag:"cre8-breadcrumbs-item",children:t.href?[{tag:"cre8-text-link",props:{href:t.href},text:t.text}]:void 0,text:t.href?void 0:t.text})):null}updated(t){["items"].some(e=>t.has(e))&&Yt(this,this.buildComposition())}render(){const t=this.componentClassNames("cre8-c-breadcrumbs",{});return h`
       <nav aria-label="${this.navAriaLabel}"  class="${t}">
         <ol class="cre8-c-breadcrumbs__list">
@@ -11562,7 +11562,7 @@ span.ripple {
 * Breadcrumbs icon
 */
 cre8-icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   color: var(--cre8-color-content-subtle);
   display: inline-flex;
 }
@@ -12184,7 +12184,7 @@ span.ripple {
 .cre8-c-button-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
 }
 
 :host([fullWidth]) {
@@ -12196,7 +12196,7 @@ span.ripple {
 }
 
 .cre8-c-button-group--gap-sm {
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
 }
 
 /**
@@ -12818,8 +12818,8 @@ span.ripple {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  padding: 1.5rem;
-  gap: 1rem;
+  padding: var(--cre8-padding-24);
+  gap: var(--cre8-padding-16);
   border-color: var(--cre8-color-border-default);
   border-style: var(--cre8-border-style-default);
   border-width: var(--cre8-border-width-default);
@@ -12846,8 +12846,8 @@ span.ripple {
  * Compact card - reduced padding for narrow layouts
  */
 .cre8-c-card--compact {
-  padding: 1rem;
-  gap: 0.5rem;
+  padding: var(--cre8-padding-16);
+  gap: var(--cre8-padding-8);
 }
 
 /**
@@ -13965,13 +13965,13 @@ span.ripple {
 .cre8-c-field-note {
   display: flex;
   align-items: flex-start;
-  gap: 0.25rem;
+  gap: var(--cre8-spacing-4);
   color: var(--cre8-color-content-default);
-  margin-top: 0.25rem;
+  margin-top: var(--cre8-spacing-4);
 }
 
 .cre8-field-note-icon {
-  margin-top: 0.25rem;
+  margin-top: var(--cre8-spacing-4);
   height: 1rem;
   width: 1rem;
 }
@@ -14619,7 +14619,7 @@ span.ripple {
   line-height: var(--cre8-typography-label-small-line-height);
   text-decoration: var(--cre8-typography-label-small-text-decoration);
   text-transform: var(--cre8-typography-label-small-text-transform);
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--cre8-spacing-8);
 }
 
 /** 
@@ -15362,7 +15362,7 @@ span.ripple {
   display: flex;
   position: relative;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--cre8-spacing-8);
   min-height: 1.5rem;
   /** 
   * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset
@@ -15500,7 +15500,7 @@ span.ripple {
  * Checkbox field item input 
  */
 .cre8-c-checkbox-field-item__label {
-  margin-left: 2rem;
+  margin-left: var(--cre8-spacing-32);
   font-family: var(--cre8-typography-label-small-font-family);
   font-size: var(--cre8-typography-label-small-font-size);
   font-weight: var(--cre8-typography-label-small-font-weight);
@@ -16948,7 +16948,7 @@ span.ripple {
  */
 ::slotted(cre8-grid-item) {
   display: block;
-  padding: 0.75rem;
+  padding: var(--cre8-padding-8);
   /**
   * Slotted grid item within grid with no gap between items
   */
@@ -16962,7 +16962,7 @@ span.ripple {
   */
 }
 .cre8-c-container-grid--gap-sm > ::slotted(cre8-grid-item) {
-  padding: 0.25rem;
+  padding: var(--cre8-padding-4);
 }
 ::slotted(cre8-grid-item) {
   /**
@@ -16970,7 +16970,7 @@ span.ripple {
   */
 }
 .cre8-c-container-grid--gap-lg > ::slotted(cre8-grid-item) {
-  padding: 1rem;
+  padding: var(--cre8-padding-16);
 }
 ::slotted(cre8-grid-item) {
   /**
@@ -18160,7 +18160,7 @@ span.ripple {
  * Button icon directly before button text
  */
 cre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   display: inline-flex;
 }
 
@@ -18168,7 +18168,7 @@ cre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {
    * Button icon directly after button text
    */
 .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   display: inline-flex;
 }
 
@@ -18245,7 +18245,7 @@ cre8-icon {
 }
 
 span.cre8-c-danger-button__icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   max-width: fit-content;
   min-width: 0px;
   width: auto;
@@ -23456,8 +23456,8 @@ span.ripple {
  */
 .cre8-c-divider {
   background-color: var(--cre8-color-border-default);
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: var(--cre8-spacing-8);
+  margin-bottom: var(--cre8-spacing-8);
 }
 
 .cre8-c-divider--horizontal {
@@ -23470,8 +23470,8 @@ span.ripple {
   height: 100%;
   margin-top: 0;
   margin-bottom: 0;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
+  margin-right: var(--cre8-spacing-8);
 }
 
 /**
@@ -24101,12 +24101,12 @@ span.ripple {
 
 .cre8-c-dropdown--icon-button {
   color: var(--cre8-color-button-secondary-content);
-  margin-top: 0.5rem;
+  margin-top: var(--cre8-spacing-8);
 }
 
 .cre8-c-dropdown--icon-link {
   color: var(--cre8-color-content-link);
-  margin-top: 0.5rem;
+  margin-top: var(--cre8-spacing-8);
 }
 
 .cre8-c-dropdown--toggle {
@@ -25396,14 +25396,14 @@ span.ripple {
  * 2) Take up the remaining space on medr screens
  */
 .cre8-c-feature__body {
-  margin-bottom: 2rem;
+  margin-bottom: var(--cre8-spacing-32);
 }
 @media all and (min-width: 768px) {
   .cre8-c-feature__body {
     display: flex;
     flex-direction: column;
     flex: 1;
-    padding-right: 2rem;
+    padding-right: var(--cre8-spacing-32);
     margin-bottom: 0;
   }
 }
@@ -26037,12 +26037,12 @@ span.ripple {
   text-transform: var(--cre8-typography-body-default-text-transform);
   background: var(--cre8-color-bg-brand-xstrong);
   color: var(--cre8-color-content-knockout);
-  padding-top: 2.5rem;
-  padding-bottom: 3rem;
+  padding-top: var(--cre8-spacing-40);
+  padding-bottom: var(--cre8-spacing-48);
 }
 @media all and (min-width: 960px) {
   .cre8-c-footer {
-    padding-top: 3.4375rem;
+    padding-top: var(--cre8-spacing-48);
   }
 }`,cs=class cs extends I{render(){const t=this.componentClassNames("cre8-c-footer",{});return h`
       <footer class="${t}" role="contentinfo">
@@ -27314,7 +27314,7 @@ span.ripple {
   white-space: nowrap;
   width: 100%;
   margin: 0;
-  padding: 0.5rem 1rem;
+  padding: var(--cre8-padding-8) var(--cre8-padding-16);
   color: var(--cre8-global-nav-link-color, var(--cre8-color-content-subtle));
   text-decoration: none;
   transition: all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);
@@ -27352,14 +27352,14 @@ cre8-icon-legacy {
 }
 @media all and (min-width: 960px) {
   cre8-icon-legacy {
-    margin-left: 0.5rem;
+    margin-left: var(--cre8-spacing-8);
   }
 }
 
 .cre8-c-global-nav__item-after {
   --cre8-icon-height: 0.75rem;
   --cre8-icon-width: 0.75rem;
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }`;var p5=Object.defineProperty,ea=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&p5(t,e,i),i};const ps=class ps extends I{constructor(){super(),this.text="Nav item",this.href="#",this.iconName="keyboard-arrow-down",this._handleOnClickOutside=this._handleOnClickOutside.bind(this),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._handleOnClickOutside,!1)}disconnectedCallback(){document.removeEventListener("mousedown",this._handleOnClickOutside,!1),super.disconnectedCallback()}_handleOnClickOutside(t){if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const e=t.composedPath().includes(this.shadowRoot.host);this.isActive&&!e&&(this.isActive=!1)}_clickHandler(t){t.preventDefault(),this.parentNode&&this.parentNode.querySelectorAll("cre8-global-nav-item").forEach(a=>{a!==this&&(a.isActive=!1)}),this.isActive=!this.isActive}closePanel(){this.isActive=!1}_handleOnKeyDown(t){if(t.key==="Escape"&&this.isActive===!0){this.closePanel();const e=this.shadowRoot?.querySelector(".cre8-c-global-nav__link");e&&setTimeout(()=>{e.focus()},1)}}render(){const t=this.componentClassNames("cre8-c-global-nav__item",{"cre8-is-active":this.isActive===!0,"cre8-c-global-nav__item--megamenu":this.megaMenu===!0});return this.megaMenu?h`
             <li class="${t}" @keydown=${this._handleOnKeyDown}>
                 <div class="cre8-c-global-nav__item-content">
@@ -28161,7 +28161,7 @@ span.ripple {
  */
 ::slotted(cre8-grid-item) {
   display: block;
-  padding: 0.75rem;
+  padding: var(--cre8-padding-8);
   /**
   * Slotted grid item within grid with no gap between items
   */
@@ -28175,7 +28175,7 @@ span.ripple {
   */
 }
 .cre8-c-grid--gap-sm > ::slotted(cre8-grid-item) {
-  padding: 0.25rem;
+  padding: var(--cre8-padding-4);
 }
 ::slotted(cre8-grid-item) {
   /**
@@ -28183,7 +28183,7 @@ span.ripple {
   */
 }
 .cre8-c-grid--gap-lg > ::slotted(cre8-grid-item) {
-  padding: 1rem;
+  padding: var(--cre8-padding-16);
 }
 ::slotted(cre8-grid-item) {
   /**
@@ -29599,8 +29599,8 @@ span.ripple {
   display: flex;
   align-items: center;
   width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: var(--cre8-padding-16);
+  padding-bottom: var(--cre8-padding-16);
 }
 
 .cre8-c-header__bottom {
@@ -30233,7 +30233,7 @@ span.ripple {
  */
 .cre8-c-hero {
   position: relative;
-  margin-bottom: 2rem;
+  margin-bottom: var(--cre8-spacing-32);
 }
 @media all and (min-width: 768px) {
   .cre8-c-hero {
@@ -30264,7 +30264,7 @@ span.ripple {
 .cre8-c-hero__body {
   display: flex;
   flex-direction: column;
-  padding-top: 1rem;
+  padding-top: var(--cre8-padding-16);
 }
 @media all and (min-width: 768px) {
   .cre8-c-hero__body {
@@ -30273,8 +30273,8 @@ span.ripple {
     justify-content: flex-end;
     width: 100%;
     min-height: 40vh;
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+    padding-top: var(--cre8-spacing-32);
+    padding-bottom: var(--cre8-spacing-32);
   }
 }
 .cre8-c-hero__body {
@@ -31002,8 +31002,8 @@ span.ripple {
   font-weight: normal;
   display: inline-flex;
   align-items: flex-start;
-  gap: 0.5rem;
-  padding: 1rem;
+  gap: var(--cre8-spacing-8);
+  padding: var(--cre8-padding-16);
   color: var(--cre8-color-content-default);
   background-color: var(--cre8-color-bg-info);
   border-color: var(--cre8-color-border-info);
@@ -31066,8 +31066,8 @@ span.ripple {
   padding: 0;
   border: none;
   background-color: transparent;
-  gap: 0.5rem;
-  border-radius: none;
+  gap: var(--cre8-spacing-8);
+  border-radius: var(--cre8-border-radius-none);
 }
 
 /**
@@ -31147,7 +31147,7 @@ span.ripple {
 }
 .cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon {
   top: 0;
-  padding: 0.125rem;
+  padding: var(--cre8-padding-2);
 }`;var C5=Object.defineProperty,aa=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&C5(t,e,i),i};const bs=class bs extends I{constructor(){super(...arguments),this.variant="subtle",this.status="info"}mapStatusToIconInlineAlert(t){switch(t){case"error":return h`<cre8-icon 
                 svg='${ho}' 
                 aria-label="${this.iconTitle}"
@@ -31790,12 +31790,12 @@ span.ripple {
 .cre8-c-layout {
   display: grid;
   flex: 1;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
   grid-template-columns: minmax(0, 1fr);
 }
 @media all and (min-width: 960px) {
   .cre8-c-layout {
-    gap: 2rem;
+    gap: var(--cre8-spacing-32);
     grid-template-columns: minmax(0, 1fr) calc(var(--cre8-sidebar-width, 40%) - (0.5rem));
     /* 2 */
   }
@@ -32426,8 +32426,8 @@ span.ripple {
 .cre8-l-layout-container {
   width: 100%;
   max-width: var(--cre8-l-max-width);
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: var(--cre8-padding-16);
+  padding-left: var(--cre8-padding-16);
   margin: 0 auto;
 }
 
@@ -34282,7 +34282,7 @@ span.ripple {
   */
 }
 .cre8-c-link-list ::slotted(cre8-link-list-item) {
-  margin-top: 1rem;
+  margin-top: var(--cre8-spacing-16);
 }
 
 /**
@@ -34322,7 +34322,7 @@ span.ripple {
   */
 }
 .cre8-c-link-list--condensed ::slotted(cre8-link-list-item) {
-  margin-top: 0.625rem;
+  margin-top: var(--cre8-spacing-8);
 }
 
 /**
@@ -34350,8 +34350,8 @@ span.ripple {
   */
 }
 .cre8-c-link-list--horizontal ::slotted(cre8-link-list-item) {
-  margin-top: 0.5rem;
-  margin-left: 1rem;
+  margin-top: var(--cre8-spacing-8);
+  margin-left: var(--cre8-spacing-16);
 }
 
 /**
@@ -34368,8 +34368,8 @@ span.ripple {
     */
   }
   .cre8-c-link-list--responsive ::slotted(cre8-link-list-item) {
-    margin-top: 0.5rem;
-    margin-left: 1rem;
+    margin-top: var(--cre8-spacing-8);
+    margin-left: var(--cre8-spacing-16);
   }
 }`;var P5=Object.defineProperty,ni=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&P5(t,e,i),i};const ks=class ks extends I{buildComposition(){return this.items?this.items.map(t=>({tag:"cre8-link-list-item",props:{href:t.href,isActive:t.isActive},text:t.text})):null}updated(t){["items"].some(e=>t.has(e))&&Yt(this,this.buildComposition())}render(){const t=this.componentClassNames("cre8-c-link-list",{"cre8-c-link-list--secondary":this.variant==="secondary","cre8-c-link-list--display":this.variant==="display","cre8-c-link-list--inverted":this.inverted===!0,"cre8-c-link-list--responsive":this.behavior==="responsive","cre8-c-link-list--horizontal":this.behavior==="horizontal","cre8-c-link-list--condensed":this.spacing==="condensed","cre8-c-link-list--sm":this.size==="sm"});return h`
       <ul class="${t}">
@@ -35008,7 +35008,7 @@ span.ripple {
  * 1) Container to place things like badges after an item
  */
 .cre8-c-link-list__item-before {
-  margin-right: 0.5rem;
+  margin-right: var(--cre8-spacing-8);
 }
 
 /**
@@ -35016,7 +35016,7 @@ span.ripple {
  * 1) Container to place things like badges after an item
  */
 .cre8-c-link-list__item-after {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }
 
 ::slotted(cre8-icon-legacy) {
@@ -35643,7 +35643,7 @@ span.ripple {
   list-style: none;
   padding: 0;
   margin: 0;
-  margin-bottom: 1rem;
+  margin-bottom: var(--cre8-spacing-16);
 }
 
 /**
@@ -35652,8 +35652,8 @@ span.ripple {
  */
 ::slotted(cre8-list-item) {
   display: block;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: var(--cre8-padding-16);
+  padding-bottom: var(--cre8-padding-16);
   border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-subtle);
   /**
   * List item with bare list
@@ -35671,8 +35671,8 @@ span.ripple {
   */
 }
 .cre8-c-list--condensed ::slotted(cre8-list-item) {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: var(--cre8-padding-8);
+  padding-bottom: var(--cre8-padding-8);
 }
 ::slotted(cre8-list-item) {
   /**
@@ -35681,8 +35681,8 @@ span.ripple {
   */
 }
 .cre8-c-list--padded ::slotted(cre8-list-item) {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding-top: var(--cre8-spacing-32);
+  padding-bottom: var(--cre8-spacing-32);
 }`;var E5=Object.defineProperty,_d=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&E5(t,e,i),i};const Cs=class Cs extends I{buildComposition(){return this.items?this.items.map(t=>({tag:"cre8-list-item",text:t.text})):null}updated(t){["items"].some(e=>t.has(e))&&Yt(this,this.buildComposition())}render(){const t=this.componentClassNames("cre8-c-list",{"cre8-c-list--bare":this.variant==="bare","cre8-c-list--padded":this.spacing==="padded","cre8-c-list--condensed":this.spacing==="condensed"});return h`
       <ul class="${t}">
         <slot></slot>
@@ -38157,7 +38157,7 @@ span.ripple {
  */
 .cre8-c-modal__header {
   display: flex;
-  padding: 2rem 3rem 1rem;
+  padding: var(--cre8-spacing-32) var(--cre8-spacing-48) var(--cre8-padding-16);
   align-items: center;
   /**
    * Modal Header with Error state
@@ -38205,7 +38205,7 @@ span.ripple {
 .cre8-c-modal__header-inner {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
 }
 .cre8-c-modal__header-inner cre8-icon .cre8-modal-icon {
   height: 2rem;
@@ -38218,7 +38218,7 @@ span.ripple {
 .cre8-c-modal__body {
   max-height: 240px;
   overflow: auto;
-  padding: 0 3rem;
+  padding: 0 var(--cre8-spacing-48);
   /**
    * Modal Window Body for mobile user screen widths
    */
@@ -38234,7 +38234,7 @@ span.ripple {
  * Modal Window Footer
  */
 .cre8-c-modal__footer {
-  padding: 1.5rem 3rem calc(100vh - 95dvh);
+  padding: var(--cre8-padding-24) var(--cre8-spacing-48) calc(100vh - 95dvh);
 }
 
 /**
@@ -39007,7 +39007,7 @@ span.ripple {
   min-height: 30px;
   width: 100%;
   border-right: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  padding-right: 2.75rem;
+  padding-right: var(--cre8-spacing-40);
 }
 
 .cre8-c-multi-select__tag-wrapper {
@@ -39017,7 +39017,7 @@ span.ripple {
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  gap: 0.25rem;
+  gap: var(--cre8-spacing-4);
 }
 
 .cre8-c-multi-select__icons-wrapper {
@@ -39025,7 +39025,7 @@ span.ripple {
   justify-content: end;
   margin-right: -36px;
   margin-left: -48px;
-  gap: 1.5rem;
+  gap: var(--cre8-spacing-24);
   min-width: 96px;
 }
 .cre8-c-multi-select__icons-wrapper button {
@@ -41119,7 +41119,7 @@ span.ripple {
  * 1) Headline of a page with an h1 heading and optional description
  */
 .cre8-c-page-header {
-  margin-bottom: 2rem;
+  margin-bottom: var(--cre8-spacing-32);
 }
 
 /**
@@ -41154,7 +41154,7 @@ span.ripple {
   display: inline-block;
   position: relative;
   bottom: 0.625rem;
-  margin-left: 1rem;
+  margin-left: var(--cre8-spacing-16);
 }
 
 /**
@@ -44567,7 +44567,7 @@ span.ripple {
   transform: translateX(var(--rtlTranslateX, -50%));
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
   width: 16rem;
   z-index: 400;
   /* 1 */
@@ -44575,7 +44575,7 @@ span.ripple {
   border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
   border-radius: var(--cre8-border-radius-container);
   box-shadow: var(--cre8-shadow-default);
-  padding: 1rem;
+  padding: var(--cre8-padding-16);
   /**
    * Focus state for popover panel
    */
@@ -44710,7 +44710,7 @@ span.ripple {
  */
 .cre8-c-popover__footer {
   display: flex;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
 }`;var wb=Object.defineProperty,me=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&wb(t,e,i),i};const Ss=class Ss extends I{constructor(){super(...arguments),this.handleOnClickOutside=t=>{if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine panel context during click handler");const e=t.composedPath().includes(this.shadowRoot.host);t.target===document.querySelector("html")&&t.clientX>=document.documentElement.offsetWidth||this.isActive&&!e&&this._toggleActive()},this.removeActiveOnScroll=()=>{if(this.isActive&&!this.isVisibleOnScroll){const t=this._Cre8PopoverPanel.getBoundingClientRect();this._Cre8Popover.clientHeight+t.height+t.top<window.innerHeight&&this._toggleActive()}},this.removeActive=()=>{this.isActive&&this._toggleActive()}}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),globalThis.window.addEventListener("resize",this.removeActive),globalThis.window.addEventListener("scroll",this.removeActiveOnScroll),globalThis.window.addEventListener("orientationchange",this.removeActive),globalThis.document.addEventListener("mousedown",this.handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),globalThis.window.removeEventListener("resize",this.removeActive),globalThis.window.removeEventListener("scroll",this.removeActiveOnScroll),globalThis.window.removeEventListener("orientationchange",this.removeActive),globalThis.document.removeEventListener("mousedown",this.handleOnClickOutside,!1)}firstUpdated(){this.addAria()}addAria(){let t;this._Cre8PopoverTrigger[0].tagName==="CRE8-BUTTON"?(t=this._Cre8PopoverTrigger[0],t.buttonAriaExpanded=this.isActive?this.isActive:!1):(t=this._Cre8PopoverTrigger[0],t.setAttribute("aria-expanded",`${this.isActive?this.isActive:!1}`),t.setAttribute("type","button"))}dynamicPosition(){if(this.isDynamic&&this._Cre8PopoverPanel){const t=document.querySelector("body").getBoundingClientRect(),e=this._Cre8PopoverPanel.getBoundingClientRect();e.left<0&&(this.position=this.isRTL?"left":"right"),e.right>=t.width&&(this.position=this.isRTL?"right":"left"),e.top<0&&e.left>0&&e.right<t.width&&(this.position=null),e.bottom>=window.innerHeight&&e.left>=0&&e.right<=t.width&&(this.position="top")}}_toggleActive(){this.isActive=!this.isActive,this.addAria(),this.isActive?(requestAnimationFrame(()=>{this.dynamicPosition()}),this.dispatchWithLegacyAlias(new CustomEvent("popover-open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchWithLegacyAlias(new CustomEvent("popover-close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}_handleKeydown(t){t.key==="Escape"&&this.isActive===!0?this._toggleActive():t.key==="Tab"&&this._handleTabNavigation(t)}_handleTabNavigation(t){this.isActive&&this._navigateInsidePopover(t)}_navigateInsidePopover(t){const e=this._getFocusableElements();if(e.length===0){this._closePopoverAndFocusTrigger(t);return}const a=e[e.length-1];document.activeElement===a&&(this._closePopoverAndFocusTrigger(t),t.preventDefault())}_getFocusableElements(){return[...Array.from(this._Cre8PopoverFooter)]}_closePopoverAndFocusTrigger(t){this._toggleActive(),t.preventDefault()}render(){const t=this.componentClassNames("cre8-c-popover",{"cre8-c-popover--top":this.position==="top","cre8-c-popover--left":this.position==="left","cre8-c-popover--right":this.position==="right","cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return h`
       <div class="${t}">
         ${this.slotNotEmpty("trigger")&&h` <slot name="trigger" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}
@@ -45988,7 +45988,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);
@@ -46019,12 +46019,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;
   }
 }
@@ -46050,7 +46050,7 @@ cre8-icon-legacy {
 }
 @media all and (min-width: 960px) {
   cre8-icon-legacy {
-    margin-left: 0.5rem;
+    margin-left: var(--cre8-spacing-8);
   }
 }
 
@@ -46094,8 +46094,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 */
@@ -46116,18 +46116,18 @@ 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;
+  margin-left: var(--cre8-spacing-8);
 }`;var zb=Object.defineProperty,ma=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&zb(t,e,i),i};const Bs=class Bs extends I{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(t){if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const e=t.composedPath().includes(this.shadowRoot.host);this.isActive&&!e&&(this.isActive=!1)}_clickHandler(t){t.preventDefault(),this.parentNode&&this.parentNode.querySelectorAll("cre8-primary-nav-item").forEach(a=>{a!==this&&(a.isActive=!1)}),this.isActive=!this.isActive}_closePanel(){this.isActive=!1}_handleOnKeyDown(t){if(t.key==="Escape"&&this.isActive===!0){this._closePanel();const e=this.shadowRoot?.querySelector(".cre8-c-primary-nav__link");e&&setTimeout(()=>{e.focus()},1)}}render(){const t=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?h`
             <div class="${t}" @keydown=${this._handleOnKeyDown}>
                 <div class="cre8-c-primary-nav__item-content">
@@ -48128,7 +48128,7 @@ span.ripple {
   line-height: var(--cre8-typography-label-small-line-height);
   text-decoration: var(--cre8-typography-label-small-text-decoration);
   text-transform: var(--cre8-typography-label-small-text-transform);
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--cre8-spacing-8);
 }
 
 /** 
@@ -48764,7 +48764,7 @@ span.ripple {
   display: flex;
   position: relative;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--cre8-spacing-8);
   min-height: 1.5rem;
   /** 
   * 1) Form field that is compose of a radio input, label, and optional fieldnote.
@@ -48880,7 +48880,7 @@ span.ripple {
  * Radio field item input 
  */
 .cre8-c-radio-field-item__label {
-  margin-left: 2rem;
+  margin-left: var(--cre8-spacing-32);
   font-family: var(--cre8-typography-label-small-font-family);
   font-size: var(--cre8-typography-label-small-font-size);
   font-weight: var(--cre8-typography-label-small-font-weight);
@@ -49520,7 +49520,7 @@ span.ripple {
  * 1) A major section of a page (<section> tag) with a title and optional description.
  */
 .cre8-c-section {
-  margin-bottom: 2rem;
+  margin-bottom: var(--cre8-spacing-32);
   display: block;
 }
 
@@ -49537,11 +49537,11 @@ span.ripple {
 * Section body
 */
 .cre8-c-section__body {
-  padding-top: 1rem;
+  padding-top: var(--cre8-padding-16);
 }
 @media all and (min-width: 960px) {
   .cre8-c-section__body {
-    padding-top: 2rem;
+    padding-top: var(--cre8-spacing-32);
   }
 }`;var Sb=Object.defineProperty,Fb=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&Sb(t,e,i),i};const Hs=class Hs extends I{render(){const t=this.componentClassNames("cre8-c-section",{});return h`
       <section class="${t}">
@@ -50280,7 +50280,7 @@ span.ripple {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
   pointer-events: none;
 }
 
@@ -50288,7 +50288,7 @@ span.ripple {
  * Select Arrow Icon
  */
 .cre8-c-select__icon-arrow {
-  margin-right: 0.375rem;
+  margin-right: var(--cre8-spacing-6);
   width: 0.75rem;
   height: 0.75rem;
 }
@@ -50958,7 +50958,7 @@ span.ripple {
   flex-direction: column;
   height: 100%;
   width: 100%;
-  padding: 1rem;
+  padding: var(--cre8-padding-16);
   gap: 1rem;
   background: var(--cre8-color-bg-default);
 }
@@ -52069,11 +52069,11 @@ span.ripple {
   line-height: var(--cre8-typography-label-default-line-height);
   text-decoration: var(--cre8-typography-label-default-text-decoration);
   text-transform: var(--cre8-typography-label-default-text-transform);
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--cre8-spacing-8);
 }
 
 .cre8-c-select-tile-list__list {
-  gap: 1.5rem;
+  gap: var(--cre8-spacing-24);
   display: grid;
   grid-template-columns: repeat(auto-fit, var(--cre8-select-tile-list-item-width, 13rem));
 }
@@ -55209,7 +55209,7 @@ span.ripple {
   padding: 0;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
   color: var(--cre8-color-content-default);
   background-color: transparent;
   border: 0;
@@ -63665,8 +63665,8 @@ span.ripple {
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  gap: var(--cre8-spacing-8);
+  padding: var(--cre8-padding-8) var(--cre8-padding-8) var(--cre8-padding-8) var(--cre8-padding-16);
   color: var(--cre8-color-content-brand-strong);
   background-color: var(--cre8-color-bg-default);
   border-block-end: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default);
@@ -64365,7 +64365,7 @@ span.ripple {
 * 1) Container used to place items after the text link
 */
 .cre8-c-text-link__after {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
 }`;var C4=Object.defineProperty,En=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&C4(t,e,i),i};const ll=class ll extends I{render(){const t=this.componentClassNames("cre8-c-text-link",{"cre8-c-text-link--inverted":this.inverted===!0,"cre8-c-text-link--display":this.variant==="display","cre8-c-text-link--secondary":this.variant==="secondary","cre8-c-text-link--sm":this.size==="sm"});return h`
       <a href="${R(this.href)}" class="${t}">
         <slot></slot>
@@ -65001,7 +65001,7 @@ span.ripple {
   transform: translateX(var(--rtlTranslateX, -50%));
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
   width: max-content;
   max-width: 17.5rem;
   z-index: 400;
@@ -65009,7 +65009,7 @@ span.ripple {
   background-color: var(--cre8-color-bg-strong);
   border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
   border-radius: var(--cre8-border-radius-container);
-  padding: 0.5rem;
+  padding: var(--cre8-padding-8);
   /**
    * Active state for tooltip panel
    */
@@ -65139,7 +65139,7 @@ span.ripple {
  */
 .cre8-c-tooltip__footer {
   display: flex;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
   justify-content: flex-end;
   flex-grow: 1;
 }
@@ -65799,8 +65799,8 @@ span.ripple {
   */
 }
 .cre8-c-utility-nav__list ::slotted(cre8-utility-nav-item) {
-  margin-left: 1rem;
-  margin-top: 1rem;
+  margin-left: var(--cre8-spacing-16);
+  margin-top: var(--cre8-spacing-16);
 }`;var $4=Object.defineProperty,Zp=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&$4(t,e,i),i};const ml=class ml extends I{constructor(){super(...arguments),this.navAriaLabel="utility"}render(){const t=this.componentClassNames("cre8-c-utility-nav",{"cre8-c-utility-nav--inverted":this.inverted===!0});return h`
       <nav aria-label="${this.navAriaLabel}" class="${t}">
         <ul class="cre8-c-utility-nav__list">
@@ -66445,7 +66445,7 @@ cre8-icon-legacy {
 * 1) Create space between text and icon
 */
 .cre8-c-utility-nav__text + cre8-icon-legacy {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   /* 1 */
 }
 
@@ -66454,7 +66454,7 @@ cre8-icon-legacy {
 * 1) Create space between text and icon
 */
 cre8-icon-legacy + .cre8-c-utility-nav__text {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   /* 1 */
 }`;var O4=Object.defineProperty,fa=(r,t,e,a)=>{for(var i=void 0,n=r.length-1,o;n>=0;n--)(o=r[n])&&(i=o(t,e,i)||i);return i&&O4(t,e,i),i};const pl=class pl extends I{constructor(){super(...arguments),this.iconPosition=void 0}render(){const t=this.componentClassNames("cre8-c-utility-nav__item",{});return this.href?h`
         <li class="${t}">