@tmorrow/cre8-wc 2.3.4 → 2.3.6

package/dist/assets/{section.stories-D6w1QGJm.js → section.stories-BsRdbbnp.js}

@@ -1,5 +1,5 @@
-import{a as l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js";import"./heading-DPFC7eAf.js";import"./button-CKAKDdnt.js";import"./text-passage-iKhUwSNA.js";import{C as g,n as u}from"./cre8-element-C32P9iMC.js";import{s as h}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-CE1QkYoV.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-C-cxFbUF.js";import"./icon-CRGiEUM0.js";import"./loading-spinner-KSDrx_ka.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=l`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as p,b as n,o as c}from"./iframe-B4bTcHfE.js";import"./f-po-qGnzb4u2.js";import"./heading-DJFZJNk9.js";import"./button-BYSQD8Gp.js";import"./text-passage-BrueaqOk.js";import{C as g,n as u}from"./cre8-element-C-P96xHp.js";import{s as h}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-DA22R8ho.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-1YjfSY90.js";import"./icon-JqBqZA-z.js";import"./loading-spinner-DKyQa4wk.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=p`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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 l,b as n,o as c}from"./iframe-BH5yZqve.js";import"./f-po-Bskj3oQY.js
 }
 
 .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) {
@@ -589,7 +588,20 @@ span.ripple {
 /**
  * Visually hidden from display
  */
-#SECTION .cre8-c-section {
+/**
+ * 1) Custom elements default to \`display: inline\`, which makes the host a text
+ * box and lets its children flow like inline content. Every layout rule below
+ * lives on a wrapper inside the shadow root, so without this the host itself
+ * never takes part in block layout.
+ */
+:host {
+  display: block;
+}
+
+/**
+ * 1) A major section of a page (<section> tag) with a title and optional description.
+ */
+.cre8-c-section {
   margin-bottom: 2rem;
   display: block;
 }
@@ -613,7 +625,7 @@ span.ripple {
   .cre8-c-section__body {
     padding-top: 2rem;
   }
-}`;var x=Object.defineProperty,b=(i,e,m,y)=>{for(var t=void 0,d=i.length-1,p;d>=0;d--)(p=i[d])&&(t=p(e,m,t)||t);return t&&x(e,m,t),t};const s=class s extends g{render(){const e=this.componentClassNames("cre8-c-section",{});return n`
+}`;var x=Object.defineProperty,b=(i,e,s,y)=>{for(var t=void 0,m=i.length-1,l;m>=0;m--)(l=i[m])&&(t=l(e,s,t)||t);return t&&x(e,s,t),t};const d=class d extends g{render(){const e=this.componentClassNames("cre8-c-section",{});return n`
       <section class="${e}">
         ${this.headline?n`<header class="cre8-c-section__header">
               <cre8-heading tagVariant="h2">${this.headline}</cre8-heading>
@@ -625,7 +637,7 @@ span.ripple {
           <slot></slot>
         </div>
       </section>
-    `}};s.styles=[f];let o=s;b([u()],o.prototype,"headline");customElements.get("cre8-section")===void 0&&customElements.define("cre8-section",o);const F={title:"cre8 Components/Section",component:"cre8-section",parameters:{status:{type:"inProgress"},controls:{hideNoControlsWarning:!0}},argTypes:{headline:{control:{type:"text"}},contents:{control:{type:"text"}}},args:{headline:"Section Headline",contents:`<cre8-text-passage>
+    `}};d.styles=[f];let o=d;b([u()],o.prototype,"headline");customElements.get("cre8-section")===void 0&&customElements.define("cre8-section",o);const j={title:"cre8 Components/Section",component:"cre8-section",parameters:{status:{type:"inProgress"},controls:{hideNoControlsWarning:!0}},argTypes:{headline:{control:{type:"text"}},contents:{control:{type:"text"}}},args:{headline:"Section Headline",contents:`<cre8-text-passage>
     <p>
       This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
       dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -676,4 +688,4 @@ span.ripple {
     </p>
     </cre8-text-passage>\`
   }
-}`,...r.parameters?.docs?.source}}};const P=["Default","CustomHeading"];export{r as CustomHeading,a as Default,P as __namedExportsOrder,F as default};
+}`,...r.parameters?.docs?.source}}};const F=["Default","CustomHeading"];export{r as CustomHeading,a as Default,F as __namedExportsOrder,j as default};