@tmorrow/cre8-wc 2.1.1 → 2.2.2

package/dist/assets/{section.stories-D_1InThX.js → section.stories-Dbw4FBo8.js}

@@ -1,4 +1,4 @@
-import{a as l,b as n,o as c}from"./iframe-BNJP6ovU.js";import"./f-po-BdPzDRD-.js";import"./heading-Dbka33DK.js";import"./button-CgaWukz0.js";import"./text-passage-xQVosjOr.js";import{C as g,n as u}from"./cre8-element-B35i4Lyg.js";import{s as h}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=l`.cre8-u-content-knockout-brand {
+import{a as l,b as n,o as c}from"./iframe-CTa_pRc7.js";import"./f-po-CGwWqyus.js";import"./heading-Cux7lJt-.js";import"./button-BCRNRwfX.js";import"./text-passage-C-tu1uRd.js";import{C as g,n as u}from"./cre8-element-q82VmUgi.js";import{s as h}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-DWVEXvB4.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Bk9Cy3PA.js";import"./icon-ByzQuB0Z.js";import"./loading-spinner-D_r3kfYs.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=l`.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 */
 }
 
 /**

package/dist/assets/{select-tile-BqqB3ZtE.js → select-tile-DbEfRqPZ.js}

@@ -1,4 +1,4 @@
-import{a as b,j as f,b as d}from"./iframe-BNJP6ovU.js";import{n as o}from"./cre8-element-B35i4Lyg.js";import{e as v}from"./query-BpjciUlk.js";import{o as x}from"./if-defined-Bxnzk64Q.js";import{n as y}from"./index.browser-BY9c7rfI.js";import{C as _}from"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";const k=b`.cre8-u-content-knockout-brand {
+import{a as b,j as f,b as d}from"./iframe-CTa_pRc7.js";import{n as o}from"./cre8-element-q82VmUgi.js";import{e as v}from"./query-BpjciUlk.js";import{o as x}from"./if-defined-DWVEXvB4.js";import{n as y}from"./index.browser-BY9c7rfI.js";import{C as _}from"./cre8-form-element-Bk9Cy3PA.js";import"./icon-ByzQuB0Z.js";const k=b`.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 */
 }
 
 /**
@@ -1052,7 +1060,7 @@ input:checked ~ * .cre8-c-select-tile__custom-checkbox {
 }
 input:checked ~ * .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon {
   display: flex;
-}`;function m(n,t){return t<0?n.length-1:t>=n.length?0:t}class p{constructor(t){this._clickHandler=e=>{e.preventDefault(),this._checkAndFocus(this.host)},this._checkAndFocus=e=>{const c=e.checked;this.removeChecked(),e.focus(),e.checked=!0,e.setAttribute("tabindex","0"),c||(e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0})))},this._handleKeyDown=e=>{["ArrowLeft","ArrowUp","ArrowRight","ArrowDown"].includes(e.code)&&this._handleArrowKeys(e),["Enter"," "].includes(e.key)&&this._handleEnterSpace(e)},this._handleArrowKeys=e=>{const c=this.findAllElementsInSameRadioButtonGroup({excludeDisabled:!0});if(c.length<=1)return;const l=c.findIndex(s=>s===this.host);let a;e.code==="ArrowLeft"||e.code==="ArrowUp"?a=c[m(c,l-1)]:(e.code==="ArrowRight"||e.code==="ArrowDown")&&(a=c[m(c,l+1)]),this._checkAndFocus(a),e.preventDefault()},this._handleEnterSpace=e=>{this._checkAndFocus(this.host),e.preventDefault()},this.host=t,t.addController(this)}hostConnected(){this.host._internals.role="radio",this.host.setAttribute("role","radio"),this.host.setAttribute("tabindex","0"),this.host.addEventListener("click",this._clickHandler),this.host.addEventListener("keydown",this._handleKeyDown)}hostDisconnected(){this.host._internals.role=void 0,this.host.removeAttribute("role"),this.host.removeAttribute("tabindex"),this.host.removeEventListener("click",this._clickHandler),this.host.removeEventListener("keydown",this._handleKeyDown)}hostUpdate(){}findAllElementsInSameRadioButtonGroup({excludeDisabled:t}={}){const e=this.host.name,c=this.host.form;if(e&&e.length>0){const l=this.host.ownerDocument,a=Array.from(l.querySelectorAll(`[role="radio"][name="${e}"]`)).filter(s=>s.form===c);return t===!0?a.filter(s=>!(s.disabled||s.ariaDisabled==="true")):a}return[]}removeChecked(){this.findAllElementsInSameRadioButtonGroup().forEach(e=>{e.checked=!1,e.setAttribute("tabindex","-1")})}}class u{constructor(t){this._clickHandler=e=>{this._checkAndFocus(),e.preventDefault()},this._checkAndFocus=()=>{this.host.checked=!this.host.checked,this.host.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.host.dispatchEvent(new Event("change",{bubbles:!0}))},this._handleKeyDown=e=>{["Enter"," "].includes(e.key)&&this._handleEnterSpace(e)},this._handleEnterSpace=e=>{this._checkAndFocus(),e.preventDefault()},this.host=t,t.addController(this)}hostConnected(){this.host._internals.role="checkbox",this.host.setAttribute("tabindex","0"),this.host.addEventListener("click",this._clickHandler),this.host.addEventListener("keydown",this._handleKeyDown)}hostDisconnected(){this.host._internals.role=void 0,this.host.removeAttribute("tabindex"),this.host.removeEventListener("click",this._clickHandler),this.host.removeEventListener("keydown",this._handleKeyDown)}}var w=Object.defineProperty,i=(n,t,e,c)=>{for(var l=void 0,a=n.length-1,s;a>=0;a--)(s=n[a])&&(l=s(t,e,l)||l);return l&&w(t,e,l),l};const g=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+}`;function m(s,t){return t<0?s.length-1:t>=s.length?0:t}class p{constructor(t){this._clickHandler=e=>{e.preventDefault(),this._checkAndFocus(this.host)},this._checkAndFocus=e=>{const c=e.checked;this.removeChecked(),e.focus(),e.checked=!0,e.setAttribute("tabindex","0"),c||(e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0})))},this._handleKeyDown=e=>{["ArrowLeft","ArrowUp","ArrowRight","ArrowDown"].includes(e.code)&&this._handleArrowKeys(e),["Enter"," "].includes(e.key)&&this._handleEnterSpace(e)},this._handleArrowKeys=e=>{const c=this.findAllElementsInSameRadioButtonGroup({excludeDisabled:!0});if(c.length<=1)return;const l=c.findIndex(n=>n===this.host);let a;e.code==="ArrowLeft"||e.code==="ArrowUp"?a=c[m(c,l-1)]:(e.code==="ArrowRight"||e.code==="ArrowDown")&&(a=c[m(c,l+1)]),this._checkAndFocus(a),e.preventDefault()},this._handleEnterSpace=e=>{this._checkAndFocus(this.host),e.preventDefault()},this.host=t,t.addController(this)}hostConnected(){this.host._internals.role="radio",this.host.setAttribute("role","radio"),this.host.setAttribute("tabindex","0"),this.host.addEventListener("click",this._clickHandler),this.host.addEventListener("keydown",this._handleKeyDown)}hostDisconnected(){this.host._internals.role=void 0,this.host.removeAttribute("role"),this.host.removeAttribute("tabindex"),this.host.removeEventListener("click",this._clickHandler),this.host.removeEventListener("keydown",this._handleKeyDown)}hostUpdate(){}findAllElementsInSameRadioButtonGroup({excludeDisabled:t}={}){const e=this.host.name,c=this.host.form;if(e&&e.length>0){const l=this.host.ownerDocument,a=Array.from(l.querySelectorAll(`[role="radio"][name="${e}"]`)).filter(n=>n.form===c);return t===!0?a.filter(n=>!(n.disabled||n.ariaDisabled==="true")):a}return[]}removeChecked(){this.findAllElementsInSameRadioButtonGroup().forEach(e=>{e.checked=!1,e.setAttribute("tabindex","-1")})}}class u{constructor(t){this._clickHandler=e=>{this._checkAndFocus(),e.preventDefault()},this._checkAndFocus=()=>{this.host.checked=!this.host.checked,this.host.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.host.dispatchEvent(new Event("change",{bubbles:!0}))},this._handleKeyDown=e=>{["Enter"," "].includes(e.key)&&this._handleEnterSpace(e)},this._handleEnterSpace=e=>{this._checkAndFocus(),e.preventDefault()},this.host=t,t.addController(this)}hostConnected(){this.host._internals.role="checkbox",this.host.setAttribute("tabindex","0"),this.host.addEventListener("click",this._clickHandler),this.host.addEventListener("keydown",this._handleKeyDown)}hostDisconnected(){this.host._internals.role=void 0,this.host.removeAttribute("tabindex"),this.host.removeEventListener("click",this._clickHandler),this.host.removeEventListener("keydown",this._handleKeyDown)}}var w=Object.defineProperty,i=(s,t,e,c)=>{for(var l=void 0,a=s.length-1,n;a>=0;a--)(n=s[a])&&(l=n(t,e,l)||l);return l&&w(t,e,l),l};const g=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.8125 3.33285L5.57291 13.5724C5.51347 13.6319 5.44289 13.6791 5.3652 13.7113C5.28751 13.7435 5.20423 13.7601 5.12013 13.7601C5.03603 13.7601 4.95275 13.7435 4.87506 13.7113C4.79737 13.6791 4.72678 13.6319 4.66735 13.5724L0.187547 9.0926C0.0674628 8.97251 0 8.80964 0 8.63982C0 8.46999 0.0674628 8.30712 0.187547 8.18704C0.307632 8.06695 0.470502 7.99949 0.640327 7.99949C0.810153 7.99949 0.973022 8.06695 1.09311 8.18704L5.12013 12.2149L14.9069 2.42729C15.027 2.30721 15.1898 2.23975 15.3597 2.23975C15.5295 2.23975 15.6924 2.30721 15.8125 2.42729C15.9325 2.54738 16 2.71025 16 2.88007C16 3.0499 15.9325 3.21277 15.8125 3.33285Z"/>
 </svg>
 `,h=class h extends _{constructor(){super(...arguments),this._controller=void 0,this.type="radio",this.variantBreakToVertical="sm",this.checkPosition="right",this.radioVariant="dot"}get form(){return this._internals.form}connectedCallback(){super.connectedCallback(),this.fieldId=this.fieldId||y(),this._controller=this.type==="radio"?new p(this):new u(this),this.disabled&&(this._internals.ariaDisabled="true")}formResetCallback(){this.checked=this.defaultChecked,this.field.checked=this.defaultChecked}updated(t){super.updated(t),t.has("checked")&&this.setAttribute("aria-checked",this.checked?"true":"false"),t.has("type")&&(this._controller.hostDisconnected(),this._controller=this.type==="radio"?new p(this):new u(this)),t.has("disabled")&&(this.disabled?this._internals.ariaDisabled="true":this._internals.ariaDisabled="false")}renderInput(){return d`

package/dist/assets/{select-tile-list.stories-Di4ILgV8.js → select-tile-list.stories-BWIbF_U7.js}

@@ -1,4 +1,4 @@
-import{a as f,b as a,g as y}from"./iframe-BNJP6ovU.js";import"./field-note-fccBckVl.js";import{o as p}from"./if-defined-Bxnzk64Q.js";import{C as x,n as t}from"./cre8-element-B35i4Lyg.js";import{n as b}from"./index.browser-BY9c7rfI.js";import"./select-tile-BqqB3ZtE.js";import"./preload-helper-PPVm8Dsz.js";import"./icon-ChfRWXWy.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";const v=f`.cre8-u-content-knockout-brand {
+import{a as f,b as a,g as y}from"./iframe-CTa_pRc7.js";import"./field-note-CI4Ca7JE.js";import{o as p}from"./if-defined-DWVEXvB4.js";import{C as x,n as t}from"./cre8-element-q82VmUgi.js";import{n as b}from"./index.browser-BY9c7rfI.js";import"./select-tile-DbEfRqPZ.js";import"./preload-helper-PPVm8Dsz.js";import"./icon-ByzQuB0Z.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Bk9Cy3PA.js";const v=f`.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 */
 }
 
 /**

package/dist/assets/{select-tile.stories-D3h_6zlV.js → select-tile.stories-DWzrgGaK.js}

@@ -1,4 +1,4 @@
-import{a as C,j as R,r as S,b as r}from"./iframe-BNJP6ovU.js";import{w as F}from"./decorator-iVSD-Llo.js";import{t as N}from"./f-po-BdPzDRD-.js";import{n as k}from"./cre8-element-B35i4Lyg.js";import{s as t}from"./spread-CnPic3C2.js";import"./icon-ChfRWXWy.js";import"./button-group-G7qN4MwM.js";import"./button-CgaWukz0.js";import"./select-tile-BqqB3ZtE.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./if-defined-Bxnzk64Q.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./loading-spinner-C52KNq6y.js";import"./index.browser-BY9c7rfI.js";const M=C`
+import{a as C,j as R,r as S,b as r}from"./iframe-CTa_pRc7.js";import{w as F}from"./decorator-iVSD-Llo.js";import{t as N}from"./f-po-CGwWqyus.js";import{n as k}from"./cre8-element-q82VmUgi.js";import{s as t}from"./spread-B518TqwY.js";import"./icon-ByzQuB0Z.js";import"./button-group-CwodvBV3.js";import"./button-BCRNRwfX.js";import"./select-tile-DbEfRqPZ.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./if-defined-DWVEXvB4.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Bk9Cy3PA.js";import"./loading-spinner-D_r3kfYs.js";import"./index.browser-BY9c7rfI.js";const M=C`
 /**
  * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
  */

package/dist/assets/{select.stories-BB2phP9A.js → select.stories-DP29QG7D.js}

@@ -1,4 +1,4 @@
-import{a as z,b as o,A as k,o as I}from"./iframe-BNJP6ovU.js";import{s as N}from"./spread-CnPic3C2.js";import{s as S}from"./story-helpers-BFn_kBYw.js";import"./link-CRE0Eqdo.js";import{o as w}from"./if-defined-Bxnzk64Q.js";import{n as i}from"./cre8-element-B35i4Lyg.js";import{r as O}from"./query-all-CK69__1O.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./field-note-fccBckVl.js";import{C as $}from"./cre8-form-element-Cfc5VeYV.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./icon-ChfRWXWy.js";const C=z`.cre8-u-content-knockout-brand {
+import{a as z,b as o,A as k,o as I}from"./iframe-CTa_pRc7.js";import{s as N}from"./spread-B518TqwY.js";import{s as S}from"./story-helpers-BFn_kBYw.js";import"./link-CkyZrqNv.js";import{o as w}from"./if-defined-DWVEXvB4.js";import{n as i}from"./cre8-element-q82VmUgi.js";import{r as O}from"./query-all-CK69__1O.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./field-note-CI4Ca7JE.js";import{C as $}from"./cre8-form-element-Bk9Cy3PA.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./icon-ByzQuB0Z.js";const C=z`.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 */
 }
 
 /**

package/dist/assets/sign-in.stories-BYo2rxIQ.js

@@ -0,0 +1,63 @@
+import{b}from"./iframe-CTa_pRc7.js";import"./form-DHk8aePA.js";import"./field-V4dGu-vp.js";import"./button-BCRNRwfX.js";import"./button-group-CwodvBV3.js";import"./card-DSDkldbr.js";import"./heading-Cux7lJt-.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-q82VmUgi.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-DWVEXvB4.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./cre8-form-element-Bk9Cy3PA.js";import"./field-note-CI4Ca7JE.js";import"./icon-ByzQuB0Z.js";import"./field.styles-CiOFAoAG.js";import"./loading-spinner-D_r3kfYs.js";const{expect:e,userEvent:m,waitFor:s}=__STORYBOOK_MODULE_TEST__,P={title:"Patterns/Sign In",component:"cre8-form",tags:["autodocs","pattern","experimental"],parameters:{controls:{hideNoControlsWarning:!0},docs:{description:{component:"A sign-in composition built from `cre8-form`, `cre8-field`, and `cre8-button-group` inside a `cre8-card`. The form blocks submission while required fields are empty, flags them inline, and moves focus to the first invalid control. The **Interactions** panel replays the full flow: an empty submit that gets blocked, then a valid submit that collects `FormData`."}}}},c=async a=>{let t=null;return await s(()=>{t=a.shadowRoot?.querySelector("input")??null,e(t).toBeTruthy()}),t},n={render:()=>b`
+    <cre8-card style="max-width: 24rem; padding: 2rem;">
+      <cre8-heading slot="header" tagVariant="h2" variant="title-default">Sign in</cre8-heading>
+      <cre8-form>
+        <cre8-field name="email" type="email" label="Email" required></cre8-field>
+        <cre8-field name="password" type="password" label="Password" required></cre8-field>
+        <cre8-button-group>
+          <cre8-button type="submit" text="Sign in"></cre8-button>
+          <cre8-button variant="tertiary" text="Forgot password?"></cre8-button>
+        </cre8-button-group>
+      </cre8-form>
+    </cre8-card>
+  `,play:async({canvasElement:a,step:t})=>{const r=a.querySelector("cre8-form");await s(()=>e(r.querySelector("form.cre8-c-form")).toBeTruthy());const[i,l]=Array.from(a.querySelectorAll("cre8-field")),o=[];r.addEventListener("form-invalid",()=>o.push("form-invalid")),r.addEventListener("form-submit",()=>o.push("form-submit")),await t("Submitting empty blocks and focuses the first invalid field",async()=>{r.submit(),await s(()=>e(o).toContain("form-invalid")),e(o).not.toContain("form-submit"),e(i.isError).toBe(!0),e(document.activeElement).toBe(i)}),await t("Filling both fields clears the way",async()=>{await m.type(await c(i),"ada@cre8.dev"),await m.type(await c(l),"correct-horse")}),await t("Submitting valid input emits form-submit with the values",async()=>{const d=new Promise(p=>{r.addEventListener("form-submit",f=>p(f.detail.values),{once:!0})});r.submit();const u=await d;e(u).toEqual({email:"ada@cre8.dev",password:"correct-horse"}),e(i.isError).toBe(!1)})}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <cre8-card style="max-width: 24rem; padding: 2rem;">
+      <cre8-heading slot="header" tagVariant="h2" variant="title-default">Sign in</cre8-heading>
+      <cre8-form>
+        <cre8-field name="email" type="email" label="Email" required></cre8-field>
+        <cre8-field name="password" type="password" label="Password" required></cre8-field>
+        <cre8-button-group>
+          <cre8-button type="submit" text="Sign in"></cre8-button>
+          <cre8-button variant="tertiary" text="Forgot password?"></cre8-button>
+        </cre8-button-group>
+      </cre8-form>
+    </cre8-card>
+  \`,
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const form = canvasElement.querySelector<Cre8Form>('cre8-form')!;
+    await waitFor(() => expect(form.querySelector('form.cre8-c-form')).toBeTruthy());
+    const [email, password] = Array.from(canvasElement.querySelectorAll<Cre8Field>('cre8-field'));
+    const events: string[] = [];
+    form.addEventListener('form-invalid', () => events.push('form-invalid'));
+    form.addEventListener('form-submit', () => events.push('form-submit'));
+    await step('Submitting empty blocks and focuses the first invalid field', async () => {
+      form.submit();
+      await waitFor(() => expect(events).toContain('form-invalid'));
+      expect(events).not.toContain('form-submit');
+      expect(email.isError).toBe(true);
+      expect(document.activeElement).toBe(email);
+    });
+    await step('Filling both fields clears the way', async () => {
+      await userEvent.type(await innerInput(email), 'ada@cre8.dev');
+      await userEvent.type(await innerInput(password), 'correct-horse');
+    });
+    await step('Submitting valid input emits form-submit with the values', async () => {
+      const submitted = new Promise<Record<string, unknown>>(resolve => {
+        form.addEventListener('form-submit', e => resolve((e as CustomEvent).detail.values), {
+          once: true
+        });
+      });
+      form.submit();
+      const values = await submitted;
+      expect(values).toEqual({
+        email: 'ada@cre8.dev',
+        password: 'correct-horse'
+      });
+      expect(email.isError).toBe(false);
+    });
+  }
+}`,...n.parameters?.docs?.source}}};const D=["Default"];export{n as Default,D as __namedExportsOrder,P as default};

package/dist/assets/{skeleton-loader.stories-y4uml_kV.js → skeleton-loader.stories-B1cPTECY.js}

@@ -1,4 +1,4 @@
-import{a as b,b as x}from"./iframe-BNJP6ovU.js";import{s as y}from"./spread-CnPic3C2.js";import{C as z,n as g}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const w=b`.cre8-u-content-knockout-brand {
+import{a as b,b as x}from"./iframe-CTa_pRc7.js";import{s as y}from"./spread-B518TqwY.js";import{C as w,n as g}from"./cre8-element-q82VmUgi.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const z=b`.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 */
 }
 
 /**
@@ -631,12 +639,12 @@ span.ripple {
   100% {
     background-position: -135% 0%;
   }
-}`;var k=Object.defineProperty,c=(r,a,h,v)=>{for(var e=void 0,l=r.length-1,f;l>=0;l--)(f=r[l])&&(e=f(a,h,e)||e);return e&&k(a,h,e),e};const u=class u extends z{constructor(){super(...arguments),this.variant="rectangle"}render(){const a=this.componentClassNames("cre8-c-skeleton-loader",{"cre8-c-skeleton-loader--rectangle":this.variant==="rectangle","cre8-c-skeleton-loader--square":this.variant==="square","cre8-c-skeleton-loader--circle":this.variant==="circle"});return x`
+}`;var k=Object.defineProperty,c=(r,a,h,v)=>{for(var e=void 0,p=r.length-1,f;p>=0;p--)(f=r[p])&&(e=f(a,h,e)||e);return e&&k(a,h,e),e};const u=class u extends w{constructor(){super(...arguments),this.variant="rectangle"}render(){const a=this.componentClassNames("cre8-c-skeleton-loader",{"cre8-c-skeleton-loader--rectangle":this.variant==="rectangle","cre8-c-skeleton-loader--square":this.variant==="square","cre8-c-skeleton-loader--circle":this.variant==="circle"});return x`
     <div
         class="${a}"
         style="height: ${this.height??"auto"}; width: ${this.width??"auto"}"
     ></div>
-    `}};u.styles=[w];let t=u;c([g()],t.prototype,"variant");c([g()],t.prototype,"height");c([g()],t.prototype,"width");customElements.get("cre8-skeleton-loader")===void 0&&customElements.define("cre8-skeleton-loader",t);const _={title:"cre8 Components/Skeleton Loader",component:"cre8-skeleton-loader",render:r=>x`<cre8-skeleton-loader ${y(r)}></cre8-skeleton-loader>`,parameters:{status:{type:"inProgress"}},argTypes:{variant:{options:["rectangle","square","circle"],control:{type:"radio"}}}},i={},n={args:{variant:"rectangle"}},o={args:{variant:"square"}},s={args:{variant:"circle"}},d={args:{height:"20px",width:"300px"}},m={args:{height:"100px"}},p={args:{width:"100px"}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:"{}",...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+    `}};u.styles=[z];let t=u;c([g()],t.prototype,"variant");c([g()],t.prototype,"height");c([g()],t.prototype,"width");customElements.get("cre8-skeleton-loader")===void 0&&customElements.define("cre8-skeleton-loader",t);const _={title:"cre8 Components/Skeleton Loader",component:"cre8-skeleton-loader",render:r=>x`<cre8-skeleton-loader ${y(r)}></cre8-skeleton-loader>`,parameters:{status:{type:"inProgress"}},argTypes:{variant:{options:["rectangle","square","circle"],control:{type:"radio"}}}},i={},n={args:{variant:"rectangle"}},o={args:{variant:"square"}},s={args:{variant:"circle"}},d={args:{height:"20px",width:"300px"}},m={args:{height:"100px"}},l={args:{width:"100px"}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:"{}",...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
   args: {
     variant: 'rectangle'
   }
@@ -657,8 +665,8 @@ span.ripple {
   args: {
     height: '100px'
   }
-}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
     width: '100px'
   }
-}`,...p.parameters?.docs?.source}}};const O=["Default","Rectangle","Square","Circle","CustomHeightWidth","CustomHeight","CustomWidth"];export{s as Circle,m as CustomHeight,d as CustomHeightWidth,p as CustomWidth,i as Default,n as Rectangle,o as Square,O as __namedExportsOrder,_ as default};
+}`,...l.parameters?.docs?.source}}};const O=["Default","Rectangle","Square","Circle","CustomHeightWidth","CustomHeight","CustomWidth"];export{s as Circle,m as CustomHeight,d as CustomHeightWidth,l as CustomWidth,i as Default,n as Rectangle,o as Square,O as __namedExportsOrder,_ as default};

package/dist/assets/{split-button.stories-C_82I4ME.js → split-button.stories-DlxT6EYF.js}

@@ -1,4 +1,4 @@
-import{a as u,b as i}from"./iframe-BNJP6ovU.js";import"./dropdown-BEP5x3CW.js";import{C as h,n as s}from"./cre8-element-B35i4Lyg.js";import{r as f}from"./state-DkQhleoO.js";import"./button-CgaWukz0.js";import"./preload-helper-PPVm8Dsz.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";const b=u`.cre8-u-content-knockout-brand {
+import{a as u,b as i}from"./iframe-CTa_pRc7.js";import"./dropdown-CbkVYKEV.js";import{C as h,n as s}from"./cre8-element-q82VmUgi.js";import{r as f}from"./state-C6YC-MeJ.js";import"./button-BCRNRwfX.js";import"./preload-helper-PPVm8Dsz.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./light-children-DDjBxt3J.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-DWVEXvB4.js";import"./cre8-form-element-Bk9Cy3PA.js";import"./icon-ByzQuB0Z.js";import"./loading-spinner-D_r3kfYs.js";const b=u`.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 */
 }
 
 /**
@@ -592,7 +600,7 @@ span.ripple {
 .cre8-c-split-button__button-container {
   display: flex;
   max-width: fit-content;
-}`;var x=Object.defineProperty,d=(m,t,c,w)=>{for(var r=void 0,p=m.length-1,g;p>=0;p--)(g=m[p])&&(r=g(t,c,r)||r);return r&&x(t,c,r),r};const l=class l extends h{constructor(){super(...arguments),this.dropdownOpen=!1}render(){const t=this.componentClassNames("cre8-c-split-button",{});return i`
+}`;var w=Object.defineProperty,d=(m,t,c,x)=>{for(var r=void 0,p=m.length-1,g;p>=0;p--)(g=m[p])&&(r=g(t,c,r)||r);return r&&w(t,c,r),r};const l=class l extends h{constructor(){super(...arguments),this.dropdownOpen=!1}render(){const t=this.componentClassNames("cre8-c-split-button",{});return i`
       <div class="${t}">
         <div class="cre8-c-split-button__button-container">
           <cre8-button
@@ -619,7 +627,7 @@ span.ripple {
         </div>
         ${this.dropdownOpen?i`<slot></slot>`:""}
       </div>
-    `}_textClick(t){this.dispatchEvent(new Event("text-click",t))}_dropdownClick(t){this.dropdownOpen=!this.dropdownOpen,this.dispatchEvent(new Event("dropdown-click",t))}};l.styles=[b];let e=l;d([f()],e.prototype,"dropdownOpen");d([s({type:Boolean,reflect:!0})],e.prototype,"disabled");d([s()],e.prototype,"size");d([s()],e.prototype,"buttonText");customElements.get("cre8-split-button")===void 0&&customElements.define("cre8-split-button",e);const V={title:"Cre8 Components/Split-Button",component:"cre8-split-button",parameters:{status:{type:"inProgress"}}},o=m=>i`
+    `}_textClick(t){this.dispatchWithLegacyAlias(new Event("split-button-text-click",t))}_dropdownClick(t){this.dropdownOpen=!this.dropdownOpen,this.dispatchWithLegacyAlias(new Event("split-button-dropdown-click",t))}};l.styles=[b];let e=l;d([f()],e.prototype,"dropdownOpen");d([s({type:Boolean,reflect:!0})],e.prototype,"disabled");d([s()],e.prototype,"size");d([s()],e.prototype,"buttonText");customElements.get("cre8-split-button")===void 0&&customElements.define("cre8-split-button",e);const F={title:"Cre8 Components/Split-Button",component:"cre8-split-button",parameters:{status:{type:"inProgress"}}},o=m=>i`
   <cre8-split-button buttonText="Button">
     <cre8-dropdown>
       <cre8-dropdown-item>Item 1</cre8-dropdown-item>
@@ -667,4 +675,4 @@ span.ripple {
       <cre8-dropdown-item>Item 3</cre8-dropdown-item>
     </cre8-dropdown>
   </cre8-split-button>
-\``,...a.parameters?.docs?.source}}};const X=["Default","Large","Small"];export{o as Default,n as Large,a as Small,X as __namedExportsOrder,V as default};
+\``,...a.parameters?.docs?.source}}};const E=["Default","Large","Small"];export{o as Default,n as Large,a as Small,E as __namedExportsOrder,F as default};

package/dist/assets/{spread-CnPic3C2.js → spread-B518TqwY.js}

@@ -1 +1 @@
-import{e as o,i as s,t as i,E as p}from"./iframe-BNJP6ovU.js";class c extends s{constructor(e){if(super(e),e.type!==i.ELEMENT)throw new Error("The `spread` directive can only be used in the element context")}update(e,[n]){return Object.entries(n).forEach(([r,t])=>{typeof t=="string"&&t.length>0&&e.element.setAttribute(r,t),typeof t=="boolean"&&(e.element[r]=t)}),p}render(e){return""}}const l=o(c);export{l as s};
+import{e as o,i as s,t as i,E as p}from"./iframe-CTa_pRc7.js";class c extends s{constructor(e){if(super(e),e.type!==i.ELEMENT)throw new Error("The `spread` directive can only be used in the element context")}update(e,[n]){return Object.entries(n).forEach(([r,t])=>{typeof t=="string"&&t.length>0&&e.element.setAttribute(r,t),typeof t=="boolean"&&(e.element[r]=t)}),p}render(e){return""}}const l=o(c);export{l as s};

package/dist/assets/state-C6YC-MeJ.js

@@ -0,0 +1 @@
+import{n as r}from"./cre8-element-q82VmUgi.js";function n(t){return r({...t,state:!0,attribute:!1})}export{n as r};

package/dist/assets/{submenu.stories-UDtaREr1.js → submenu.stories-BT13dETW.js}

@@ -1,4 +1,4 @@
-import{a as g,b as a}from"./iframe-BNJP6ovU.js";import{s as u}from"./spread-CnPic3C2.js";import{C as c,n as h}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=g`.cre8-u-content-knockout-brand {
+import{a as g,b as a}from"./iframe-CTa_pRc7.js";import{s as u}from"./spread-B518TqwY.js";import{C as c,n as h}from"./cre8-element-q82VmUgi.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=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 */
 }
 
 /**
@@ -596,7 +604,7 @@ span.ripple {
 .cre8-c-submenu-item__link:active {
   color: var(--cre8-color-header-submenu-content-pressed);
   background: var(--cre8-color-header-submenu-bg-pressed);
-}`;var b=Object.defineProperty,x=(i,e,p,z)=>{for(var t=void 0,o=i.length-1,l;o>=0;o--)(l=i[o])&&(t=l(e,p,t)||t);return t&&b(e,p,t),t};const m=class m extends c{render(){const e=this.componentClassNames("cre8-c-submenu-item",{});return this.href?a`
+}`;var b=Object.defineProperty,x=(i,e,l,z)=>{for(var t=void 0,o=i.length-1,p;o>=0;o--)(p=i[o])&&(t=p(e,l,t)||t);return t&&b(e,l,t),t};const m=class m extends c{render(){const e=this.componentClassNames("cre8-c-submenu-item",{});return this.href?a`
         <li role="listitem" class="${e}">
           <a href=${this.href} class="cre8-c-submenu-item__link">
             <slot></slot>
@@ -980,6 +988,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1152,6 +1164,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**