@tmorrow/cre8-wc 2.0.5 → 2.0.7

package/dist/assets/{modal-Oja4WhiR.js → modal-CO0M4e_8.js}

@@ -1,9 +1,9 @@
-import{i as x,b as s}from"./iframe-CdWmiVXf.js";import{C as w,n as l}from"./cre8-element-gkCuLp-W.js";import{e as _}from"./query-BpjciUlk.js";import{a as z,d as k,g as E,e as A}from"./icon-DYiIK7a4.js";import{a as F,s as I}from"./Warning-CawqmTvB.js";function u(e,t,i,d=20,o=0){let a=[];if(o>=d)return a;const m=n=>{const g=n.assignedNodes().filter(y=>y.nodeType===1);return g.length>0?u(g[0].parentElement,t,i,d,o+1):[]},v=Array.from(e.children||[]);for(const n of v)t(n)||(i(n)&&a.push(n),n.shadowRoot!=null?a.push(...u(n.shadowRoot,t,i,d,o+1)):n.tagName==="SLOT"?a.push(...m(n)):a.push(...u(n,t,i,d,o+1)));return a}function f(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display==="none"||e.style.opacity==="0"||e.style.visibility==="hidden"||e.style.visibility==="collapse"}function T(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function L(e){return e.getAttribute("tabindex")==="-1"||f(e)||T(e)?!1:e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}const p=new Map;function M(e,t,i){const d=p.get(i);d!=null&&window.clearTimeout(d),p.set(i,window.setTimeout(()=>{e(),p.delete(i)},t))}const b=document.createElement("template");b.innerHTML=`
+import{a as w,b as s}from"./iframe-dHvya7sk.js";import{C as x,n as l}from"./cre8-element-DfmMtHJO.js";import{e as y}from"./query-BpjciUlk.js";import"./icon-DeTLDzTS.js";function h(t,e,i,d=20,o=0){let a=[];if(o>=d)return a;const m=n=>{const g=n.assignedNodes().filter(v=>v.nodeType===1);return g.length>0?h(g[0].parentElement,e,i,d,o+1):[]},b=Array.from(t.children||[]);for(const n of b)e(n)||(i(n)&&a.push(n),n.shadowRoot!=null?a.push(...h(n.shadowRoot,e,i,d,o+1)):n.tagName==="SLOT"?a.push(...m(n)):a.push(...h(n,e,i,d,o+1)));return a}function f(t){return t.hasAttribute("hidden")||t.hasAttribute("aria-hidden")&&t.getAttribute("aria-hidden")!=="false"||t.style.display==="none"||t.style.opacity==="0"||t.style.visibility==="hidden"||t.style.visibility==="collapse"}function _(t){return t.hasAttribute("disabled")||t.hasAttribute("aria-disabled")&&t.getAttribute("aria-disabled")!=="false"}function z(t){return t.getAttribute("tabindex")==="-1"||f(t)||_(t)?!1:t.hasAttribute("tabindex")||(t instanceof HTMLAnchorElement||t instanceof HTMLAreaElement)&&t.hasAttribute("href")||t instanceof HTMLButtonElement||t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||t instanceof HTMLIFrameElement}const p=new Map;function k(t,e,i){const d=p.get(i);d!=null&&window.clearTimeout(d),p.set(i,window.setTimeout(()=>{t(),p.delete(i)},e))}const C=document.createElement("template");C.innerHTML=`
 	<div id="start"></div>
 	<div id="backup"></div>
 	<slot></slot>
 	<div id="end"></div>
-`;class C extends HTMLElement{constructor(){super(),this.debounceId=Math.random().toString(),this._focused=!1;const t=this.attachShadow({mode:"open"});t.appendChild(b.content.cloneNode(!0)),this.$backup=t.querySelector("#backup"),this.$start=t.querySelector("#start"),this.$end=t.querySelector("#end"),this.focusLastElement=this.focusLastElement.bind(this),this.focusFirstElement=this.focusFirstElement.bind(this),this.onFocusIn=this.onFocusIn.bind(this),this.onFocusOut=this.onFocusOut.bind(this)}static get observedAttributes(){return["inactive"]}get inactive(){return this.hasAttribute("inactive")}set inactive(t){t?this.setAttribute("inactive",""):this.removeAttribute("inactive")}get focused(){return this._focused}connectedCallback(){this.$start.addEventListener("focus",this.focusLastElement),this.$end.addEventListener("focus",this.focusFirstElement),this.addEventListener("focusin",this.onFocusIn),this.addEventListener("focusout",this.onFocusOut),this.render()}disconnectedCallback(){this.$start.removeEventListener("focus",this.focusLastElement),this.$end.removeEventListener("focus",this.focusFirstElement),this.removeEventListener("focusin",this.onFocusIn),this.removeEventListener("focusout",this.onFocusOut)}attributeChangedCallback(){this.render()}focusFirstElement(){this.trapFocus()}focusLastElement(){this.trapFocus(!0)}getFocusableElements(){return u(this,f,L)}trapFocus(t){if(this.inactive)return;let i=this.getFocusableElements();i.length>0?(t?i[i.length-1].focus():i[0].focus(),this.$backup.setAttribute("tabindex","-1")):(this.$backup.setAttribute("tabindex","0"),this.$backup.focus())}onFocusIn(){this.updateFocused(!0)}onFocusOut(){this.updateFocused(!1)}updateFocused(t){M(()=>{this.focused!==t&&(this._focused=t,this.render())},0,this.debounceId)}render(){this.$start.setAttribute("tabindex",!this.focused||this.inactive?"-1":"0"),this.$end.setAttribute("tabindex",!this.focused||this.inactive?"-1":"0"),this.focused?this.setAttribute("focused",""):this.removeAttribute("focused")}}window.customElements.define("focus-trap",C);const O=x`.cre8-u-content-knockout-brand {
+`;class M extends HTMLElement{constructor(){super(),this.debounceId=Math.random().toString(),this._focused=!1;const e=this.attachShadow({mode:"open"});e.appendChild(C.content.cloneNode(!0)),this.$backup=e.querySelector("#backup"),this.$start=e.querySelector("#start"),this.$end=e.querySelector("#end"),this.focusLastElement=this.focusLastElement.bind(this),this.focusFirstElement=this.focusFirstElement.bind(this),this.onFocusIn=this.onFocusIn.bind(this),this.onFocusOut=this.onFocusOut.bind(this)}static get observedAttributes(){return["inactive"]}get inactive(){return this.hasAttribute("inactive")}set inactive(e){e?this.setAttribute("inactive",""):this.removeAttribute("inactive")}get focused(){return this._focused}connectedCallback(){this.$start.addEventListener("focus",this.focusLastElement),this.$end.addEventListener("focus",this.focusFirstElement),this.addEventListener("focusin",this.onFocusIn),this.addEventListener("focusout",this.onFocusOut),this.render()}disconnectedCallback(){this.$start.removeEventListener("focus",this.focusLastElement),this.$end.removeEventListener("focus",this.focusFirstElement),this.removeEventListener("focusin",this.onFocusIn),this.removeEventListener("focusout",this.onFocusOut)}attributeChangedCallback(){this.render()}focusFirstElement(){this.trapFocus()}focusLastElement(){this.trapFocus(!0)}getFocusableElements(){return h(this,f,z)}trapFocus(e){if(this.inactive)return;let i=this.getFocusableElements();i.length>0?(e?i[i.length-1].focus():i[0].focus(),this.$backup.setAttribute("tabindex","-1")):(this.$backup.setAttribute("tabindex","0"),this.$backup.focus())}onFocusIn(){this.updateFocused(!0)}onFocusOut(){this.updateFocused(!1)}updateFocused(e){k(()=>{this.focused!==e&&(this._focused=e,this.render())},0,this.debounceId)}render(){this.$start.setAttribute("tabindex",!this.focused||this.inactive?"-1":"0"),this.$end.setAttribute("tabindex",!this.focused||this.inactive?"-1":"0"),this.focused?this.setAttribute("focused",""):this.removeAttribute("focused")}}window.customElements.define("focus-trap",M);const L=w`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -377,6 +377,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -549,6 +553,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -742,8 +750,26 @@ span.ripple {
  */
 .cre8-c-modal__close-button {
   margin-left: auto;
-}`;var H=Object.defineProperty,c=(e,t,i,d)=>{for(var o=void 0,a=e.length-1,m;a>=0;a--)(m=e[a])&&(o=m(t,i,o)||o);return o&&H(t,i,o),o};const h=class h extends w{constructor(){super(...arguments),this.closeButtonText="close",this.closeButtonIcon="close",this.mapStatusToIconModal=t=>{switch(t){case"error":return s`<cre8-icon class="cre8-modal-icon" svg=${E} aria-hidden='true'></cre8-icon>`;case"success":return s`<cre8-icon class="cre8-modal-icon" svg=${I} aria-hidden='true'></cre8-icon>`;case"warning":return s`<cre8-icon class="cre8-modal-icon" svg=${F} aria-hidden='true'></cre8-icon>`;case"help":return s`<cre8-icon class="cre8-modal-icon" svg=${k} aria-hidden='true'></cre8-icon>`;case"info":return s`<cre8-icon class="cre8-modal-icon" svg=${z} aria-hidden='true'></cre8-icon>`;default:return null}}}handleKeydown(t){t.code==="Escape"&&!this.notDismissible&&this.handleCloseModal()}handleCloseModal(){this.isActive=!1,this.dispatch({eventName:"close-modal",detailObj:{isActive:this.isActive}})}handleOnClickOutside(t){const i=t.target;this.isActive&&this._modalWindow&&i.classList.contains("cre8-c-modal")&&!this.notDismissible&&this.handleCloseModal()}updated(t){if(this.isActive===!0&&setTimeout(()=>{this._modalWindow.focus()},200),t.has("isActive")){const i=document.querySelector("body");this.isActive?i.style.overflow="hidden":i.style.removeProperty("overflow")}}disconnectedCallback(){this.isActive=!1,document.querySelector("body").style.removeProperty("overflow")}render(){const t=this.componentClassNames("cre8-c-modal",{"cre8-is-active":this.isActive,"cre8-c-modal--error":this.status==="error","cre8-c-modal--warning":this.status==="warning","cre8-c-modal--success":this.status==="success","cre8-c-modal--info":this.status==="info","cre8-c-modal--help":this.status==="help"});return s`
-    <div class="${t}" @click="${this.handleOnClickOutside}" @keydown=${this.handleKeydown}>
+}`;var E=Object.defineProperty,c=(t,e,i,d)=>{for(var o=void 0,a=t.length-1,m;a>=0;a--)(m=t[a])&&(o=m(e,i,o)||o);return o&&E(e,i,o),o};const A=`<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 0ZM8 14.7692C6.66117 14.7692 5.35241 14.3722 4.23922 13.6284C3.12603 12.8846 2.2584 11.8274 1.74605 10.5905C1.2337 9.35356 1.09965 7.99249 1.36084 6.67939C1.62203 5.36629 2.26674 4.16012 3.21343 3.21343C4.16013 2.26674 5.36629 1.62203 6.67939 1.36084C7.99249 1.09965 9.35356 1.2337 10.5905 1.74605C11.8274 2.25839 12.8846 3.12602 13.6284 4.23922C14.3722 5.35241 14.7692 6.66117 14.7692 8C14.7672 9.79468 14.0534 11.5153 12.7843 12.7843C11.5153 14.0534 9.79469 14.7672 8 14.7692ZM7.38462 8.61538V4.30769C7.38462 4.14448 7.44945 3.98796 7.56486 3.87255C7.68027 3.75714 7.83679 3.69231 8 3.69231C8.16321 3.69231 8.31974 3.75714 8.43514 3.87255C8.55055 3.98796 8.61539 4.14448 8.61539 4.30769V8.61538C8.61539 8.77859 8.55055 8.93512 8.43514 9.05053C8.31974 9.16593 8.16321 9.23077 8 9.23077C7.83679 9.23077 7.68027 9.16593 7.56486 9.05053C7.44945 8.93512 7.38462 8.77859 7.38462 8.61538ZM8.92308 11.3846C8.92308 11.5672 8.86894 11.7456 8.76751 11.8974C8.66608 12.0492 8.52192 12.1676 8.35325 12.2374C8.18458 12.3073 7.99898 12.3256 7.81992 12.29C7.64086 12.2543 7.47638 12.1664 7.34729 12.0373C7.21819 11.9082 7.13028 11.7438 7.09466 11.5647C7.05904 11.3856 7.07732 11.2 7.14719 11.0314C7.21706 10.8627 7.33537 10.7185 7.48717 10.6171C7.63897 10.5157 7.81743 10.4615 8 10.4615C8.24482 10.4615 8.4796 10.5588 8.65271 10.7319C8.82583 10.905 8.92308 11.1398 8.92308 11.3846Z"/>
+</svg>
+`,F=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7714 12.5776L9.52528 1.73028C9.36919 1.46453 9.14637 1.24418 8.87889 1.09107C8.61141 0.937966 8.30856 0.857422 8.00036 0.857422C7.69216 0.857422 7.38931 0.937966 7.12182 1.09107C6.85434 1.24418 6.63152 1.46453 6.47543 1.73028L0.229326 12.5776C0.079145 12.8346 0 13.127 0 13.4247C0 13.7224 0.079145 14.0147 0.229326 14.2718C0.383411 14.5391 0.605857 14.7607 0.873837 14.9137C1.14182 15.0667 1.44568 15.1457 1.75425 15.1425H14.2465C14.5548 15.1454 14.8584 15.0663 15.1261 14.9133C15.3938 14.7603 15.616 14.5389 15.77 14.2718C15.9204 14.0149 15.9997 13.7226 16 13.4249C16.0002 13.1272 15.9214 12.8348 15.7714 12.5776ZM7.42896 6.57146C7.42896 6.41992 7.48916 6.27458 7.59632 6.16742C7.70347 6.06026 7.84881 6.00006 8.00036 6.00006C8.1519 6.00006 8.29724 6.06026 8.4044 6.16742C8.51155 6.27458 8.57176 6.41992 8.57176 6.57146V9.42846C8.57176 9.58 8.51155 9.72534 8.4044 9.8325C8.29724 9.93966 8.1519 9.99986 8.00036 9.99986C7.84881 9.99986 7.70347 9.93966 7.59632 9.8325C7.48916 9.72534 7.42896 9.58 7.42896 9.42846V6.57146ZM8.00036 12.8569C7.83084 12.8569 7.66513 12.8066 7.52418 12.7124C7.38323 12.6182 7.27337 12.4844 7.2085 12.3278C7.14363 12.1711 7.12665 11.9988 7.15973 11.8325C7.1928 11.6663 7.27443 11.5136 7.3943 11.3937C7.51416 11.2738 7.66688 11.1922 7.83314 11.1591C7.9994 11.1261 8.17174 11.143 8.32835 11.2079C8.48497 11.2728 8.61883 11.3826 8.71301 11.5236C8.80719 11.6645 8.85746 11.8302 8.85746 11.9998C8.85746 12.2271 8.76715 12.4451 8.60642 12.6058C8.44568 12.7666 8.22767 12.8569 8.00036 12.8569Z"/>
+</svg>
+`,I=`<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>
+`,T=`<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 0ZM7.69231 3.69231C7.87488 3.69231 8.05334 3.74644 8.20514 3.84787C8.35694 3.9493 8.47526 4.09347 8.54512 4.26214C8.61499 4.43081 8.63327 4.61641 8.59765 4.79547C8.56203 4.97453 8.47412 5.139 8.34502 5.2681C8.21593 5.39719 8.05145 5.48511 7.87239 5.52072C7.69333 5.55634 7.50773 5.53806 7.33906 5.46819C7.17039 5.39833 7.02623 5.28002 6.9248 5.12822C6.82337 4.97642 6.76923 4.79795 6.76923 4.61538C6.76923 4.37057 6.86649 4.13578 7.0396 3.96267C7.21271 3.78956 7.44749 3.69231 7.69231 3.69231ZM8.61539 12.3077C8.28897 12.3077 7.97591 12.178 7.7451 11.9472C7.51429 11.7164 7.38462 11.4033 7.38462 11.0769V8C7.22141 8 7.06488 7.93516 6.94947 7.81976C6.83407 7.70435 6.76923 7.54782 6.76923 7.38461C6.76923 7.2214 6.83407 7.06488 6.94947 6.94947C7.06488 6.83406 7.22141 6.76923 7.38462 6.76923C7.71104 6.76923 8.02409 6.8989 8.2549 7.12971C8.48572 7.36053 8.61539 7.67358 8.61539 8V11.0769C8.7786 11.0769 8.93512 11.1418 9.05053 11.2572C9.16594 11.3726 9.23077 11.5291 9.23077 11.6923C9.23077 11.8555 9.16594 12.012 9.05053 12.1274C8.93512 12.2429 8.7786 12.3077 8.61539 12.3077Z"/>
+</svg>
+`,O=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.92308 12C8.92308 12.1826 8.86894 12.361 8.76751 12.5128C8.66608 12.6646 8.52192 12.7829 8.35325 12.8528C8.18458 12.9227 7.99898 12.941 7.81992 12.9053C7.64086 12.8697 7.47638 12.7818 7.34729 12.6527C7.21819 12.5236 7.13028 12.3591 7.09466 12.1801C7.05904 12.001 7.07732 11.8154 7.14719 11.6468C7.21706 11.4781 7.33537 11.3339 7.48717 11.2325C7.63897 11.1311 7.81743 11.0769 8 11.0769C8.24482 11.0769 8.4796 11.1742 8.65271 11.3473C8.82583 11.5204 8.92308 11.7552 8.92308 12ZM8 3.69231C6.30308 3.69231 4.92308 4.93461 4.92308 6.46154V6.76923C4.92308 6.93244 4.98791 7.08896 5.10332 7.20437C5.21873 7.31978 5.37525 7.38461 5.53846 7.38461C5.70167 7.38461 5.8582 7.31978 5.97361 7.20437C6.08901 7.08896 6.15385 6.93244 6.15385 6.76923V6.46154C6.15385 5.61538 6.98231 4.92308 8 4.92308C9.01769 4.92308 9.84616 5.61538 9.84616 6.46154C9.84616 7.30769 9.01769 8 8 8C7.83679 8 7.68027 8.06483 7.56486 8.18024C7.44945 8.29565 7.38462 8.45217 7.38462 8.61538V9.23077C7.38462 9.39398 7.44945 9.5505 7.56486 9.66591C7.68027 9.78132 7.83679 9.84615 8 9.84615C8.16321 9.84615 8.31974 9.78132 8.43514 9.66591C8.55055 9.5505 8.61539 9.39398 8.61539 9.23077V9.17538C10.0185 8.91769 11.0769 7.79846 11.0769 6.46154C11.0769 4.93461 9.69692 3.69231 8 3.69231ZM16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346628 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C10.121 0.00223986 12.1546 0.845814 13.6544 2.34562C15.1542 3.84542 15.9978 5.87895 16 8ZM14.7692 8C14.7692 6.66117 14.3722 5.35241 13.6284 4.23922C12.8846 3.12602 11.8274 2.25839 10.5905 1.74605C9.35356 1.2337 7.99249 1.09965 6.67939 1.36084C5.36629 1.62203 4.16013 2.26674 3.21343 3.21343C2.26674 4.16012 1.62203 5.36629 1.36084 6.67939C1.09965 7.99249 1.2337 9.35356 1.74605 10.5905C2.2584 11.8274 3.12603 12.8846 4.23922 13.6284C5.35241 14.3722 6.66117 14.7692 8 14.7692C9.79469 14.7672 11.5153 14.0534 12.7843 12.7843C14.0534 11.5153 14.7672 9.79468 14.7692 8Z"/>
+</svg>
+`,B=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7656 14.6336C15.8399 14.708 15.8988 14.7962 15.9391 14.8933C15.9793 14.9904 16 15.0945 16 15.1996C16 15.3047 15.9793 15.4088 15.9391 15.5059C15.8988 15.603 15.8399 15.6912 15.7656 15.7656C15.6912 15.8399 15.603 15.8988 15.5059 15.9391C15.4088 15.9793 15.3047 16 15.1996 16C15.0945 16 14.9904 15.9793 14.8933 15.9391C14.7962 15.8988 14.708 15.8399 14.6336 15.7656L8 9.13094L1.36637 15.7656C1.21626 15.9157 1.01268 16 0.8004 16C0.588121 16 0.384536 15.9157 0.234432 15.7656C0.0843276 15.6155 4.18453e-09 15.4119 0 15.1996C-4.18453e-09 14.9873 0.0843276 14.7837 0.234432 14.6336L6.86906 8L0.234432 1.36637C0.0843276 1.21626 0 1.01268 0 0.8004C0 0.588121 0.0843276 0.384536 0.234432 0.234432C0.384536 0.0843276 0.588121 0 0.8004 0C1.01268 0 1.21626 0.0843276 1.36637 0.234432L8 6.86906L14.6336 0.234432C14.7837 0.0843276 14.9873 -4.18453e-09 15.1996 0C15.4119 4.18453e-09 15.6155 0.0843276 15.7656 0.234432C15.9157 0.384536 16 0.588121 16 0.8004C16 1.01268 15.9157 1.21626 15.7656 1.36637L9.13094 8L15.7656 14.6336Z"/>
+</svg>
+`,u=class u extends x{constructor(){super(...arguments),this.closeButtonText="close",this.closeButtonIcon="close",this.mapStatusToIconModal=e=>{switch(e){case"error":return s`<cre8-icon class="cre8-modal-icon" svg=${A} aria-hidden='true'></cre8-icon>`;case"success":return s`<cre8-icon class="cre8-modal-icon" svg=${I} aria-hidden='true'></cre8-icon>`;case"warning":return s`<cre8-icon class="cre8-modal-icon" svg=${F} aria-hidden='true'></cre8-icon>`;case"help":return s`<cre8-icon class="cre8-modal-icon" svg=${O} aria-hidden='true'></cre8-icon>`;case"info":return s`<cre8-icon class="cre8-modal-icon" svg=${T} aria-hidden='true'></cre8-icon>`;default:return null}}}handleKeydown(e){e.code==="Escape"&&!this.notDismissible&&this.handleCloseModal()}handleCloseModal(){this.isActive=!1,this.dispatch({eventName:"close-modal",detailObj:{isActive:this.isActive}})}handleOnClickOutside(e){const i=e.target;this.isActive&&this._modalWindow&&i.classList.contains("cre8-c-modal")&&!this.notDismissible&&this.handleCloseModal()}updated(e){if(this.isActive===!0&&setTimeout(()=>{this._modalWindow.focus()},200),e.has("isActive")){const i=document.querySelector("body");this.isActive?i.style.overflow="hidden":i.style.removeProperty("overflow")}}disconnectedCallback(){this.isActive=!1,document.querySelector("body").style.removeProperty("overflow")}render(){const e=this.componentClassNames("cre8-c-modal",{"cre8-is-active":this.isActive,"cre8-c-modal--error":this.status==="error","cre8-c-modal--warning":this.status==="warning","cre8-c-modal--success":this.status==="success","cre8-c-modal--info":this.status==="info","cre8-c-modal--help":this.status==="help"});return s`
+    <div class="${e}" @click="${this.handleOnClickOutside}" @keydown=${this.handleKeydown}>
     <focus-trap class="cre8-c-modal__focus-trap" ?inactive=${!this.isActive}>
         <div class="cre8-c-modal__window" role="dialog" aria-label=${this.ariaLabel} tabindex=${this.isActive?0:-1}>
         <div class="cre8-c-modal__header">
@@ -754,7 +780,7 @@ span.ripple {
         ${this.notDismissible?"":s`<cre8-button
                 class="cre8-c-modal__close-button"
                 variant="tertiary"
-                svg=${A}
+                svg=${B}
                 iconPosition="after"
                 ?inverted=${!this.status}
                 @click=${this.handleCloseModal}
@@ -767,4 +793,4 @@ span.ripple {
         </div>
     </focus-trap>
     </div>
-`}};h.styles=[O];let r=h;c([_(".cre8-c-modal__window")],r.prototype,"_modalWindow");c([l({type:Boolean,reflect:!0})],r.prototype,"isActive");c([l()],r.prototype,"status");c([l()],r.prototype,"utilityModalTitle");c([l({type:Boolean,reflect:!0})],r.prototype,"notDismissible");c([l()],r.prototype,"closeButtonText");c([l()],r.prototype,"closeButtonIcon");c([l()],r.prototype,"ariaLabel");customElements.get("cre8-modal")===void 0&&customElements.define("cre8-modal",r);
+`}};u.styles=[L];let r=u;c([y(".cre8-c-modal__window")],r.prototype,"_modalWindow");c([l({type:Boolean,reflect:!0})],r.prototype,"isActive");c([l()],r.prototype,"status");c([l()],r.prototype,"utilityModalTitle");c([l({type:Boolean,reflect:!0})],r.prototype,"notDismissible");c([l()],r.prototype,"closeButtonText");c([l()],r.prototype,"closeButtonIcon");c([l()],r.prototype,"ariaLabel");customElements.get("cre8-modal")===void 0&&customElements.define("cre8-modal",r);

package/dist/assets/{modal.stories-BxO2ifui.js → modal.stories-CHYBrq_E.js}

@@ -1 +1 @@
-import{b as s}from"./iframe-CdWmiVXf.js";import"./button-Bt9tRB7v.js";import"./heading-BgO3jH9M.js";import"./text-passage-Dw-BWzip.js";import"./f-po-CZL6lsXP.js";import"./modal-Oja4WhiR.js";const c={title:"cre8 Components/Modal",component:"cre8-modal",parameters:{status:{type:"inProgress"},actions:{handles:["close-modal"]}}},e=a=>s`<sample-modal></sample-modal>`,r=a=>s`<sample-modal status="error"></sample-modal>`,o=a=>s`<sample-modal status="warning"></sample-modal>`,m=a=>s`<sample-modal status="success"></sample-modal>`,t=a=>s`<sample-modal status="info"></sample-modal>`,l=a=>s`<sample-modal status="help"></sample-modal>`,p=a=>s`<sample-modal ?notDismissible=${!0}></sample-modal>`;e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"args => html`<sample-modal></sample-modal>`",...e.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="error"></sample-modal>`',...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="warning"></sample-modal>`',...o.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="success"></sample-modal>`',...m.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="info"></sample-modal>`',...t.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="help"></sample-modal>`',...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:"args => html`<sample-modal ?notDismissible=${true}></sample-modal>`",...p.parameters?.docs?.source}}};const d=["Default","Error","Warning","Success","Info","Help","NotDismissible"],h=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Error:r,Help:l,Info:t,NotDismissible:p,Success:m,Warning:o,__namedExportsOrder:d,default:c},Symbol.toStringTag,{value:"Module"}));export{h as M};
+import{b as s}from"./iframe-dHvya7sk.js";import"./button-CJL8yzAT.js";import"./heading-485Jz7JZ.js";import"./text-passage-DGaI5i2I.js";import"./f-po-C2WpbOFJ.js";import"./modal-CO0M4e_8.js";const c={title:"cre8 Components/Modal",component:"cre8-modal",parameters:{status:{type:"inProgress"},actions:{handles:["close-modal"]}}},e=a=>s`<sample-modal></sample-modal>`,r=a=>s`<sample-modal status="error"></sample-modal>`,o=a=>s`<sample-modal status="warning"></sample-modal>`,m=a=>s`<sample-modal status="success"></sample-modal>`,t=a=>s`<sample-modal status="info"></sample-modal>`,l=a=>s`<sample-modal status="help"></sample-modal>`,p=a=>s`<sample-modal ?notDismissible=${!0}></sample-modal>`;e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"args => html`<sample-modal></sample-modal>`",...e.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="error"></sample-modal>`',...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="warning"></sample-modal>`',...o.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="success"></sample-modal>`',...m.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="info"></sample-modal>`',...t.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:'args => html`<sample-modal status="help"></sample-modal>`',...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:"args => html`<sample-modal ?notDismissible=${true}></sample-modal>`",...p.parameters?.docs?.source}}};const d=["Default","Error","Warning","Success","Info","Help","NotDismissible"],h=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Error:r,Help:l,Info:t,NotDismissible:p,Success:m,Warning:o,__namedExportsOrder:d,default:c},Symbol.toStringTag,{value:"Module"}));export{h as M};

package/dist/assets/{multi-select.stories-DUMN4A9Y.js → multi-select.stories-C9XXsWio.js}

@@ -1,10 +1,4 @@
-import{i as C,b as c,A as y}from"./iframe-CdWmiVXf.js";import{s as _}from"./spread-BOaHI3Dl.js";import{o as k}from"./if-defined-sxEueMHN.js";import{C as z,n as o}from"./cre8-element-gkCuLp-W.js";import{r as x}from"./state-BQD-SkUn.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./remove-tag-etggj_MH.js";import"./field-note-txmyzeNl.js";import"./button-Bt9tRB7v.js";import"./checkbox-field-item-BVUOuGTx.js";import"./preload-helper-PPVm8Dsz.js";import"./directive-b18f_ppQ.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-DYiIK7a4.js";import"./unsafe-html-BLUBm7l3.js";import"./Caret_Down-Bmqq8eNW.js";import"./Warning-CawqmTvB.js";import"./Error-X6enME_5.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-DsXhvnkn.js";import"./loading-spinner-Ced-hKjz.js";const I=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7869 4.87827L8.51452 12.1506C8.44698 12.2182 8.36677 12.2719 8.27849 12.3085C8.1902 12.3451 8.09557 12.3639 8 12.3639C7.90443 12.3639 7.8098 12.3451 7.72151 12.3085C7.63323 12.2719 7.55302 12.2182 7.48548 12.1506L0.213121 4.87827C0.0766618 4.74181 0 4.55673 0 4.36375C0 4.17077 0.0766618 3.98569 0.213121 3.84923C0.34958 3.71277 0.534658 3.63611 0.72764 3.63611C0.920622 3.63611 1.1057 3.71277 1.24216 3.84923L8 10.608L14.7578 3.84923C14.8254 3.78166 14.9056 3.72806 14.9939 3.6915C15.0822 3.65493 15.1768 3.63611 15.2724 3.63611C15.3679 3.63611 15.4625 3.65493 15.5508 3.6915C15.6391 3.72806 15.7193 3.78166 15.7869 3.84923C15.8544 3.9168 15.908 3.99701 15.9446 4.08529C15.9812 4.17357 16 4.26819 16 4.36375C16 4.4593 15.9812 4.55392 15.9446 4.6422C15.908 4.73049 15.8544 4.8107 15.7869 4.87827Z"/>
-</svg>
-`,D=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.8969 5.97385L8.87 8L10.8969 10.0262C10.9541 10.0833 10.9995 10.1512 11.0304 10.2259C11.0613 10.3006 11.0773 10.3807 11.0773 10.4615C11.0773 10.5424 11.0613 10.6225 11.0304 10.6972C10.9995 10.7719 10.9541 10.8397 10.8969 10.8969C10.8397 10.9541 10.7719 10.9994 10.6972 11.0304C10.6225 11.0613 10.5424 11.0773 10.4615 11.0773C10.3807 11.0773 10.3006 11.0613 10.2259 11.0304C10.1512 10.9994 10.0833 10.9541 10.0262 10.8969L8 8.87L5.97385 10.8969C5.91667 10.9541 5.8488 10.9994 5.77409 11.0304C5.69939 11.0613 5.61932 11.0773 5.53846 11.0773C5.45761 11.0773 5.37754 11.0613 5.30283 11.0304C5.22813 10.9994 5.16025 10.9541 5.10308 10.8969C5.0459 10.8397 5.00055 10.7719 4.96961 10.6972C4.93866 10.6225 4.92274 10.5424 4.92274 10.4615C4.92274 10.3807 4.93866 10.3006 4.96961 10.2259C5.00055 10.1512 5.0459 10.0833 5.10308 10.0262L7.13 8L5.10308 5.97385C4.98761 5.85837 4.92274 5.70176 4.92274 5.53846C4.92274 5.37516 4.98761 5.21855 5.10308 5.10308C5.21855 4.9876 5.37516 4.92273 5.53846 4.92273C5.70176 4.92273 5.85838 4.9876 5.97385 5.10308L8 7.13L10.0262 5.10308C10.0833 5.0459 10.1512 5.00055 10.2259 4.9696C10.3006 4.93866 10.3807 4.92273 10.4615 4.92273C10.5424 4.92273 10.6225 4.93866 10.6972 4.9696C10.7719 5.00055 10.8397 5.0459 10.8969 5.10308C10.9541 5.16025 10.9995 5.22813 11.0304 5.30283C11.0613 5.37753 11.0773 5.4576 11.0773 5.53846C11.0773 5.61932 11.0613 5.69939 11.0304 5.77409C10.9995 5.84879 10.9541 5.91667 10.8969 5.97385ZM16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346628 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C10.121 0.00223986 12.1546 0.845814 13.6544 2.34562C15.1542 3.84542 15.9978 5.87895 16 8ZM14.7692 8C14.7692 6.66117 14.3722 5.35241 13.6284 4.23922C12.8846 3.12602 11.8274 2.25839 10.5905 1.74605C9.35356 1.2337 7.99249 1.09965 6.67939 1.36084C5.36629 1.62203 4.16013 2.26674 3.21343 3.21343C2.26674 4.16012 1.62203 5.36629 1.36084 6.67939C1.09965 7.99249 1.2337 9.35356 1.74605 10.5905C2.2584 11.8274 3.12603 12.8846 4.23922 13.6284C5.35241 14.3722 6.66117 14.7692 8 14.7692C9.79469 14.7672 11.5153 14.0534 12.7843 12.7843C14.0534 11.5153 14.7672 9.79468 14.7692 8Z"/>
-</svg>
-`,$=C`.cre8-u-content-knockout-brand {
+import{a as C,b as c,A as y}from"./iframe-dHvya7sk.js";import{s as _}from"./spread-BPiNgQQF.js";import{o as k}from"./if-defined-HKKhGupN.js";import{C as z,n as o}from"./cre8-element-DfmMtHJO.js";import{r as x}from"./state-CfuknrX8.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./remove-tag-BSEZ7VT8.js";import"./field-note-DKXZiXLU.js";import"./button-CJL8yzAT.js";import"./checkbox-field-item-iHcdmTNw.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-DeTLDzTS.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-bQpK8UYN.js";import"./loading-spinner-g6iJajXH.js";const I=C`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -378,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -550,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -807,7 +809,7 @@ cre8-icon {
   text-transform: var(--cre8-typography-body-default-text-transform);
   background-color: var(--cre8-color-bg-default);
   border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-  border-radius: var(--cre8-border-radius-default);
+  border-radius: var(--cre8-border-radius-none);
   color: var(--cre8-color-content-default);
   width: 100%;
   cursor: pointer;
@@ -829,7 +831,13 @@ cre8-icon {
 .cre8-c-multi-select__field-note-success,
 .cre8-c-multi-select__field-note-error {
   flex-basis: 100%;
-}`;var S=Object.defineProperty,i=(s,e,r,l)=>{for(var a=void 0,d=s.length-1,n;d>=0;d--)(n=s[d])&&(a=n(e,r,a)||a);return a&&S(e,r,a),a};const w=class w extends z{constructor(){super(),this.items=[],this.selectedTagItems=[],this.dropdownOpen=!1,this._handleOnClick=this._handleOnClick.bind(this)}firstUpdated(){this.preselectedItems&&this.setPreselectedItemsinDropdown(),this.selectedTagItems=this.preselectedItems||[],this._initializeAria()}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClick,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClick,!1)}_renderDropdownItems(){return this.items.map((e,r)=>c`<li
+}`;var D=Object.defineProperty,i=(s,e,r,l)=>{for(var a=void 0,d=s.length-1,n;d>=0;d--)(n=s[d])&&(a=n(e,r,a)||a);return a&&D(e,r,a),a};const $=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7869 4.87827L8.51452 12.1506C8.44698 12.2182 8.36677 12.2719 8.27849 12.3085C8.1902 12.3451 8.09557 12.3639 8 12.3639C7.90443 12.3639 7.8098 12.3451 7.72151 12.3085C7.63323 12.2719 7.55302 12.2182 7.48548 12.1506L0.213121 4.87827C0.0766618 4.74181 0 4.55673 0 4.36375C0 4.17077 0.0766618 3.98569 0.213121 3.84923C0.34958 3.71277 0.534658 3.63611 0.72764 3.63611C0.920622 3.63611 1.1057 3.71277 1.24216 3.84923L8 10.608L14.7578 3.84923C14.8254 3.78166 14.9056 3.72806 14.9939 3.6915C15.0822 3.65493 15.1768 3.63611 15.2724 3.63611C15.3679 3.63611 15.4625 3.65493 15.5508 3.6915C15.6391 3.72806 15.7193 3.78166 15.7869 3.84923C15.8544 3.9168 15.908 3.99701 15.9446 4.08529C15.9812 4.17357 16 4.26819 16 4.36375C16 4.4593 15.9812 4.55392 15.9446 4.6422C15.908 4.73049 15.8544 4.8107 15.7869 4.87827Z"/>
+</svg>
+`,S=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8969 5.97385L8.87 8L10.8969 10.0262C10.9541 10.0833 10.9995 10.1512 11.0304 10.2259C11.0613 10.3006 11.0773 10.3807 11.0773 10.4615C11.0773 10.5424 11.0613 10.6225 11.0304 10.6972C10.9995 10.7719 10.9541 10.8397 10.8969 10.8969C10.8397 10.9541 10.7719 10.9994 10.6972 11.0304C10.6225 11.0613 10.5424 11.0773 10.4615 11.0773C10.3807 11.0773 10.3006 11.0613 10.2259 11.0304C10.1512 10.9994 10.0833 10.9541 10.0262 10.8969L8 8.87L5.97385 10.8969C5.91667 10.9541 5.8488 10.9994 5.77409 11.0304C5.69939 11.0613 5.61932 11.0773 5.53846 11.0773C5.45761 11.0773 5.37754 11.0613 5.30283 11.0304C5.22813 10.9994 5.16025 10.9541 5.10308 10.8969C5.0459 10.8397 5.00055 10.7719 4.96961 10.6972C4.93866 10.6225 4.92274 10.5424 4.92274 10.4615C4.92274 10.3807 4.93866 10.3006 4.96961 10.2259C5.00055 10.1512 5.0459 10.0833 5.10308 10.0262L7.13 8L5.10308 5.97385C4.98761 5.85837 4.92274 5.70176 4.92274 5.53846C4.92274 5.37516 4.98761 5.21855 5.10308 5.10308C5.21855 4.9876 5.37516 4.92273 5.53846 4.92273C5.70176 4.92273 5.85838 4.9876 5.97385 5.10308L8 7.13L10.0262 5.10308C10.0833 5.0459 10.1512 5.00055 10.2259 4.9696C10.3006 4.93866 10.3807 4.92273 10.4615 4.92273C10.5424 4.92273 10.6225 4.93866 10.6972 4.9696C10.7719 5.00055 10.8397 5.0459 10.8969 5.10308C10.9541 5.16025 10.9995 5.22813 11.0304 5.30283C11.0613 5.37753 11.0773 5.4576 11.0773 5.53846C11.0773 5.61932 11.0613 5.69939 11.0304 5.77409C10.9995 5.84879 10.9541 5.91667 10.8969 5.97385ZM16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346628 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C10.121 0.00223986 12.1546 0.845814 13.6544 2.34562C15.1542 3.84542 15.9978 5.87895 16 8ZM14.7692 8C14.7692 6.66117 14.3722 5.35241 13.6284 4.23922C12.8846 3.12602 11.8274 2.25839 10.5905 1.74605C9.35356 1.2337 7.99249 1.09965 6.67939 1.36084C5.36629 1.62203 4.16013 2.26674 3.21343 3.21343C2.26674 4.16012 1.62203 5.36629 1.36084 6.67939C1.09965 7.99249 1.2337 9.35356 1.74605 10.5905C2.2584 11.8274 3.12603 12.8846 4.23922 13.6284C5.35241 14.3722 6.66117 14.7692 8 14.7692C9.79469 14.7672 11.5153 14.0534 12.7843 12.7843C14.0534 11.5153 14.7672 9.79468 14.7692 8Z"/>
+</svg>
+`,w=class w extends z{constructor(){super(),this.items=[],this.selectedTagItems=[],this.dropdownOpen=!1,this._handleOnClick=this._handleOnClick.bind(this)}firstUpdated(){this.preselectedItems&&this.setPreselectedItemsinDropdown(),this.selectedTagItems=this.preselectedItems||[],this._initializeAria()}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleOnClick,!1)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("click",this._handleOnClick,!1)}_renderDropdownItems(){return this.items.map((e,r)=>c`<li
         @click="${l=>this._handleListItemClick(l,r)}"
       >
         <cre8-checkbox-field-item
@@ -881,7 +889,7 @@ cre8-icon {
           <div class="cre8-c-multi-select__icons-wrapper">
             <cre8-button
               ?hideText=${!0}
-              svg="${D}"
+              svg="${S}"
               text="Clear All"
               variant="tertiary"
               ?disabled="${this.disabled}"
@@ -891,15 +899,14 @@ cre8-icon {
             </cre8-button>
             <cre8-button
               hideText
-              svg=${I}
+              svg=${$}
               variant="tertiary"
               ?disabled="${this.disabled}"
               class="cre8-c-multi-select__down_icon"
               @click="${this.dropdownArrowClick}"
               @keydown="${this._handleButtonToListKeydown}"
-              aria-label="Open Dropdown"
+              text="Open Dropdown"
               aria-expanded="${this.dropdownOpen}"
-              aria-labelledby="${this.fieldId}"
             >
             </cre8-button>
           </div>
@@ -921,7 +928,7 @@ cre8-icon {
             <slot name="fieldNote">${this.fieldNote}</slot>
           </cre8-field-note>`:y}
       ${this._renderSuccessErrorFieldNote()}
-    `}};w.styles=[$];let t=w;i([o({type:Array})],t.prototype,"items");i([x()],t.prototype,"selectedTagItems");i([o({type:Array})],t.prototype,"preselectedItems");i([x()],t.prototype,"dropdownOpen");i([o()],t.prototype,"label");i([o()],t.prototype,"fieldId");i([o()],t.prototype,"fieldNote");i([o()],t.prototype,"ariaDescribedBy");i([o()],t.prototype,"validationAriaDescribedBy");i([o({type:Boolean,reflect:!0})],t.prototype,"disabled");i([o({type:Boolean,reflect:!0})],t.prototype,"isError");i([o()],t.prototype,"errorNote");i([o({type:Boolean,reflect:!0})],t.prototype,"isSuccess");i([o()],t.prototype,"successNote");customElements.get("cre8-multi-select")===void 0&&customElements.define("cre8-multi-select",t);const J={title:"In Development/MultiSelect",component:"cre8-multi-select",render:s=>c`<cre8-multi-select
+    `}};w.styles=[I];let t=w;i([o({type:Array})],t.prototype,"items");i([x()],t.prototype,"selectedTagItems");i([o({type:Array})],t.prototype,"preselectedItems");i([x()],t.prototype,"dropdownOpen");i([o()],t.prototype,"label");i([o()],t.prototype,"fieldId");i([o()],t.prototype,"fieldNote");i([o()],t.prototype,"ariaDescribedBy");i([o()],t.prototype,"validationAriaDescribedBy");i([o({type:Boolean,reflect:!0})],t.prototype,"disabled");i([o({type:Boolean,reflect:!0})],t.prototype,"isError");i([o()],t.prototype,"errorNote");i([o({type:Boolean,reflect:!0})],t.prototype,"isSuccess");i([o()],t.prototype,"successNote");customElements.get("cre8-multi-select")===void 0&&customElements.define("cre8-multi-select",t);const M={title:"In Development/MultiSelect",component:"cre8-multi-select",render:s=>c`<cre8-multi-select
       ${_(s)}
       .items=${s.items}
       .preselectedItems=${s.preselectedItems}
@@ -975,4 +982,4 @@ cre8-icon {
     items: ['Emu', 'Eggplant', 'Envy', 'Essence'],
     preselectedItems: ['Eevee']
   }
-}`,...f.parameters?.docs?.source}}};const Q=["Default","Wrapping","PreSelected","Disabled","DisabledWithTags","Error","Success"];export{m as Default,g as Disabled,h as DisabledWithTags,b as Error,u as PreSelected,f as Success,p as Wrapping,Q as __namedExportsOrder,J as default};
+}`,...f.parameters?.docs?.source}}};const G=["Default","Wrapping","PreSelected","Disabled","DisabledWithTags","Error","Success"];export{m as Default,g as Disabled,h as DisabledWithTags,b as Error,u as PreSelected,f as Success,p as Wrapping,G as __namedExportsOrder,M as default};

package/dist/assets/{nav-container.stories-D6ByjniX.js → nav-container.stories-DU9fhvDu.js}

@@ -1,4 +1,4 @@
-import{i as o,b as a}from"./iframe-CdWmiVXf.js";import"./f-po-CZL6lsXP.js";import{s as d}from"./spread-BOaHI3Dl.js";import{C as m}from"./cre8-element-gkCuLp-W.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-sxEueMHN.js";import"./directive-b18f_ppQ.js";import"./_commonjsHelpers-DaWZu8wl.js";const s=o`.cre8-u-content-knockout-brand {
+import{a as o,b as a}from"./iframe-dHvya7sk.js";import"./f-po-C2WpbOFJ.js";import{s as d}from"./spread-BPiNgQQF.js";import{C as m}from"./cre8-element-DfmMtHJO.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-HKKhGupN.js";import"./_commonjsHelpers-DaWZu8wl.js";const s=o`.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 */
 }
 
 /**
@@ -619,7 +627,7 @@ span.ripple {
       <div class="${n}">
         <slot></slot>
       </div>
-    `}};i.styles=[s];let e=i;customElements.get("cre8-nav-container")===void 0&&customElements.define("cre8-nav-container",e);const b={title:"Cre8 Components/Nav Container",component:"cre8-nav-container",parameters:{status:{type:"inProgress"}}},t=r=>a`<cre8-text-passage size="sm" ?capLinelength=${!0}>
+    `}};i.styles=[s];let e=i;customElements.get("cre8-nav-container")===void 0&&customElements.define("cre8-nav-container",e);const x={title:"Cre8 Components/Nav Container",component:"cre8-nav-container",parameters:{status:{type:"inProgress"}}},t=r=>a`<cre8-text-passage size="sm" ?capLinelength=${!0}>
     <p>
       Nav container is used for the panel that can be toggled on/off on small screens with the header menu button. This is why it does not show up on
       small screens.
@@ -635,4 +643,4 @@ span.ripple {
   </cre8-text-passage>
   <cre8-nav-container \${spread(args)}>
     <f-po style="flex: 1 0 auto;">Nav container contents (primary nav, utility nav, etc.)</f-po>
-  </cre8-nav-container>\``,...t.parameters?.docs?.source}}};const y=["Default"];export{t as Default,y as __namedExportsOrder,b as default};
+  </cre8-nav-container>\``,...t.parameters?.docs?.source}}};const b=["Default"];export{t as Default,b as __namedExportsOrder,x as default};

package/dist/assets/{page-header.stories-Dq8ASgx8.js → page-header.stories-BrstKiEY.js}

@@ -1,4 +1,4 @@
-import{i as l,b as n}from"./iframe-CdWmiVXf.js";import{s as g}from"./spread-BOaHI3Dl.js";import{C as c,n as h}from"./cre8-element-gkCuLp-W.js";import"./preload-helper-PPVm8Dsz.js";import"./directive-b18f_ppQ.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=l`.cre8-u-content-knockout-brand {
+import{a as l,b as n}from"./iframe-dHvya7sk.js";import{s as g}from"./spread-BPiNgQQF.js";import{C as c,n as h}from"./cre8-element-DfmMtHJO.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=l`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -637,15 +645,15 @@ span.ripple {
       <div class="${a}">
         <h1 class="cre8-c-page-header__title">
           ${this.heading}
-          ${this.slotNotEmpty("titCre8ter")&&n`
+          ${this.slotNotEmpty("titleAfter")&&n`
           <div class="cre8-c-page-header__title-after">
-            <slot name="titCre8ter"></slot>
+            <slot name="titleAfter"></slot>
           </div>`}
         </h1>
         <div class="cre8-c-page-header__description">
           <slot></slot>
         </div>
       </div>
-    `}};p.styles=[f];let o=p;y([h({type:String})],o.prototype,"heading");customElements.get("cre8-page-header")===void 0&&customElements.define("cre8-page-header",o);const P={title:"Cre8 Components/Page Header",component:"cre8-page-header",parameters:{status:{type:"notStarted"}}},i=t=>n`<cre8-page-header ${g(t)} heading="Page header title"> Page header description </cre8-page-header>`,r=()=>n`<cre8-page-header heading="Page header title">
-    Page header description <cre8-badge size="lg" slot="titcre8ter" text="Badge"></cre8-badge>
-  </cre8-page-header>`;i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:'args => html`<cre8-page-header ${spread(args)} heading="Page header title"> Page header description </cre8-page-header>`',...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:'() => html`<cre8-page-header heading="Page header title">\n    Page header description <cre8-badge size="lg" slot="titcre8ter" text="Badge"></cre8-badge>\n  </cre8-page-header>`',...r.parameters?.docs?.source}}};const I=["Default","WithTitcre8ter"];export{i as Default,r as WithTitcre8ter,I as __namedExportsOrder,P as default};
+    `}};p.styles=[f];let o=p;y([h({type:String})],o.prototype,"heading");customElements.get("cre8-page-header")===void 0&&customElements.define("cre8-page-header",o);const _={title:"Cre8 Components/Page Header",component:"cre8-page-header",parameters:{status:{type:"notStarted"}}},i=t=>n`<cre8-page-header ${g(t)} heading="Page header title"> Page header description </cre8-page-header>`,r=()=>n`<cre8-page-header heading="Page header title">
+    Page header description <cre8-badge size="lg" slot="titleAfter" text="Badge"></cre8-badge>
+  </cre8-page-header>`;i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:'args => html`<cre8-page-header ${spread(args)} heading="Page header title"> Page header description </cre8-page-header>`',...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:'() => html`<cre8-page-header heading="Page header title">\n    Page header description <cre8-badge size="lg" slot="titleAfter" text="Badge"></cre8-badge>\n  </cre8-page-header>`',...r.parameters?.docs?.source}}};const P=["Default","WithTitleAfter"];export{i as Default,r as WithTitleAfter,P as __namedExportsOrder,_ as default};