@tmorrow/cre8-wc 2.1.0 → 2.2.0

package/dist/assets/{checkbox-field-item-DIMHcWM0.js → checkbox-field-item-C5vdtGYd.js}

@@ -1,4 +1,4 @@
-import{a as u,b as n,A as f}from"./iframe-BNJP6ovU.js";import{o as a}from"./if-defined-Bxnzk64Q.js";import{n as t}from"./cre8-element-B35i4Lyg.js";import{e as g}from"./query-BpjciUlk.js";import{n as l}from"./index.browser-BY9c7rfI.js";import"./icon-ChfRWXWy.js";import"./field-note-fccBckVl.js";import{C as b}from"./cre8-form-element-Cfc5VeYV.js";const x=u`@charset "UTF-8";
+import{a as u,b as n,A as f}from"./iframe-nwd_1gnU.js";import{o as a}from"./if-defined-RYzTvKuT.js";import{n as t}from"./cre8-element-CaOpCq8p.js";import{e as g}from"./query-BpjciUlk.js";import{n as l}from"./index.browser-BY9c7rfI.js";import"./icon-BvsTH4V8.js";import"./field-note-B7iNgXW2.js";import{C as b}from"./cre8-form-element-Dowz62UX.js";const x=u`@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 */
 }
 
 /**

package/dist/assets/{checkbox-field-item.stories-XbB4x_lO.js → checkbox-field-item.stories-IeHp3Od1.js}

@@ -1,4 +1,4 @@
-import{g as p}from"./iframe-BNJP6ovU.js";import"./field-note-fccBckVl.js";import"./checkbox-field-item-DIMHcWM0.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-ChfRWXWy.js";import"./if-defined-Bxnzk64Q.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./cre8-form-element-Cfc5VeYV.js";const{args:m,argTypes:u,template:b}=p("cre8-checkbox-field-item"),E={title:"cre8 Components/Checkbox Field Item",component:"cre8-checkbox-field-item",args:m,argTypes:u,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur","click"]}},render:d=>b(d)},o={args:{label:"Label"}},t={args:{label:"Label",checked:!0}},e={args:{label:"Label (optional)"}},i={args:{label:"Label",isError:!0,required:!0}},r={args:{label:"Label",disabled:!0}},s={args:{label:"Label",fieldNote:"This is a field note.",ariaDescribedBy:"default-fieldnote-message"}},c={args:{label:"Label",isError:!0,errorNote:"Short, clear error message",validationAriaDescribedBy:"error-validation-message"}},n={args:{label:"Label",isSuccess:!0,successNote:"Short, clear success message",validationAriaDescribedBy:"success-valitation-message"}},l={args:{label:"This could mayhaps be the longest title that has ever been put on a checkbox field ever!"}},a={args:{label:"Rounded checkbox","--cre8-border-radius-checkbox":"0.5rem"}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+import{g as p}from"./iframe-nwd_1gnU.js";import"./field-note-B7iNgXW2.js";import"./checkbox-field-item-C5vdtGYd.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-BvsTH4V8.js";import"./if-defined-RYzTvKuT.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./cre8-form-element-Dowz62UX.js";const{args:m,argTypes:u,template:b}=p("cre8-checkbox-field-item"),E={title:"cre8 Components/Checkbox Field Item",component:"cre8-checkbox-field-item",args:m,argTypes:u,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur","click"]}},render:d=>b(d)},o={args:{label:"Label"}},t={args:{label:"Label",checked:!0}},e={args:{label:"Label (optional)"}},i={args:{label:"Label",isError:!0,required:!0}},r={args:{label:"Label",disabled:!0}},s={args:{label:"Label",fieldNote:"This is a field note.",ariaDescribedBy:"default-fieldnote-message"}},c={args:{label:"Label",isError:!0,errorNote:"Short, clear error message",validationAriaDescribedBy:"error-validation-message"}},n={args:{label:"Label",isSuccess:!0,successNote:"Short, clear success message",validationAriaDescribedBy:"success-valitation-message"}},l={args:{label:"This could mayhaps be the longest title that has ever been put on a checkbox field ever!"}},a={args:{label:"Rounded checkbox","--cre8-border-radius-checkbox":"0.5rem"}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Label'
   }

package/dist/assets/{checkbox-field.stories-YnqFUI4K.js → checkbox-field.stories-DflhNO0m.js}

@@ -1,4 +1,4 @@
-import{a as u,b as p}from"./iframe-BNJP6ovU.js";import"./field-note-fccBckVl.js";import{o as c}from"./if-defined-Bxnzk64Q.js";import{C as b,n as t}from"./cre8-element-B35i4Lyg.js";import{n as x}from"./index.browser-BY9c7rfI.js";import"./checkbox-field-item-DIMHcWM0.js";import{s as y}from"./spread-CnPic3C2.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 k=u`.cre8-u-content-knockout-brand {
+import{a as u,b as g}from"./iframe-nwd_1gnU.js";import"./field-note-B7iNgXW2.js";import{o as p}from"./if-defined-RYzTvKuT.js";import{C as b,n as i}from"./cre8-element-CaOpCq8p.js";import{n as x}from"./index.browser-BY9c7rfI.js";import{s as y}from"./light-children-DDjBxt3J.js";import"./checkbox-field-item-C5vdtGYd.js";import{s as k}from"./spread-D16Rn3WA.js";import"./preload-helper-PPVm8Dsz.js";import"./icon-BvsTH4V8.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Dowz62UX.js";const z=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 */
 }
 
 /**
@@ -616,47 +624,47 @@ span.ripple {
 .cre8-c-checkbox-field__list {
   display: flex;
   flex-direction: column;
-}`;var z=Object.defineProperty,i=(a,o,f,w)=>{for(var r=void 0,m=a.length-1,h;m>=0;m--)(h=a[m])&&(r=h(o,f,r)||r);return r&&z(o,f,r),r};const g=class g extends b{connectedCallback(){super.connectedCallback(),this.fieldNote&&(this.ariaDescribedBy=this.ariaDescribedBy||x())}render(){const o=this.componentClassNames("cre8-c-checkbox-field",{});return p`
-      <fieldset class="${o}" aria-describedby="${c(this.ariaDescribedBy)}">
+}`;var w=Object.defineProperty,r=(o,e,n,v)=>{for(var a=void 0,c=o.length-1,f;c>=0;c--)(f=o[c])&&(a=f(e,n,a)||a);return a&&w(e,n,a),a};const h=class h extends b{connectedCallback(){super.connectedCallback(),this.fieldNote&&(this.ariaDescribedBy=this.ariaDescribedBy||x())}buildComposition(){return this.items?this.items.map(e=>({tag:"cre8-checkbox-field-item",props:{label:e.label,value:e.value,checked:e.checked,disabled:e.disabled,required:e.required,name:this.name}})):null}updated(e){["items","name"].some(n=>e.has(n))&&y(this,this.buildComposition())}render(){const e=this.componentClassNames("cre8-c-checkbox-field",{});return g`
+      <fieldset class="${e}" aria-describedby="${p(this.ariaDescribedBy)}">
       <legend class="cre8-c-checkbox-field__legend">${this.label}</legend>
         <div class="cre8-c-checkbox-field__body">
           <div class="cre8-c-checkbox-field__list" role="list">
             <slot></slot>
           </div>
         </div>
-        ${this.fieldNote?p`<cre8-field-note
+        ${this.fieldNote?g`<cre8-field-note
           ?inverted=${this.fieldNoteKnockout}
-          id=${c(this.ariaDescribedBy)}
-          iconName=${c(this.fieldNoteIconName)}
+          id=${p(this.ariaDescribedBy)}
+          iconName=${p(this.fieldNoteIconName)}
           ?isSuccess=${this.fieldNoteIsSuccess}
           ?isError=${this.fieldNoteIsError}
         >
           ${this.fieldNote}
         </cre8-field-note>`:""}
       </fieldset>
-    `}};g.styles=[k];let e=g;i([t()],e.prototype,"label");i([t()],e.prototype,"fieldNote");i([t()],e.prototype,"ariaDescribedBy");i([t()],e.prototype,"fieldNoteIconName");i([t({type:Boolean,reflect:!0})],e.prototype,"fieldNoteKnockout");i([t({type:Boolean,reflect:!0})],e.prototype,"fieldNoteIsSuccess");i([t({type:Boolean,reflect:!0})],e.prototype,"fieldNoteIsError");customElements.get("cre8-checkbox-field")===void 0&&customElements.define("cre8-checkbox-field",e);const C={title:"cre8 Components/Checkbox Field",component:"cre8-checkbox-field",parameters:{status:{type:"inProgress"}},render:a=>p`
-    <cre8-checkbox-field ${y(a)}>
+    `}};h.styles=[z];let t=h;r([i()],t.prototype,"label");r([i()],t.prototype,"fieldNote");r([i()],t.prototype,"ariaDescribedBy");r([i()],t.prototype,"fieldNoteIconName");r([i({type:Boolean,reflect:!0})],t.prototype,"fieldNoteKnockout");r([i({type:Boolean,reflect:!0})],t.prototype,"fieldNoteIsSuccess");r([i({type:Boolean,reflect:!0})],t.prototype,"fieldNoteIsError");r([i({type:Array})],t.prototype,"items");r([i()],t.prototype,"name");customElements.get("cre8-checkbox-field")===void 0&&customElements.define("cre8-checkbox-field",t);const V={title:"cre8 Components/Checkbox Field",component:"cre8-checkbox-field",parameters:{status:{type:"inProgress"}},render:o=>g`
+    <cre8-checkbox-field ${k(o)}>
       <cre8-checkbox-field-item label="Default"></cre8-checkbox-field-item>
       <cre8-checkbox-field-item label="Error" ?isError=${!0}></cre8-checkbox-field-item>
       <cre8-checkbox-field-item label="Disabled" ?disabled=${!0} ?checked=${!0}></cre8-checkbox-field-item>
     </cre8-checkbox-field>
-  `,args:{label:"Legend"},argTypes:{ariaDescribedBy:{control:"text"},fieldNote:{control:"text"},fieldNoteIconName:{control:"text"},label:{control:"text"},fieldNoteKnockout:{table:{disable:!0}}}},n={},d={args:{ariaDescribedBy:"checkbox-field-message",fieldNote:"This is a field note of the fieldset"}},s={args:{ariaDescribedBy:"checkbox-field-error-message",fieldNote:"This is an error note on the fieldset!",fieldNoteIsError:!0,fieldNoteIconName:"error"}},l={args:{ariaDescribedBy:"checkbox-field-success-message",fieldNote:"This is a success note on the fieldset!",fieldNoteIsSuccess:!0,fieldNoteIconName:"success"}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:"{}",...n.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  `,args:{label:"Legend"},argTypes:{ariaDescribedBy:{control:"text"},fieldNote:{control:"text"},fieldNoteIconName:{control:"text"},label:{control:"text"},fieldNoteKnockout:{table:{disable:!0}}}},d={},s={args:{ariaDescribedBy:"checkbox-field-message",fieldNote:"This is a field note of the fieldset"}},l={args:{ariaDescribedBy:"checkbox-field-error-message",fieldNote:"This is an error note on the fieldset!",fieldNoteIsError:!0,fieldNoteIconName:"error"}},m={args:{ariaDescribedBy:"checkbox-field-success-message",fieldNote:"This is a success note on the fieldset!",fieldNoteIsSuccess:!0,fieldNoteIconName:"success"}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:"{}",...d.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   args: {
     ariaDescribedBy: 'checkbox-field-message',
     fieldNote: 'This is a field note of the fieldset'
   }
-}`,...d.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
     ariaDescribedBy: 'checkbox-field-error-message',
     fieldNote: 'This is an error note on the fieldset!',
     fieldNoteIsError: true,
     fieldNoteIconName: 'error'
   }
-}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...l.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   args: {
     ariaDescribedBy: 'checkbox-field-success-message',
     fieldNote: 'This is a success note on the fieldset!',
     fieldNoteIsSuccess: true,
     fieldNoteIconName: 'success'
   }
-}`,...l.parameters?.docs?.source}}};const X=["Default","WithFieldNote","WithErrorFieldNote","WithSuccessFieldNote"];export{n as Default,s as WithErrorFieldNote,d as WithFieldNote,l as WithSuccessFieldNote,X as __namedExportsOrder,C as default};
+}`,...m.parameters?.docs?.source}}};const W=["Default","WithFieldNote","WithErrorFieldNote","WithSuccessFieldNote"];export{d as Default,l as WithErrorFieldNote,s as WithFieldNote,m as WithSuccessFieldNote,W as __namedExportsOrder,V as default};

package/dist/assets/cre8-element-CaOpCq8p.js

@@ -0,0 +1 @@
+import{k as u,u as d,j as h,b as f}from"./iframe-nwd_1gnU.js";import{g as m}from"./_commonjsHelpers-DaWZu8wl.js";const b={attribute:!0,type:String,converter:d,reflect:!1,hasChanged:u},y=(n=b,e,r)=>{const{kind:c,metadata:a}=r;let t=globalThis.litPropertyMetadata.get(a);if(t===void 0&&globalThis.litPropertyMetadata.set(a,t=new Map),c==="setter"&&((n=Object.create(n)).wrapped=!0),t.set(r.name,n),c==="accessor"){const{name:s}=r;return{set(o){const i=e.get.call(this);e.set.call(this,o),this.requestUpdate(s,i,n,!0,o)},init(o){return o!==void 0&&this.C(s,void 0,n,o),o}}}if(c==="setter"){const{name:s}=r;return function(o){const i=this[s];e.call(this,o),this.requestUpdate(s,i,n,!0,o)}}throw Error("Unsupported decorator location: "+c)};function x(n){return(e,r)=>typeof r=="object"?y(n,e,r):((c,a,t)=>{const s=a.hasOwnProperty(t);return a.constructor.createProperty(t,c),s?Object.getOwnPropertyDescriptor(a,t):void 0})(n,e,r)}var l={exports:{}},p;function E(){return p||(p=1,(function(n){(function(){var e={}.hasOwnProperty;function r(){for(var t="",s=0;s<arguments.length;s++){var o=arguments[s];o&&(t=a(t,c(o)))}return t}function c(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return r.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var o in t)e.call(t,o)&&t[o]&&(s=a(s,o));return s}function a(t,s){return s?t?t+" "+s:t+s:t}n.exports?(r.default=r,n.exports=r):window.classNames=r})()})(l)),l.exports}var g=E();const v=m(g),C={"tab-change":"tabChange","tab-select":"tabSelected","modal-close":"close-modal","popover-open":"open","popover-close":"close","tooltip-open":"open","tooltip-close":"close","multi-select-change":"selectedItemsChange","remove-tag-click":"removeTagClicked","percent-bar-left-action-click":"leftActionButtonClick","dropdown-item-select":"dropdown-item-selected","split-button-text-click":"text-click","split-button-dropdown-click":"dropdown-click","pagination-change":"pagination.click","chart-click":"cre8-chart-click","chart-hover":"cre8-chart-hover","chart-ready":"cre8-chart-ready"};class S extends h{componentClassNames(e,r={}){return v(e,r)}slotEmpty(e){return!this.querySelector(`[slot="${e}"]`)}slotNotEmpty(e){return this.slotEmpty(e)?null:!this.slotEmpty(e)}dispatch({e,eventName:r,detailObj:c={},optionsObj:a={}}){const t={bubbles:!0,composed:!0,...a,detail:{...e&&{originalEvent:e},...c}};return this.dispatchWithLegacyAlias(new CustomEvent(r,t))}dispatchWithLegacyAlias(e){this.dispatchEvent(e);const r=C[e.type];if(r){const c={bubbles:e.bubbles,composed:e.composed,cancelable:e.cancelable};this.dispatchEvent(e instanceof CustomEvent?new CustomEvent(r,{...c,detail:e.detail}):new Event(r,c))}return e}render(){return f`<slot></slot>`}}export{S as C,v as c,x as n};

package/dist/assets/cre8-form-element-Dowz62UX.js

@@ -0,0 +1 @@
+import{C as p,n as u}from"./cre8-element-CaOpCq8p.js";let v=class extends Event{constructor(t,s,i,e){super("context-request",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=s,this.callback=i,this.subscribe=e??!1}};class b{get value(){return this.o}set value(t){this.setValue(t)}setValue(t,s=!1){const i=s||!Object.is(t,this.o);this.o=t,i&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(const[s,{disposer:i}]of this.subscriptions)s(this.o,i)},t!==void 0&&(this.value=t)}addCallback(t,s,i){if(!i)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:s});const{disposer:e}=this.subscriptions.get(t);t(this.value,e)}clearCallbacks(){this.subscriptions.clear()}}let m=class extends Event{constructor(t,s){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=s}};class d extends b{constructor(t,s,i){super(s.context!==void 0?s.initialValue:i),this.onContextRequest=e=>{if(e.context!==this.context)return;const a=e.contextTarget??e.composedPath()[0];a!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,a,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;const a=new Set;for(const[r,{consumerHost:l}]of this.subscriptions)a.has(r)||(a.add(r),l.dispatchEvent(new v(this.context,l,r,!0)));e.stopPropagation()},this.host=t,s.context!==void 0?this.context=s.context:this.context=s,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new m(this.context,this.host))}}function f({context:n}){return(t,s)=>{const i=new WeakMap;if(typeof s=="object")return{get(){return t.get.call(this)},set(e){return i.get(this).setValue(e),t.set.call(this,e)},init(e){return i.set(this,new d(this,{context:n,initialValue:e})),e}};{t.constructor.addInitializer((r=>{i.set(r,new d(r,{context:n}))}));const e=Object.getOwnPropertyDescriptor(t,s);let a;if(e===void 0){const r=new WeakMap;a={get(){return r.get(this)},set(l){i.get(this).setValue(l),r.set(this,l)},configurable:!0,enumerable:!0}}else{const r=e.set;a={...e,set(l){i.get(this).setValue(l),r?.call(this,l)}}}return void Object.defineProperty(t,s,a)}}}const y=Symbol("cre8-form-internals"),x=Symbol("cre8-form-state");var g=Object.defineProperty,V=Object.getOwnPropertyDescriptor,h=(n,t,s,i)=>{for(var e=i>1?void 0:i?V(t,s):t,a=n.length-1,r;a>=0;a--)(r=n[a])&&(e=(i?r(t,s,e):r(e))||e);return i&&e&&g(t,s,e),e};const c=class c extends p{constructor(){super(),this.internalValue="",this.hasCustomError=!1,this.defaultValue="",this._formState={value:"",disabled:!1,required:!1,isError:!1,isSuccess:!1},this._internals=this.attachInternals()}get value(){return this.internalValue}set value(t){const s=this.value;this.internalValue=t,this.type!=="checkbox"&&this.type!=="radio"&&this._internals?.setFormValue(t),this.updateField(),this.updateFormState(),this.requestUpdate("value",s)}updateFormState(){this._formState={value:this.internalValue,disabled:this.disabled??!1,required:this.required??!1,isError:this.isError??!1,isSuccess:this.isSuccess??!1,name:this.name}}updateField(){this.field&&this.internalValue!==void 0&&(this.field.value=this.internalValue??"")}focus(t){if(this.field){this.field.focus(t);return}super.focus(t)}syncValidity(){if(!this._internals||!this.field||this.hasCustomError)return;const t=this.field.validity;if(t.valid){this._internals.setValidity({});return}const s={badInput:t.badInput,customError:t.customError,patternMismatch:t.patternMismatch,rangeOverflow:t.rangeOverflow,rangeUnderflow:t.rangeUnderflow,stepMismatch:t.stepMismatch,tooLong:t.tooLong,tooShort:t.tooShort,typeMismatch:t.typeMismatch,valueMissing:t.valueMissing};this._internals.setValidity(s,this.field.validationMessage||"This field is invalid.",this.field)}firstUpdated(){this.type!=="checkbox"&&this.type!=="radio"&&(this.defaultValue=this.value||this.getAttribute("value")||""),this.updateField(),this.updateFormState()}updated(t){super.updated(t),(t.has("disabled")||t.has("required")||t.has("isError")||t.has("isSuccess")||t.has("name"))&&this.updateFormState(),this.syncValidity()}formResetCallback(){this.value=this.defaultValue,this.updateField()}formDisabledCallback(t){this.disabled=t}formStateRestoreCallback(t,s){typeof t=="string"&&(this.value=t)}get form(){return this._internals?.form??null}get validationMessage(){return this._internals?.validationMessage??""}get validity(){return this._internals?.validity}get willValidate(){return this._internals?.willValidate??!1}reportValidity(){return this._internals?.reportValidity()??!0}checkValidity(){return this._internals?.checkValidity()??!0}setCustomValidity(t){this._internals&&this.field&&(t?(this.hasCustomError=!0,this._internals.setValidity({customError:!0},t,this.field)):(this.hasCustomError=!1,this.syncValidity()))}};c.formAssociated=!0;let o=c;h([f({context:y})],o.prototype,"_internals",2);h([f({context:x})],o.prototype,"_formState",2);h([u()],o.prototype,"name",2);h([u({type:Boolean,reflect:!0})],o.prototype,"disabled",2);h([u({type:Boolean,reflect:!0})],o.prototype,"required",2);h([u({type:Boolean,reflect:!0})],o.prototype,"isError",2);h([u({type:Boolean,reflect:!0})],o.prototype,"isSuccess",2);h([u()],o.prototype,"value",1);export{o as C,y as f,v as s};

package/dist/assets/{danger-button.stories-xh25hmfd.js → danger-button.stories-BMgfVb0A.js}

@@ -1,4 +1,4 @@
-import{a as Z,A as c,b as n}from"./iframe-BNJP6ovU.js";import{s as q}from"./spread-CnPic3C2.js";import{c as G,n as t}from"./cre8-element-B35i4Lyg.js";import{o as a}from"./if-defined-Bxnzk64Q.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";import{e as N}from"./query-BpjciUlk.js";import{C as U}from"./cre8-form-element-Cfc5VeYV.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const Y=Z`@charset "UTF-8";
+import{a as Z,A as c,b as n}from"./iframe-nwd_1gnU.js";import{s as q}from"./spread-D16Rn3WA.js";import{c as G,n as t}from"./cre8-element-CaOpCq8p.js";import{o as a}from"./if-defined-RYzTvKuT.js";import"./icon-BvsTH4V8.js";import"./loading-spinner-B7JDCfNK.js";import{e as N}from"./query-BpjciUlk.js";import{C as U}from"./cre8-form-element-Dowz62UX.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const Y=Z`@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 */
 }
 
 /**

package/dist/assets/{date-picker.stories-DD_ctzEF.js → date-picker.stories-Ctw_UuKt.js}

@@ -1,4 +1,4 @@
-import{a as x,b as s,A as f}from"./iframe-BNJP6ovU.js";import{s as X}from"./spread-CnPic3C2.js";import{w as E}from"./decorator-iVSD-Llo.js";import{o as u}from"./if-defined-Bxnzk64Q.js";import{C as I,n as p}from"./cre8-element-B35i4Lyg.js";import{r as c}from"./state-DkQhleoO.js";import{e as A}from"./query-BpjciUlk.js";import"./icon-ChfRWXWy.js";import"./button-CgaWukz0.js";import{s as B,f as P}from"./cre8-form-element-Cfc5VeYV.js";import{C as q}from"./field-BpUYyRW1.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./loading-spinner-C52KNq6y.js";import"./index.browser-BY9c7rfI.js";import"./field-note-fccBckVl.js";class S{constructor(e,t,a,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(i,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=i,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(i,n)),this.unsubscribe=n},this.host=e,t.context!==void 0){const i=t;this.context=i.context,this.callback=i.callback,this.subscribe=i.subscribe??!1}else this.context=t,this.callback=a,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new B(this.context,this.host,this.t,this.subscribe))}}function j({context:d,subscribe:e}){return(t,a)=>{typeof a=="object"?a.addInitializer((function(){new S(this,{context:d,callback:r=>{t.set.call(this,r)},subscribe:e})})):t.constructor.addInitializer((r=>{new S(r,{context:d,callback:i=>{r[a]=i},subscribe:e})}))}}const L=x`.cre8-u-content-knockout-brand {
+import{a as x,b as s,A as f}from"./iframe-nwd_1gnU.js";import{s as X}from"./spread-D16Rn3WA.js";import{w as E}from"./decorator-iVSD-Llo.js";import{o as u}from"./if-defined-RYzTvKuT.js";import{C as I,n as p}from"./cre8-element-CaOpCq8p.js";import{r as c}from"./state-DZNbmwHN.js";import{e as A}from"./query-BpjciUlk.js";import"./icon-BvsTH4V8.js";import"./button-rmsX1TVb.js";import{s as B,f as P}from"./cre8-form-element-Dowz62UX.js";import{C as q}from"./field-BpyhbS2M.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./loading-spinner-B7JDCfNK.js";import"./index.browser-BY9c7rfI.js";import"./field-note-B7iNgXW2.js";import"./field.styles-DwF2OuJ8.js";class S{constructor(e,t,a,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(i,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=i,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(i,n)),this.unsubscribe=n},this.host=e,t.context!==void 0){const i=t;this.context=i.context,this.callback=i.callback,this.subscribe=i.subscribe??!1}else this.context=t,this.callback=a,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new B(this.context,this.host,this.t,this.subscribe))}}function j({context:d,subscribe:e}){return(t,a)=>{typeof a=="object"?a.addInitializer((function(){new S(this,{context:d,callback:r=>{t.set.call(this,r)},subscribe:e})})):t.constructor.addInitializer((r=>{new S(r,{context:d,callback:i=>{r[a]=i},subscribe:e})}))}}const L=x`.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 */
 }
 
 /**
@@ -593,6 +601,10 @@ span.ripple {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -765,6 +777,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1326,6 +1342,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1498,6 +1518,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2011,6 +2035,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2183,6 +2211,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2624,6 +2656,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2796,6 +2832,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -3268,6 +3308,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -3440,6 +3484,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -3677,7 +3725,7 @@ span.ripple {
             >`:f}
         ${this.renderSuccessErrorFieldNote()}
       </div>
-    `}};O.styles=[L];let h=O;T([j({context:P})],h.prototype,"_internals");T([c()],h.prototype,"showCalendar");T([p({type:Boolean,reflect:!0})],h.prototype,"hasShortcuts");T([p()],h.prototype,"label");customElements.get("cre8-date-picker")===void 0&&customElements.define("cre8-date-picker",h);const ze={title:"cre8 Components/Date Picker",component:"cre8-date-picker",render:d=>s`<cre8-date-picker ${X(d)}></cre8-date-picker>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]},docs:{story:{height:"600px"}}},decorators:[E],argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"}}},w={},v={args:{hasShortcuts:"true"}},z={args:{label:"Readonly example",readonly:"true",value:"2024-01-01"}},k={args:{label:"Disabled example",disabled:"true"}},_={args:{label:"Fieldnote example",fieldNote:"This is a field note."}},D={args:{label:"Error Fieldnote example",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},$={args:{label:"Success Fieldnote example",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:"{}",...w.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+    `}};O.styles=[L];let h=O;T([j({context:P})],h.prototype,"_internals");T([c()],h.prototype,"showCalendar");T([p({type:Boolean,reflect:!0})],h.prototype,"hasShortcuts");T([p()],h.prototype,"label");customElements.get("cre8-date-picker")===void 0&&customElements.define("cre8-date-picker",h);const ke={title:"cre8 Components/Date Picker",component:"cre8-date-picker",render:d=>s`<cre8-date-picker ${X(d)}></cre8-date-picker>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]},docs:{story:{height:"600px"}}},decorators:[E],argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"}}},w={},v={args:{hasShortcuts:"true"}},z={args:{label:"Readonly example",readonly:"true",value:"2024-01-01"}},k={args:{label:"Disabled example",disabled:"true"}},_={args:{label:"Fieldnote example",fieldNote:"This is a field note."}},D={args:{label:"Error Fieldnote example",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},$={args:{label:"Success Fieldnote example",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:"{}",...w.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   args: {
     hasShortcuts: "true"
   }
@@ -3711,4 +3759,4 @@ span.ripple {
     fieldNote: "This is a field note.",
     successNote: "Short, clear success message"
   }
-}`,...$.parameters?.docs?.source}}};const ke=["Default","DefaultWithShortcuts","Readonly","Disabled","Fieldnote","Error","Success"];export{w as Default,v as DefaultWithShortcuts,k as Disabled,D as Error,_ as Fieldnote,z as Readonly,$ as Success,ke as __namedExportsOrder,ze as default};
+}`,...$.parameters?.docs?.source}}};const _e=["Default","DefaultWithShortcuts","Readonly","Disabled","Fieldnote","Error","Success"];export{w as Default,v as DefaultWithShortcuts,k as Disabled,D as Error,_ as Fieldnote,z as Readonly,$ as Success,_e as __namedExportsOrder,ke as default};

package/dist/assets/{divider-xZ2KARHf.js → divider-CDrocq4F.js}

@@ -1,4 +1,4 @@
-import{a as p,b as l}from"./iframe-BNJP6ovU.js";import{C as g,n as m}from"./cre8-element-B35i4Lyg.js";const c=p`.cre8-u-content-knockout-brand {
+import{a as l,b as p}from"./iframe-nwd_1gnU.js";import{C as g,n as m}from"./cre8-element-CaOpCq8p.js";const c=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 */
 }
 
 /**
@@ -617,4 +625,4 @@ span.ripple {
 
 .cre8-c-divider--knockout {
   background-color: var(--cre8-color-border-knockout);
-}`;var u=Object.defineProperty,s=(n,e,o,h)=>{for(var t=void 0,r=n.length-1,d;r>=0;r--)(d=n[r])&&(t=d(e,o,t)||t);return t&&u(e,o,t),t};const a=class a extends g{constructor(){super(...arguments),this.variant="horizontal"}render(){const e=this.componentClassNames("cre8-c-divider",{"cre8-c-divider--horizontal":this.variant==="horizontal","cre8-c-divider--vertical":this.variant==="vertical","cre8-c-divider--brand":this.status==="brand","cre8-c-divider--knockout":this.status==="knockout"});return l` <div class="${e}"><wbr></div> `}};a.styles=[c];let i=a;s([m()],i.prototype,"variant");s([m()],i.prototype,"status");customElements.get("cre8-divider")===void 0&&customElements.define("cre8-divider",i);
+}`;var h=Object.defineProperty,s=(n,e,o,u)=>{for(var t=void 0,r=n.length-1,d;r>=0;r--)(d=n[r])&&(t=d(e,o,t)||t);return t&&h(e,o,t),t};const a=class a extends g{constructor(){super(...arguments),this.variant="horizontal"}render(){const e=this.componentClassNames("cre8-c-divider",{"cre8-c-divider--horizontal":this.variant==="horizontal","cre8-c-divider--vertical":this.variant==="vertical","cre8-c-divider--brand":this.status==="brand","cre8-c-divider--knockout":this.status==="knockout"});return p` <div class="${e}"><wbr></div> `}};a.styles=[c];let i=a;s([m()],i.prototype,"variant");s([m()],i.prototype,"status");customElements.get("cre8-divider")===void 0&&customElements.define("cre8-divider",i);

package/dist/assets/{divider.stories-Bk9oF-OV.js → divider.stories-BSNOQGoZ.js}

@@ -1,4 +1,4 @@
-import{b as r}from"./iframe-BNJP6ovU.js";import{s as a}from"./spread-CnPic3C2.js";import"./divider-xZ2KARHf.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";const b={title:"cre8 Components/Divider",component:"cre8-divider",parameters:{status:{type:"inProgress"}},argTypes:{status:{options:["default","brand","knockout"],control:{type:"select"}},variant:{options:["horizontal","vertical"],control:{type:"select"}}},args:{variant:"horizontal",status:"default"},render:e=>r`<cre8-divider variant=${e.variant} status=${e.status}></cre8-divider>`},i={args:{variant:"horizontal"}},t={args:{variant:"horizontal"},render:e=>r`<p>Lorem ipsum dolor sit amet</p><cre8-divider ${a(e)}></cre8-divider><p>Agam utroque scribentur eos id</p>`},o={args:{variant:"horizontal",status:"brand"},render:e=>r`<p>Lorem ipsum dolor sit amet</p><cre8-divider ${a(e)}></cre8-divider><p>Agam utroque scribentur eos id</p>`},s={args:{variant:"horizontal",status:"knockout"},render:e=>r`
+import{b as r}from"./iframe-nwd_1gnU.js";import{s as a}from"./spread-D16Rn3WA.js";import"./divider-CDrocq4F.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";const b={title:"cre8 Components/Divider",component:"cre8-divider",parameters:{status:{type:"inProgress"}},argTypes:{status:{options:["default","brand","knockout"],control:{type:"select"}},variant:{options:["horizontal","vertical"],control:{type:"select"}}},args:{variant:"horizontal",status:"default"},render:e=>r`<cre8-divider variant=${e.variant} status=${e.status}></cre8-divider>`},i={args:{variant:"horizontal"}},t={args:{variant:"horizontal"},render:e=>r`<p>Lorem ipsum dolor sit amet</p><cre8-divider ${a(e)}></cre8-divider><p>Agam utroque scribentur eos id</p>`},o={args:{variant:"horizontal",status:"brand"},render:e=>r`<p>Lorem ipsum dolor sit amet</p><cre8-divider ${a(e)}></cre8-divider><p>Agam utroque scribentur eos id</p>`},s={args:{variant:"horizontal",status:"knockout"},render:e=>r`
   <div style="padding: 20px; background: var(--cre8-color-bg-brand-strong); color: var(--cre8-color-content-knockout);">
     <p>Lorem ipsum dolor sit amet</p><cre8-divider ${a(e)}></cre8-divider><p>Agam utroque scribentur eos id</p>
   </div>`},n={args:{variant:"horizontal"},render:e=>r`

package/dist/assets/{dropdown-BEP5x3CW.js → dropdown-B03mbsrW.js}

@@ -1,4 +1,4 @@
-import{a as h,b as n,A as g}from"./iframe-BNJP6ovU.js";import{C as f,n as m}from"./cre8-element-B35i4Lyg.js";import{r as x}from"./state-DkQhleoO.js";import{e as y}from"./query-BpjciUlk.js";const w=h`.cre8-u-content-knockout-brand {
+import{a as u,b as n,A as g}from"./iframe-nwd_1gnU.js";import{C as f,n as p}from"./cre8-element-CaOpCq8p.js";import{r as x}from"./state-DZNbmwHN.js";import{e as y}from"./query-BpjciUlk.js";import{s as w}from"./light-children-DDjBxt3J.js";const v=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 */
 }
 
 /**
@@ -608,9 +616,9 @@ span.ripple {
   background-color: var(--cre8-color-bg-brand-hover);
   color: var(--cre8-color-content-default);
   outline: var(--cre8-border-width-none);
-}`;var v=Object.defineProperty,z=(o,t,r,b)=>{for(var e=void 0,a=o.length-1,d;a>=0;a--)(d=o[a])&&(e=d(t,r,e)||e);return e&&v(t,r,e),e};const l=class l extends f{constructor(){super(...arguments),this.ariaLabel=""}_handleClick(t){this.dispatch({e:t,eventName:"dropdown-item-selected"})}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","listitem")}render(){const t=this.componentClassNames("cre8-dropdown-item",{}),r=this.ariaLabel||`Link to ${this.textContent}`||"Drop down Item";return n`<li class="${t}" role="none">
-        <button aria-label="${r}" @click=${this._handleClick}><slot></slot></button>
-      </li>`}};l.styles=[w];let p=l;z([m({type:String})],p.prototype,"ariaLabel");customElements.get("cre8-dropdown-item")===void 0&&customElements.define("cre8-dropdown-item",p);const k=h`.cre8-u-content-knockout-brand {
+}`;var z=Object.defineProperty,k=(d,t,i,b)=>{for(var e=void 0,a=d.length-1,s;a>=0;a--)(s=d[a])&&(e=s(t,i,e)||e);return e&&z(t,i,e),e};const l=class l extends f{constructor(){super(...arguments),this.ariaLabel=""}_handleClick(t){this.dispatch({e:t,eventName:"dropdown-item-select"})}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","listitem")}render(){const t=this.componentClassNames("cre8-dropdown-item",{}),i=this.ariaLabel||`Link to ${this.textContent}`||"Drop down Item";return n`<li class="${t}" role="none">
+        <button aria-label="${i}" @click=${this._handleClick}><slot></slot></button>
+      </li>`}};l.styles=[v];let m=l;k([p({type:String})],m.prototype,"ariaLabel");customElements.get("cre8-dropdown-item")===void 0&&customElements.define("cre8-dropdown-item",m);const C=u`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -984,6 +992,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1156,6 +1168,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1265,18 +1281,18 @@ ul {
   list-style-type: none;
   padding: var(--cre8-spacing-0);
   margin: 0;
-}`;var C=Object.defineProperty,s=(o,t,r,b)=>{for(var e=void 0,a=o.length-1,d;a>=0;a--)(d=o[a])&&(e=d(t,r,e)||e);return e&&C(t,r,e),e};const u=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+}`;var I=Object.defineProperty,o=(d,t,i,b)=>{for(var e=void 0,a=d.length-1,s;a>=0;a--)(s=d[a])&&(e=s(t,i,e)||e);return e&&I(t,i,e),e};const h=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.7867 4.87812L8.51454 12.1503C8.447 12.2179 8.36679 12.2716 8.27851 12.3082C8.19023 12.3448 8.0956 12.3636 8.00003 12.3636C7.90446 12.3636 7.80983 12.3448 7.72155 12.3082C7.63327 12.2716 7.55306 12.2179 7.48552 12.1503L0.213345 4.87812C0.111526 4.77642 0.0421733 4.64679 0.014066 4.50565C-0.0140413 4.36451 0.000361008 4.2182 0.0554496 4.08525C0.110538 3.95229 0.203836 3.83868 0.323531 3.75878C0.443227 3.67888 0.583938 3.63629 0.727852 3.6364L15.2722 3.6364C15.4161 3.63629 15.5568 3.67888 15.6765 3.75878C15.7962 3.83868 15.8895 3.95229 15.9446 4.08525C15.9997 4.2182 16.0141 4.36451 15.986 4.50565C15.9579 4.64679 15.8885 4.77642 15.7867 4.87812Z"/>
 </svg>
-`,c=class c extends f{constructor(){super(),this.open=!1,this.buttonText="",this.dropdownWithLink=!1,this._closeDropdown.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._closeDropdown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._closeDropdown)}_toggleDropdown(t){t.preventDefault(),t.stopPropagation(),this.open=!this.open,this.open&&this._updateDropdownPosition()}_updateDropdownPosition(){this.dropdownContent&&this.open&&(this.maxHeight&&(this.dropdownContent.style.maxHeight=this.maxHeight,this.dropdownContent.style.overflowY="auto"),this.dropdownWithLink&&(this.dropdownContent.style.top="85%"))}_closeDropdown(){this.open=!1}render(){const t=this.componentClassNames("cre8-c-dropdown",{"cre8-c-dropdown--close":!this.open,"cre8-c-dropdown--open":this.open});return n`
+`,c=class c extends f{constructor(){super(),this.open=!1,this.buttonText="",this.dropdownWithLink=!1,this._closeDropdown.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._closeDropdown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._closeDropdown)}_toggleDropdown(t){t.preventDefault(),t.stopPropagation(),this.open=!this.open,this.open&&this._updateDropdownPosition()}_updateDropdownPosition(){this.dropdownContent&&this.open&&(this.maxHeight&&(this.dropdownContent.style.maxHeight=this.maxHeight,this.dropdownContent.style.overflowY="auto"),this.dropdownWithLink&&(this.dropdownContent.style.top="85%"))}_closeDropdown(){this.open=!1}buildComposition(){return this.items?this.items.map(t=>({tag:"cre8-dropdown-item",props:t.ariaLabel?{ariaLabel:t.ariaLabel}:void 0,text:t.text})):null}updated(t){["items"].some(i=>t.has(i))&&w(this,this.buildComposition())}render(){const t=this.componentClassNames("cre8-c-dropdown",{"cre8-c-dropdown--close":!this.open,"cre8-c-dropdown--open":this.open});return n`
       <div class="cre8-c-dropdown-container">
       ${this.dropdownWithLink?n`<a href="#" aria-haspopup="true" class="cre8-c-dropdown--toggle cre8-c-dropdown--link" aria-expanded="${this.open?"true":"false"}" @click="${this._toggleDropdown}">${this.buttonText}
-        ${this.buttonText?n`<cre8-icon svg='${u}' aria-hidden="true" class="cre8-c-dropdown--icon-link"></cre8-icon>`:g}
+        ${this.buttonText?n`<cre8-icon svg='${h}' aria-hidden="true" class="cre8-c-dropdown--icon-link"></cre8-icon>`:g}
       </a>`:n`<button aria-haspopup="true" class="cre8-c-dropdown--toggle cre8-c-dropdown--button" aria-expanded="${this.open?"true":"false"}" @click="${this._toggleDropdown}">${this.buttonText}
-      ${this.buttonText?n`<cre8-icon svg='${u}' aria-hidden="true" class="cre8-c-dropdown--icon-button"></cre8-icon>`:g}
+      ${this.buttonText?n`<cre8-icon svg='${h}' aria-hidden="true" class="cre8-c-dropdown--icon-button"></cre8-icon>`:g}
         </button>`}
         <ul role="list" class="${t}">
           <slot></slot>
         </ul>
       </div>
-    `}};c.styles=[k];let i=c;s([x()],i.prototype,"open");s([m({type:String})],i.prototype,"buttonText");s([m()],i.prototype,"maxHeight");s([y(".cre8-c-dropdown")],i.prototype,"dropdownContent");s([m()],i.prototype,"dropdownWithLink");customElements.get("cre8-dropdown")===void 0&&customElements.define("cre8-dropdown",i);
+    `}};c.styles=[C];let r=c;o([x()],r.prototype,"open");o([p({type:String})],r.prototype,"buttonText");o([p()],r.prototype,"maxHeight");o([y(".cre8-c-dropdown")],r.prototype,"dropdownContent");o([p()],r.prototype,"dropdownWithLink");o([p({type:Array})],r.prototype,"items");customElements.get("cre8-dropdown")===void 0&&customElements.define("cre8-dropdown",r);

package/dist/assets/dropdown-item.stories-B6_J9kd6.js

@@ -0,0 +1,26 @@
+import{b as o}from"./iframe-nwd_1gnU.js";import"./dropdown-B03mbsrW.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./state-DZNbmwHN.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./light-children-DDjBxt3J.js";const x={title:"In Development/Dropdown Item",component:"cre8-dropdown-item",parameters:{status:{type:"inProgress"},actions:{handles:["dropdown-item-select"]},docs:{story:{height:"300px"}}}},p=({buttonText:e,dropdownContent:r,maxHeight:n,dropdownWithLink:d})=>o`
+  <cre8-dropdown
+    buttonText=${e}
+    maxHeight=${n}
+    dropdownWithLink=${d}
+  >
+    ${r}
+  </cre8-dropdown>
+`,t=p.bind({});t.args={buttonText:"Select",dropdownContent:o`
+  <cre8-dropdown-item>Item 1</cre8-dropdown-item>
+  <cre8-dropdown-item>Item 2 Item with longer text than default</cre8-dropdown-item>
+  <cre8-dropdown-item>Item 3</cre8-dropdown-item>
+  `};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`({
+  buttonText,
+  dropdownContent,
+  maxHeight,
+  dropdownWithLink
+}) => html\`
+  <cre8-dropdown
+    buttonText=\${buttonText}
+    maxHeight=\${maxHeight}
+    dropdownWithLink=\${dropdownWithLink}
+  >
+    \${dropdownContent}
+  </cre8-dropdown>
+\``,...t.parameters?.docs?.source}}};const g=["Default"];export{t as Default,g as __namedExportsOrder,x as default};

package/dist/assets/{dropdown.stories-B0OlKD7h.js → dropdown.stories-CgzAbark.js}

@@ -1,4 +1,4 @@
-import{b as o}from"./iframe-BNJP6ovU.js";import"./dropdown-BEP5x3CW.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./state-DkQhleoO.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";const k={title:"In Development/Dropdown",component:"cre8-dropdown",parameters:{status:{type:"inProgress"},actions:{handles:["dropdown-item-selected"]},docs:{story:{height:"300px"}}}},i=({buttonText:p,dropdownContent:m,maxHeight:c,dropdownWithLink:w})=>o`
+import{b as o}from"./iframe-nwd_1gnU.js";import"./dropdown-B03mbsrW.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./state-DZNbmwHN.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./light-children-DDjBxt3J.js";const L={title:"In Development/Dropdown",component:"cre8-dropdown",parameters:{status:{type:"inProgress"},actions:{handles:["dropdown-item-select"]},docs:{story:{height:"300px"}}}},i=({buttonText:p,dropdownContent:m,maxHeight:c,dropdownWithLink:w})=>o`
   <cre8-dropdown
     buttonText=${p}
     maxHeight=${c}
@@ -94,4 +94,4 @@ import{b as o}from"./iframe-BNJP6ovU.js";import"./dropdown-BEP5x3CW.js";import".
   >
     \${dropdownContent}
   </cre8-dropdown>
-\``,...d.parameters?.docs?.source}}};const L=["Default","ButtonDropdown","LinkDropdown","ButtonDropdownWithScrollBar","LinkDropdownWithScrollBar"];export{n as ButtonDropdown,r as ButtonDropdownWithScrollBar,t as Default,e as LinkDropdown,d as LinkDropdownWithScrollBar,L as __namedExportsOrder,k as default};
+\``,...d.parameters?.docs?.source}}};const $=["Default","ButtonDropdown","LinkDropdown","ButtonDropdownWithScrollBar","LinkDropdownWithScrollBar"];export{n as ButtonDropdown,r as ButtonDropdownWithScrollBar,t as Default,e as LinkDropdown,d as LinkDropdownWithScrollBar,$ as __namedExportsOrder,L as default};

package/dist/assets/{f-po-BdPzDRD-.js → f-po-ByatXsWC.js}

@@ -1,4 +1,4 @@
-import{a as f,j as a,r as c,b as m}from"./iframe-BNJP6ovU.js";import{o as y}from"./if-defined-Bxnzk64Q.js";import{n as p}from"./cre8-element-B35i4Lyg.js";const b=o=>(e,r)=>{r!==void 0?r.addInitializer(()=>{customElements.define(o,e)}):customElements.define(o,e)},u=f`
+import{a as f,j as a,r as c,b as m}from"./iframe-nwd_1gnU.js";import{o as y}from"./if-defined-RYzTvKuT.js";import{n as p}from"./cre8-element-CaOpCq8p.js";const b=o=>(e,r)=>{r!==void 0?r.addInitializer(()=>{customElements.define(o,e)}):customElements.define(o,e)},u=f`
 
 @import 'design-tokens/core/scss/theming/component';
 

package/dist/assets/{feature.stories-DYE1Js70.js → feature.stories-BiEVKnSG.js}

@@ -1,4 +1,4 @@
-import{a as g,b as o}from"./iframe-BNJP6ovU.js";import{s as u}from"./spread-CnPic3C2.js";import"./heading-Dbka33DK.js";import"./text-passage-xQVosjOr.js";import{C as h,n as d}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 o}from"./iframe-nwd_1gnU.js";import{s as u}from"./spread-D16Rn3WA.js";import"./heading-ByebtBvm.js";import"./text-passage-C6jDH-er.js";import{C as h,n as d}from"./cre8-element-CaOpCq8p.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 */
 }
 
 /**

package/dist/assets/field-BpyhbS2M.js

@@ -0,0 +1,44 @@
+import{b as l,A as f}from"./iframe-nwd_1gnU.js";import{o as r}from"./if-defined-RYzTvKuT.js";import{n as i}from"./cre8-element-CaOpCq8p.js";import{e as y}from"./query-BpjciUlk.js";import{n as c}from"./index.browser-BY9c7rfI.js";import{C as u}from"./cre8-form-element-Dowz62UX.js";import"./field-note-B7iNgXW2.js";import{s as m}from"./field.styles-DwF2OuJ8.js";var b=Object.defineProperty,t=(n,s,a,$)=>{for(var o=void 0,d=n.length-1,h;d>=0;d--)(h=n[d])&&(o=h(s,a,o)||o);return o&&b(s,a,o),o};const p=class p extends u{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||c(),(this.fieldNote||this.slotNotEmpty("fieldNote"))&&(this.ariaDescribedBy=this.ariaDescribedBy||`Field_${c()}`),(this.successNote||this.errorNote)&&(this.validationAriaDescribedBy=this.validationAriaDescribedBy||`Field_validation_${c()}`)}fieldNoteAria(){return this.validationAriaDescribedBy&&this.ariaDescribedBy?`${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`:this.validationAriaDescribedBy&&!this.ariaDescribedBy?this.validationAriaDescribedBy:this.ariaDescribedBy}_handleOnInput(s){const a=s.target.value;this.value=a,this._internals.setFormValue(this.value)}renderSuccessErrorFieldNote(){return this.successNote?l` <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?l` <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 s=this.componentClassNames("cre8-c-field",{"cre8-is-error":this.isError,"cre8-is-success":this.isSuccess});return l`
+      <div class="${s}">
+        <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=${r(this.autocomplete)}
+            type="${this.type}"
+            id="${this.fieldId}"
+            name="${r(this.name)}"
+            max=${this.type==="date"&&r(this.max).toString()}
+            min=${this.type==="date"&&r(this.max).toString()}
+            maxlength=${r(this.maxlength)}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            aria-invalid=${this.isError?"true":"false"}
+            ?disabled="${this.disabled}"
+            pattern=${r(this.pattern)}
+            aria-describedby="${r(this.fieldNoteAria())}"
+            placeholder="${r(this.placeholder)}"
+            .value="${this.value}"
+            @input=${this._handleOnInput}
+          />
+        </div>
+        ${this.fieldNote||this.slotNotEmpty("fieldNote")?l`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
+              ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
+            >`:f}
+        ${this.renderSuccessErrorFieldNote()}
+      </div>
+    `}};p.styles=[m];let e=p;t([i()],e.prototype,"autocomplete");t([i()],e.prototype,"pattern");t([i()],e.prototype,"type");t([i()],e.prototype,"placeholder");t([i()],e.prototype,"label");t([i()],e.prototype,"fieldId");t([i()],e.prototype,"fieldNote");t([i()],e.prototype,"ariaLive");t([i()],e.prototype,"ariaDescribedBy");t([i({type:Boolean,reflect:!0})],e.prototype,"required");t([i({type:Boolean,reflect:!0})],e.prototype,"disabled");t([i({type:Boolean,reflect:!0})],e.prototype,"isError");t([i()],e.prototype,"errorText");t([i()],e.prototype,"errorNote");t([i()],e.prototype,"max");t([i()],e.prototype,"min");t([i({type:Number})],e.prototype,"maxlength");t([i()],e.prototype,"validationAriaDescribedBy");t([i({type:Boolean,reflect:!0})],e.prototype,"isSuccess");t([i()],e.prototype,"successText");t([i({type:Boolean,reflect:!0})],e.prototype,"readonly");t([i()],e.prototype,"successNote");t([y("input")],e.prototype,"field");customElements.get("cre8-field")===void 0&&customElements.define("cre8-field",e);export{e as C};