@tmorrow/cre8-wc 2.1.0 → 2.2.0

package/dist/assets/{loading-spinner.stories-DPRGEeHT.js → loading-spinner.stories-n42RNnGQ.js}

@@ -1,4 +1,4 @@
-import{b}from"./iframe-BNJP6ovU.js";import"./loading-spinner-C52KNq6y.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";const $={title:"cre8 Components/LoadingSpinner",component:"cre8-loading-spinner",argTypes:{buttonVariant:{options:["primary","secondary","tertiary"],control:{type:"radio"}},determinate:{control:"boolean"},inverse:{defaultValue:!1,control:{type:"boolean"}},neutral:{control:{type:"boolean"}},label:{defaultValue:"Loading ...",control:"text"},progress:{control:{type:"number"}},size:{options:["large","small"],control:{type:"inline-radio"}}},args:{label:"Loading…",size:"large"},render:({size:u,inverse:m,determinate:p,progress:l,label:d,neutral:g,buttonVariant:y})=>b`<cre8-loading-spinner
+import{b}from"./iframe-nwd_1gnU.js";import"./loading-spinner-B7JDCfNK.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";const $={title:"cre8 Components/LoadingSpinner",component:"cre8-loading-spinner",argTypes:{buttonVariant:{options:["primary","secondary","tertiary"],control:{type:"radio"}},determinate:{control:"boolean"},inverse:{defaultValue:!1,control:{type:"boolean"}},neutral:{control:{type:"boolean"}},label:{defaultValue:"Loading ...",control:"text"},progress:{control:{type:"number"}},size:{options:["large","small"],control:{type:"inline-radio"}}},args:{label:"Loading…",size:"large"},render:({size:u,inverse:m,determinate:p,progress:l,label:d,neutral:g,buttonVariant:y})=>b`<cre8-loading-spinner
       size="${u}"
       ?inverse="${m}"
       ?neutral="${g}"

package/dist/assets/{logo.stories-2LBqqraT.js → logo.stories-BcJXB658.js}

@@ -1,4 +1,4 @@
-import{a as p,b as s}from"./iframe-BNJP6ovU.js";import{s as l}from"./spread-CnPic3C2.js";import{C as g,n as c}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const u=p`.cre8-u-content-knockout-brand {
+import{a as p,b as s}from"./iframe-nwd_1gnU.js";import{s as l}from"./spread-D16Rn3WA.js";import{C as g,n as c}from"./cre8-element-CaOpCq8p.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const u=p`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

package/dist/assets/{main.stories-BQzD7iWD.js → main.stories-B6lL5ks-.js}

@@ -1,4 +1,4 @@
-import{a as p,b as s}from"./iframe-BNJP6ovU.js";import"./f-po-BdPzDRD-.js";import{s as l}from"./spread-CnPic3C2.js";import{C as g,n as c}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./_commonjsHelpers-DaWZu8wl.js";const u=p`.cre8-u-content-knockout-brand {
+import{a as p,b as s}from"./iframe-nwd_1gnU.js";import"./f-po-ByatXsWC.js";import{s as l}from"./spread-D16Rn3WA.js";import{C as g,n as c}from"./cre8-element-CaOpCq8p.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-RYzTvKuT.js";import"./_commonjsHelpers-DaWZu8wl.js";const h=p`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -600,4 +608,4 @@ span.ripple {
   flex-direction: column;
   flex: 1;
   height: 100%;
-}`;var h=Object.defineProperty,f=(e,i,d,x)=>{for(var t=void 0,n=e.length-1,m;n>=0;n--)(m=e[n])&&(t=m(i,d,t)||t);return t&&h(i,d,t),t};const o=class o extends g{render(){const i=this.componentClassNames("cre8-c-main",{"cre8-c-main--full-height":this.fullHeight===!0});return s`<main class=${i}><slot></slot></main>`}};o.styles=[u];let r=o;f([c({type:Boolean,reflect:!0})],r.prototype,"fullHeight");customElements.get("cre8-main")===void 0&&customElements.define("cre8-main",r);const R={title:"Cre8 Components/Main",component:"cre8-main",parameters:{status:{type:"inProgress"}}},a=e=>s`<cre8-main ${l(e)}><f-po>Main Content Block Between Header and Footer</f-po></cre8-main>`;a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:"args => html`<cre8-main ${spread(args)}><f-po>Main Content Block Between Header and Footer</f-po></cre8-main>`",...a.parameters?.docs?.source}}};const F=["Default"];export{a as Default,F as __namedExportsOrder,R as default};
+}`;var u=Object.defineProperty,f=(e,i,d,x)=>{for(var t=void 0,n=e.length-1,m;n>=0;n--)(m=e[n])&&(t=m(i,d,t)||t);return t&&u(i,d,t),t};const o=class o extends g{render(){const i=this.componentClassNames("cre8-c-main",{"cre8-c-main--full-height":this.fullHeight===!0});return s`<main class=${i}><slot></slot></main>`}};o.styles=[h];let a=o;f([c({type:Boolean,reflect:!0})],a.prototype,"fullHeight");customElements.get("cre8-main")===void 0&&customElements.define("cre8-main",a);const R={title:"Cre8 Components/Main",component:"cre8-main",parameters:{status:{type:"inProgress"}}},r=e=>s`<cre8-main ${l(e)}><f-po>Main Content Block Between Header and Footer</f-po></cre8-main>`;r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:"args => html`<cre8-main ${spread(args)}><f-po>Main Content Block Between Header and Footer</f-po></cre8-main>`",...r.parameters?.docs?.source}}};const F=["Default"];export{r as Default,F as __namedExportsOrder,R as default};

package/dist/assets/{modal-GglWRNJp.js → modal-Bn53iVj7.js}

@@ -1,11 +1,11 @@
-import{u as i,j as e,M as s,S as n,C as l}from"./blocks-1be_-L6v.js";import{M as c}from"./modal.stories-CpybCs79.js";import{S as r,D as d,E as m}from"./sample-modal.stories-BZ4N2R2Z.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./iframe-BNJP6ovU.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./button-CgaWukz0.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-element-B35i4Lyg.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";import"./heading-Dbka33DK.js";import"./text-passage-xQVosjOr.js";import"./f-po-BdPzDRD-.js";import"./modal-CCfbY4fF.js";import"./button-group-G7qN4MwM.js";function a(o){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:c}),`
+import{u as i,j as e,M as s,S as n,C as l}from"./blocks-DlUWku5n.js";import{M as c}from"./modal.stories-CsImmcQy.js";import{S as r,D as d,E as m}from"./sample-modal.stories-iefBJIsu.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./iframe-nwd_1gnU.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./button-rmsX1TVb.js";import"./if-defined-RYzTvKuT.js";import"./cre8-element-CaOpCq8p.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";import"./loading-spinner-B7JDCfNK.js";import"./heading-ByebtBvm.js";import"./text-passage-C6jDH-er.js";import"./f-po-ByatXsWC.js";import"./modal-DgnLTA-d.js";import"./button-group-DjFiwkrF.js";function a(o){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:c}),`
 `,e.jsx(t.h1,{id:"modal",children:"Modal"}),`
 `,e.jsx(t.p,{children:`Modal component should be used in all modal situations. It is natuarally composable and can even have a custom header and remove the close button.
 Here is code for the example below, a completely composed modal using slots:`}),`
 `,e.jsxs(t.p,{children:["(note: adding ",e.jsx(t.code,{children:'slot="header"'})," will insert the given element into the header section of the modal, same for ",e.jsx(t.code,{children:'slot="footer"'})," and no given slot name will inset it into the body)"]}),`
 `,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-js",children:`<cre8-modal
     ?isActive=\${this.modalIsActive}
-    @close-modal="\${() => this.toggleModal()}"
+    @modal-close="\${() => this.toggleModal()}"
     ariaLabel="This text describes modal to screen reader when focused on"
 >
     <cre8-heading variant="title-large" ?brandColor=\${true} slot="header">Modal Heading</cre8-heading>
@@ -25,7 +25,7 @@ Here is code for the error utility modal example below:`}),`
     status="error"
     utilityModalTitle="Modal Heading"
     isActive="\${this.modalIsActive}"
-    @close-modal=\${() => this.toggleModal()}
+    @modal-close=\${() => this.toggleModal()}
     ariaLabel="This text describes modal to screen reader when focused on"
     >
     <cre8-text-passage>

package/dist/assets/{modal-CCfbY4fF.js → modal-DgnLTA-d.js}

@@ -1,4 +1,4 @@
-import{a as w,b as s}from"./iframe-BNJP6ovU.js";import{C as x,n as l}from"./cre8-element-B35i4Lyg.js";import{e as y}from"./query-BpjciUlk.js";import"./icon-ChfRWXWy.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=`
+import{a as w,b as s}from"./iframe-nwd_1gnU.js";import{C as x,n as l}from"./cre8-element-CaOpCq8p.js";import{e as y}from"./query-BpjciUlk.js";import"./icon-BvsTH4V8.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>
@@ -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 */
 }
 
 /**
@@ -760,7 +768,7 @@ span.ripple {
 `,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`
+`,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:"modal-close",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}>

package/dist/assets/{modal.stories-CpybCs79.js → modal.stories-CsImmcQy.js}

@@ -1 +1 @@
-import{b as s}from"./iframe-BNJP6ovU.js";import"./button-CgaWukz0.js";import"./heading-Dbka33DK.js";import"./text-passage-xQVosjOr.js";import"./f-po-BdPzDRD-.js";import"./modal-CCfbY4fF.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-nwd_1gnU.js";import"./button-rmsX1TVb.js";import"./heading-ByebtBvm.js";import"./text-passage-C6jDH-er.js";import"./f-po-ByatXsWC.js";import"./modal-DgnLTA-d.js";const c={title:"cre8 Components/Modal",component:"cre8-modal",parameters:{status:{type:"inProgress"},actions:{handles:["modal-close"]}}},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-BhzEKRui.js → multi-select.stories-D9VO8lGJ.js}

@@ -1,4 +1,4 @@
-import{a as C,b as c,A as y}from"./iframe-BNJP6ovU.js";import{s as _}from"./spread-CnPic3C2.js";import{o as k}from"./if-defined-Bxnzk64Q.js";import{C as z,n as o}from"./cre8-element-B35i4Lyg.js";import{r as x}from"./state-DkQhleoO.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./remove-tag-lCr57c5r.js";import"./field-note-fccBckVl.js";import"./button-CgaWukz0.js";import"./checkbox-field-item-DIMHcWM0.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-ChfRWXWy.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./loading-spinner-C52KNq6y.js";const I=C`.cre8-u-content-knockout-brand {
+import{a as C,b as c,A as y}from"./iframe-nwd_1gnU.js";import{s as _}from"./spread-D16Rn3WA.js";import{o as k}from"./if-defined-RYzTvKuT.js";import{C as z,n as o}from"./cre8-element-CaOpCq8p.js";import{r as x}from"./state-DZNbmwHN.js";import{n as v}from"./index.browser-BY9c7rfI.js";import"./remove-tag-DeV9CojL.js";import"./field-note-B7iNgXW2.js";import"./button-rmsX1TVb.js";import"./checkbox-field-item-C5vdtGYd.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-BvsTH4V8.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Dowz62UX.js";import"./loading-spinner-B7JDCfNK.js";const I=C`.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 */
 }
 
 /**
@@ -845,9 +853,9 @@ cre8-icon {
           color="neutral"
           shape="square"
           ?disabled="${this.disabled}"
-          @removeTagClicked="${()=>this._handleRemoveTagClick(e)}"
+          @remove-tag-click="${()=>this._handleRemoveTagClick(e)}"
         ></cre8-remove-tag>
-      </li>`):y}setPreselectedItemsinDropdown(){this.preselectedItems.forEach(e=>{this.selectedTagItems=this.selectedTagItems.concat(e)})}clearAllTags(){this.disabled||(this.dropdownOpen&&this.selectedTagItems.forEach(e=>{this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click()}),this.selectedTagItems=[],this.emitSelectedItems())}emitSelectedItems(){const e=new CustomEvent("selectedItemsChange",{detail:{selectedItems:this.selectedTagItems},bubbles:!0,composed:!0});this.dispatchEvent(e)}toggleDropDown(){this.dropdownOpen=!this.dropdownOpen}_handleOnClick(e){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const r=e.composedPath().includes(this.shadowRoot.host),l=this.renderRoot.querySelector(".cre8-c-multi-select__label"),a=this.renderRoot.querySelector(".cre8-c-multi-select__icons-wrapper"),d=this.shadowRoot?.querySelector(".cre8-c-multi-select__tag-wrapper"),n=this.shadowRoot?.querySelector(".cre8-c-multi-select__dropdown");r?!e.composedPath().includes(l)&&!e.composedPath().includes(d)&&!e.composedPath().includes(a)&&!e.composedPath().includes(n)&&!this.disabled&&this.toggleDropDown():this.dropdownOpen=!1}_handleListItemClick(e,r){e.target!==this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`)&&this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`).shadowRoot?.querySelector("input").click()}_handleDropdownItemInput(e,r){r.target.checked?this.selectedTagItems=this.selectedTagItems.concat(e):this.selectedTagItems=this.selectedTagItems.filter(a=>a!==e),this.emitSelectedItems()}async _handleRemoveTagClick(e){this.disabled||(this.selectedTagItems=this.selectedTagItems.filter(r=>r!==e),this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(),await this.updateComplete,this.emitSelectedItems())}dropdownArrowClick(){this.disabled||this.toggleDropDown()}_handleButtonToListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_handleListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_initializeAria(){this.fieldId=this.fieldId||v(),(this.fieldNote||this.slotNotEmpty("fieldNote"))&&(this.ariaDescribedBy=this.ariaDescribedBy||v()),(this.successNote||this.errorNote)&&(this.validationAriaDescribedBy=this.validationAriaDescribedBy||v())}_fieldNoteAria(){return this.validationAriaDescribedBy&&this.ariaDescribedBy?`${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`:this.validationAriaDescribedBy&&!this.ariaDescribedBy?this.validationAriaDescribedBy:this.ariaDescribedBy}_renderSuccessErrorFieldNote(){return this.successNote?c` <cre8-field-note
+      </li>`):y}setPreselectedItemsinDropdown(){this.preselectedItems.forEach(e=>{this.selectedTagItems=this.selectedTagItems.concat(e)})}clearAllTags(){this.disabled||(this.dropdownOpen&&this.selectedTagItems.forEach(e=>{this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click()}),this.selectedTagItems=[],this.emitSelectedItems())}emitSelectedItems(){const e=new CustomEvent("multi-select-change",{detail:{selectedItems:this.selectedTagItems},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}toggleDropDown(){this.dropdownOpen=!this.dropdownOpen}_handleOnClick(e){if(!this.shadowRoot?.host)throw Error("Could not determine navigation context during click handler");const r=e.composedPath().includes(this.shadowRoot.host),l=this.renderRoot.querySelector(".cre8-c-multi-select__label"),a=this.renderRoot.querySelector(".cre8-c-multi-select__icons-wrapper"),d=this.shadowRoot?.querySelector(".cre8-c-multi-select__tag-wrapper"),n=this.shadowRoot?.querySelector(".cre8-c-multi-select__dropdown");r?!e.composedPath().includes(l)&&!e.composedPath().includes(d)&&!e.composedPath().includes(a)&&!e.composedPath().includes(n)&&!this.disabled&&this.toggleDropDown():this.dropdownOpen=!1}_handleListItemClick(e,r){e.target!==this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`)&&this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`).shadowRoot?.querySelector("input").click()}_handleDropdownItemInput(e,r){r.target.checked?this.selectedTagItems=this.selectedTagItems.concat(e):this.selectedTagItems=this.selectedTagItems.filter(a=>a!==e),this.emitSelectedItems()}async _handleRemoveTagClick(e){this.disabled||(this.selectedTagItems=this.selectedTagItems.filter(r=>r!==e),this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(),await this.updateComplete,this.emitSelectedItems())}dropdownArrowClick(){this.disabled||this.toggleDropDown()}_handleButtonToListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_handleListKeydown(e){e.code==="Escape"&&(e.preventDefault(),this.toggleDropDown())}_initializeAria(){this.fieldId=this.fieldId||v(),(this.fieldNote||this.slotNotEmpty("fieldNote"))&&(this.ariaDescribedBy=this.ariaDescribedBy||v()),(this.successNote||this.errorNote)&&(this.validationAriaDescribedBy=this.validationAriaDescribedBy||v())}_fieldNoteAria(){return this.validationAriaDescribedBy&&this.ariaDescribedBy?`${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`:this.validationAriaDescribedBy&&!this.ariaDescribedBy?this.validationAriaDescribedBy:this.ariaDescribedBy}_renderSuccessErrorFieldNote(){return this.successNote?c` <cre8-field-note
         ?isSuccess=${this.isSuccess}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-multi-select__field-note-success"
@@ -924,7 +932,7 @@ cre8-icon {
       ${_(s)}
       .items=${s.items}
       .preselectedItems=${s.preselectedItems}
-    ></cre8-multi-select>`,parameters:{status:{type:"inProgress"},actions:{handles:["selectedItemsChange"]},docs:{story:{height:"350px"}}},argTypes:{},args:{id:"selectId",items:["Bagel","Burger","Boat","Beefstick","Bacon"],label:"Choose your favorite food:"}},m={args:{}},p=s=>c`
+    ></cre8-multi-select>`,parameters:{status:{type:"inProgress"},actions:{handles:["multi-select-change"]},docs:{story:{height:"350px"}}},argTypes:{},args:{id:"selectId",items:["Bagel","Burger","Boat","Beefstick","Bacon"],label:"Choose your favorite food:"}},m={args:{}},p=s=>c`
   <div style="width: 320px;">
     <cre8-multi-select
       ${_(s)}

package/dist/assets/{nav-container.stories-Be1YlegP.js → nav-container.stories-N7legDVk.js}

@@ -1,4 +1,4 @@
-import{a as o,b as a}from"./iframe-BNJP6ovU.js";import"./f-po-BdPzDRD-.js";import{s as d}from"./spread-CnPic3C2.js";import{C as s}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./_commonjsHelpers-DaWZu8wl.js";const m=o`.cre8-u-content-knockout-brand {
+import{a as o,b as a}from"./iframe-nwd_1gnU.js";import"./f-po-ByatXsWC.js";import{s as d}from"./spread-D16Rn3WA.js";import{C as m}from"./cre8-element-CaOpCq8p.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-RYzTvKuT.js";import"./_commonjsHelpers-DaWZu8wl.js";const s=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 */
 }
 
 /**
@@ -615,11 +623,11 @@ span.ripple {
   .cre8-c-nav-container {
     flex-direction: row;
   }
-}`,i=class i extends s{render(){const n=this.componentClassNames("cre8-c-nav-container",{});return a`
+}`,i=class i extends m{render(){const n=this.componentClassNames("cre8-c-nav-container",{});return a`
       <div class="${n}">
         <slot></slot>
       </div>
-    `}};i.styles=[m];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}>
+    `}};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.

package/dist/assets/{page-header.stories-BOVLQ0YF.js → page-header.stories-Cm-bhKlB.js}

@@ -1,4 +1,4 @@
-import{a as l,b as n}from"./iframe-BNJP6ovU.js";import{s as g}from"./spread-CnPic3C2.js";import{C as c,n as h}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const f=l`.cre8-u-content-knockout-brand {
+import{a as l,b as n}from"./iframe-nwd_1gnU.js";import{s as g}from"./spread-D16Rn3WA.js";import{C as c,n as h}from"./cre8-element-CaOpCq8p.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 */
 }
 
 /**

package/dist/assets/{pagination.stories-D62sa_1K.js → pagination.stories-Coox3PDk.js}

@@ -1,4 +1,4 @@
-import{a as R,b as a,A as c,g as L}from"./iframe-BNJP6ovU.js";import{o as u}from"./if-defined-Bxnzk64Q.js";import{C as $,n as o}from"./cre8-element-B35i4Lyg.js";import{r as w}from"./state-DkQhleoO.js";import{r as S}from"./query-all-CK69__1O.js";import{C as z}from"./button-CgaWukz0.js";import{w as N}from"./decorator-iVSD-Llo.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./query-BpjciUlk.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";const C={md:768,lg:960},P=(p="768")=>!window.matchMedia(`(min-width: ${p}px)`).matches,T=R`.cre8-u-content-knockout-brand {
+import{a as R,b as a,A as p,g as L}from"./iframe-nwd_1gnU.js";import{o as u}from"./if-defined-RYzTvKuT.js";import{C as $,n as o}from"./cre8-element-CaOpCq8p.js";import{r as w}from"./state-DZNbmwHN.js";import{r as S}from"./query-all-CK69__1O.js";import{C as z}from"./button-rmsX1TVb.js";import{w as N}from"./decorator-iVSD-Llo.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./query-BpjciUlk.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";import"./loading-spinner-B7JDCfNK.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";const C={md:768,lg:960},P=(g="768")=>!window.matchMedia(`(min-width: ${g}px)`).matches,T=R`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -596,13 +604,13 @@ span.ripple {
   text-decoration: var(--cre8-typography-label-small-text-decoration);
   text-transform: var(--cre8-typography-label-small-text-transform);
   padding: 0.5rem;
-}`;var I=Object.defineProperty,m=(p,e,t,n)=>{for(var i=void 0,s=p.length-1,d;s>=0;s--)(d=p[s])&&(i=d(e,t,i)||i);return i&&I(e,t,i),i};const v=class v extends ${constructor(){super(...arguments),this.currentPage=1,this.display="default"}get _totalPages(){return Math.ceil(this.totalResults/this.pageSize)}render(){const e=this.componentClassNames("cre8-c-page-counter",{});return a`
+}`;var I=Object.defineProperty,m=(g,e,t,n)=>{for(var i=void 0,s=g.length-1,d;s>=0;s--)(d=g[s])&&(i=d(e,t,i)||i);return i&&I(e,t,i),i};const v=class v extends ${constructor(){super(...arguments),this.currentPage=1,this.display="default"}get _totalPages(){return Math.ceil(this.totalResults/this.pageSize)}render(){const e=this.componentClassNames("cre8-c-page-counter",{});return a`
       <div class='${e}'>
         <span class="cre8-c-pagination__text" aria-live="polite">
           ${!this.display||this.display==="default"?a`${this.currentPage}`:a`${this.currentPage} of ${this._totalPages}`}
         </span>
       </div>
-    `}};v.styles=[T];let g=v;m([o({type:Boolean,reflect:!0})],g.prototype,"rangeVariant");m([o()],g.prototype,"currentPage");m([o()],g.prototype,"totalResults");m([o()],g.prototype,"pageSize");m([o()],g.prototype,"display");customElements.get("cre8-page-counter")===void 0&&customElements.define("cre8-page-counter",g);const B=R`.cre8-u-content-knockout-brand {
+    `}};v.styles=[T];let c=v;m([o({type:Boolean,reflect:!0})],c.prototype,"rangeVariant");m([o()],c.prototype,"currentPage");m([o()],c.prototype,"totalResults");m([o()],c.prototype,"pageSize");m([o()],c.prototype,"display");customElements.get("cre8-page-counter")===void 0&&customElements.define("cre8-page-counter",c);const B=R`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -976,6 +984,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1148,6 +1160,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1246,7 +1262,7 @@ span.ripple {
 .cre8-c-pagination [aria-disabled=true] {
   fill: var(--cre8-color-content-default);
   --cre8-color-button-tertiary-content: var(--cre8-color-content-default);
-}`;var F=Object.defineProperty,O=Object.getOwnPropertyDescriptor,l=(p,e,t,n)=>{for(var i=n>1?void 0:n?O(e,t):e,s=p.length-1,d;s>=0;s--)(d=p[s])&&(i=(n?d(e,t,i):d(i))||i);return n&&i&&F(e,t,i),i};const V=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+}`;var F=Object.defineProperty,O=Object.getOwnPropertyDescriptor,l=(g,e,t,n)=>{for(var i=n>1?void 0:n?O(e,t):e,s=g.length-1,d;s>=0;s--)(d=g[s])&&(i=(n?d(e,t,i):d(i))||i);return n&&i&&F(e,t,i),i};const V=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.1508 14.7578C12.2184 14.8254 12.272 14.9056 12.3085 14.9939C12.3451 15.0822 12.3639 15.1768 12.3639 15.2724C12.3639 15.3679 12.3451 15.4625 12.3085 15.5508C12.272 15.6391 12.2184 15.7193 12.1508 15.7869C12.0832 15.8544 12.003 15.908 11.9147 15.9446C11.8265 15.9812 11.7318 16 11.6363 16C11.5407 16 11.4461 15.9812 11.3578 15.9446C11.2695 15.908 11.1893 15.8544 11.1218 15.7869L3.8494 8.51452C3.78178 8.44698 3.72814 8.36677 3.69154 8.27849C3.65495 8.1902 3.63611 8.09557 3.63611 8C3.63611 7.90443 3.65495 7.8098 3.69154 7.72151C3.72814 7.63323 3.78178 7.55302 3.8494 7.48548L11.1218 0.213121C11.2582 0.0766618 11.4433 -3.80414e-09 11.6363 0C11.8293 3.80414e-09 12.0143 0.0766618 12.1508 0.213121C12.2873 0.34958 12.3639 0.534658 12.3639 0.72764C12.3639 0.920622 12.2873 1.1057 12.1508 1.24216L5.39205 8L12.1508 14.7578Z"/>
 </svg>
 `,M=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -1255,13 +1271,13 @@ span.ripple {
 `,X=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.51443 8.51443L1.24215 15.7867C1.10569 15.9232 0.920613 15.9998 0.727633 15.9998C0.534653 15.9998 0.349576 15.9232 0.213119 15.7867C0.076661 15.6503 3.8041e-09 15.4652 0 15.2722C-3.8041e-09 15.0792 0.076661 14.8941 0.213119 14.7577L6.9718 7.99992L0.213119 1.24215C0.076661 1.10569 0 0.920613 0 0.727633C0 0.534653 0.076661 0.349576 0.213119 0.213119C0.349576 0.076661 0.534653 0 0.727633 0C0.920613 0 1.10569 0.076661 1.24215 0.213119L8.51443 7.4854C8.58205 7.55294 8.63569 7.63315 8.67228 7.72143C8.70888 7.80972 8.72772 7.90435 8.72772 7.99992C8.72772 8.09549 8.70888 8.19012 8.67228 8.2784C8.63569 8.36669 8.58205 8.44689 8.51443 8.51443ZM15.7867 7.4854L8.51443 0.213119C8.37797 0.076661 8.1929 0 7.99992 0C7.80694 0 7.62186 0.076661 7.4854 0.213119C7.34894 0.349576 7.27228 0.534653 7.27228 0.727633C7.27228 0.920613 7.34894 1.10569 7.4854 1.24215L14.2441 7.99992L7.4854 14.7577C7.34894 14.8941 7.27228 15.0792 7.27228 15.2722C7.27228 15.4652 7.34894 15.6503 7.4854 15.7867C7.62186 15.9232 7.80694 15.9998 7.99992 15.9998C8.1929 15.9998 8.37797 15.9232 8.51443 15.7867L15.7867 8.51443C15.8543 8.44689 15.908 8.36669 15.9446 8.2784C15.9812 8.19012 16 8.09549 16 7.99992C16 7.90435 15.9812 7.80972 15.9446 7.72143C15.908 7.63315 15.8543 7.55294 15.7867 7.4854Z"/>
 </svg>
-`,E=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`,A=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.1506 8.51452L4.87827 15.7869C4.8107 15.8544 4.73049 15.908 4.6422 15.9446C4.55392 15.9812 4.4593 16 4.36375 16C4.26819 16 4.17357 15.9812 4.08529 15.9446C3.99701 15.908 3.9168 15.8544 3.84923 15.7869C3.78166 15.7193 3.72806 15.6391 3.6915 15.5508C3.65493 15.4625 3.63611 15.3679 3.63611 15.2724C3.63611 15.1768 3.65493 15.0822 3.6915 14.9939C3.72806 14.9056 3.78166 14.8254 3.84923 14.7578L10.608 8L3.84923 1.24216C3.71277 1.1057 3.63611 0.920622 3.63611 0.72764C3.63611 0.534658 3.71277 0.34958 3.84923 0.213121C3.98569 0.0766618 4.17077 1.43783e-09 4.36375 0C4.55673 -1.43783e-09 4.74181 0.0766618 4.87827 0.213121L12.1506 7.48548C12.2182 7.55302 12.2719 7.63323 12.3085 7.72151C12.3451 7.8098 12.3639 7.90443 12.3639 8C12.3639 8.09557 12.3451 8.1902 12.3085 8.27849C12.2719 8.36677 12.2182 8.44698 12.1506 8.51452Z"/>
 </svg>
 `,k=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 5.71423C7.54793 5.71423 7.10601 5.84829 6.73013 6.09945C6.35424 6.3506 6.06128 6.70758 5.88828 7.12524C5.71528 7.5429 5.67001 8.00248 5.75821 8.44587C5.8464 8.88925 6.06409 9.29653 6.38376 9.61619C6.70342 9.93585 7.11069 10.1535 7.55408 10.2417C7.99747 10.3299 8.45705 10.2847 8.87471 10.1117C9.29237 9.93867 9.64934 9.64571 9.9005 9.26982C10.1517 8.89394 10.2857 8.45202 10.2857 7.99995C10.2857 7.39374 10.0449 6.81236 9.61624 6.3837C9.18759 5.95505 8.60621 5.71423 8 5.71423ZM8 9.1428C7.77396 9.1428 7.55301 9.07578 7.36506 8.9502C7.17712 8.82462 7.03064 8.64613 6.94414 8.4373C6.85764 8.22847 6.83501 7.99868 6.8791 7.77699C6.9232 7.55529 7.03205 7.35166 7.19188 7.19183C7.35171 7.03199 7.55535 6.92315 7.77704 6.87905C7.99873 6.83495 8.22852 6.85759 8.43735 6.94409C8.64618 7.03059 8.82467 7.17707 8.95025 7.36501C9.07583 7.55295 9.14286 7.77391 9.14286 7.99995C9.14286 8.30305 9.02245 8.59374 8.80812 8.80807C8.59379 9.0224 8.30311 9.1428 8 9.1428ZM2.28572 5.71423C1.83364 5.71423 1.39172 5.84829 1.01584 6.09945C0.639957 6.3506 0.346991 6.70758 0.173991 7.12524C0.000990357 7.5429 -0.0442744 8.00248 0.0439204 8.44587C0.132115 8.88925 0.349808 9.29653 0.669471 9.61619C0.989134 9.93585 1.39641 10.1535 1.83979 10.2417C2.28318 10.3299 2.74276 10.2847 3.16042 10.1117C3.57808 9.93867 3.93506 9.64571 4.18622 9.26982C4.43737 8.89394 4.57143 8.45202 4.57143 7.99995C4.57143 7.39374 4.33061 6.81236 3.90196 6.3837C3.4733 5.95505 2.89192 5.71423 2.28572 5.71423ZM2.28572 9.1428C2.05968 9.1428 1.83872 9.07578 1.65078 8.9502C1.46284 8.82462 1.31635 8.64613 1.22985 8.4373C1.14335 8.22847 1.12072 7.99868 1.16482 7.77699C1.20891 7.55529 1.31776 7.35166 1.47759 7.19183C1.63742 7.03199 1.84106 6.92315 2.06275 6.87905C2.28445 6.83495 2.51424 6.85759 2.72307 6.94409C2.9319 7.03059 3.11039 7.17707 3.23597 7.36501C3.36154 7.55295 3.42857 7.77391 3.42857 7.99995C3.42857 8.30305 3.30816 8.59374 3.09384 8.80807C2.87951 9.0224 2.58882 9.1428 2.28572 9.1428ZM13.7143 5.71423C13.2622 5.71423 12.8203 5.84829 12.4444 6.09945C12.0685 6.3506 11.7756 6.70758 11.6026 7.12524C11.4296 7.5429 11.3843 8.00248 11.4725 8.44587C11.5607 8.88925 11.7784 9.29653 12.098 9.61619C12.4177 9.93585 12.825 10.1535 13.2684 10.2417C13.7118 10.3299 14.1713 10.2847 14.589 10.1117C15.0066 9.93867 15.3636 9.64571 15.6148 9.26982C15.8659 8.89394 16 8.45202 16 7.99995C16 7.39374 15.7592 6.81236 15.3305 6.3837C14.9019 5.95505 14.3205 5.71423 13.7143 5.71423ZM13.7143 9.1428C13.4882 9.1428 13.2673 9.07578 13.0793 8.9502C12.8914 8.82462 12.7449 8.64613 12.6584 8.4373C12.5719 8.22847 12.5493 7.99868 12.5934 7.77699C12.6375 7.55529 12.7463 7.35166 12.9062 7.19183C13.066 7.03199 13.2696 6.92315 13.4913 6.87905C13.713 6.83495 13.9428 6.85759 14.1516 6.94409C14.3605 7.03059 14.539 7.17707 14.6645 7.36501C14.7901 7.55295 14.8571 7.77391 14.8571 7.99995C14.8571 8.30305 14.7367 8.59374 14.5224 8.80807C14.3081 9.0224 14.0174 9.1428 13.7143 9.1428Z"/>
 </svg>
-`,y=class y extends ${constructor(){super(...arguments),this._currentPage=99,this._pageSize=10,this.visiblePages=5,this._handleKeydown=(e,t)=>n=>{n.code==="Enter"&&this._goToPage(e,t)},this._goToPage=(e,t)=>()=>{const n=this._currentPage;let i;this.buttons.forEach(s=>{const d=new z;return d.hideText&&d.text===t&&(i=d,i.shadowRoot.querySelector(".cre8-c-button").blur()),null}),this._currentPage=e,this.currentPage=this._currentPage,this.requestUpdate("currentPage",n),this.dispatchEvent(new CustomEvent("pagination.click",{detail:{buttonName:t??this.currentPage.toString(),value:this.currentPage}}))}}get pageSize(){return this._pageSize}set pageSize(e){const t=this._pageSize;this._pageSize=e,this.requestUpdate("pageSize",t)}get currentPage(){return this._currentPage}set currentPage(e){const t=this._currentPage;this._currentPage=e,this.requestUpdate("currentPage",t)}connectedCallBack(){super.connectedCallback()}get maxVisiblePages(){const e={md:5};return P(C.lg.toString())?P(C.md.toString())?0:Math.min(e.md,this.visiblePages):this.visiblePages}get totalPages(){return Math.ceil(this.totalResults/this.pageSize)}get hasNoPreviousPage(){return this._currentPage<=1}get hasNoNextPage(){return this._currentPage>=this.totalPages}_onHandleResize(){this.requestUpdate()}handleResize(){this._onHandleResize.bind(this)}get pageRange(){const e=Math.floor(this.maxVisiblePages/2);let t=this.currentPage-e;t=Math.min(t,this.totalPages-this.maxVisiblePages+1),t=Math.max(t,1);const n=Math.min(t+this.maxVisiblePages-1,this.totalPages);return[...Array(this.totalPages)].map((i,s)=>s+1).slice(t-1,n)}async firstUpdated(){if(await this.updateComplete,this._pageSize!==this.pageSize){const e=this._pageSize;this._pageSize=this.pageSize,this.requestUpdate("pageSize",e)}if(this.windowWidth=window.innerWidth,window.addEventListener("resize",()=>{if(this.windowWidth!==window.innerWidth){const e=this.windowWidth;this.windowWidth=window.innerWidth,this.handleResize(),this.requestUpdate("isResponsive",e)}}),this._currentPage!==this.currentPage){const e=this._currentPage;this._currentPage=this.currentPage,this.requestUpdate("currentPage",e)}}disconnectedCallback(){window.removeEventListener("resize",this.handleResize),super.disconnectedCallback()}displayTypes(){return a`<cre8-page-counter
+`,y=class y extends ${constructor(){super(...arguments),this._currentPage=99,this._pageSize=10,this.visiblePages=5,this._handleKeydown=(e,t)=>n=>{n.code==="Enter"&&this._goToPage(e,t)},this._goToPage=(e,t)=>()=>{const n=this._currentPage;let i;this.buttons.forEach(s=>{const d=new z;return d.hideText&&d.text===t&&(i=d,i.shadowRoot.querySelector(".cre8-c-button").blur()),null}),this._currentPage=e,this.currentPage=this._currentPage,this.requestUpdate("currentPage",n),this.dispatchWithLegacyAlias(new CustomEvent("pagination-change",{detail:{buttonName:t??this.currentPage.toString(),value:this.currentPage}}))}}get pageSize(){return this._pageSize}set pageSize(e){const t=this._pageSize;this._pageSize=e,this.requestUpdate("pageSize",t)}get currentPage(){return this._currentPage}set currentPage(e){const t=this._currentPage;this._currentPage=e,this.requestUpdate("currentPage",t)}connectedCallBack(){super.connectedCallback()}get maxVisiblePages(){const e={md:5};return P(C.lg.toString())?P(C.md.toString())?0:Math.min(e.md,this.visiblePages):this.visiblePages}get totalPages(){return Math.ceil(this.totalResults/this.pageSize)}get hasNoPreviousPage(){return this._currentPage<=1}get hasNoNextPage(){return this._currentPage>=this.totalPages}_onHandleResize(){this.requestUpdate()}handleResize(){this._onHandleResize.bind(this)}get pageRange(){const e=Math.floor(this.maxVisiblePages/2);let t=this.currentPage-e;t=Math.min(t,this.totalPages-this.maxVisiblePages+1),t=Math.max(t,1);const n=Math.min(t+this.maxVisiblePages-1,this.totalPages);return[...Array(this.totalPages)].map((i,s)=>s+1).slice(t-1,n)}async firstUpdated(){if(await this.updateComplete,this._pageSize!==this.pageSize){const e=this._pageSize;this._pageSize=this.pageSize,this.requestUpdate("pageSize",e)}if(this.windowWidth=window.innerWidth,window.addEventListener("resize",()=>{if(this.windowWidth!==window.innerWidth){const e=this.windowWidth;this.windowWidth=window.innerWidth,this.handleResize(),this.requestUpdate("isResponsive",e)}}),this._currentPage!==this.currentPage){const e=this._currentPage;this._currentPage=this.currentPage,this.requestUpdate("currentPage",e)}}disconnectedCallback(){window.removeEventListener("resize",this.handleResize),super.disconnectedCallback()}displayTypes(){return a`<cre8-page-counter
               currentPage=${this.currentPage}
               style="display:${this.display==="compact"?"flex":"none"};"
               totalResults=${this.totalResults}
@@ -1271,7 +1287,7 @@ span.ripple {
       aria-label="pagination"
       class=${e}>
         <slot></slot>
-        ${this.hideLastAndFirstButtons?c:a` <cre8-button
+        ${this.hideLastAndFirstButtons?p:a` <cre8-button
               variant="tertiary"
               size="sm"
               text=""
@@ -1323,7 +1339,7 @@ span.ripple {
             className="cre8-c-pagination__icon"
             slot="before" svg=${k}
             size="24">
-            </cre8-icon>`:c}
+            </cre8-icon>`:p}
             ${this.pageRange.map(t=>t===this.currentPage?a`<cre8-button variant="tertiary" tab-index="-1" text="${t}"  class="icon-only" size="sm" id="current"></cre8-button>`:a`<cre8-button
                       variant="tertiary"
                       size="sm"
@@ -1338,7 +1354,7 @@ span.ripple {
             className="cre8-c-pagination__icon"
             slot="before" svg=${k}
             size="24">
-            </cre8-icon>`:c}`:c}
+            </cre8-icon>`:p}`:p}
         <cre8-button
           variant="tertiary"
           size="sm"
@@ -1355,13 +1371,13 @@ span.ripple {
             <cre8-icon
             aria-label="Next Page"
             className="cre8-c-pagination__icon"
-            slot="before" svg=${E}
+            slot="before" svg=${A}
             size="24">
             </cre8-icon>
           </span>
         </cre8-button>
 
-        ${this.hideLastAndFirstButtons?c:a` <cre8-button
+        ${this.hideLastAndFirstButtons?p:a` <cre8-button
               variant="tertiary"
               size="sm"
               hideText
@@ -1385,7 +1401,7 @@ span.ripple {
               </span>
             </cre8-button>`}
 
-      </nav>`}};y.styles=[B],y.elementDefinitions={"cre8-button":z};let r=y;l([w()],r.prototype,"_currentPage",2);l([o({reflect:!0,type:Number})],r.prototype,"totalResults",2);l([o({type:Number,reflect:!0})],r.prototype,"pageSize",1);l([w()],r.prototype,"_pageSize",2);l([o({reflect:!0,type:Number})],r.prototype,"visiblePages",2);l([o({type:String,reflect:!0})],r.prototype,"display",2);l([w()],r.prototype,"windowWidth",2);l([S("cre8-button")],r.prototype,"buttons",2);l([o({type:Boolean,reflect:!0})],r.prototype,"hideLastAndFirstButtons",2);l([o({reflect:!0,type:Number})],r.prototype,"currentPage",1);customElements.get("cre8-pagination")===void 0&&customElements.define("cre8-pagination",r);const{args:A,argTypes:_,template:Z}=L("cre8-pagination"),at={title:"cre8 Components/Pagination",component:"cre8-pagination",args:{...A,currentPage:1,totalResults:300,pageSize:10,visiblePages:5,display:"default"},argTypes:{..._,display:{..._.display,options:["compact","icon-only","range","default"],control:{type:"select"}}},parameters:{status:{type:"inProgress"},actions:{handles:["pagination.click","button.handleOnBlur","pagination.keydown"]}},decorators:[N],render:p=>Z(p)},h={args:{display:"default",currentPage:1,totalResults:300,pageSize:25}},f={args:{display:"compact",currentPage:1,totalResults:43,pageSize:10}},b={args:{display:"icon-only"}},x={args:{display:"default",currentPage:1,totalResults:300,pageSize:25,hideLastAndFirstButtons:!0}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+      </nav>`}};y.styles=[B],y.elementDefinitions={"cre8-button":z};let r=y;l([w()],r.prototype,"_currentPage",2);l([o({reflect:!0,type:Number})],r.prototype,"totalResults",2);l([o({type:Number,reflect:!0})],r.prototype,"pageSize",1);l([w()],r.prototype,"_pageSize",2);l([o({reflect:!0,type:Number})],r.prototype,"visiblePages",2);l([o({type:String,reflect:!0})],r.prototype,"display",2);l([w()],r.prototype,"windowWidth",2);l([S("cre8-button")],r.prototype,"buttons",2);l([o({type:Boolean,reflect:!0})],r.prototype,"hideLastAndFirstButtons",2);l([o({reflect:!0,type:Number})],r.prototype,"currentPage",1);customElements.get("cre8-pagination")===void 0&&customElements.define("cre8-pagination",r);const{args:E,argTypes:_,template:Z}=L("cre8-pagination"),at={title:"cre8 Components/Pagination",component:"cre8-pagination",args:{...E,currentPage:1,totalResults:300,pageSize:10,visiblePages:5,display:"default"},argTypes:{..._,display:{..._.display,options:["compact","icon-only","range","default"],control:{type:"select"}}},parameters:{status:{type:"inProgress"},actions:{handles:["pagination-change","button.handleOnBlur","pagination.keydown"]}},decorators:[N],render:g=>Z(g)},h={args:{display:"default",currentPage:1,totalResults:300,pageSize:25}},f={args:{display:"compact",currentPage:1,totalResults:43,pageSize:10}},b={args:{display:"icon-only"}},x={args:{display:"default",currentPage:1,totalResults:300,pageSize:25,hideLastAndFirstButtons:!0}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   args: {
     display: 'default',
     currentPage: 1,

package/dist/assets/{percent-bar.stories-CYi4El7T.js → percent-bar.stories-DOJJUwvS.js}

@@ -1,4 +1,4 @@
-import{a as x,A as b,b as l}from"./iframe-BNJP6ovU.js";import{s as y}from"./spread-CnPic3C2.js";import{C as v,n as c}from"./cre8-element-B35i4Lyg.js";import"./button-CgaWukz0.js";import"./text-passage-xQVosjOr.js";import"./progress-meter-Dit59091.js";import"./link-CRE0Eqdo.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-Bxnzk64Q.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";import"./index.browser-BY9c7rfI.js";const w=x`.cre8-u-content-knockout-brand {
+import{a as x,A as b,b as l}from"./iframe-nwd_1gnU.js";import{s as y}from"./spread-D16Rn3WA.js";import{C as v,n as c}from"./cre8-element-CaOpCq8p.js";import"./button-rmsX1TVb.js";import"./text-passage-C6jDH-er.js";import"./progress-meter-Ce6ogPi2.js";import"./link-vQ01kiW8.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-RYzTvKuT.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";import"./loading-spinner-B7JDCfNK.js";import"./index.browser-BY9c7rfI.js";const w=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 */
 }
 
 /**
@@ -611,7 +619,7 @@ span.ripple {
 }`;var z=Object.defineProperty,g=(a,e,h,_)=>{for(var t=void 0,p=a.length-1,f;p>=0;p--)(f=a[p])&&(t=f(e,h,t)||t);return t&&z(e,h,t),t};const k=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.7867 12.1506C15.7192 12.2183 15.639 12.2719 15.5507 12.3085C15.4624 12.3451 15.3678 12.3639 15.2722 12.3639C15.1766 12.3639 15.082 12.3451 14.9937 12.3085C14.9054 12.2719 14.8252 12.2183 14.7577 12.1506L7.99992 5.39197L1.24215 12.1506C1.10569 12.2871 0.920613 12.3638 0.727633 12.3638C0.534652 12.3638 0.349576 12.2871 0.213119 12.1506C0.076661 12.0142 3.8041e-09 11.8291 0 11.6361C-3.8041e-09 11.4432 0.076661 11.2581 0.213119 11.1216L7.4854 3.84933C7.55294 3.78172 7.63315 3.72808 7.72143 3.69148C7.80972 3.65488 7.90435 3.63605 7.99992 3.63605C8.09548 3.63605 8.19012 3.65488 8.2784 3.69148C8.36668 3.72808 8.44689 3.78172 8.51443 3.84933L15.7867 11.1216C15.8543 11.1892 15.908 11.2694 15.9446 11.3576C15.9812 11.4459 16 11.5406 16 11.6361C16 11.7317 15.9812 11.8263 15.9446 11.9146C15.908 12.0029 15.8543 12.0831 15.7867 12.1506Z"/>
 </svg>
-`,u=class u extends v{_handleClick(e){this.dispatchEvent(new Event("leftActionButtonClick",e))}fractionAsPercent(){return Math.round(this.value/this.max*100)}isFirstStep(){return this.value>1}render(){const e=this.componentClassNames("cre8-c-percent-bar",{});return l`
+`,u=class u extends v{_handleClick(e){this.dispatchWithLegacyAlias(new Event("percent-bar-left-action-click",e))}fractionAsPercent(){return Math.round(this.value/this.max*100)}isFirstStep(){return this.value>1}render(){const e=this.componentClassNames("cre8-c-percent-bar",{});return l`
       <div class="${e}">
           <div class="cre8-c-percent-bar__controls">
               <div lass="cre8-c-percent-bar__left-controls">
@@ -640,7 +648,7 @@ span.ripple {
           max="${this.max}"
         ></cre8-progress-meter>
       </div>
-    `}};u.styles=[w];let r=u;g([c()],r.prototype,"value");g([c()],r.prototype,"max");g([c({type:Boolean,reflect:!0})],r.prototype,"disableActionLeft");customElements.get("cre8-percent-bar")===void 0&&customElements.define("cre8-percent-bar",r);const D={title:"In Development/Percent Bar",component:"cre8-percent-bar",render:a=>l`<cre8-percent-bar ${y(a)}></cre8-percent-bar>`,parameters:{status:{type:"inProgress"},actions:{handles:["dropdown-item-selected"]}},argTypes:{max:{control:"number"},value:{control:"number"}}},i={args:{value:"2",max:"10"}},n={args:{value:"1",max:"10"}},o={args:{value:"1",max:"3"}},s={args:{value:"5",max:"10"}},d={args:{value:"10",max:"10"}},m={args:{value:"2",max:"10",disableActionLeft:!0}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+    `}};u.styles=[w];let r=u;g([c()],r.prototype,"value");g([c()],r.prototype,"max");g([c({type:Boolean,reflect:!0})],r.prototype,"disableActionLeft");customElements.get("cre8-percent-bar")===void 0&&customElements.define("cre8-percent-bar",r);const D={title:"In Development/Percent Bar",component:"cre8-percent-bar",render:a=>l`<cre8-percent-bar ${y(a)}></cre8-percent-bar>`,parameters:{status:{type:"inProgress"},actions:{handles:["percent-bar-left-action-click"]}},argTypes:{max:{control:"number"},value:{control:"number"}}},i={args:{value:"2",max:"10"}},n={args:{value:"1",max:"10"}},o={args:{value:"1",max:"3"}},s={args:{value:"5",max:"10"}},d={args:{value:"10",max:"10"}},m={args:{value:"2",max:"10",disableActionLeft:!0}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   args: {
     value: '2',
     max: '10'

package/dist/assets/{popover.stories-B9O8F4yv.js → popover.stories-CNa_bU0v.js}

@@ -1,4 +1,4 @@
-import{a as A,A as T,b as i,o as c}from"./iframe-BNJP6ovU.js";import{s as O}from"./spread-CnPic3C2.js";import{w as C}from"./decorator-iVSD-Llo.js";import"./f-po-BdPzDRD-.js";import"./button-CgaWukz0.js";import{C as B,n}from"./cre8-element-B35i4Lyg.js";import{e as k}from"./query-BpjciUlk.js";import{o as P}from"./query-assigned-elements-43hYArgI.js";import"./heading-Dbka33DK.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const S=A`.cre8-u-content-knockout-brand {
+import{a as A,A as T,b as i,o as c}from"./iframe-nwd_1gnU.js";import{s as O}from"./spread-D16Rn3WA.js";import{w as C}from"./decorator-iVSD-Llo.js";import"./f-po-ByatXsWC.js";import"./button-rmsX1TVb.js";import{C as B,n}from"./cre8-element-CaOpCq8p.js";import{e as k}from"./query-BpjciUlk.js";import{o as P}from"./query-assigned-elements-43hYArgI.js";import"./heading-ByebtBvm.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./if-defined-RYzTvKuT.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";import"./loading-spinner-B7JDCfNK.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const S=A`.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 */
 }
 
 /**
@@ -763,7 +771,7 @@ span.ripple {
 .cre8-c-popover__footer {
   display: flex;
   gap: 1rem;
-}`;var E=Object.defineProperty,o=(d,e,t,s)=>{for(var a=void 0,w=d.length-1,z;w>=0;w--)(z=d[w])&&(a=z(e,t,a)||a);return a&&E(e,t,a),a};const _=class _ extends B{constructor(){super(...arguments),this.handleOnClickOutside=e=>{if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine panel context during click handler");const t=e.composedPath().includes(this.shadowRoot.host);e.target===document.querySelector("html")&&e.clientX>=document.documentElement.offsetWidth||this.isActive&&!t&&this._toggleActive()},this.removeActiveOnScroll=()=>{if(this.isActive&&!this.isVisibleOnScroll){const e=this._Cre8PopoverPanel.getBoundingClientRect();this._Cre8Popover.clientHeight+e.height+e.top<window.innerHeight&&this._toggleActive()}},this.removeActive=()=>{this.isActive&&this._toggleActive()}}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),globalThis.window.addEventListener("resize",this.removeActive),globalThis.window.addEventListener("scroll",this.removeActiveOnScroll),globalThis.window.addEventListener("orientationchange",this.removeActive),globalThis.document.addEventListener("mousedown",this.handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),globalThis.window.removeEventListener("resize",this.removeActive),globalThis.window.removeEventListener("scroll",this.removeActiveOnScroll),globalThis.window.removeEventListener("orientationchange",this.removeActive),globalThis.document.removeEventListener("mousedown",this.handleOnClickOutside,!1)}firstUpdated(){this.addAria()}addAria(){let e;this._Cre8PopoverTrigger[0].tagName==="CRE8-BUTTON"?(e=this._Cre8PopoverTrigger[0],e.buttonAriaExpanded=this.isActive?this.isActive:!1):(e=this._Cre8PopoverTrigger[0],e.setAttribute("aria-expanded",`${this.isActive?this.isActive:!1}`),e.setAttribute("type","button"))}dynamicPosition(){if(this.isDynamic&&this._Cre8PopoverPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8PopoverPanel.getBoundingClientRect();t.left<0&&(this.position=this.isRTL?"left":"right"),t.right>=e.width&&(this.position=this.isRTL?"right":"left"),t.top<0&&t.left>0&&t.right<e.width&&(this.position=null),t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_toggleActive(){this.isActive=!this.isActive,this.addAria(),this.isActive?(requestAnimationFrame(()=>{this.dynamicPosition()}),this.dispatchEvent(new CustomEvent("open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchEvent(new CustomEvent("close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}_handleKeydown(e){e.key==="Escape"&&this.isActive===!0?this._toggleActive():e.key==="Tab"&&this._handleTabNavigation(e)}_handleTabNavigation(e){this.isActive&&this._navigateInsidePopover(e)}_navigateInsidePopover(e){const t=this._getFocusableElements();if(t.length===0){this._closePopoverAndFocusTrigger(e);return}const s=t[t.length-1];document.activeElement===s&&(this._closePopoverAndFocusTrigger(e),e.preventDefault())}_getFocusableElements(){return[...Array.from(this._Cre8PopoverFooter)]}_closePopoverAndFocusTrigger(e){this._toggleActive(),e.preventDefault()}render(){const e=this.componentClassNames("cre8-c-popover",{"cre8-c-popover--top":this.position==="top","cre8-c-popover--left":this.position==="left","cre8-c-popover--right":this.position==="right","cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return i`
+}`;var L=Object.defineProperty,o=(d,e,t,s)=>{for(var a=void 0,w=d.length-1,z;w>=0;w--)(z=d[w])&&(a=z(e,t,a)||a);return a&&L(e,t,a),a};const _=class _ extends B{constructor(){super(...arguments),this.handleOnClickOutside=e=>{if(!this.isActive)return;if(!this.shadowRoot?.host)throw Error("Could not determine panel context during click handler");const t=e.composedPath().includes(this.shadowRoot.host);e.target===document.querySelector("html")&&e.clientX>=document.documentElement.offsetWidth||this.isActive&&!t&&this._toggleActive()},this.removeActiveOnScroll=()=>{if(this.isActive&&!this.isVisibleOnScroll){const e=this._Cre8PopoverPanel.getBoundingClientRect();this._Cre8Popover.clientHeight+e.height+e.top<window.innerHeight&&this._toggleActive()}},this.removeActive=()=>{this.isActive&&this._toggleActive()}}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),globalThis.window.addEventListener("resize",this.removeActive),globalThis.window.addEventListener("scroll",this.removeActiveOnScroll),globalThis.window.addEventListener("orientationchange",this.removeActive),globalThis.document.addEventListener("mousedown",this.handleOnClickOutside,!1)}disconnectedCallback(){super.disconnectedCallback(),globalThis.window.removeEventListener("resize",this.removeActive),globalThis.window.removeEventListener("scroll",this.removeActiveOnScroll),globalThis.window.removeEventListener("orientationchange",this.removeActive),globalThis.document.removeEventListener("mousedown",this.handleOnClickOutside,!1)}firstUpdated(){this.addAria()}addAria(){let e;this._Cre8PopoverTrigger[0].tagName==="CRE8-BUTTON"?(e=this._Cre8PopoverTrigger[0],e.buttonAriaExpanded=this.isActive?this.isActive:!1):(e=this._Cre8PopoverTrigger[0],e.setAttribute("aria-expanded",`${this.isActive?this.isActive:!1}`),e.setAttribute("type","button"))}dynamicPosition(){if(this.isDynamic&&this._Cre8PopoverPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8PopoverPanel.getBoundingClientRect();t.left<0&&(this.position=this.isRTL?"left":"right"),t.right>=e.width&&(this.position=this.isRTL?"right":"left"),t.top<0&&t.left>0&&t.right<e.width&&(this.position=null),t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_toggleActive(){this.isActive=!this.isActive,this.addAria(),this.isActive?(requestAnimationFrame(()=>{this.dynamicPosition()}),this.dispatchWithLegacyAlias(new CustomEvent("popover-open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchWithLegacyAlias(new CustomEvent("popover-close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}_handleKeydown(e){e.key==="Escape"&&this.isActive===!0?this._toggleActive():e.key==="Tab"&&this._handleTabNavigation(e)}_handleTabNavigation(e){this.isActive&&this._navigateInsidePopover(e)}_navigateInsidePopover(e){const t=this._getFocusableElements();if(t.length===0){this._closePopoverAndFocusTrigger(e);return}const s=t[t.length-1];document.activeElement===s&&(this._closePopoverAndFocusTrigger(e),e.preventDefault())}_getFocusableElements(){return[...Array.from(this._Cre8PopoverFooter)]}_closePopoverAndFocusTrigger(e){this._toggleActive(),e.preventDefault()}render(){const e=this.componentClassNames("cre8-c-popover",{"cre8-c-popover--top":this.position==="top","cre8-c-popover--left":this.position==="left","cre8-c-popover--right":this.position==="right","cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return i`
       <div class="${e}">
         ${this.slotNotEmpty("trigger")&&i` <slot name="trigger" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}
         ${this.isActive?i`
@@ -788,7 +796,7 @@ span.ripple {
     ${c(p(e,"cre8-button","f-po"))}
     ${c(p(t,"f-po"))}
     ${c(p(s,"cre8-button","f-po"))}
-  </cre8-popover>`,parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["open","close"]}},decorators:[C],args:{body:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",heading:"Popover Heading",header:'<cre8-button slot="trigger" text="Open Popover" variant="primary"></cre8-button>'},argTypes:{isActive:{control:"boolean"},isActiveDynamic:{control:"boolean"},isDynamic:{control:"boolean"},isVisibleOnScroll:{control:"boolean"},position:{control:"text"},handleOnClickOutside:{table:{disable:!0}},removeActive:{table:{disable:!0}},removeActiveOnScroll:{table:{disable:!0}},isRTL:{table:{disable:!0}},close:{table:{disable:!0}},open:{table:{disable:!0}}}},m={args:{footer:'<cre8-button slot="footer" variant="tertiary" text="Button" size="sm" style="margin-left: auto"></cre8-button>'}},g={},u={args:{footer:'<cre8-button slot="footer" variant="primary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},h={args:{footer:'<cre8-button slot="footer" variant="secondary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},f={args:{position:"left"}},v={args:{position:"top"}},b={args:{position:"right"}},l=()=>i`
+  </cre8-popover>`,parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["popover-open","popover-close"]}},decorators:[C],args:{body:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",heading:"Popover Heading",header:'<cre8-button slot="trigger" text="Open Popover" variant="primary"></cre8-button>'},argTypes:{isActive:{control:"boolean"},isActiveDynamic:{control:"boolean"},isDynamic:{control:"boolean"},isVisibleOnScroll:{control:"boolean"},position:{control:"text"},handleOnClickOutside:{table:{disable:!0}},removeActive:{table:{disable:!0}},removeActiveOnScroll:{table:{disable:!0}},isRTL:{table:{disable:!0}},close:{table:{disable:!0}},open:{table:{disable:!0}}}},m={args:{footer:'<cre8-button slot="footer" variant="tertiary" text="Button" size="sm" style="margin-left: auto"></cre8-button>'}},g={},u={args:{footer:'<cre8-button slot="footer" variant="primary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},h={args:{footer:'<cre8-button slot="footer" variant="secondary" text="Button" size="sm" style="margin-left: auto"></cre8-button>',position:"left"}},f={args:{position:"left"}},v={args:{position:"top"}},b={args:{position:"right"}},l=()=>i`
   <div
     style="padding: 3rem; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; overflow: hidden;"
   >