@tmorrow/cre8-wc 2.3.5 → 2.3.9

package/dist/assets/{tabs.stories-B5gNqx2F.js → tabs.stories-BOJ0lZgg.js}

@@ -1,5 +1,5 @@
-import{a as w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spread-Cc0YLoqh.js";import{s as C}from"./story-helpers-BFn_kBYw.js";import{C as z,n as o}from"./cre8-element-D4jUl3yv.js";import{e as v}from"./query-BpjciUlk.js";import{r as T}from"./state-ClQJCb1N.js";import{o as E}from"./query-assigned-elements-43hYArgI.js";import{n as L}from"./index.browser-BY9c7rfI.js";import{s as V}from"./light-children-DDjBxt3J.js";import"./f-po-CDPxLfff.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./if-defined-Bh0SnORx.js";const O=w`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as w,b as x,o as R}from"./iframe-DDPT8KPE.js";import{s as S}from"./spread-B6c5bbZ0.js";import{s as C}from"./story-helpers-BFn_kBYw.js";import{C as T,n as o}from"./cre8-element-D6gzFubi.js";import{e as v}from"./query-BpjciUlk.js";import{r as k}from"./state-Ds0pqCS8.js";import{o as E}from"./query-assigned-elements-43hYArgI.js";import{n as L}from"./index.browser-BY9c7rfI.js";import{s as V}from"./light-children-DDjBxt3J.js";import"./f-po-B5bw1GSj.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./if-defined-D9Db4BBK.js";const O=w`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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 w,b as x,o as R}from"./iframe-DgoqrgRr.js";import{s as S}from"./spre
 }
 
 .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) {
@@ -620,12 +619,12 @@ span.ripple {
 .cre8-c-tab-panel.cre8-is-active {
   visibility: visible;
   display: block;
-}`;var P=Object.defineProperty,y=(d,e,t,i)=>{for(var a=void 0,n=d.length-1,c;n>=0;n--)(c=d[n])&&(a=c(e,t,a)||a);return a&&P(e,t,a),a};const k=class k extends z{firstUpdated(){this.skipFocusOnPanel||this._Cre8TabPanel.setAttribute("tabindex","0")}render(){const e=this.componentClassNames("cre8-c-tab-panel",{"cre8-is-active":this.isActive});return x`
+}`;var P=Object.defineProperty,y=(s,e,t,r)=>{for(var a=void 0,n=s.length-1,m;n>=0;n--)(m=s[n])&&(a=m(e,t,a)||a);return a&&P(e,t,a),a};const I=class I extends T{firstUpdated(){this.skipFocusOnPanel||this._Cre8TabPanel.setAttribute("tabindex","0")}render(){const e=this.componentClassNames("cre8-c-tab-panel",{"cre8-is-active":this.isActive});return x`
       <div role="tabpanel" class="${e}">
         <slot></slot>
       </div>
-    `}};k.styles=[O];let m=k;y([o({type:Boolean,reflect:!0})],m.prototype,"skipFocusOnPanel");y([o({type:Boolean,reflect:!0})],m.prototype,"isActive");y([o({type:Number})],m.prototype,"index");y([v(".cre8-c-tab-panel")],m.prototype,"_Cre8TabPanel");customElements.get("cre8-tab-panel")===void 0&&customElements.define("cre8-tab-panel",m);const B=w`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+    `}};I.styles=[O];let p=I;y([o({type:Boolean,reflect:!0})],p.prototype,"skipFocusOnPanel");y([o({type:Boolean,reflect:!0})],p.prototype,"isActive");y([o({type:Number})],p.prototype,"index");y([v(".cre8-c-tab-panel")],p.prototype,"_Cre8TabPanel");customElements.get("cre8-tab-panel")===void 0&&customElements.define("cre8-tab-panel",p);const B=w`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -698,23 +697,23 @@ span.ripple {
 }
 
 .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 {
@@ -722,23 +721,23 @@ span.ripple {
 }
 
 .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 {
@@ -746,23 +745,23 @@ span.ripple {
 }
 
 .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 {
@@ -770,32 +769,32 @@ span.ripple {
 }
 
 .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 {
@@ -803,23 +802,23 @@ span.ripple {
 }
 
 .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 {
@@ -827,23 +826,23 @@ span.ripple {
 }
 
 .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 {
@@ -851,23 +850,23 @@ span.ripple {
 }
 
 .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 {
@@ -875,23 +874,23 @@ span.ripple {
 }
 
 .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 {
@@ -899,23 +898,23 @@ span.ripple {
 }
 
 .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 {
@@ -923,23 +922,23 @@ span.ripple {
 }
 
 .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 {
@@ -955,7 +954,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;
@@ -963,7 +961,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) {
@@ -1243,7 +1241,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;
@@ -1311,7 +1309,7 @@ span.ripple {
 .cre8-c-tab.cre8-c-tab--small.cre8-is-active:not(:focus-visible) {
   padding-block-end: calc(0.25rem - var(--cre8-border-width-tab-selected));
   /* 1 */
-}`;var F=Object.defineProperty,h=(d,e,t,i)=>{for(var a=void 0,n=d.length-1,c;n>=0;n--)(c=d[n])&&(a=c(e,t,a)||a);return a&&F(e,t,a),a};const I=class I extends z{updated(e){e.has("ariaLabelledBy")&&this._Cre8Tab.setAttribute("id",this.ariaLabelledBy),e.has("isActive")&&(this._Cre8Tab.setAttribute("tabindex",this.isActive?"0":"-1"),this._Cre8Tab.setAttribute("aria-selected",`${this.isActive}`))}_handleTabSelected(){const e=new CustomEvent("tab-select",{detail:{index:this.index},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}render(){const e=this.componentClassNames("cre8-c-tab",{"cre8-is-active":this.isActive,"cre8-c-tab--small":this.size==="sm"});return x`
+}`;var F=Object.defineProperty,h=(s,e,t,r)=>{for(var a=void 0,n=s.length-1,m;n>=0;n--)(m=s[n])&&(a=m(e,t,a)||a);return a&&F(e,t,a),a};const _=class _ extends T{updated(e){e.has("ariaLabelledBy")&&this._Cre8Tab.setAttribute("id",this.ariaLabelledBy),e.has("isActive")&&(this._Cre8Tab.setAttribute("tabindex",this.isActive?"0":"-1"),this._Cre8Tab.setAttribute("aria-selected",`${this.isActive}`))}_handleTabSelected(){const e=new CustomEvent("tab-select",{detail:{index:this.index},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}render(){const e=this.componentClassNames("cre8-c-tab",{"cre8-is-active":this.isActive,"cre8-c-tab--small":this.size==="sm"});return x`
       <button
         role="tab"
         tabindex="-1"
@@ -1322,8 +1320,8 @@ span.ripple {
       >
         <slot></slot>
       </button>
-    `}};I.styles=[B];let p=I;h([o()],p.prototype,"size");h([o({type:Boolean,reflect:!0})],p.prototype,"isActive");h([o({type:Number})],p.prototype,"index");h([o()],p.prototype,"ariaLabelledBy");h([v(".cre8-c-tab")],p.prototype,"_Cre8Tab");customElements.get("cre8-tab")===void 0&&customElements.define("cre8-tab",p);const X=w`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+    `}};_.styles=[B];let c=_;h([o()],c.prototype,"size");h([o({type:Boolean,reflect:!0})],c.prototype,"isActive");h([o({type:Number})],c.prototype,"index");h([o()],c.prototype,"ariaLabelledBy");h([v(".cre8-c-tab")],c.prototype,"_Cre8Tab");customElements.get("cre8-tab")===void 0&&customElements.define("cre8-tab",c);const X=w`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -1396,23 +1394,23 @@ span.ripple {
 }
 
 .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 {
@@ -1420,23 +1418,23 @@ span.ripple {
 }
 
 .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 {
@@ -1444,23 +1442,23 @@ span.ripple {
 }
 
 .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 {
@@ -1468,32 +1466,32 @@ span.ripple {
 }
 
 .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 {
@@ -1501,23 +1499,23 @@ span.ripple {
 }
 
 .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 {
@@ -1525,23 +1523,23 @@ span.ripple {
 }
 
 .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 {
@@ -1549,23 +1547,23 @@ span.ripple {
 }
 
 .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 {
@@ -1573,23 +1571,23 @@ span.ripple {
 }
 
 .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 {
@@ -1597,23 +1595,23 @@ span.ripple {
 }
 
 .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 {
@@ -1621,23 +1619,23 @@ span.ripple {
 }
 
 .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 {
@@ -1653,7 +1651,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;
@@ -1661,7 +1658,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) {
@@ -2007,7 +2004,7 @@ span.ripple {
 .cre8-c-tabs--full-width .cre8-c-tabs__body {
   border-top: var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);
   margin-top: calc(var(--cre8-border-width-tab-selected) * -2);
-}`;var $=Object.defineProperty,s=(d,e,t,i)=>{for(var a=void 0,n=d.length-1,c;n>=0;n--)(c=d[n])&&(a=c(e,t,a)||a);return a&&$(e,t,a),a};let A=1;const _=class _ extends z{constructor(){super(),this.activeIndex=0,this.isStart=!0,this.isEnd=!1,this.handleScroll=this.handleScroll.bind(this),this.handleResize=this.handleResize.bind(this),this.setIsStart=this.setIsStart.bind(this),this.setIsEnd=this.setIsEnd.bind(this),this.emitEvent=this.emitEvent.bind(this),this.tabId=`cre8-tabpanel-${A}`,A+=1}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}async firstUpdated(){this.setTabAttributes(),await this.updateComplete,this.activeTab=this._Cre8TabItems[this.activeIndex]||this._Cre8TabItems[0],this.setActiveTab(),this.setIsStart(),this.setIsEnd(),this.setTabVariant()}async updated(e){e.has("items")&&V(this,this.buildComposition()),e.forEach(async(t,i)=>{i==="activeIndex"&&this.activeIndex!==t&&(await this.updateComplete,this.activeTab&&this.removePreviousActiveTab(),this.activeTab=this._Cre8TabItems[this.activeIndex],this.setActiveTab())})}handleResize(){this.setIsStart(),this.setIsEnd()}handleScroll(){this.setIsStart(),this.setIsEnd()}setIsStart(){this.isRTL?this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!0:this.isStart=!1:this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!1:this.isStart=!0}setIsEnd(){this.isInViewport()===!0?this.isEnd=!0:this.isEnd=!1}isInViewport(){const t=this._Cre8TabItems[this._Cre8TabItems.length-1].shadowRoot?.querySelector(".cre8-c-tab");if(!t)return!1;const i=t.getBoundingClientRect(),a=window.innerWidth||document.documentElement.clientWidth;return i.left>=0&&i.right<=a}setTabVariant(){this.size==="sm"&&this._Cre8TabItems.forEach(e=>{e.size="sm"})}setTabAttributes(){this._Cre8TabItems.forEach((e,t)=>{e.index=t;const a=e.ariaLabelledBy||L();e.ariaLabelledBy=a;const n=this._Cre8TabPanels[t];n.index=t})}setActiveTab(){this.activeTab.isActive=!0;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!0)}setActiveTabFocus(){this.activeTab.shadowRoot?.querySelector(".cre8-c-tab").focus()}handleTabSelected(e){const{target:t}=e;if(this._Cre8TabItems.includes(t)){this.activeTab&&this.removePreviousActiveTab(),this.activeTab=t;const i=this._Cre8TabItems.findIndex(a=>a===this.activeTab);this.activeIndex=i,this.setActiveTab(),this.emitEvent()}}handleKeydown(e){const{target:t}=e;if(document.activeElement.matches("cre8-tab"))switch(e.key){case"ArrowRight":e.preventDefault(),this.setSelectedToNextTab(t);break;case"ArrowLeft":e.preventDefault(),this.setSelectedToPreviousTab(t);break;case"Home":e.preventDefault(),this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length-1]);break;case"End":e.preventDefault(),this.setSelectedToPreviousTab(this._Cre8TabItems[0]);break;case"Escape":this.activeTab.blur();break}}setSelectedToPreviousTab(e){const t=e.index;this.removePreviousActiveTab();const i=this._Cre8TabItems.length-1;if(t===0)this.activeIndex=i,this.activeTab=this._Cre8TabItems[i];else{const a=t-1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}setSelectedToNextTab(e){const t=e.index;this.removePreviousActiveTab();const i=this._Cre8TabItems.length-1;if(t===i)this.activeIndex=0,this.activeTab=this._Cre8TabItems[0];else{const a=t+1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}removePreviousActiveTab(){this.activeTab.isActive=!1;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!1)}emitEvent(){const e=new CustomEvent("tab-change",{detail:{value:this.activeTab,activeTabIndex:this.activeIndex},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}buildComposition(){if(!this.items)return null;const e=this.items.map((i,a)=>({tag:"cre8-tab",props:{index:a},text:i.label})),t=this.items.map((i,a)=>({tag:"cre8-tab-panel",props:{index:a},slot:"panel",text:i.content??""}));return[...e,...t]}render(){const e=this.componentClassNames("cre8-c-tabs",{"cre8-is-start":this.isStart===!0,"cre8-is-end":this.isEnd===!0,"cre8-c-tabs--full-width":this.fullWidth});return x`
+}`;var $=Object.defineProperty,d=(s,e,t,r)=>{for(var a=void 0,n=s.length-1,m;n>=0;n--)(m=s[n])&&(a=m(e,t,a)||a);return a&&$(e,t,a),a};let A=1;const z=class z extends T{constructor(){super(),this.activeIndex=0,this.isStart=!0,this.isEnd=!1,this.handleScroll=this.handleScroll.bind(this),this.handleResize=this.handleResize.bind(this),this.setIsStart=this.setIsStart.bind(this),this.setIsEnd=this.setIsEnd.bind(this),this.emitEvent=this.emitEvent.bind(this),this.tabId=`cre8-tabpanel-${A}`,A+=1}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}async firstUpdated(){this.setTabAttributes(),await this.updateComplete,this.activeTab=this._Cre8TabItems[this.activeIndex]||this._Cre8TabItems[0],this.setActiveTab(),this.setIsStart(),this.setIsEnd(),this.setTabVariant()}async updated(e){e.has("items")&&V(this,this.buildComposition()),e.forEach(async(t,r)=>{r==="activeIndex"&&this.activeIndex!==t&&(await this.updateComplete,this.activeTab&&this.removePreviousActiveTab(),this.activeTab=this._Cre8TabItems[this.activeIndex],this.setActiveTab())})}handleResize(){this.setIsStart(),this.setIsEnd()}handleScroll(){this.setIsStart(),this.setIsEnd()}setIsStart(){this.isRTL?this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!0:this.isStart=!1:this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!1:this.isStart=!0}setIsEnd(){this.isInViewport()===!0?this.isEnd=!0:this.isEnd=!1}isInViewport(){const t=this._Cre8TabItems[this._Cre8TabItems.length-1].shadowRoot?.querySelector(".cre8-c-tab");if(!t)return!1;const r=t.getBoundingClientRect(),a=window.innerWidth||document.documentElement.clientWidth;return r.left>=0&&r.right<=a}setTabVariant(){this.size==="sm"&&this._Cre8TabItems.forEach(e=>{e.size="sm"})}setTabAttributes(){this._Cre8TabItems.forEach((e,t)=>{e.index=t;const a=e.ariaLabelledBy||L();e.ariaLabelledBy=a;const n=this._Cre8TabPanels[t];n.index=t})}setActiveTab(){this.activeTab.isActive=!0;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!0)}setActiveTabFocus(){this.activeTab.shadowRoot?.querySelector(".cre8-c-tab").focus()}handleTabSelected(e){const{target:t}=e;if(this._Cre8TabItems.includes(t)){this.activeTab&&this.removePreviousActiveTab(),this.activeTab=t;const r=this._Cre8TabItems.findIndex(a=>a===this.activeTab);this.activeIndex=r,this.setActiveTab(),this.emitEvent()}}handleKeydown(e){const{target:t}=e;if(document.activeElement.matches("cre8-tab"))switch(e.key){case"ArrowRight":e.preventDefault(),this.setSelectedToNextTab(t);break;case"ArrowLeft":e.preventDefault(),this.setSelectedToPreviousTab(t);break;case"Home":e.preventDefault(),this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length-1]);break;case"End":e.preventDefault(),this.setSelectedToPreviousTab(this._Cre8TabItems[0]);break;case"Escape":this.activeTab.blur();break}}setSelectedToPreviousTab(e){const t=e.index;this.removePreviousActiveTab();const r=this._Cre8TabItems.length-1;if(t===0)this.activeIndex=r,this.activeTab=this._Cre8TabItems[r];else{const a=t-1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}setSelectedToNextTab(e){const t=e.index;this.removePreviousActiveTab();const r=this._Cre8TabItems.length-1;if(t===r)this.activeIndex=0,this.activeTab=this._Cre8TabItems[0];else{const a=t+1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}removePreviousActiveTab(){this.activeTab.isActive=!1;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!1)}emitEvent(){const e=new CustomEvent("tab-change",{detail:{value:this.activeTab,activeTabIndex:this.activeIndex},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}buildComposition(){if(!this.items)return null;const e=this.items.map((r,a)=>({tag:"cre8-tab",props:{index:a},text:r.label})),t=this.items.map((r,a)=>({tag:"cre8-tab-panel",props:{index:a},slot:"panel",text:r.content??""}));return[...e,...t]}render(){const e=this.componentClassNames("cre8-c-tabs",{"cre8-is-start":this.isStart===!0,"cre8-is-end":this.isEnd===!0,"cre8-c-tabs--full-width":this.fullWidth});return x`
         <div class="${e}">
             <div class="cre8-c-tabs__header">
                 <div
@@ -2025,9 +2022,9 @@ span.ripple {
                 <slot name="panel"></slot>
             </div>
         </div>
-    `}};_.styles=[X];let r=_;s([o()],r.prototype,"size");s([o({type:Boolean,reflect:!0})],r.prototype,"fullWidth");s([o({type:Number})],r.prototype,"activeIndex");s([T()],r.prototype,"activeTab");s([T()],r.prototype,"isStart");s([T()],r.prototype,"isEnd");s([E()],r.prototype,"_Cre8TabItems");s([E({slot:"panel"})],r.prototype,"_Cre8TabPanels");s([v(".cre8-c-tabs__header")],r.prototype,"_Cre8TabsHeader");s([v(".cre8-c-tabs__list")],r.prototype,"_Cre8TabsHeaderList");s([o({type:Array})],r.prototype,"items");customElements.get("cre8-tabs")===void 0&&customElements.define("cre8-tabs",r);const ee={title:"cre8 Components/Tabs",component:"cre8-tabs",render:({default:d,panel:e,...t})=>x`
+    `}};z.styles=[X];let i=z;d([o()],i.prototype,"size");d([o({type:Boolean,reflect:!0})],i.prototype,"fullWidth");d([o({type:Number})],i.prototype,"activeIndex");d([k()],i.prototype,"activeTab");d([k()],i.prototype,"isStart");d([k()],i.prototype,"isEnd");d([E()],i.prototype,"_Cre8TabItems");d([E({slot:"panel"})],i.prototype,"_Cre8TabPanels");d([v(".cre8-c-tabs__header")],i.prototype,"_Cre8TabsHeader");d([v(".cre8-c-tabs__list")],i.prototype,"_Cre8TabsHeaderList");d([o({type:Array})],i.prototype,"items");customElements.get("cre8-tabs")===void 0&&customElements.define("cre8-tabs",i);const ee={title:"cre8 Components/Tabs",component:"cre8-tabs",render:({default:s,panel:e,...t})=>x`
     <cre8-tabs ${S(t)}>
-      ${R(C(d,"cre8-tab"))}
+      ${R(C(s,"cre8-tab"))}
       ${R(C(e,"cre8-tab-panel","f-po"))}
     </cre8-tabs>`,parameters:{status:{type:"inProgress"},actions:{handles:["tab-change","tab-select"]}},argTypes:{activeIndex:{control:{type:"text"}},size:{control:{type:"text"}},activeTab:{table:{disable:!0}},emitEvent:{table:{disable:!0}},handleResize:{table:{disable:!0}},handleScroll:{table:{disable:!0}},isEnd:{table:{disable:!0}},isRTL:{table:{disable:!0}},isStart:{table:{disable:!0}},setIsStart:{table:{disable:!0}},setIsEnd:{table:{disable:!0}},"tab-change":{table:{disable:!0}},tabId:{table:{disable:!0}}}},l={args:{default:`<cre8-tab>Tab 1</cre8-tab>
       <cre8-tab>Tab 2</cre8-tab>