@tmorrow/cre8-wc 2.0.5 → 2.0.7

package/dist/assets/{global-nav-item-C_P64qZX.js → global-nav-item-xQL7wVjY.js}

@@ -1,4 +1,4 @@
-import{i as p,b as r}from"./iframe-CdWmiVXf.js";import{o as g}from"./if-defined-sxEueMHN.js";import{C as h,n as o}from"./cre8-element-gkCuLp-W.js";import{r as u}from"./state-BQD-SkUn.js";const f=p`.cre8-u-content-knockout-brand {
+import{a as p,b as a}from"./iframe-dHvya7sk.js";import{o as g}from"./if-defined-HKKhGupN.js";import{C as h,n as o}from"./cre8-element-DfmMtHJO.js";import{r as u}from"./state-CfuknrX8.js";const f=p`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -659,10 +667,10 @@ cre8-icon-legacy {
   --cre8-icon-height: 0.75rem;
   --cre8-icon-width: 0.75rem;
   margin-left: 0.5rem;
-}`;var b=Object.defineProperty,n=(m,e,t,d)=>{for(var a=void 0,s=m.length-1,c;s>=0;s--)(c=m[s])&&(a=c(e,t,a)||a);return a&&b(e,t,a),a};const l=class l extends h{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(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-global-nav-item").forEach(d=>{d!==this&&(d.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-global-nav__link");t&&setTimeout(()=>{t.focus()},1)}}render(){const e=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?r`
+}`;var b=Object.defineProperty,n=(m,e,t,d)=>{for(var r=void 0,s=m.length-1,c;s>=0;s--)(c=m[s])&&(r=c(e,t,r)||r);return r&&b(e,t,r),r};const l=class l extends h{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(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-global-nav-item").forEach(d=>{d!==this&&(d.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-global-nav__link");t&&setTimeout(()=>{t.focus()},1)}}render(){const e=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?a`
             <li class="${e}" @keydown=${this._handleOnKeyDown}>
                 <div class="cre8-c-global-nav__item-content">
-                    ${this.slotNotEmpty("itemBefore")&&r`
+                    ${this.slotNotEmpty("itemBefore")&&a`
                     <div class="cre8-c-global-nav__item-before">
                         <slot name="itemBefore"></slot>
                     </div>`}
@@ -676,16 +684,16 @@ cre8-icon-legacy {
                     </button>
                 </div>
             </li>
-        `:r`
+        `:a`
             <li class="${e}">
                 <div class="cre8-c-global-nav__item-content">
                     <a class="cre8-c-global-nav__link" href="${this.href}">
-                        ${this.slotNotEmpty("itemBefore")&&r`
+                        ${this.slotNotEmpty("itemBefore")&&a`
                         <div class="cre8-c-global-nav__item-before">
                             <slot name="itemBefore"></slot>
                         </div>`}
                         ${this.text}
-                        ${this.slotNotEmpty("itemAfter")&&r`
+                        ${this.slotNotEmpty("itemAfter")&&a`
                         <div class="cre8-c-global-nav__item-after">
                             <slot name="itemAfter"></slot>
                         </div>`}

package/dist/assets/global-nav-item.stories-Dp9TE3aR.js

@@ -0,0 +1 @@
+import{b as o}from"./iframe-dHvya7sk.js";import{s as t}from"./spread-BPiNgQQF.js";import"./global-nav-item-xQL7wVjY.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-HKKhGupN.js";import"./cre8-element-DfmMtHJO.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./state-CfuknrX8.js";const d={title:"Cre8 Components/Global Nav Item",component:"cre8-global-nav-item",parameters:{status:{type:"inProgress"}}},r=e=>o`<cre8-global-nav-item ${t(e)}>Hello world</cre8-global-nav-item>`;r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:"args => html`<cre8-global-nav-item ${spread(args)}>Hello world</cre8-global-nav-item>`",...r.parameters?.docs?.source}}};const g=["Default"];export{r as Default,g as __namedExportsOrder,d as default};

package/dist/assets/{global-nav.stories-BCBaOucz.js → global-nav.stories-B5Nk8JZ0.js}

@@ -1,4 +1,4 @@
-import{i as g,b as p}from"./iframe-CdWmiVXf.js";import{s as c}from"./spread-BOaHI3Dl.js";import"./global-nav-item-C_P64qZX.js";import{C as u,n as o}from"./cre8-element-gkCuLp-W.js";import"./preload-helper-PPVm8Dsz.js";import"./directive-b18f_ppQ.js";import"./if-defined-sxEueMHN.js";import"./state-BQD-SkUn.js";import"./_commonjsHelpers-DaWZu8wl.js";const h=g`.cre8-u-content-knockout-brand {
+import{a as g,b as p}from"./iframe-dHvya7sk.js";import{s as c}from"./spread-BPiNgQQF.js";import"./global-nav-item-xQL7wVjY.js";import{C as u,n as o}from"./cre8-element-DfmMtHJO.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-HKKhGupN.js";import"./state-CfuknrX8.js";import"./_commonjsHelpers-DaWZu8wl.js";const h=g`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -599,10 +607,10 @@ span.ripple {
   width: 100%;
   list-style: none;
   overflow: auto;
-}`;var f=Object.defineProperty,d=(i,a,s,b)=>{for(var t=void 0,n=i.length-1,l;n>=0;n--)(l=i[n])&&(t=l(a,s,t)||t);return t&&f(a,s,t),t};const m=class m extends u{constructor(){super(...arguments),this.navAriaLabel="global"}render(){const a=this.componentClassNames("cre8-c-global-nav",{"cre8-c-global-nav--side-by-side":this.behavior==="side-by-side","cre8-c-global-nav--inverted":this.inverted===!0});return p`
+}`;var f=Object.defineProperty,d=(i,a,l,b)=>{for(var t=void 0,n=i.length-1,s;n>=0;n--)(s=i[n])&&(t=s(a,l,t)||t);return t&&f(a,l,t),t};const m=class m extends u{constructor(){super(...arguments),this.navAriaLabel="global"}render(){const a=this.componentClassNames("cre8-c-global-nav",{"cre8-c-global-nav--side-by-side":this.behavior==="side-by-side","cre8-c-global-nav--inverted":this.inverted===!0});return p`
       <nav aria-label="${this.navAriaLabel}" class="${a}">
         <ul class="cre8-c-global-nav__list">
           <slot></slot>
         </ul>
       </nav>
-    `}};m.styles=[h];let e=m;d([o({type:Boolean,reflect:!0})],e.prototype,"inverted");d([o()],e.prototype,"behavior");d([o()],e.prototype,"navAriaLabel");customElements.get("cre8-global-nav")===void 0&&customElements.define("cre8-global-nav",e);const O={title:"Cre8 Components/Global Nav",component:"cre8-global-nav",parameters:{status:{type:"inProgress"}}},r=i=>p`<cre8-global-nav ${c(i)}>Hello world</cre8-global-nav>`;r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:"args => html`<cre8-global-nav ${spread(args)}>Hello world</cre8-global-nav>`",...r.parameters?.docs?.source}}};const V=["Default"];export{r as Default,V as __namedExportsOrder,O as default};
+    `}};m.styles=[h];let e=m;d([o({type:Boolean,reflect:!0})],e.prototype,"inverted");d([o()],e.prototype,"behavior");d([o()],e.prototype,"navAriaLabel");customElements.get("cre8-global-nav")===void 0&&customElements.define("cre8-global-nav",e);const R={title:"Cre8 Components/Global Nav",component:"cre8-global-nav",parameters:{status:{type:"inProgress"}}},r=i=>p`<cre8-global-nav ${c(i)}>Hello world</cre8-global-nav>`;r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:"args => html`<cre8-global-nav ${spread(args)}>Hello world</cre8-global-nav>`",...r.parameters?.docs?.source}}};const O=["Default"];export{r as Default,O as __namedExportsOrder,R as default};

package/dist/assets/{grid-DItOBpBm.js → grid-DYgnZBsd.js}

@@ -1,4 +1,4 @@
-import{i as g,b as c}from"./iframe-CdWmiVXf.js";import{C as h,n as d}from"./cre8-element-gkCuLp-W.js";const u=g`.cre8-u-content-knockout-brand {
+import{a as p,b as c}from"./iframe-dHvya7sk.js";import{C as h,n as d}from"./cre8-element-DfmMtHJO.js";const u=p`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -590,7 +598,7 @@ span.ripple {
       <div class="${e}">
         <slot></slot>
       </div>
-    `}};o.styles=[u];let a=o;customElements.get("cre8-grid-item")===void 0&&customElements.define("cre8-grid-item",a);const f=g`.cre8-u-content-knockout-brand {
+    `}};o.styles=[u];let a=o;customElements.get("cre8-grid-item")===void 0&&customElements.define("cre8-grid-item",a);const f=p`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -964,6 +972,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1136,6 +1148,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1521,7 +1537,7 @@ span.ripple {
   .cre8-c-grid--2-4-6up > ::slotted(cre8-grid-item) {
     width: 16.66%;
   }
-}`;var x=Object.defineProperty,n=(s,e,l,w)=>{for(var i=void 0,r=s.length-1,p;r>=0;r--)(p=s[r])&&(i=p(e,l,i)||i);return i&&x(e,l,i),i};const m=class m extends h{render(){const e=this.componentClassNames("cre8-c-grid",{"cre8-c-grid--side-by-side":this.variant==="side-by-side","cre8-c-grid--2up":this.variant==="2up","cre8-c-grid--3up":this.variant==="3up","cre8-c-grid--1-3up":this.variant==="1-3up","cre8-c-grid--4up":this.variant==="4up","cre8-c-grid--1-4up":this.variant==="1-4up","cre8-c-grid--1-2-4up":this.variant==="1-2-4up","cre8-c-grid--2-4-6up":this.variant==="2-4-6up","cre8-c-grid--gap-none":this.gap==="none","cre8-c-grid--gap-sm":this.gap==="sm","cre8-c-grid--gap-lg":this.gap==="lg","cre8-c-grid--break-faster":this.break==="faster","cre8-c-grid--break-slower":this.break==="slower"});return c`
+}`;var x=Object.defineProperty,n=(s,e,l,w)=>{for(var i=void 0,r=s.length-1,g;r>=0;r--)(g=s[r])&&(i=g(e,l,i)||i);return i&&x(e,l,i),i};const m=class m extends h{render(){const e=this.componentClassNames("cre8-c-grid",{"cre8-c-grid--side-by-side":this.variant==="side-by-side","cre8-c-grid--2up":this.variant==="2up","cre8-c-grid--3up":this.variant==="3up","cre8-c-grid--1-3up":this.variant==="1-3up","cre8-c-grid--4up":this.variant==="4up","cre8-c-grid--1-4up":this.variant==="1-4up","cre8-c-grid--1-2-4up":this.variant==="1-2-4up","cre8-c-grid--2-4-6up":this.variant==="2-4-6up","cre8-c-grid--gap-none":this.gap==="none","cre8-c-grid--gap-sm":this.gap==="sm","cre8-c-grid--gap-lg":this.gap==="lg","cre8-c-grid--break-faster":this.break==="faster","cre8-c-grid--break-slower":this.break==="slower"});return c`
       <div class="${e}">
         <slot></slot>
       </div>

package/dist/assets/{grid.stories-DwGB81iK.js → grid.stories-BFiXTq2C.js}

@@ -1,4 +1,4 @@
-import{b as r}from"./iframe-CdWmiVXf.js";import"./f-po-CZL6lsXP.js";import{s as T}from"./spread-BOaHI3Dl.js";import"./grid-DItOBpBm.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-sxEueMHN.js";import"./cre8-element-gkCuLp-W.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./directive-b18f_ppQ.js";const B={title:"Cre8 Components/Grid",component:"cre8-grid",parameters:{status:{type:"inProgress"}}},e=l=>r`<cre8-grid ${T(l)}>
+import{b as r}from"./iframe-dHvya7sk.js";import"./f-po-C2WpbOFJ.js";import{s as T}from"./spread-BPiNgQQF.js";import"./grid-DYgnZBsd.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-HKKhGupN.js";import"./cre8-element-DfmMtHJO.js";import"./_commonjsHelpers-DaWZu8wl.js";const O={title:"Cre8 Components/Grid",component:"cre8-grid",parameters:{status:{type:"inProgress"}}},e=l=>r`<cre8-grid ${T(l)}>
   <cre8-grid-item>
     <f-po>Grid Item 1</f-po>
   </cre8-grid-item>
@@ -612,4 +612,4 @@ import{b as r}from"./iframe-CdWmiVXf.js";import"./f-po-CZL6lsXP.js";import{s as
   <cre8-grid-item>
     <f-po>Grid Item 12</f-po>
   </cre8-grid-item>
-</cre8-grid>\``,...u.parameters?.docs?.source}}};const y=["Default","SideBySide","TwoUp","TwoUpBreakFaster","TwoUpBreakSlower","ThreeUp","OneToThreeUp","OneToThreeUpBreakFaster","OneToThreeUpBreakSlower","OneToFourUp","OneToTwoToFourUp","FourUp","GapNoneFourUp","GapSmallFourUp","GapLargeFourUp","TwoTo4to6Up"];export{e as Default,a as FourUp,I as GapLargeFourUp,G as GapNoneFourUp,s as GapSmallFourUp,f as OneToFourUp,c as OneToThreeUp,p as OneToThreeUpBreakFaster,g as OneToThreeUpBreakSlower,n as OneToTwoToFourUp,i as SideBySide,o as ThreeUp,u as TwoTo4to6Up,t as TwoUp,d as TwoUpBreakFaster,m as TwoUpBreakSlower,y as __namedExportsOrder,B as default};
+</cre8-grid>\``,...u.parameters?.docs?.source}}};const B=["Default","SideBySide","TwoUp","TwoUpBreakFaster","TwoUpBreakSlower","ThreeUp","OneToThreeUp","OneToThreeUpBreakFaster","OneToThreeUpBreakSlower","OneToFourUp","OneToTwoToFourUp","FourUp","GapNoneFourUp","GapSmallFourUp","GapLargeFourUp","TwoTo4to6Up"];export{e as Default,a as FourUp,I as GapLargeFourUp,G as GapNoneFourUp,s as GapSmallFourUp,f as OneToFourUp,c as OneToThreeUp,p as OneToThreeUpBreakFaster,g as OneToThreeUpBreakSlower,n as OneToTwoToFourUp,i as SideBySide,o as ThreeUp,u as TwoTo4to6Up,t as TwoUp,d as TwoUpBreakFaster,m as TwoUpBreakSlower,B as __namedExportsOrder,O as default};

package/dist/assets/{header.stories--yZLIN_d.js → header.stories-D1f7xhjV.js}

@@ -1,4 +1,4 @@
-import{i as p,b as a}from"./iframe-CdWmiVXf.js";import"./f-po-CZL6lsXP.js";import{s as l}from"./spread-BOaHI3Dl.js";import{r as c}from"./state-BQD-SkUn.js";import{C as g}from"./cre8-element-gkCuLp-W.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-sxEueMHN.js";import"./directive-b18f_ppQ.js";import"./_commonjsHelpers-DaWZu8wl.js";const h=p`.cre8-u-content-knockout-brand {
+import{a as p,b as a}from"./iframe-dHvya7sk.js";import"./f-po-C2WpbOFJ.js";import{s as l}from"./spread-BPiNgQQF.js";import{r as c}from"./state-CfuknrX8.js";import{C as g}from"./cre8-element-DfmMtHJO.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-HKKhGupN.js";import"./_commonjsHelpers-DaWZu8wl.js";const h=p`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -661,7 +669,7 @@ span.ripple {
           </cre8-layout-container>
         </div>`}
       </header>
-    `}};d.styles=[h];let o=d;f([c()],o.prototype,"isActive");customElements.get("cre8-header")===void 0&&customElements.define("cre8-header",o);const R={title:"Cre8 Components/Header",component:"cre8-header",parameters:{status:{type:"inProgress"}}},r=t=>a`<cre8-header ${l(t)}>
+    `}};d.styles=[h];let o=d;f([c()],o.prototype,"isActive");customElements.get("cre8-header")===void 0&&customElements.define("cre8-header",o);const O={title:"Cre8 Components/Header",component:"cre8-header",parameters:{status:{type:"inProgress"}}},r=t=>a`<cre8-header ${l(t)}>
   <f-po slot="top">Optional header top</f-po>
   <f-po>Header middle</f-po>
   <f-po slot="bottom">Optional header bottom</f-po>
@@ -669,4 +677,4 @@ span.ripple {
   <f-po slot="top">Optional header top</f-po>
   <f-po>Header middle</f-po>
   <f-po slot="bottom">Optional header bottom</f-po>
-</cre8-header>\``,...r.parameters?.docs?.source}}};const V=["Default"];export{r as Default,V as __namedExportsOrder,R as default};
+</cre8-header>\``,...r.parameters?.docs?.source}}};const R=["Default"];export{r as Default,R as __namedExportsOrder,O as default};

package/dist/assets/{heading-BgO3jH9M.js → heading-485Jz7JZ.js}

@@ -1,4 +1,4 @@
-import{i as h,b as t}from"./iframe-CdWmiVXf.js";import{C as m,n as l}from"./cre8-element-gkCuLp-W.js";const s=h`@charset "UTF-8";
+import{a as h,b as t}from"./iframe-dHvya7sk.js";import{C as m,n as l}from"./cre8-element-DfmMtHJO.js";const s=h`@charset "UTF-8";
 .cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
@@ -373,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -545,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -901,4 +909,4 @@ span.ripple {
 
 .cre8-c-heading--inverted {
   color: var(--cre8-color-content-knockout);
-}`;var c=Object.defineProperty,o=(d,i,e,y)=>{for(var r=void 0,n=d.length-1,g;n>=0;n--)(g=d[n])&&(r=g(i,e,r)||r);return r&&c(i,e,r),r};const p=class p extends m{constructor(){super(...arguments),this.tagVariant="h5"}render(){const i=this.type?{}:{"cre8-c-heading--headline-large":this.tagVariant==="h1","cre8-c-heading--headline-default":this.tagVariant==="h2","cre8-c-heading--headline-small":this.tagVariant==="h3","cre8-c-heading--title-large":this.tagVariant==="h4","cre8-c-heading--title-default":this.tagVariant==="h5","cre8-c-heading--title-small":this.tagVariant==="h6"},e=this.componentClassNames("cre8-c-heading",{...i,"cre8-c-heading--headline-large":this.type==="headline-large","cre8-c-heading--headline-default":this.type==="headline-default","cre8-c-heading--headline-small":this.type==="headline-small","cre8-c-heading--title-large":this.type==="title-large","cre8-c-heading--title-default":this.type==="title-default","cre8-c-heading--title-small":this.type==="title-small","cre8-c-heading--title-xlarge":this.type==="title-xlarge","cre8-c-heading--display-default":this.type==="display-default","cre8-c-heading--display-small":this.type==="display-small","cre8-c-heading--label-large":this.type==="label-large","cre8-c-heading--label-default":this.type==="label-default","cre8-c-heading--label-small":this.type==="label-small","cre8-c-heading--meta-large":this.type==="meta-large","cre8-c-heading--meta-default":this.type==="meta-default","cre8-c-heading--meta-small":this.type==="meta-small","cre8-c-heading--brand-color":this.brandColor,"cre8-c-heading--inverted":this.inverted});switch(this.tagVariant){case"h1":return t` <h1 part="tag" class="${e}"><slot></slot></h1> `;case"h2":return t` <h2 part="tag" class="${e}"><slot></slot></h2> `;case"h3":return t` <h3 part="tag" class="${e}"><slot></slot></h3> `;case"h4":return t` <h4 part="tag" class="${e}"><slot></slot></h4> `;case"h5":return t` <h5 part="tag" class="${e}"><slot></slot></h5> `;case"h6":return t` <h6 part="tag" class="${e}"><slot></slot></h6> `;default:return t` <h4 part="tag" class="${e}"><slot></slot></h4> `}}};p.styles=[s];let a=p;o([l()],a.prototype,"type");o([l()],a.prototype,"tagVariant");o([l({type:Boolean,reflect:!0})],a.prototype,"inverted");o([l({type:Boolean,reflect:!0})],a.prototype,"brandColor");customElements.get("cre8-heading")===void 0&&customElements.define("cre8-heading",a);
+}`;var c=Object.defineProperty,o=(d,i,e,y)=>{for(var r=void 0,n=d.length-1,g;n>=0;n--)(g=d[n])&&(r=g(i,e,r)||r);return r&&c(i,e,r),r};const p=class p extends m{constructor(){super(...arguments),this.tagVariant="h5"}render(){const i=this.type?{}:{"cre8-c-heading--headline-large":this.tagVariant==="h1","cre8-c-heading--headline-default":this.tagVariant==="h2","cre8-c-heading--headline-small":this.tagVariant==="h3","cre8-c-heading--title-large":this.tagVariant==="h4","cre8-c-heading--title-default":this.tagVariant==="h5","cre8-c-heading--title-small":this.tagVariant==="h6"},e=this.componentClassNames("cre8-c-heading",{"cre8-c-heading--headline-large":this.type==="headline-large","cre8-c-heading--headline-default":this.type==="headline-default","cre8-c-heading--headline-small":this.type==="headline-small","cre8-c-heading--title-large":this.type==="title-large","cre8-c-heading--title-default":this.type==="title-default","cre8-c-heading--title-small":this.type==="title-small","cre8-c-heading--title-xlarge":this.type==="title-xlarge","cre8-c-heading--display-default":this.type==="display-default","cre8-c-heading--display-small":this.type==="display-small","cre8-c-heading--label-large":this.type==="label-large","cre8-c-heading--label-default":this.type==="label-default","cre8-c-heading--label-small":this.type==="label-small","cre8-c-heading--meta-large":this.type==="meta-large","cre8-c-heading--meta-default":this.type==="meta-default","cre8-c-heading--meta-small":this.type==="meta-small",...i,"cre8-c-heading--brand-color":this.brandColor,"cre8-c-heading--inverted":this.inverted});switch(this.tagVariant){case"h1":return t` <h1 part="tag" class="${e}"><slot></slot></h1> `;case"h2":return t` <h2 part="tag" class="${e}"><slot></slot></h2> `;case"h3":return t` <h3 part="tag" class="${e}"><slot></slot></h3> `;case"h4":return t` <h4 part="tag" class="${e}"><slot></slot></h4> `;case"h5":return t` <h5 part="tag" class="${e}"><slot></slot></h5> `;case"h6":return t` <h6 part="tag" class="${e}"><slot></slot></h6> `;default:return t` <h4 part="tag" class="${e}"><slot></slot></h4> `}}};p.styles=[s];let a=p;o([l()],a.prototype,"type");o([l()],a.prototype,"tagVariant");o([l({type:Boolean,reflect:!0})],a.prototype,"inverted");o([l({type:Boolean,reflect:!0})],a.prototype,"brandColor");customElements.get("cre8-heading")===void 0&&customElements.define("cre8-heading",a);

package/dist/assets/{heading.stories-CQ4muIzf.js → heading.stories-gPF_SmTc.js}

@@ -1,4 +1,4 @@
-import{b as $}from"./iframe-CdWmiVXf.js";import{s as C}from"./spread-BOaHI3Dl.js";import"./heading-BgO3jH9M.js";import"./preload-helper-PPVm8Dsz.js";import"./directive-b18f_ppQ.js";import"./cre8-element-gkCuLp-W.js";import"./_commonjsHelpers-DaWZu8wl.js";const X={title:"cre8 Components/Heading",component:"cre8-heading",parameters:{status:{type:"inProgress"}},render:e=>$`<cre8-heading ${C(e)}>Heading</cre8-heading>`,argTypes:{type:{options:["display-default","display-small","headline-large","headline-default","headline-small","title-xlarge","title-large","title-default","title-small","label-large","label-default","label-small","meta-large","meta-default","meta-small"],control:{type:"radio"}},tagVariant:{options:["h1","h2","h3","h4","h5","h6"],control:{type:"radio"}},brandColor:{control:{type:"boolean"}},inverted:{control:{type:"boolean"}}}},a={},r={args:{type:"display-default"}},s={args:{type:"display-small"}},t={args:{type:"headline-large"}},o={args:{type:"headline-default"}},n={args:{type:"headline-small"}},l={args:{type:"title-xlarge"}},c={args:{type:"title-large"}},d={args:{type:"title-default"}},p={args:{type:"title-small"}},i={args:{type:"label-large"}},m={args:{type:"label-default"}},g={args:{type:"label-small"}},u={args:{type:"meta-large"}},h={args:{type:"meta-default"}},y={args:{type:"meta-small"}},S={args:{tagVariant:"h1"}},f={args:{tagVariant:"h2"}},b={args:{tagVariant:"h3"}},v={args:{tagVariant:"h4"}},D={args:{tagVariant:"h5"}},L={args:{tagVariant:"h6"}},V={args:{brandColor:!0}},k={render:e=>$`<div style="padding: 20px; background: #000;">
+import{b as $}from"./iframe-dHvya7sk.js";import{s as C}from"./spread-BPiNgQQF.js";import"./heading-485Jz7JZ.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-DfmMtHJO.js";import"./_commonjsHelpers-DaWZu8wl.js";const w={title:"cre8 Components/Heading",component:"cre8-heading",parameters:{status:{type:"inProgress"}},render:e=>$`<cre8-heading ${C(e)}>Heading</cre8-heading>`,argTypes:{type:{options:["display-default","display-small","headline-large","headline-default","headline-small","title-xlarge","title-large","title-default","title-small","label-large","label-default","label-small","meta-large","meta-default","meta-small"],control:{type:"radio"}},tagVariant:{options:["h1","h2","h3","h4","h5","h6"],control:{type:"radio"}},brandColor:{control:{type:"boolean"}},inverted:{control:{type:"boolean"}}}},a={},r={args:{type:"display-default"}},s={args:{type:"display-small"}},t={args:{type:"headline-large"}},o={args:{type:"headline-default"}},n={args:{type:"headline-small"}},l={args:{type:"title-xlarge"}},c={args:{type:"title-large"}},d={args:{type:"title-default"}},p={args:{type:"title-small"}},i={args:{type:"label-large"}},m={args:{type:"label-default"}},g={args:{type:"label-small"}},u={args:{type:"meta-large"}},h={args:{type:"meta-default"}},y={args:{type:"meta-small"}},S={args:{tagVariant:"h1"}},f={args:{tagVariant:"h2"}},b={args:{tagVariant:"h3"}},v={args:{tagVariant:"h4"}},D={args:{tagVariant:"h5"}},L={args:{tagVariant:"h6"}},V={args:{brandColor:!0}},k={render:e=>$`<div style="padding: 20px; background: #000;">
     <cre8-heading ${C(e)} ?inverted=${!0}>Heading style for dark backgrounds</cre8-heading>
   </div>`},H={render:e=>$`<div style="padding: 20px; background: #000;">
     <cre8-heading ${C(e)}  ?brandColor=${!0} ?inverted=${!0}>Heading with brand color for dark backgrounds</cre8-heading>
@@ -90,4 +90,4 @@ import{b as $}from"./iframe-CdWmiVXf.js";import{s as C}from"./spread-BOaHI3Dl.js
   args: {
     brandColor: true
   }
-}`,...V.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:'{\n  render: args => html`<div style="padding: 20px; background: #000;">\n    <cre8-heading ${spread(args)} ?inverted=${true}>Heading style for dark backgrounds</cre8-heading>\n  </div>`\n}',...k.parameters?.docs?.source}}};H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:'{\n  render: args => html`<div style="padding: 20px; background: #000;">\n    <cre8-heading ${spread(args)}  ?brandColor=${true} ?inverted=${true}>Heading with brand color for dark backgrounds</cre8-heading>\n  </div>`\n}',...H.parameters?.docs?.source}}};const E=["Default","DisplayDefault","DisplaySmall","HeadlineLarge","HeadlineDefault","HeadlineSmall","TitleXLarge","TitleLarge","TitleDefault","TitleSmall","LabelLarge","LabelDefault","LabelSmall","MetaLarge","MetaDefault","MetaSmall","h1","h2","h3","h4","h5","h6","BrandColor","Inverted","InvertedBrandColor"];export{V as BrandColor,a as Default,r as DisplayDefault,s as DisplaySmall,o as HeadlineDefault,t as HeadlineLarge,n as HeadlineSmall,k as Inverted,H as InvertedBrandColor,m as LabelDefault,i as LabelLarge,g as LabelSmall,h as MetaDefault,u as MetaLarge,y as MetaSmall,d as TitleDefault,c as TitleLarge,p as TitleSmall,l as TitleXLarge,E as __namedExportsOrder,X as default,S as h1,f as h2,b as h3,v as h4,D as h5,L as h6};
+}`,...V.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:'{\n  render: args => html`<div style="padding: 20px; background: #000;">\n    <cre8-heading ${spread(args)} ?inverted=${true}>Heading style for dark backgrounds</cre8-heading>\n  </div>`\n}',...k.parameters?.docs?.source}}};H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:'{\n  render: args => html`<div style="padding: 20px; background: #000;">\n    <cre8-heading ${spread(args)}  ?brandColor=${true} ?inverted=${true}>Heading with brand color for dark backgrounds</cre8-heading>\n  </div>`\n}',...H.parameters?.docs?.source}}};const X=["Default","DisplayDefault","DisplaySmall","HeadlineLarge","HeadlineDefault","HeadlineSmall","TitleXLarge","TitleLarge","TitleDefault","TitleSmall","LabelLarge","LabelDefault","LabelSmall","MetaLarge","MetaDefault","MetaSmall","h1","h2","h3","h4","h5","h6","BrandColor","Inverted","InvertedBrandColor"];export{V as BrandColor,a as Default,r as DisplayDefault,s as DisplaySmall,o as HeadlineDefault,t as HeadlineLarge,n as HeadlineSmall,k as Inverted,H as InvertedBrandColor,m as LabelDefault,i as LabelLarge,g as LabelSmall,h as MetaDefault,u as MetaLarge,y as MetaSmall,d as TitleDefault,c as TitleLarge,p as TitleSmall,l as TitleXLarge,X as __namedExportsOrder,w as default,S as h1,f as h2,b as h3,v as h4,D as h5,L as h6};

package/dist/assets/{hero.stories-VyLQwa--.js → hero.stories-BHlFNdvF.js}

@@ -1,4 +1,4 @@
-import{i as v,b as t}from"./iframe-CdWmiVXf.js";import"./heading-BgO3jH9M.js";import"./text-passage-Dw-BWzip.js";import{C as w,n as u}from"./cre8-element-gkCuLp-W.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const z=v`.cre8-u-content-knockout-brand {
+import{a as v,b as t}from"./iframe-dHvya7sk.js";import"./heading-485Jz7JZ.js";import"./text-passage-DGaI5i2I.js";import{C as w,n as p}from"./cre8-element-DfmMtHJO.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const z=v`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -718,7 +726,20 @@ span.ripple {
     justify-content: flex-end;
     align-items: flex-end;
   }
-}`;var T=Object.defineProperty,x=(e,a,b,A)=>{for(var r=void 0,p=e.length-1,y;p>=0;p--)(y=e[p])&&(r=y(a,b,r)||r);return r&&T(a,b,r),r};const f=class f extends w{render(){const a=this.componentClassNames("cre8-c-hero",{"cre8-c-hero--top-left":this.align==="top-left","cre8-c-hero--left":this.align==="left","cre8-c-hero--top-center":this.align==="top-center","cre8-c-hero--center":this.align==="center","cre8-c-hero--bottom-center":this.align==="bottom-center","cre8-c-hero--top-right":this.align==="top-right","cre8-c-hero--right":this.align==="right","cre8-c-hero--bottom-right":this.align==="bottom-right"});return t`
+}
+
+.cre8-c-hero--has-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1;
+}
+.cre8-c-hero--has-overlay .cre8-c-hero__body {
+  z-index: 2;
+  --cre8-color-content-default: #ffffff;
+  --cre8-color-content-subtle: rgba(255, 255, 255, 0.85);
+}`;var T=Object.defineProperty,u=(e,a,b,A)=>{for(var i=void 0,x=e.length-1,y;x>=0;x--)(y=e[x])&&(i=y(a,b,i)||i);return i&&T(a,b,i),i};const f=class f extends w{render(){const a=this.componentClassNames("cre8-c-hero",{"cre8-c-hero--top-left":this.align==="top-left","cre8-c-hero--left":this.align==="left","cre8-c-hero--top-center":this.align==="top-center","cre8-c-hero--center":this.align==="center","cre8-c-hero--bottom-center":this.align==="bottom-center","cre8-c-hero--top-right":this.align==="top-right","cre8-c-hero--right":this.align==="right","cre8-c-hero--bottom-right":this.align==="bottom-right","cre8-c-hero--has-overlay":!!this.hasOverlay});return t`
       <div class="${a}">
         <cre8-layout-container>
           <img class="cre8-c-hero__image" src="${this.imgSrc}" alt="${this.imgAlt}" />
@@ -727,7 +748,7 @@ span.ripple {
           </div>
         </cre8-layout-container>
       </div>
-    `}};f.styles=[z];let i=f;x([u()],i.prototype,"imgSrc");x([u()],i.prototype,"imgAlt");x([u()],i.prototype,"align");customElements.get("cre8-hero")===void 0&&customElements.define("cre8-hero",i);const j={title:"Cre8 Components/Hero",component:"cre8-hero",parameters:{status:{type:"notStarted"}}},o=e=>t`
+    `}};f.styles=[z];let r=f;u([p()],r.prototype,"imgSrc");u([p()],r.prototype,"imgAlt");u([p()],r.prototype,"align");u([p({type:Boolean})],r.prototype,"hasOverlay");customElements.get("cre8-hero")===void 0&&customElements.define("cre8-hero",r);const j={title:"Cre8 Components/Hero",component:"cre8-hero",parameters:{status:{type:"notStarted"}}},o=e=>t`
   <cre8-hero imgSrc="https://via.placeholder.com/1200x650" imgAlt="Hero Alt Text">
     <cre8-heading headingTagName="h2">Hero title</cre8-heading>
     <cre8-text-passage>This is the hero description</cre8-text-passage>