@tmorrow/cre8-wc 2.1.1 → 2.2.0

package/dist/assets/{field-note-fccBckVl.js → field-note-B7iNgXW2.js}

@@ -1,4 +1,4 @@
-import{a as p,b as a}from"./iframe-BNJP6ovU.js";import{C as g,n}from"./cre8-element-B35i4Lyg.js";import"./icon-ChfRWXWy.js";const c=p`.cre8-u-content-knockout-brand {
+import{a as p,b as a}from"./iframe-nwd_1gnU.js";import{C as g,n}from"./cre8-element-CaOpCq8p.js";import"./icon-BvsTH4V8.js";const c=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 */
 }
 
 /**
@@ -622,7 +630,7 @@ span.ripple {
  */
 .cre8-c-field-note--inverted {
   color: var(--cre8-color-content-knockout);
-}`;var u=Object.defineProperty,o=(s,i,m,x)=>{for(var e=void 0,r=s.length-1,l;r>=0;r--)(l=s[r])&&(e=l(i,m,e)||e);return e&&u(i,m,e),e};const h=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+}`;var h=Object.defineProperty,o=(s,i,m,x)=>{for(var e=void 0,r=s.length-1,l;r>=0;r--)(l=s[r])&&(e=l(i,m,e)||e);return e&&h(i,m,e),e};const u=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM11.5123 6.58923L7.20462 10.8969C7.14746 10.9541 7.07959 10.9995 7.00489 11.0305C6.93018 11.0615 6.8501 11.0774 6.76923 11.0774C6.68836 11.0774 6.60828 11.0615 6.53358 11.0305C6.45887 10.9995 6.391 10.9541 6.33385 10.8969L4.48769 9.05077C4.37222 8.9353 4.30735 8.77868 4.30735 8.61538C4.30735 8.45208 4.37222 8.29547 4.48769 8.18C4.60317 8.06453 4.75978 7.99966 4.92308 7.99966C5.08638 7.99966 5.24299 8.06453 5.35846 8.18L6.76923 9.59154L10.6415 5.71846C10.6987 5.66128 10.7666 5.61593 10.8413 5.58499C10.916 5.55404 10.9961 5.53812 11.0769 5.53812C11.1578 5.53812 11.2378 5.55404 11.3126 5.58499C11.3873 5.61593 11.4551 5.66128 11.5123 5.71846C11.5695 5.77564 11.6148 5.84351 11.6458 5.91822C11.6767 5.99292 11.6927 6.07299 11.6927 6.15384C11.6927 6.2347 11.6767 6.31477 11.6458 6.38947C11.6148 6.46418 11.5695 6.53205 11.5123 6.58923Z"/>
 </svg>
 `,f=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -633,7 +641,7 @@ span.ripple {
           aria-live="${this.fieldNoteAriaLive()??"off"}"
           class="${i}">
         ${this.isError===!0?a`<cre8-icon class="cre8-field-note-icon" svg='${f}' aria-hidden="true" ></cre8-icon>`:""}
-            ${this.isSuccess===!0?a`<cre8-icon class="cre8-field-note-icon" svg='${h}' aria-hidden="true"></cre8-icon>`:""}
+            ${this.isSuccess===!0?a`<cre8-icon class="cre8-field-note-icon" svg='${u}' aria-hidden="true"></cre8-icon>`:""}
           <div><slot></slot></div>
         </div>
     `}};d.styles=[c];let t=d;o([n({type:Boolean,reflect:!0})],t.prototype,"isError");o([n({type:Boolean,reflect:!0})],t.prototype,"isSuccess");o([n()],t.prototype,"iconName");customElements.get("cre8-field-note")===void 0&&customElements.define("cre8-field-note",t);

package/dist/assets/{field-note.stories-BH9AZMbF.js → field-note.stories-nB3JUIfK.js}

@@ -1,4 +1,4 @@
-import{o as c,b as l}from"./iframe-BNJP6ovU.js";import{s as d}from"./spread-CnPic3C2.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./field-note-fccBckVl.js";import"./text-link-B3m3KEqY.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./cre8-element-B35i4Lyg.js";import"./icon-ChfRWXWy.js";import"./if-defined-Bxnzk64Q.js";const E={title:"cre8 Components/Field Note",render:({slot:i,...a})=>l`<cre8-field-note ${d(a)}>${c(p(i,"cre8-text-link"))}</cre8-field-note>`,component:"cre8-field-note",parameters:{status:{type:"inProgress"}},argTypes:{iconName:{control:"text"},isError:{control:"boolean"},isSuccess:{control:"boolean"}}},e={args:{slot:"This is a field note."}},r={args:{slot:'<cre8-text-link href="#">Helpful link</cre8-text-link> at the beginning of a field note'}},s={args:{slot:'This is a field note with a <cre8-text-link href="#">helpful link</cre8-text-link> in the middle of content'}},t={args:{slot:'This is a field note with an ending <cre8-text-link href="#">helpful link</cre8-text-link>'}},n={args:{isError:!0,slot:"This is a field note with an error state."}},o={args:{isSuccess:!0,slot:"This is a field note with a success state."}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{o as c,b as l}from"./iframe-nwd_1gnU.js";import{s as d}from"./spread-D16Rn3WA.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./field-note-B7iNgXW2.js";import"./text-link-VO8qilFK.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./cre8-element-CaOpCq8p.js";import"./icon-BvsTH4V8.js";import"./if-defined-RYzTvKuT.js";const E={title:"cre8 Components/Field Note",render:({slot:i,...a})=>l`<cre8-field-note ${d(a)}>${c(p(i,"cre8-text-link"))}</cre8-field-note>`,component:"cre8-field-note",parameters:{status:{type:"inProgress"}},argTypes:{iconName:{control:"text"},isError:{control:"boolean"},isSuccess:{control:"boolean"}}},e={args:{slot:"This is a field note."}},r={args:{slot:'<cre8-text-link href="#">Helpful link</cre8-text-link> at the beginning of a field note'}},s={args:{slot:'This is a field note with a <cre8-text-link href="#">helpful link</cre8-text-link> in the middle of content'}},t={args:{slot:'This is a field note with an ending <cre8-text-link href="#">helpful link</cre8-text-link>'}},n={args:{isError:!0,slot:"This is a field note with an error state."}},o={args:{isSuccess:!0,slot:"This is a field note with a success state."}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {
     slot: 'This is a field note.'
   }

package/dist/assets/{field.stories-BQPtmziK.js → field.stories-DL6PXwc3.js}

@@ -1,4 +1,4 @@
-import{b as h}from"./iframe-BNJP6ovU.js";import{s as S}from"./spread-CnPic3C2.js";import"./field-BpUYyRW1.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./cre8-form-element-Cfc5VeYV.js";import"./field-note-fccBckVl.js";import"./icon-ChfRWXWy.js";const U={title:"cre8 Components/Field",component:"cre8-field",render:F=>h`<cre8-field ${S(F)}></cre8-field>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]}},argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"},type:{control:"select",options:["text","email","number","url","tel","password","date"]}},args:{label:"Label"}},e={},r={args:{label:"Email Field",type:"email"}},a={args:{label:"Number Field",type:"number"}},s={args:{label:"Url Field",type:"url"}},o={args:{label:"Telephone Field",type:"tel"}},t={args:{label:"Password Field",type:"password"}},l={args:{label:"Date Field",type:"date",value:"1969-06-28"}},n={args:{type:"date",label:"Max date should not be 2025-01-01",max:"2025-01-01",value:"2024-01-01"}},i={args:{label:"Required Field",required:"true"}},c={args:{label:"Required Field with Max Length",maxlength:"10",required:"true"}},d={args:{label:"Disabled Field",disabled:"true"}},u={args:{label:"Readonly Field",readonly:"true",value:"value"}},m={args:{label:"Field with a Field Note",fieldNote:"This is a field note."}},p={args:{label:"Field with Error Message and Field Note",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},g={args:{label:"Field with Success Message",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}},b={args:{label:"Field with Error Message",isError:"true",errorNote:"Short, clear error message"}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"{}",...e.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+import{b as h}from"./iframe-nwd_1gnU.js";import{s as S}from"./spread-D16Rn3WA.js";import"./field.styles-DwF2OuJ8.js";import"./preload-helper-PPVm8Dsz.js";const x={title:"cre8 Components/Field",component:"cre8-field",render:F=>h`<cre8-field ${S(F)}></cre8-field>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]}},argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"},type:{control:"select",options:["text","email","number","url","tel","password","date"]}},args:{label:"Label"}},e={},r={args:{label:"Email Field",type:"email"}},a={args:{label:"Number Field",type:"number"}},s={args:{label:"Url Field",type:"url"}},o={args:{label:"Telephone Field",type:"tel"}},t={args:{label:"Password Field",type:"password"}},l={args:{label:"Date Field",type:"date",value:"1969-06-28"}},n={args:{type:"date",label:"Max date should not be 2025-01-01",max:"2025-01-01",value:"2024-01-01"}},c={args:{label:"Required Field",required:"true"}},d={args:{label:"Required Field with Max Length",maxlength:"10",required:"true"}},i={args:{label:"Disabled Field",disabled:"true"}},u={args:{label:"Readonly Field",readonly:"true",value:"value"}},m={args:{label:"Field with a Field Note",fieldNote:"This is a field note."}},p={args:{label:"Field with Error Message and Field Note",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},g={args:{label:"Field with Success Message",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}},b={args:{label:"Field with Error Message",isError:"true",errorNote:"Short, clear error message"}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"{}",...e.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Email Field',
     type: 'email'
@@ -36,23 +36,23 @@ import{b as h}from"./iframe-BNJP6ovU.js";import{s as S}from"./spread-CnPic3C2.js
     max: '2025-01-01',
     value: '2024-01-01'
   }
-}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+}`,...n.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Required Field',
     required: 'true'
   }
-}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Required Field with Max Length',
     maxlength: '10',
     required: 'true'
   }
-}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Disabled Field',
     disabled: 'true'
   }
-}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Readonly Field',
     readonly: 'true',
@@ -83,4 +83,4 @@ import{b as h}from"./iframe-BNJP6ovU.js";import{s as S}from"./spread-CnPic3C2.js
     isError: 'true',
     errorNote: 'Short, clear error message'
   }
-}`,...b.parameters?.docs?.source}}};const L=["Default","Email","Number","Url","Tel","Password","Date","MaxDate","Required","RequiredMaxlength","Disabled","Readonly","Fieldnote","Error","Success","SingleMessage"];export{l as Date,e as Default,d as Disabled,r as Email,p as Error,m as Fieldnote,n as MaxDate,a as Number,t as Password,u as Readonly,i as Required,c as RequiredMaxlength,b as SingleMessage,g as Success,o as Tel,s as Url,L as __namedExportsOrder,U as default};
+}`,...b.parameters?.docs?.source}}};const M=["Default","Email","Number","Url","Tel","Password","Date","MaxDate","Required","RequiredMaxlength","Disabled","Readonly","Fieldnote","Error","Success","SingleMessage"];export{l as Date,e as Default,i as Disabled,r as Email,p as Error,m as Fieldnote,n as MaxDate,a as Number,t as Password,u as Readonly,c as Required,d as RequiredMaxlength,b as SingleMessage,g as Success,o as Tel,s as Url,M as __namedExportsOrder,x as default};

package/dist/assets/{field-BpUYyRW1.js → field.styles-DwF2OuJ8.js}

@@ -1,4 +1,5 @@
-import{a as u,b as d,A as g}from"./iframe-BNJP6ovU.js";import{o as i}from"./if-defined-Bxnzk64Q.js";import{n as r}from"./cre8-element-B35i4Lyg.js";import{e as f}from"./query-BpjciUlk.js";import{n as l}from"./index.browser-BY9c7rfI.js";import{C as h}from"./cre8-form-element-Cfc5VeYV.js";import"./field-note-fccBckVl.js";const b=u`.cre8-u-content-knockout-brand {
+import{a as e}from"./iframe-nwd_1gnU.js";const r=e`
+.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +373,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +549,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -704,47 +713,5 @@ span.ripple {
   background-color: var(--cre8-color-bg-disabled);
   border-color: var(--cre8-color-border-disabled);
   cursor: default;
-}`;var y=Object.defineProperty,t=(p,a,n,x)=>{for(var o=void 0,s=p.length-1,m;s>=0;s--)(m=p[s])&&(o=m(a,n,o)||o);return o&&y(a,n,o),o};const c=class c extends h{constructor(){super(...arguments),this.type="text",this.label="Label",this.ariaLive="polite",this.errorText="Error",this.successText="Success"}firstUpdated(){return this.initializeAria(),super.firstUpdated()}initializeAria(){this.fieldId=this.fieldId||l(),(this.fieldNote||this.slotNotEmpty("fieldNote"))&&(this.ariaDescribedBy=this.ariaDescribedBy||`Field_${l()}`),(this.successNote||this.errorNote)&&(this.validationAriaDescribedBy=this.validationAriaDescribedBy||`Field_validation_${l()}`)}fieldNoteAria(){return this.validationAriaDescribedBy&&this.ariaDescribedBy?`${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`:this.validationAriaDescribedBy&&!this.ariaDescribedBy?this.validationAriaDescribedBy:this.ariaDescribedBy}_handleOnInput(a){const n=a.target.value;this.value=n,this._internals.setFormValue(this.value)}renderSuccessErrorFieldNote(){return this.successNote?d` <cre8-field-note
-        ?isSuccess=${this.isSuccess}
-        class="cre8-c-field__field-note-success"
-        id=${this.validationAriaDescribedBy}
-        iconName="success"
-      >
-        ${this.successNote}
-      </cre8-field-note>`:this.errorNote?d` <cre8-field-note
-        ?isError=${this.isError}
-        class="cre8-c-field__field-note-error"
-        id=${this.validationAriaDescribedBy}
-        iconName="error-alt"
-      >
-        ${this.errorNote}
-      </cre8-field-note>`:null}render(){const a=this.componentClassNames("cre8-c-field",{"cre8-is-error":this.isError,"cre8-is-success":this.isSuccess});return d`
-      <div class="${a}">
-        <label class="cre8-c-field__label" for="${this.fieldId}">${this.label}</label>
-        <div class="cre8-c-field__body">
-          <input
-            class="cre8-c-field__input"
-            autocomplete=${i(this.autocomplete)}
-            type="${this.type}"
-            id="${this.fieldId}"
-            name="${i(this.name)}"
-            max=${this.type==="date"&&i(this.max).toString()}
-            min=${this.type==="date"&&i(this.max).toString()}
-            maxlength=${i(this.maxlength)}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            aria-invalid=${this.isError?"true":"false"}
-            ?disabled="${this.disabled}"
-            pattern=${i(this.pattern)}
-            aria-describedby="${i(this.fieldNoteAria())}"
-            placeholder="${i(this.placeholder)}"
-            .value="${this.value}"
-            @input=${this._handleOnInput}
-          />
-        </div>
-        ${this.fieldNote||this.slotNotEmpty("fieldNote")?d`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
-              ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >`:g}
-        ${this.renderSuccessErrorFieldNote()}
-      </div>
-    `}};c.styles=[b];let e=c;t([r()],e.prototype,"autocomplete");t([r()],e.prototype,"pattern");t([r()],e.prototype,"type");t([r()],e.prototype,"placeholder");t([r()],e.prototype,"label");t([r()],e.prototype,"fieldId");t([r()],e.prototype,"fieldNote");t([r()],e.prototype,"ariaLive");t([r()],e.prototype,"ariaDescribedBy");t([r({type:Boolean,reflect:!0})],e.prototype,"required");t([r({type:Boolean,reflect:!0})],e.prototype,"disabled");t([r({type:Boolean,reflect:!0})],e.prototype,"isError");t([r()],e.prototype,"errorText");t([r()],e.prototype,"errorNote");t([r()],e.prototype,"max");t([r()],e.prototype,"min");t([r({type:Number})],e.prototype,"maxlength");t([r()],e.prototype,"validationAriaDescribedBy");t([r({type:Boolean,reflect:!0})],e.prototype,"isSuccess");t([r()],e.prototype,"successText");t([r({type:Boolean,reflect:!0})],e.prototype,"readonly");t([r()],e.prototype,"successNote");t([f("input")],e.prototype,"field");customElements.get("cre8-field")===void 0&&customElements.define("cre8-field",e);export{e as C};
+}
+`;export{r as s};

package/dist/assets/{footer.stories-DCWEciqD.js → footer.stories-lRkixJ_m.js}

@@ -1,4 +1,4 @@
-import{a as n,b as e}from"./iframe-BNJP6ovU.js";import"./f-po-BdPzDRD-.js";import{s as d}from"./spread-CnPic3C2.js";import{C as m}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./_commonjsHelpers-DaWZu8wl.js";const s=n`.cre8-u-content-knockout-brand {
+import{a as n,b as e}from"./iframe-nwd_1gnU.js";import"./f-po-ByatXsWC.js";import{s as d}from"./spread-D16Rn3WA.js";import{C as m}from"./cre8-element-CaOpCq8p.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-RYzTvKuT.js";import"./_commonjsHelpers-DaWZu8wl.js";const s=n`.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/form-kQUqwepo.js

@@ -0,0 +1,17 @@
+import{a as f,b as u}from"./iframe-nwd_1gnU.js";import{C as m,n as c}from"./cre8-element-CaOpCq8p.js";const a=f`
+  cre8-form {
+    display: block;
+  }
+
+  cre8-form .cre8-c-form {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--cre8-form-gap, 1.5rem);
+  }
+
+  cre8-form .cre8-c-form > cre8-button,
+  cre8-form .cre8-c-form > cre8-button-group:not([fullwidth]) {
+    align-self: flex-start;
+  }
+`;var h=Object.defineProperty,d=(o,e,t,s)=>{for(var r=void 0,i=o.length-1,l;i>=0;i--)(l=o[i])&&(r=l(e,t,r)||r);return r&&h(e,t,r),r};class n extends m{constructor(){super(...arguments),this._form=null,this._onSubmit=e=>{e.preventDefault(),!(!this.novalidate&&!this._validate())&&this.dispatchEvent(new CustomEvent("form-submit",{detail:{data:new FormData(this._form),values:this.values,form:this._form},bubbles:!0,composed:!0}))},this._onReset=()=>{this.controls.forEach(e=>{e.isError=!1}),this.dispatchEvent(new CustomEvent("form-reset",{bubbles:!0,composed:!0}))}}createRenderRoot(){return this}render(){return u``}connectedCallback(){super.connectedCallback(),this._ensureForm(),this._adoptStyles()}_adoptStyles(){const e=this.getRootNode(),t=a.styleSheet;if(t&&"adoptedStyleSheets"in e){e.adoptedStyleSheets.includes(t)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,t]);return}const s=e instanceof Document?e.head:e;if(!s.querySelector("style[data-cre8-form]")){const r=document.createElement("style");r.setAttribute("data-cre8-form",""),r.textContent=a.cssText,s.appendChild(r)}}updated(e){super.updated(e),e.has("disabled")&&this.controls.forEach(t=>{t.disabled=this.disabled})}_ensureForm(){if(this._form?.isConnected)return;const e=document.createElement("form");for(e.className="cre8-c-form",e.noValidate=!0;this.firstChild;)e.appendChild(this.firstChild);this.appendChild(e),this._form=e,e.addEventListener("submit",this._onSubmit),e.addEventListener("reset",this._onReset)}get form(){return this._form}get controls(){return this._form?Array.from(this.querySelectorAll("*")).filter(e=>e._internals?.form===this._form):[]}get values(){const e={};if(!this._form)return e;for(const[t,s]of new FormData(this._form).entries()){const r=e[t];r===void 0?e[t]=s:Array.isArray(r)?r.push(s):e[t]=[r,s]}return e}submit(){this._form?.requestSubmit()}reset(){this._form?.reset()}checkValidity(){return this.controls.every(e=>e.checkValidity())}reportValidity(){return this._validate()}_validate(){const e=this.controls,t=e.filter(s=>!s.checkValidity());return e.forEach(s=>{s.isError=t.includes(s)}),t.length===0?!0:(t[0].focus?.(),this.dispatchEvent(new CustomEvent("form-invalid",{detail:{invalidControls:t},bubbles:!0,composed:!0})),!1)}}d([c({type:Boolean,reflect:!0})],n.prototype,"novalidate");d([c({type:Boolean,reflect:!0})],n.prototype,"disabled");customElements.get("cre8-form")===void 0&&customElements.define("cre8-form",n);

package/dist/assets/form.stories-DdezGU-e.js

@@ -0,0 +1,75 @@
+import{b as o}from"./iframe-nwd_1gnU.js";import"./field-BpyhbS2M.js";import"./button-rmsX1TVb.js";import"./button-group-DjFiwkrF.js";import"./grid-item-B260kL-6.js";import"./form-kQUqwepo.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-RYzTvKuT.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./cre8-form-element-Dowz62UX.js";import"./field-note-B7iNgXW2.js";import"./icon-BvsTH4V8.js";import"./field.styles-DwF2OuJ8.js";import"./loading-spinner-B7JDCfNK.js";const C={title:"cre8 Components/Form",component:"cre8-form",parameters:{status:{type:"inProgress"},controls:{hideNoControlsWarning:!0},docs:{description:{component:"Groups form-associated Cre8 controls, aggregates their validation on submit, and orchestrates submit and reset. Renders to light DOM so the controls are owned by a real `<form>`, which means layout components such as `cre8-grid` can be nested inside freely."}}},argTypes:{novalidate:{control:{type:"boolean"},description:"Skips aggregate validation on submit."},disabled:{control:{type:"boolean"},description:"Disables every control in the form."}}},s=n=>{const a=n.detail;console.log("form-submit",a.values)},c=n=>{const a=n.detail;console.log("form-invalid",a.invalidControls)},i={render:()=>o`
+    <cre8-form @form-submit=${s}>
+      <cre8-field name="firstName" label="First name"></cre8-field>
+      <cre8-field name="lastName" label="Last name"></cre8-field>
+      <cre8-button type="submit" text="Save"></cre8-button>
+    </cre8-form>
+  `},e={render:()=>o`
+    <cre8-form @form-submit=${s} @form-invalid=${c}>
+      <cre8-field name="email" label="Email" required></cre8-field>
+      <cre8-field name="nickname" label="Nickname"></cre8-field>
+      <cre8-button-group>
+        <cre8-button type="submit" text="Submit"></cre8-button>
+        <cre8-button type="reset" variant="secondary" text="Reset"></cre8-button>
+      </cre8-button-group>
+    </cre8-form>
+  `},r={render:()=>o`
+    <cre8-form @form-submit=${s}>
+      <cre8-grid variant="2up" gap="lg">
+        <cre8-grid-item>
+          <cre8-field name="street" label="Street" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="city" label="City" required></cre8-field>
+        </cre8-grid-item>
+      </cre8-grid>
+      <cre8-button type="submit" text="Save address"></cre8-button>
+    </cre8-form>
+  `},t={render:()=>o`
+    <cre8-form disabled>
+      <cre8-field name="firstName" label="First name"></cre8-field>
+      <cre8-field name="lastName" label="Last name"></cre8-field>
+      <cre8-button type="submit" text="Saving…"></cre8-button>
+    </cre8-form>
+  `};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <cre8-form @form-submit=\${logSubmit}>
+      <cre8-field name="firstName" label="First name"></cre8-field>
+      <cre8-field name="lastName" label="Last name"></cre8-field>
+      <cre8-button type="submit" text="Save"></cre8-button>
+    </cre8-form>
+  \`
+}`,...i.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <cre8-form @form-submit=\${logSubmit} @form-invalid=\${logInvalid}>
+      <cre8-field name="email" label="Email" required></cre8-field>
+      <cre8-field name="nickname" label="Nickname"></cre8-field>
+      <cre8-button-group>
+        <cre8-button type="submit" text="Submit"></cre8-button>
+        <cre8-button type="reset" variant="secondary" text="Reset"></cre8-button>
+      </cre8-button-group>
+    </cre8-form>
+  \`
+}`,...e.parameters?.docs?.source},description:{story:"Submitting with the required field empty blocks the submit, flags the control,\nand moves focus to it. Open the console to see the `form-invalid` event.",...e.parameters?.docs?.description}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <cre8-form @form-submit=\${logSubmit}>
+      <cre8-grid variant="2up" gap="lg">
+        <cre8-grid-item>
+          <cre8-field name="street" label="Street" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="city" label="City" required></cre8-field>
+        </cre8-grid-item>
+      </cre8-grid>
+      <cre8-button type="submit" text="Save address"></cre8-button>
+    </cre8-form>
+  \`
+}`,...r.parameters?.docs?.source},description:{story:"Controls keep their form ownership when nested inside layout components,\nso `cre8-grid` can be used to lay the form out.",...r.parameters?.docs?.description}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <cre8-form disabled>
+      <cre8-field name="firstName" label="First name"></cre8-field>
+      <cre8-field name="lastName" label="Last name"></cre8-field>
+      <cre8-button type="submit" text="Saving…"></cre8-button>
+    </cre8-form>
+  \`
+}`,...t.parameters?.docs?.source},description:{story:"Setting `disabled` on the form disables every control inside it, which is\nuseful while a submission is in flight.",...t.parameters?.docs?.description}}};const D=["Default","Validation","WithLayout","Disabled"];export{i as Default,t as Disabled,e as Validation,r as WithLayout,D as __namedExportsOrder,C as default};

package/dist/assets/{formatter-L2YTDE3Q-B9u1AOWn.js → formatter-L2YTDE3Q-Ch1Vr_xh.js}

@@ -1 +1 @@
-import{b as m}from"./blocks-1be_-L6v.js";import{d as o,f as t}from"./iframe-BNJP6ovU.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";var e=t(m(),1),_=(0,e.default)(2)(async(i,r)=>i===!1?r:o(r));export{_ as formatter};
+import{b as m}from"./blocks-DlUWku5n.js";import{d as o,f as t}from"./iframe-nwd_1gnU.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";var e=t(m(),1),_=(0,e.default)(2)(async(i,r)=>i===!1?r:o(r));export{_ as formatter};

package/dist/assets/{global-nav-item-T4htN-yO.js → global-nav-item-Cxq8RcLW.js}

@@ -1,4 +1,4 @@
-import{a as p,b as r}from"./iframe-BNJP6ovU.js";import{o as g}from"./if-defined-Bxnzk64Q.js";import{C as h,n as o}from"./cre8-element-B35i4Lyg.js";import{r as u}from"./state-DkQhleoO.js";const f=p`.cre8-u-content-knockout-brand {
+import{a as p,b as a}from"./iframe-nwd_1gnU.js";import{o as g}from"./if-defined-RYzTvKuT.js";import{C as h,n as o}from"./cre8-element-CaOpCq8p.js";import{r as u}from"./state-DZNbmwHN.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-2dWRfCXv.js → global-nav-item.stories-BN2A5owe.js}

@@ -1 +1 @@
-import{b as o}from"./iframe-BNJP6ovU.js";import{s as t}from"./spread-CnPic3C2.js";import"./global-nav-item-T4htN-yO.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./state-DkQhleoO.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};
+import{b as o}from"./iframe-nwd_1gnU.js";import{s as t}from"./spread-D16Rn3WA.js";import"./global-nav-item-Cxq8RcLW.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-RYzTvKuT.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./state-DZNbmwHN.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-Fh1gScqg.js → global-nav.stories-CQxLq7RO.js}

@@ -1,4 +1,4 @@
-import{a as g,b as p}from"./iframe-BNJP6ovU.js";import{s as c}from"./spread-CnPic3C2.js";import"./global-nav-item-T4htN-yO.js";import{C as u,n as o}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./state-DkQhleoO.js";import"./_commonjsHelpers-DaWZu8wl.js";const h=g`.cre8-u-content-knockout-brand {
+import{a as g,b as p}from"./iframe-nwd_1gnU.js";import{s as c}from"./spread-D16Rn3WA.js";import"./global-nav-item-Cxq8RcLW.js";import{C as u,n as o}from"./cre8-element-CaOpCq8p.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-RYzTvKuT.js";import"./state-DZNbmwHN.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,7 +607,7 @@ 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>