@tmorrow/cre8-wc 2.1.1 → 2.2.2

package/dist/assets/address-form.stories-CseRFoqX.js

@@ -0,0 +1,71 @@
+import{b as l}from"./iframe-CTa_pRc7.js";import"./form-DHk8aePA.js";import"./field-V4dGu-vp.js";import"./button-BCRNRwfX.js";import"./grid-item-WCDk_zGh.js";import"./heading-Cux7lJt-.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-q82VmUgi.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-DWVEXvB4.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./cre8-form-element-Bk9Cy3PA.js";import"./field-note-CI4Ca7JE.js";import"./icon-ByzQuB0Z.js";import"./field.styles-CiOFAoAG.js";import"./loading-spinner-D_r3kfYs.js";const{expect:c,userEvent:p,waitFor:n}=__STORYBOOK_MODULE_TEST__,D={title:"Patterns/Address Form",component:"cre8-form",tags:["autodocs","pattern","experimental"],parameters:{controls:{hideNoControlsWarning:!0},docs:{description:{component:"A shipping-address composition that lays `cre8-field` controls out with `cre8-grid` inside a `cre8-form`. Because `cre8-form` renders to light DOM, controls keep their form ownership through any depth of layout nesting — the Interactions panel proves it by filling every field through the grid and asserting the submitted `FormData` contains all four values."}}}},i=(r,t)=>r.querySelector(`cre8-field[name="${t}"]`),a=async(r,t)=>{let e=null;await n(()=>{e=r.shadowRoot?.querySelector("input")??null,c(e).toBeTruthy()}),await p.type(e,t)},o={render:()=>l`
+    <cre8-form style="max-width: 40rem;">
+      <cre8-heading tagVariant="h2" variant="title-default">Shipping address</cre8-heading>
+      <cre8-grid variant="2up" gap="lg">
+        <cre8-grid-item>
+          <cre8-field name="street" label="Street" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="city" label="City" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="state" label="State" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="zip" label="ZIP code" required></cre8-field>
+        </cre8-grid-item>
+      </cre8-grid>
+      <cre8-button type="submit" text="Save address"></cre8-button>
+    </cre8-form>
+  `,play:async({canvasElement:r,step:t})=>{const e=r.querySelector("cre8-form");await n(()=>c(e.querySelector("form.cre8-c-form")).toBeTruthy()),await t("Every grid-nested control is owned by the form",async()=>{await n(()=>c(e.controls).toHaveLength(5))}),await t("Fill the address through the grid",async()=>{await a(i(e,"street"),"1 Infinite Loop"),await a(i(e,"city"),"Cupertino"),await a(i(e,"state"),"CA"),await a(i(e,"zip"),"95014")}),await t("Submit collects all values via FormData",async()=>{const s=new Promise(d=>{e.addEventListener("form-submit",m=>d(m.detail.values),{once:!0})});e.submit(),c(await s).toEqual({street:"1 Infinite Loop",city:"Cupertino",state:"CA",zip:"95014"})})}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <cre8-form style="max-width: 40rem;">
+      <cre8-heading tagVariant="h2" variant="title-default">Shipping address</cre8-heading>
+      <cre8-grid variant="2up" gap="lg">
+        <cre8-grid-item>
+          <cre8-field name="street" label="Street" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="city" label="City" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="state" label="State" required></cre8-field>
+        </cre8-grid-item>
+        <cre8-grid-item>
+          <cre8-field name="zip" label="ZIP code" required></cre8-field>
+        </cre8-grid-item>
+      </cre8-grid>
+      <cre8-button type="submit" text="Save address"></cre8-button>
+    </cre8-form>
+  \`,
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const form = canvasElement.querySelector<Cre8Form>('cre8-form')!;
+    await waitFor(() => expect(form.querySelector('form.cre8-c-form')).toBeTruthy());
+    await step('Every grid-nested control is owned by the form', async () => {
+      await waitFor(() => expect(form.controls).toHaveLength(5));
+    });
+    await step('Fill the address through the grid', async () => {
+      await typeInto(fieldByName(form, 'street'), '1 Infinite Loop');
+      await typeInto(fieldByName(form, 'city'), 'Cupertino');
+      await typeInto(fieldByName(form, 'state'), 'CA');
+      await typeInto(fieldByName(form, 'zip'), '95014');
+    });
+    await step('Submit collects all values via FormData', async () => {
+      const submitted = new Promise<Record<string, unknown>>(resolve => {
+        form.addEventListener('form-submit', e => resolve((e as CustomEvent).detail.values), {
+          once: true
+        });
+      });
+      form.submit();
+      expect(await submitted).toEqual({
+        street: '1 Infinite Loop',
+        city: 'Cupertino',
+        state: 'CA',
+        zip: '95014'
+      });
+    });
+  }
+}`,...o.parameters?.docs?.source}}};const z=["Default"];export{o as Default,z as __namedExportsOrder,D as default};

package/dist/assets/{alert.stories-pO1y3YCQ.js → alert.stories-CbICvjHf.js}

@@ -1,4 +1,4 @@
-import{a as F,A as O,b as e,o as V}from"./iframe-BNJP6ovU.js";import{s as X}from"./spread-CnPic3C2.js";import{s as Z}from"./story-helpers-BFn_kBYw.js";import"./f-po-BdPzDRD-.js";import"./text-passage-xQVosjOr.js";import{C as P,n as r}from"./cre8-element-B35i4Lyg.js";import"./button-CgaWukz0.js";import"./link-CRE0Eqdo.js";import"./heading-Dbka33DK.js";import"./icon-ChfRWXWy.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"./loading-spinner-C52KNq6y.js";const H=F`.cre8-u-content-knockout-brand {
+import{a as F,A as O,b as e,o as V}from"./iframe-CTa_pRc7.js";import{s as X}from"./spread-B518TqwY.js";import{s as Z}from"./story-helpers-BFn_kBYw.js";import"./f-po-CGwWqyus.js";import"./text-passage-C-tu1uRd.js";import{C as P,n as r}from"./cre8-element-q82VmUgi.js";import"./button-BCRNRwfX.js";import"./link-CkyZrqNv.js";import"./heading-Cux7lJt-.js";import"./icon-ByzQuB0Z.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-DWVEXvB4.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Bk9Cy3PA.js";import"./loading-spinner-D_r3kfYs.js";const H=F`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -581,7 +589,15 @@ span.ripple {
 /**
  * Visually hidden from display
  */
+:host {
+  display: block;
+}
+
 dialog {
+  /* The UA stylesheet gives an open <dialog> position: absolute, which
+     collapses the host to 0 height and paints the alert over following
+     content. Keep it in normal flow. */
+  position: static;
   border: none;
   width: 100%;
 }
@@ -743,31 +759,31 @@ dialog {
 .cre8-c-alert--notification.cre8-c-alert--emphasis-subtle {
   background: var(--cre8-color-bg-subtle);
   color: var(--cre8-color-content-attention-icon);
-}`;var j=Object.defineProperty,a=(s,n,i,K)=>{for(var o=void 0,D=s.length-1,W;D>=0;D--)(W=s[D])&&(o=W(n,i,o)||o);return o&&j(n,i,o),o};const G=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+}`;var j=Object.defineProperty,a=(s,n,i,J)=>{for(var o=void 0,D=s.length-1,W;D>=0;D--)(W=s[D])&&(o=W(n,i,o)||o);return o&&j(n,i,o),o};const G=`<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>
-`,q=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`,U=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM11.5123 6.58923L7.20462 10.8969C7.14746 10.9541 7.07959 10.9995 7.00489 11.0305C6.93018 11.0615 6.8501 11.0774 6.76923 11.0774C6.68836 11.0774 6.60828 11.0615 6.53358 11.0305C6.45887 10.9995 6.391 10.9541 6.33385 10.8969L4.48769 9.05077C4.37222 8.9353 4.30735 8.77868 4.30735 8.61538C4.30735 8.45208 4.37222 8.29547 4.48769 8.18C4.60317 8.06453 4.75978 7.99966 4.92308 7.99966C5.08638 7.99966 5.24299 8.06453 5.35846 8.18L6.76923 9.59154L10.6415 5.71846C10.6987 5.66128 10.7666 5.61593 10.8413 5.58499C10.916 5.55404 10.9961 5.53812 11.0769 5.53812C11.1578 5.53812 11.2378 5.55404 11.3126 5.58499C11.3873 5.61593 11.4551 5.66128 11.5123 5.71846C11.5695 5.77564 11.6148 5.84351 11.6458 5.91822C11.6767 5.99292 11.6927 6.07299 11.6927 6.15384C11.6927 6.2347 11.6767 6.31477 11.6458 6.38947C11.6148 6.46418 11.5695 6.53205 11.5123 6.58923Z"/>
 </svg>
 `,R=`<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>
-`,U=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`,q=`<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.38462 4.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.61538V4.30769ZM8 12.3077C7.81743 12.3077 7.63897 12.2536 7.48717 12.1521C7.33537 12.0507 7.21706 11.9065 7.14719 11.7379C7.07732 11.5692 7.05904 11.3836 7.09466 11.2045C7.13028 11.0255 7.21819 10.861 7.34729 10.7319C7.47638 10.6028 7.64086 10.5149 7.81992 10.4793C7.99898 10.4437 8.18458 10.4619 8.35325 10.5318C8.52192 10.6017 8.66608 10.72 8.76751 10.8718C8.86894 11.0236 8.92308 11.202 8.92308 11.3846C8.92308 11.6294 8.82583 11.8642 8.65271 12.0373C8.4796 12.2104 8.24482 12.3077 8 12.3077Z"/>
 </svg>
-`,Y=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`,K=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.7133 15.4286C11.7133 15.5802 11.6531 15.7255 11.5459 15.8327C11.4388 15.9398 11.2934 16 11.1419 16H5.42827C5.27674 16 5.13141 15.9398 5.02426 15.8327C4.91711 15.7255 4.85691 15.5802 4.85691 15.4286C4.85691 15.2771 4.91711 15.1318 5.02426 15.0246C5.13141 14.9175 5.27674 14.8573 5.42827 14.8573H11.1419C11.2934 14.8573 11.4388 14.9175 11.5459 15.0246C11.6531 15.1318 11.7133 15.2771 11.7133 15.4286ZM14.5701 6.28682C14.5726 7.23931 14.3574 8.17978 13.941 9.03644C13.5246 9.89311 12.918 10.6433 12.1675 11.2298C12.0272 11.3374 11.9133 11.4756 11.8346 11.6339C11.7558 11.7923 11.7144 11.9665 11.7133 12.1433V12.5718C11.7133 12.8749 11.5929 13.1655 11.3786 13.3798C11.1643 13.5942 10.8736 13.7145 10.5705 13.7145H5.99964C5.69657 13.7145 5.40591 13.5942 5.19161 13.3798C4.9773 13.1655 4.85691 12.8749 4.85691 12.5718V12.1433C4.85679 11.9686 4.81662 11.7963 4.73949 11.6395C4.66235 11.4828 4.55031 11.3458 4.41196 11.2391C3.66333 10.6561 3.05715 9.91037 2.63929 9.05844C2.22143 8.20652 2.00285 7.2707 2.00009 6.32182C1.98152 2.91792 4.73264 0.0832435 8.13368 0.00182421C8.97169 -0.0183701 9.80527 0.129276 10.5854 0.436073C11.3655 0.74287 12.0763 1.20262 12.6761 1.78826C13.2758 2.3739 13.7523 3.07359 14.0776 3.84616C14.4029 4.61873 14.5703 5.44857 14.5701 6.28682ZM12.2768 5.61976C12.1286 4.7922 11.7305 4.02991 11.1359 3.4355C10.5414 2.8411 9.77903 2.44311 8.95144 2.29513C8.87744 2.28266 8.80171 2.28488 8.72857 2.30168C8.65543 2.31847 8.58631 2.34951 8.52516 2.39301C8.46401 2.43652 8.41204 2.49164 8.37219 2.55524C8.33235 2.61883 8.30542 2.68965 8.29295 2.76365C8.28047 2.83765 8.2827 2.91339 8.29949 2.98653C8.31628 3.05967 8.34732 3.12879 8.39083 3.18993C8.43433 3.25108 8.48946 3.30306 8.55305 3.3429C8.61664 3.38275 8.68746 3.40967 8.76147 3.42215C9.9449 3.62141 10.9491 4.62558 11.1498 5.81116C11.1724 5.94423 11.2414 6.065 11.3445 6.15207C11.4477 6.23914 11.5783 6.28687 11.7133 6.28682C11.7456 6.28663 11.7778 6.284 11.8097 6.27897C11.959 6.25347 12.0921 6.1697 12.1797 6.04608C12.2673 5.92246 12.3022 5.76911 12.2768 5.61976Z"/>
 </svg>
-`,J=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`,Y=`<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>
 `,E=class E extends P{constructor(){super(...arguments),this.status="info",this.variant="standalone",this.emphasis="subtle",this.iconAlert=void 0,this.headerText=void 0,this.ctaBody=void 0,this.checkEmphasisAlert=()=>this.emphasis!=="subtle",this.mapStatusToIconAlert=n=>{switch(n){case"error":return e`<cre8-icon
-              svg="${U}"
+              svg="${q}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;case"success":return e`<cre8-icon
-              svg="${q}"
+              svg="${U}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
@@ -777,7 +793,7 @@ dialog {
               aria-hidden="true"
               class="cre8-c-alert__icon"
               ></cre8-icon>`;case"notification":return e`<cre8-icon
-              svg="${Y}"
+              svg="${K}"
               aria-label="${this.iconTitle}"
               aria-hidden="true"
               class="cre8-c-alert__icon"
@@ -801,7 +817,7 @@ dialog {
                     ${this.headerText?e`${this.headerText}`:""}
                     ${this.notDismissible?"":e`<cre8-button
                      class="cre8-c-alert__close-btn"
-                     svg=${J}
+                     svg=${Y}
                      iconRotateDegree="90"
                      iconPosition="after"
                      variant="tertiary"
@@ -824,7 +840,7 @@ dialog {
         `}};E.styles=[H];let t=E;a([r({reflect:!0})],t.prototype,"status");a([r({reflect:!0})],t.prototype,"variant");a([r({reflect:!0})],t.prototype,"emphasis");a([r({type:String})],t.prototype,"iconAlert");a([r()],t.prototype,"iconTitle");a([r({type:String})],t.prototype,"headerText");a([r({type:String})],t.prototype,"ctaBody");a([r({type:Boolean,reflect:!0})],t.prototype,"dismissed");a([r({type:Boolean,reflect:!0})],t.prototype,"notDismissible");customElements.get("cre8-alert")===void 0&&customElements.define("cre8-alert",t);const ht={title:"In Development/Alert",component:"cre8-alert",render:({bodyText:s,ctaBody:n,...i})=>e`<cre8-alert ${X(i)}>
       ${V(Z(s))}
       ${V(Z(n,"cre8-link","cre8-button","f-po"))}
-    </cre8-alert>`,parameters:{status:{type:"inProgress"},layout:"padded",actions:{handles:["open","close"]},docs:{story:{height:"250px"}}},argTypes:{status:{options:["error","info","notification","neutral","success","warning"],control:{type:"select"}},variant:{options:["standalone","banner"],control:{type:"radio"}},emphasis:{options:["subtle","strong"],control:{type:"radio"}}},args:{headerText:"Badge",bodyText:"Badge"}},c={args:{status:"info",variant:"standalone",headerText:"Default Alert",bodyText:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},l={args:{status:"info",variant:"standalone",emphasis:"strong",headerText:"Default Alert With Link",bodyText:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",ctaBody:'<cre8-link slot="cta" href="#" inverted="true">Link</cre8-link>'}},d={args:{status:"info",variant:"standalone",headerText:"Default Not Dismissible",bodyText:"Message text",notDismissible:!0}},u={args:{status:"error",variant:"standalone",headerText:"Subtle Error Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},g={args:{status:"info",variant:"standalone",headerText:"Subtle Info Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},m={args:{status:"notification",variant:"standalone",headerText:"Subtle Notification Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},p={args:{status:"neutral",variant:"standalone",headerText:"Subtle Neutral Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},b={args:{status:"warning",variant:"standalone",headerText:"Subtle Warning Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},h={args:{status:"success",variant:"standalone",headerText:"Subtle Success Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},x={args:{status:"error",variant:"standalone",emphasis:"strong",headerText:"Strong Error Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},y={args:{status:"info",variant:"standalone",emphasis:"strong",headerText:"Strong Info Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},f={args:{status:"notification",variant:"standalone",emphasis:"strong",headerText:"Strong Notification Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},v={args:{status:"neutral",variant:"standalone",emphasis:"strong",headerText:"Strong Neutral Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},S={args:{status:"warning",variant:"standalone",emphasis:"strong",headerText:"Strong Warning Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},C={args:{status:"success",variant:"standalone",emphasis:"strong",headerText:"Strong Success Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},B={args:{status:"error",variant:"banner",headerText:"Subtle Error Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},T={args:{status:"info",variant:"banner",headerText:"Subtle Info Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},w={args:{status:"notification",variant:"banner",headerText:"Subtle Notification Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},z={args:{status:"neutral",variant:"banner",headerText:"Subtle Neutral Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},_={args:{status:"warning",variant:"banner",headerText:"Subtle Warning Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},k={args:{status:"success",variant:"banner",headerText:"Subtle Success Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},A={args:{status:"error",variant:"banner",emphasis:"strong",headerText:"Strong Error Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},M={args:{status:"info",variant:"banner",emphasis:"strong",headerText:"Strong Info Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},N={args:{status:"notification",variant:"banner",emphasis:"strong",headerText:"Strong Notification Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},I={args:{status:"neutral",variant:"banner",emphasis:"strong",headerText:"Strong Neutral Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},L={args:{status:"warning",variant:"banner",emphasis:"strong",headerText:"Strong Warning Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},$={args:{status:"success",variant:"banner",emphasis:"strong",headerText:"Strong Success Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+    </cre8-alert>`,parameters:{status:{type:"inProgress"},layout:"padded",actions:{handles:["open","close"]},docs:{story:{height:"250px"}}},argTypes:{status:{options:["error","info","notification","neutral","success","warning"],control:{type:"select"}},variant:{options:["standalone","banner"],control:{type:"radio"}},emphasis:{options:["subtle","strong"],control:{type:"radio"}}},args:{headerText:"Badge",bodyText:"Badge"}},c={args:{status:"info",variant:"standalone",headerText:"Default Alert",bodyText:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},l={args:{status:"info",variant:"standalone",emphasis:"strong",headerText:"Default Alert With Link",bodyText:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",ctaBody:'<cre8-link slot="cta" href="#" inverted="true">Link</cre8-link>'}},d={args:{status:"info",variant:"standalone",headerText:"Default Not Dismissible",bodyText:"Message text",notDismissible:!0}},u={args:{status:"error",variant:"standalone",headerText:"Subtle Error Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},g={args:{status:"info",variant:"standalone",headerText:"Subtle Info Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},m={args:{status:"notification",variant:"standalone",headerText:"Subtle Notification Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},p={args:{status:"neutral",variant:"standalone",headerText:"Subtle Neutral Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},b={args:{status:"warning",variant:"standalone",headerText:"Subtle Warning Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},h={args:{status:"success",variant:"standalone",headerText:"Subtle Success Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},x={args:{status:"error",variant:"standalone",emphasis:"strong",headerText:"Strong Error Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},y={args:{status:"info",variant:"standalone",emphasis:"strong",headerText:"Strong Info Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},f={args:{status:"notification",variant:"standalone",emphasis:"strong",headerText:"Strong Notification Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},v={args:{status:"neutral",variant:"standalone",emphasis:"strong",headerText:"Strong Neutral Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},S={args:{status:"warning",variant:"standalone",emphasis:"strong",headerText:"Strong Warning Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},C={args:{status:"success",variant:"standalone",emphasis:"strong",headerText:"Strong Success Stand Alone",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},B={args:{status:"error",variant:"banner",headerText:"Subtle Error Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},w={args:{status:"info",variant:"banner",headerText:"Subtle Info Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},T={args:{status:"notification",variant:"banner",headerText:"Subtle Notification Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},z={args:{status:"neutral",variant:"banner",headerText:"Subtle Neutral Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},_={args:{status:"warning",variant:"banner",headerText:"Subtle Warning Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},k={args:{status:"success",variant:"banner",headerText:"Subtle Success Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},A={args:{status:"error",variant:"banner",emphasis:"strong",headerText:"Strong Error Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},M={args:{status:"info",variant:"banner",emphasis:"strong",headerText:"Strong Info Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},N={args:{status:"notification",variant:"banner",emphasis:"strong",headerText:"Strong Notification Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},I={args:{status:"neutral",variant:"banner",emphasis:"strong",headerText:"Strong Neutral Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},L={args:{status:"warning",variant:"banner",emphasis:"strong",headerText:"Strong Warning Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}},$={args:{status:"success",variant:"banner",emphasis:"strong",headerText:"Strong Success Banner",bodyText:"Message text",ctaBody:'<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   args: {
     status: 'info',
     variant: 'standalone',
@@ -959,7 +975,7 @@ dialog {
     bodyText: 'Message text',
     ctaBody: '<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'
   }
-}`,...B.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+}`,...B.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
   args: {
     status: 'info',
     variant: 'banner',
@@ -967,7 +983,7 @@ dialog {
     bodyText: 'Message text',
     ctaBody: '<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'
   }
-}`,...T.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+}`,...w.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
   args: {
     status: 'notification',
     variant: 'banner',
@@ -975,7 +991,7 @@ dialog {
     bodyText: 'Message text',
     ctaBody: '<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'
   }
-}`,...w.parameters?.docs?.source}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+}`,...T.parameters?.docs?.source}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
   args: {
     status: 'neutral',
     variant: 'banner',
@@ -1053,4 +1069,4 @@ dialog {
     bodyText: 'Message text',
     ctaBody: '<cre8-button variant="secondary" slot="cta" text="Button" size="sm" neutral></cre8-button>'
   }
-}`,...$.parameters?.docs?.source}}};const xt=["Default","DefaultWithLink","DefaultNotDismissible","SubtleErrorStandAlone","SubtleInfoStandAlone","SubtleNotificationStandAlone","SubtleNeutralStandAlone","SubtleWarningStandAlone","SubtleSuccessStandAlone","StrongErrorStandAlone","StrongInfoStandAlone","StrongNotificationStandAlone","StrongNeutralStandAlone","StrongWarningStandAlone","StrongSuccessStandAlone","SubtleErrorBanner","SubtleInfoBanner","SubtleNotificationBanner","SubtleNeutralBanner","SubtleWarningBanner","SubtleSuccessBanner","StrongErrorBanner","StrongInfoBanner","StrongNotificationBanner","StrongNeutralBanner","StrongWarningBanner","StrongSuccessBanner"];export{c as Default,d as DefaultNotDismissible,l as DefaultWithLink,A as StrongErrorBanner,x as StrongErrorStandAlone,M as StrongInfoBanner,y as StrongInfoStandAlone,I as StrongNeutralBanner,v as StrongNeutralStandAlone,N as StrongNotificationBanner,f as StrongNotificationStandAlone,$ as StrongSuccessBanner,C as StrongSuccessStandAlone,L as StrongWarningBanner,S as StrongWarningStandAlone,B as SubtleErrorBanner,u as SubtleErrorStandAlone,T as SubtleInfoBanner,g as SubtleInfoStandAlone,z as SubtleNeutralBanner,p as SubtleNeutralStandAlone,w as SubtleNotificationBanner,m as SubtleNotificationStandAlone,k as SubtleSuccessBanner,h as SubtleSuccessStandAlone,_ as SubtleWarningBanner,b as SubtleWarningStandAlone,xt as __namedExportsOrder,ht as default};
+}`,...$.parameters?.docs?.source}}};const xt=["Default","DefaultWithLink","DefaultNotDismissible","SubtleErrorStandAlone","SubtleInfoStandAlone","SubtleNotificationStandAlone","SubtleNeutralStandAlone","SubtleWarningStandAlone","SubtleSuccessStandAlone","StrongErrorStandAlone","StrongInfoStandAlone","StrongNotificationStandAlone","StrongNeutralStandAlone","StrongWarningStandAlone","StrongSuccessStandAlone","SubtleErrorBanner","SubtleInfoBanner","SubtleNotificationBanner","SubtleNeutralBanner","SubtleWarningBanner","SubtleSuccessBanner","StrongErrorBanner","StrongInfoBanner","StrongNotificationBanner","StrongNeutralBanner","StrongWarningBanner","StrongSuccessBanner"];export{c as Default,d as DefaultNotDismissible,l as DefaultWithLink,A as StrongErrorBanner,x as StrongErrorStandAlone,M as StrongInfoBanner,y as StrongInfoStandAlone,I as StrongNeutralBanner,v as StrongNeutralStandAlone,N as StrongNotificationBanner,f as StrongNotificationStandAlone,$ as StrongSuccessBanner,C as StrongSuccessStandAlone,L as StrongWarningBanner,S as StrongWarningStandAlone,B as SubtleErrorBanner,u as SubtleErrorStandAlone,w as SubtleInfoBanner,g as SubtleInfoStandAlone,z as SubtleNeutralBanner,p as SubtleNeutralStandAlone,T as SubtleNotificationBanner,m as SubtleNotificationStandAlone,k as SubtleSuccessBanner,h as SubtleSuccessStandAlone,_ as SubtleWarningBanner,b as SubtleWarningStandAlone,xt as __namedExportsOrder,ht as default};

package/dist/assets/{badge-BTxW3bN2.js → badge-UrvSTJon.js}

@@ -1,4 +1,4 @@
-import{C as l,c as m,n as i}from"./cre8-element-B35i4Lyg.js";import{a as p,b as s}from"./iframe-BNJP6ovU.js";import"./icon-ChfRWXWy.js";const u=p`.cre8-u-content-knockout-brand {
+import{C as l,c as m,n as i}from"./cre8-element-q82VmUgi.js";import{a as p,b as s}from"./iframe-CTa_pRc7.js";import"./icon-ByzQuB0Z.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 */
 }
 
 /**
@@ -713,9 +721,9 @@ cre8-icon {
 .cre8-c-badge--white.cre8-c-badge--error {
   background-color: none;
   color: var(--cre8-color-content-error);
-}`;var h=Object.defineProperty,a=(d,r,c,b)=>{for(var t=void 0,o=d.length-1,g;o>=0;o--)(g=d[o])&&(t=g(r,c,t)||t);return t&&h(r,c,t),t};const n=class n extends l{constructor(){super(...arguments),this.text=void 0}render(){const r=m("cre8-c-badge",{"cre8-c-badge--success":this.status==="success","cre8-c-badge--warning":this.status==="warning","cre8-c-badge--error":this.status==="error","cre8-c-badge--info":this.status==="info","cre8-c-badge--attention":this.status==="attention","cre8-c-badge--light":this.variant==="light","cre8-c-badge--white":this.variant==="white"});return s`<div class="${r}">
+}`;var u=Object.defineProperty,a=(d,r,c,b)=>{for(var t=void 0,o=d.length-1,g;o>=0;o--)(g=d[o])&&(t=g(r,c,t)||t);return t&&u(r,c,t),t};const n=class n extends l{constructor(){super(...arguments),this.text=void 0}render(){const r=m("cre8-c-badge",{"cre8-c-badge--success":this.status==="success","cre8-c-badge--warning":this.status==="warning","cre8-c-badge--error":this.status==="error","cre8-c-badge--info":this.status==="info","cre8-c-badge--attention":this.status==="attention","cre8-c-badge--light":this.variant==="light","cre8-c-badge--white":this.variant==="white"});return s`<div class="${r}">
         ${this.svg?s` <cre8-icon 
             svg='${this.svg}' aria-hidden='true'></cre8-icon>
         </cre8-icon>`:""} 
         ${this.text} 
-        </div> `}};n.styles=[u];let e=n;a([i({type:String})],e.prototype,"text");a([i({type:String})],e.prototype,"status");a([i({type:String})],e.prototype,"variant");a([i({type:String})],e.prototype,"svg");customElements.get("cre8-badge")===void 0&&customElements.define("cre8-badge",e);
+        </div> `}};n.styles=[h];let e=n;a([i({type:String})],e.prototype,"text");a([i({type:String})],e.prototype,"status");a([i({type:String})],e.prototype,"variant");a([i({type:String})],e.prototype,"svg");customElements.get("cre8-badge")===void 0&&customElements.define("cre8-badge",e);

package/dist/assets/{badge.stories-vqh63RJ2.js → badge.stories-DOZqQX5K.js}

@@ -1,13 +1,12 @@
-import{b as S}from"./iframe-BNJP6ovU.js";import{s as w}from"./spread-CnPic3C2.js";import"./badge-BTxW3bN2.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-ChfRWXWy.js";import"./if-defined-Bxnzk64Q.js";const k=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+import{b as S}from"./iframe-CTa_pRc7.js";import{s as w}from"./spread-B518TqwY.js";import"./badge-UrvSTJon.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-q82VmUgi.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./icon-ByzQuB0Z.js";import"./if-defined-DWVEXvB4.js";const k=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.5709 5.43726C15.41 5.25493 15.2121 5.10891 14.9905 5.00892C14.7688 4.90892 14.5284 4.85723 14.2852 4.85728H10.2854V3.71446C10.2854 2.95673 9.98435 2.23003 9.44855 1.69423C8.91275 1.15843 8.18605 0.857422 7.42831 0.857422C7.32216 0.857346 7.21808 0.886843 7.12775 0.942606C7.03742 0.998368 6.96441 1.07819 6.9169 1.17313L4.21842 6.57151H1.14282C0.839723 6.57151 0.549043 6.69191 0.334723 6.90623C0.120404 7.12055 0 7.41123 0 7.71432V13.9998C0 14.3029 0.120404 14.5936 0.334723 14.8079C0.549043 15.0222 0.839723 15.1426 1.14282 15.1426H13.4281C13.8457 15.1428 14.2491 14.9905 14.5623 14.7143C14.8756 14.4381 15.0773 14.057 15.1295 13.6427L15.9866 6.78579C16.017 6.54438 15.9956 6.29928 15.9239 6.06676C15.8523 5.83425 15.7319 5.61966 15.5709 5.43726ZM1.14282 7.71432H3.99986V13.9998H1.14282V7.71432ZM14.8523 6.64293L13.9952 13.4998C13.9778 13.638 13.9106 13.765 13.8062 13.857C13.7018 13.9491 13.5673 13.9999 13.4281 13.9998H5.14268V7.27791L7.76473 2.0331C8.15335 2.11087 8.50302 2.32091 8.75422 2.62746C9.00543 2.93401 9.14265 3.31814 9.14254 3.71446V5.42869C9.14254 5.58024 9.20274 5.72558 9.3099 5.83274C9.41706 5.9399 9.5624 6.0001 9.71395 6.0001H14.2852C14.3663 6.00007 14.4465 6.0173 14.5204 6.05064C14.5943 6.08399 14.6603 6.13268 14.7139 6.19348C14.7675 6.25429 14.8076 6.32581 14.8315 6.40331C14.8554 6.4808 14.8625 6.56248 14.8523 6.64293Z"/>
 </svg>
-`,H={title:"cre8 Components/Badge",component:"cre8-badge",render:v=>S`<cre8-badge ${w(v)}></cre8-badge>`,parameters:{status:{type:"inProgress"}},argTypes:{text:{control:"text"},status:{options:["neutral","error","warning","success","info","attention"],control:{type:"select"}},variant:{options:["default","light","white"],control:{type:"radio"}}},args:{text:"Badge"}},a={args:{text:"Default"}},t={args:{status:"default",text:"Icon Variant",svg:k}},s={args:{status:"success",text:"Success"}},n={args:{status:"warning",text:"Warning"}},o={args:{status:"error",text:"Error"}},i={args:{status:"info",text:"Info"}},r={args:{status:"attention",text:"Attention"}},c={args:{status:"light",text:"Light"}},u={args:{status:"success",variant:"light",text:"Success Light"}},g={args:{status:"warning",variant:"light",text:"Warning Light"}},d={args:{status:"error",variant:"light",text:"Error Light"}},p={args:{status:"info",variant:"light",text:"Info Light"}},e={args:{status:"attention",variant:"light",text:"Attention Light"}},m={parameters:{backgrounds:{default:"dark"}},args:{variant:"white",text:"White"}},h={parameters:{backgrounds:{default:"dark"}},args:{status:"success",variant:"white",text:"Success White"}},l={parameters:{backgrounds:{default:"dark"}},args:{status:"warning",variant:"white",text:"Warning White"}},x={parameters:{backgrounds:{default:"dark"}},args:{status:"error",variant:"white",text:"Error White"}},f={parameters:{backgrounds:{default:"dark"}},args:{status:"info",variant:"white",text:"Info White"}},W={parameters:{backgrounds:{default:"dark"}},args:{status:"attention",variant:"white",text:"Attention White"}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+`,H={title:"cre8 Components/Badge",component:"cre8-badge",render:v=>S`<cre8-badge ${w(v)}></cre8-badge>`,parameters:{status:{type:"inProgress"}},argTypes:{text:{control:"text"},status:{options:["neutral","error","warning","success","info","attention"],control:{type:"select"}},variant:{options:["default","light","white"],control:{type:"radio"}}},args:{text:"Badge"}},a={args:{text:"Default"}},t={args:{text:"Icon Variant",svg:k}},s={args:{status:"success",text:"Success"}},n={args:{status:"warning",text:"Warning"}},o={args:{status:"error",text:"Error"}},i={args:{status:"info",text:"Info"}},r={args:{status:"attention",text:"Attention"}},c={args:{variant:"light",text:"Light"}},g={args:{status:"success",variant:"light",text:"Success Light"}},u={args:{status:"warning",variant:"light",text:"Warning Light"}},d={args:{status:"error",variant:"light",text:"Error Light"}},p={args:{status:"info",variant:"light",text:"Info Light"}},e={args:{status:"attention",variant:"light",text:"Attention Light"}},m={parameters:{backgrounds:{default:"dark"}},args:{variant:"white",text:"White"}},h={parameters:{backgrounds:{default:"dark"}},args:{status:"success",variant:"white",text:"Success White"}},l={parameters:{backgrounds:{default:"dark"}},args:{status:"warning",variant:"white",text:"Warning White"}},x={parameters:{backgrounds:{default:"dark"}},args:{status:"error",variant:"white",text:"Error White"}},f={parameters:{backgrounds:{default:"dark"}},args:{status:"info",variant:"white",text:"Info White"}},W={parameters:{backgrounds:{default:"dark"}},args:{status:"attention",variant:"white",text:"Attention White"}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
   args: {
     text: 'Default'
   }
 }`,...a.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
   args: {
-    status: 'default',
     text: 'Icon Variant',
     svg: svgFeedback
   }
@@ -38,22 +37,22 @@ import{b as S}from"./iframe-BNJP6ovU.js";import{s as w}from"./spread-CnPic3C2.js
   }
 }`,...r.parameters?.docs?.source},description:{story:"**Note** Certain brands don't currently use the `Attention` status",...r.parameters?.docs?.description}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   args: {
-    status: 'light',
+    variant: 'light',
     text: 'Light'
   }
-}`,...c.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+}`,...c.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
   args: {
     status: 'success',
     variant: 'light',
     text: 'Success Light'
   }
-}`,...u.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+}`,...g.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     status: 'warning',
     variant: 'light',
     text: 'Warning Light'
   }
-}`,...g.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   args: {
     status: 'error',
     variant: 'light',
@@ -136,4 +135,4 @@ import{b as S}from"./iframe-BNJP6ovU.js";import{s as w}from"./spread-CnPic3C2.js
     variant: 'white',
     text: 'Attention White'
   }
-}`,...W.parameters?.docs?.source}}};const D=["Default","IconVariant","Success","Warning","Error","Info","Attention","Light","SuccessLight","WarningLight","ErrorLight","InfoLight","AttentionLight","White","SuccessWhite","WarningWhite","ErrorWhite","InfoWhite","AttentionWhite"];export{r as Attention,e as AttentionLight,W as AttentionWhite,a as Default,o as Error,d as ErrorLight,x as ErrorWhite,t as IconVariant,i as Info,p as InfoLight,f as InfoWhite,c as Light,s as Success,u as SuccessLight,h as SuccessWhite,n as Warning,g as WarningLight,l as WarningWhite,m as White,D as __namedExportsOrder,H as default};
+}`,...W.parameters?.docs?.source}}};const D=["Default","IconVariant","Success","Warning","Error","Info","Attention","Light","SuccessLight","WarningLight","ErrorLight","InfoLight","AttentionLight","White","SuccessWhite","WarningWhite","ErrorWhite","InfoWhite","AttentionWhite"];export{r as Attention,e as AttentionLight,W as AttentionWhite,a as Default,o as Error,d as ErrorLight,x as ErrorWhite,t as IconVariant,i as Info,p as InfoLight,f as InfoWhite,c as Light,s as Success,g as SuccessLight,h as SuccessWhite,n as Warning,u as WarningLight,l as WarningWhite,m as White,D as __namedExportsOrder,H as default};

package/dist/assets/{band.stories-CjKRppSb.js → band.stories-CK_yg4DT.js}

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