@tmorrow/cre8-wc 2.1.1 → 2.2.0

package/dist/assets/{tag.stories-C5D5IbuK.js → tag.stories-hu36S63W.js}

@@ -1,4 +1,4 @@
-import{b as g}from"./iframe-BNJP6ovU.js";import{s as S}from"./spread-CnPic3C2.js";import"./tag-oHGdclJl.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";const E={title:"In Development/Tag",component:"cre8-tag",render:y=>g`<cre8-tag ${S(y)}></cre8-tag>`,parameters:{status:{type:"inProgress"}},argTypes:{text:{control:"text"},type:{options:["checkbox","radio"],control:{type:"radio"}},variant:{options:["neutral","branded","neutral-hybrid"],control:{type:"select"}},isDisabled:{control:{type:"boolean"}},isSelected:{control:{type:"boolean"}}},args:{type:"radio",variant:"neutral"}},e={args:{text:"Default",type:"radio"}},r={args:{text:"Neutral",type:"radio"}},a={args:{isSelected:!0,text:"Neutral",type:"radio"}},t={args:{text:"Neutral Hybrid",type:"radio",variant:"neutral-hybrid"}},o={args:{isSelected:!0,text:"Neutral Hybrid",type:"radio",variant:"neutral-hybrid"}},s={args:{text:"Branded",type:"radio",variant:"branded"}},d={args:{isSelected:!0,text:"Branded",type:"radio",variant:"branded"}},n={args:{text:"Disabled",isDisabled:!0}},c={args:{text:"Default",type:"checkbox"}},i={args:{text:"Round",type:"checkbox",shape:"round"}},p={args:{isSelected:!0,text:"Neutral Selected",type:"checkbox"}},u={args:{text:"Neutral Hybrid",type:"checkbox",variant:"neutral-hybrid"}},l={args:{text:"Neutral Hybrid Selected",isSelected:!0,shape:"round",type:"checkbox",variant:"neutral-hybrid"}},b={args:{text:"Branded",type:"checkbox",variant:"branded"}},m={args:{text:"Branded Selected",isSelected:!0,type:"checkbox",variant:"branded"}},x={args:{text:"Disabled",isDisabled:!0,type:"checkbox"}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{b as g}from"./iframe-nwd_1gnU.js";import{s as S}from"./spread-D16Rn3WA.js";import"./tag-BDbKYA95.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./index.browser-BY9c7rfI.js";import"./if-defined-RYzTvKuT.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";const E={title:"In Development/Tag",component:"cre8-tag",render:y=>g`<cre8-tag ${S(y)}></cre8-tag>`,parameters:{status:{type:"inProgress"}},argTypes:{text:{control:"text"},type:{options:["checkbox","radio"],control:{type:"radio"}},variant:{options:["neutral","branded","neutral-hybrid"],control:{type:"select"}},isDisabled:{control:{type:"boolean"}},isSelected:{control:{type:"boolean"}}},args:{type:"radio",variant:"neutral"}},e={args:{text:"Default",type:"radio"}},r={args:{text:"Neutral",type:"radio"}},a={args:{isSelected:!0,text:"Neutral",type:"radio"}},t={args:{text:"Neutral Hybrid",type:"radio",variant:"neutral-hybrid"}},o={args:{isSelected:!0,text:"Neutral Hybrid",type:"radio",variant:"neutral-hybrid"}},s={args:{text:"Branded",type:"radio",variant:"branded"}},d={args:{isSelected:!0,text:"Branded",type:"radio",variant:"branded"}},n={args:{text:"Disabled",isDisabled:!0}},c={args:{text:"Default",type:"checkbox"}},i={args:{text:"Round",type:"checkbox",shape:"round"}},p={args:{isSelected:!0,text:"Neutral Selected",type:"checkbox"}},u={args:{text:"Neutral Hybrid",type:"checkbox",variant:"neutral-hybrid"}},l={args:{text:"Neutral Hybrid Selected",isSelected:!0,shape:"round",type:"checkbox",variant:"neutral-hybrid"}},b={args:{text:"Branded",type:"checkbox",variant:"branded"}},m={args:{text:"Branded Selected",isSelected:!0,type:"checkbox",variant:"branded"}},x={args:{text:"Disabled",isDisabled:!0,type:"checkbox"}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {
     text: 'Default',
     type: 'radio'

package/dist/assets/{tertiary-nav.stories-B1GU8Zi4.js → tertiary-nav.stories-CqratFQw.js}

@@ -1,4 +1,4 @@
-import{a as f,b as l}from"./iframe-BNJP6ovU.js";import{s as y}from"./spread-CnPic3C2.js";import{w as z}from"./decorator-iVSD-Llo.js";import{C as x,n as p}from"./cre8-element-B35i4Lyg.js";import{o as h}from"./if-defined-Bxnzk64Q.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./_commonjsHelpers-DaWZu8wl.js";const w=f`.cre8-u-content-knockout-brand {
+import{a as f,b as l}from"./iframe-nwd_1gnU.js";import{s as y}from"./spread-D16Rn3WA.js";import{w}from"./decorator-iVSD-Llo.js";import{C as x,n as p}from"./cre8-element-CaOpCq8p.js";import{o as h}from"./if-defined-RYzTvKuT.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";import"./_commonjsHelpers-DaWZu8wl.js";const z=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 */
 }
 
 /**
@@ -616,7 +624,7 @@ span.ripple {
           <slot></slot>
         </ul>
       </nav>
-    `}};g.styles=[w];let o=g;v([p({type:Boolean,reflect:!0})],o.prototype,"fullWidth");v([p()],o.prototype,"navAriaLabel");customElements.get("cre8-tertiary-nav")===void 0&&customElements.define("cre8-tertiary-nav",o);const I=f`.cre8-u-content-knockout-brand {
+    `}};g.styles=[z];let o=g;v([p({type:Boolean,reflect:!0})],o.prototype,"fullWidth");v([p()],o.prototype,"navAriaLabel");customElements.get("cre8-tertiary-nav")===void 0&&customElements.define("cre8-tertiary-nav",o);const I=f`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -990,6 +998,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1162,6 +1174,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1261,7 +1277,7 @@ span.ripple {
           <slot></slot>
         </a>
       </li>
-    `}};u.styles=[I];let d=u;b([p()],d.prototype,"href");b([p({type:Boolean,reflect:!0})],d.prototype,"isCurrent");customElements.get("cre8-tertiary-nav-item")===void 0&&customElements.define("cre8-tertiary-nav-item",d);const X={title:"Cre8 Components/Tertiary Nav",component:"cre8-tertiary-nav",parameters:{status:{type:"inProgress"},actions:{handles:["click"]}},decorators:[z]},m=r=>l`
+    `}};u.styles=[I];let d=u;b([p()],d.prototype,"href");b([p({type:Boolean,reflect:!0})],d.prototype,"isCurrent");customElements.get("cre8-tertiary-nav-item")===void 0&&customElements.define("cre8-tertiary-nav-item",d);const X={title:"Cre8 Components/Tertiary Nav",component:"cre8-tertiary-nav",parameters:{status:{type:"inProgress"},actions:{handles:["click"]}},decorators:[w]},m=r=>l`
 <cre8-tertiary-nav ${y(r)}>
   <cre8-tertiary-nav-item href="#" ?isCurrent=${!0}>Tertiary Nav Item 1</cre8-tertiary-nav-item>
   <cre8-tertiary-nav-item href="#">Tertiary Nav Item 2</cre8-tertiary-nav-item>

package/dist/assets/{text-link-B3m3KEqY.js → text-link-VO8qilFK.js}

@@ -1,4 +1,4 @@
-import{a as p,b as s}from"./iframe-BNJP6ovU.js";import{o as c}from"./if-defined-Bxnzk64Q.js";import{C as g,n as r}from"./cre8-element-B35i4Lyg.js";const h=p`.cre8-u-content-knockout-brand {
+import{a as p,b as s}from"./iframe-nwd_1gnU.js";import{o as c}from"./if-defined-RYzTvKuT.js";import{C as g,n as r}from"./cre8-element-CaOpCq8p.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 */
 }
 
 /**

package/dist/assets/{text-link.stories-4O6qn82H.js → text-link.stories-Da7lEll4.js}

@@ -1 +1 @@
-import{b as e}from"./iframe-BNJP6ovU.js";import{s as c}from"./spread-CnPic3C2.js";import"./text-link-B3m3KEqY.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";const u={title:"Cre8 Components/Text Link",component:"cre8-text-link",parameters:{status:{type:"inProgress"}}},r=n=>e`<cre8-text-link ${c(n)} href="#">Text Link</cre8-text-link>`,t=()=>e`<cre8-text-link variant="secondary" href="#">Secondary Text Link</cre8-text-link>`,a=()=>e`<cre8-text-link variant="display" href="#">Display Text Link</cre8-text-link>`,s=()=>e`<div style="padding: 1rem; background:#000"><cre8-text-link ?inverted=${!0} href="#">Inverted Text Link</cre8-text-link></div>`,i=()=>e`<cre8-text-link size="sm" href="#">Small Text Link</cre8-text-link>`;r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:'args => html`<cre8-text-link ${spread(args)} href="#">Text Link</cre8-text-link>`',...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:'() => html`<cre8-text-link variant="secondary" href="#">Secondary Text Link</cre8-text-link>`',...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:'() => html`<cre8-text-link variant="display" href="#">Display Text Link</cre8-text-link>`',...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:'() => html`<div style="padding: 1rem; background:#000"><cre8-text-link ?inverted=${true} href="#">Inverted Text Link</cre8-text-link></div>`',...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:'() => html`<cre8-text-link size="sm" href="#">Small Text Link</cre8-text-link>`',...i.parameters?.docs?.source}}};const f=["Default","Secondary","Display","Inverted","Small"];export{r as Default,a as Display,s as Inverted,t as Secondary,i as Small,f as __namedExportsOrder,u as default};
+import{b as e}from"./iframe-nwd_1gnU.js";import{s as c}from"./spread-D16Rn3WA.js";import"./text-link-VO8qilFK.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-RYzTvKuT.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";const u={title:"Cre8 Components/Text Link",component:"cre8-text-link",parameters:{status:{type:"inProgress"}}},r=n=>e`<cre8-text-link ${c(n)} href="#">Text Link</cre8-text-link>`,t=()=>e`<cre8-text-link variant="secondary" href="#">Secondary Text Link</cre8-text-link>`,a=()=>e`<cre8-text-link variant="display" href="#">Display Text Link</cre8-text-link>`,s=()=>e`<div style="padding: 1rem; background:#000"><cre8-text-link ?inverted=${!0} href="#">Inverted Text Link</cre8-text-link></div>`,i=()=>e`<cre8-text-link size="sm" href="#">Small Text Link</cre8-text-link>`;r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:'args => html`<cre8-text-link ${spread(args)} href="#">Text Link</cre8-text-link>`',...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:'() => html`<cre8-text-link variant="secondary" href="#">Secondary Text Link</cre8-text-link>`',...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:'() => html`<cre8-text-link variant="display" href="#">Display Text Link</cre8-text-link>`',...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:'() => html`<div style="padding: 1rem; background:#000"><cre8-text-link ?inverted=${true} href="#">Inverted Text Link</cre8-text-link></div>`',...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:'() => html`<cre8-text-link size="sm" href="#">Small Text Link</cre8-text-link>`',...i.parameters?.docs?.source}}};const f=["Default","Secondary","Display","Inverted","Small"];export{r as Default,a as Display,s as Inverted,t as Secondary,i as Small,f as __namedExportsOrder,u as default};

package/dist/assets/{text-passage-xQVosjOr.js → text-passage-C6jDH-er.js}

@@ -1,4 +1,4 @@
-import{a as d,b as m}from"./iframe-BNJP6ovU.js";import{C as g,n as l}from"./cre8-element-B35i4Lyg.js";const c=d`.cre8-u-content-knockout-brand {
+import{a as d,b as p}from"./iframe-nwd_1gnU.js";import{C as g,n as l}from"./cre8-element-CaOpCq8p.js";const c=d`.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 */
 }
 
 /**
@@ -1211,6 +1219,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1383,6 +1395,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1458,8 +1474,8 @@ span.ripple {
 
 ::slotted(.header) {
   margin-bottom: 0.75rem;
-}`;var f=Object.defineProperty,p=(n,a,e,u)=>{for(var t=void 0,i=n.length-1,s;i>=0;i--)(s=n[i])&&(t=s(a,e,t)||t);return t&&f(a,e,t),t};const o=class o extends g{constructor(){super(...arguments),this.size="default"}connectedCallback(){if(super.connectedCallback(),!document.head.querySelector("#cre8-text-passage-styles")){const e=document.createElement("style");e.id="cre8-text-passage-styles",e.innerHTML=c.cssText,document.head.appendChild(e)}}render(){const a=this.componentClassNames("cre8-c-text-passage",{"cre8-c-text-passage--default":this.size==="default"||void 0,"cre8-c-text-passage--inverted":this.inverted,"cre8-c-text-passage--small":this.size==="small","cre8-c-text-passage--large":this.size==="large"});return m`
+}`;var f=Object.defineProperty,m=(o,a,e,u)=>{for(var t=void 0,i=o.length-1,s;i>=0;i--)(s=o[i])&&(t=s(a,e,t)||t);return t&&f(a,e,t),t};const n=class n extends g{constructor(){super(...arguments),this.size="default"}connectedCallback(){if(super.connectedCallback(),!document.head.querySelector("#cre8-text-passage-styles")){const e=document.createElement("style");e.id="cre8-text-passage-styles",e.innerHTML=c.cssText,document.head.appendChild(e)}}render(){const a=this.componentClassNames("cre8-c-text-passage",{"cre8-c-text-passage--default":this.size==="default"||void 0,"cre8-c-text-passage--inverted":this.inverted,"cre8-c-text-passage--small":this.size==="small","cre8-c-text-passage--large":this.size==="large"});return p`
       <div class="${a}">
         <slot></slot>
       </div>
-    `}};o.styles=[h];let r=o;p([l({type:Boolean,reflect:!0})],r.prototype,"inverted");p([l()],r.prototype,"size");customElements.get("cre8-text-passage")===void 0&&customElements.define("cre8-text-passage",r);
+    `}};n.styles=[h];let r=n;m([l({type:Boolean,reflect:!0})],r.prototype,"inverted");m([l()],r.prototype,"size");customElements.get("cre8-text-passage")===void 0&&customElements.define("cre8-text-passage",r);

package/dist/assets/{text-passage.stories-Da1nspwG.js → text-passage.stories-dk5c19n9.js}

@@ -1,4 +1,4 @@
-import{b as l}from"./iframe-BNJP6ovU.js";import{s as a}from"./spread-CnPic3C2.js";import"./text-passage-xQVosjOr.js";import"./heading-Dbka33DK.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";const g={title:"cre8 Components/Text Passage",component:"cre8-text-passage",parameters:{status:{type:"inProgress"}},argTypes:{size:{options:["default","small","large"],control:{type:"select"}},inverted:{control:{type:"boolean"}}}},i={render:e=>l`<cre8-text-passage ${a(e)}>
+import{b as l}from"./iframe-nwd_1gnU.js";import{s as a}from"./spread-D16Rn3WA.js";import"./text-passage-C6jDH-er.js";import"./heading-ByebtBvm.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";const g={title:"cre8 Components/Text Passage",component:"cre8-text-passage",parameters:{status:{type:"inProgress"}},argTypes:{size:{options:["default","small","large"],control:{type:"select"}},inverted:{control:{type:"boolean"}}}},i={render:e=>l`<cre8-text-passage ${a(e)}>
     <p>
       A text passage contains arbitrary text that might come from a CMS. It should live within a container that caps the line length of the text to
       avoid a straining reading experience.

package/dist/assets/{tooltip.stories-DLKyyeKn.js → tooltip.stories-DKVATLuD.js}

@@ -1,4 +1,4 @@
-import{a as k,b as c,o as v}from"./iframe-BNJP6ovU.js";import{s as _}from"./spread-CnPic3C2.js";import{s as x}from"./story-helpers-BFn_kBYw.js";import"./icon-ChfRWXWy.js";import{C as z,n as a}from"./cre8-element-B35i4Lyg.js";import{e as w}from"./query-BpjciUlk.js";import{n as A}from"./index.browser-BY9c7rfI.js";import{o as C}from"./if-defined-Bxnzk64Q.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const T=k`.cre8-u-content-knockout-brand {
+import{a as k,b as c,o as v}from"./iframe-nwd_1gnU.js";import{s as _}from"./spread-D16Rn3WA.js";import{s as x}from"./story-helpers-BFn_kBYw.js";import"./icon-BvsTH4V8.js";import{C as z,n as a}from"./cre8-element-CaOpCq8p.js";import{e as w}from"./query-BpjciUlk.js";import{n as A}from"./index.browser-BY9c7rfI.js";import{o as C}from"./if-defined-RYzTvKuT.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const T=k`.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 */
 }
 
 /**
@@ -778,7 +786,7 @@ svg {
   display: flex;
   height: 1rem;
   width: 1rem;
-}`;var R=Object.defineProperty,o=(p,e,t,r)=>{for(var n=void 0,s=p.length-1,y;s>=0;s--)(y=p[s])&&(n=y(e,t,n)||n);return n&&R(e,t,n),n};const b=class b extends z{constructor(){super(...arguments),this.iconRotateDegree=0,this.removeActive=()=>{this.isActive&&this.toggleActive()}}get isRTL(){return document.dir==="rtl"}updated(){const e=this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(((t,r)=>`${t}${r.textContent.replace(/\n/g,"").trim()}`),"");document.getElementById(this._uniqueId)&&(document.getElementById(this._uniqueId).textContent=e)}firstUpdated(){if(this.ariaDescribes){this._uniqueId=this._uniqueId||A();const e=new RegExp(`\\b${this._uniqueId}\\b`),t=document.createElement("div");t.setAttribute("role","tooltip"),t.setAttribute("style","position:fixed; left: -1000px; top: -1000px;"),t.id=this._uniqueId;const r=document.getElementById(this.ariaDescribes);r.parentNode.insertBefore(t,r);const n=r?.getAttribute("aria-describedBy");r?.setAttribute("aria-describedby",`${n?`${n.replace(e,"")} `:""}${this._uniqueId}`.trim())}}connectedCallback(){super.connectedCallback(),this.addEventListener("mouseover",this.toggleActive),this.addEventListener("mouseout",this.removeActive)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("mouseover",this.toggleActive),this.removeEventListener("mouseout",this.removeActive)}dynamicPosition(){if(this.isDynamic&&this._Cre8TooltipPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8TooltipPanel.getBoundingClientRect(),r=this._Cre8Tooltip.clientHeight+t.height+t.top;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),r>=window.innerHeight&&t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_handleKeydown(e){this.isActive&&(e.code==="Escape"||e.code==="Tab")&&this.toggleActive(),(e.code==="Enter"||e.code==="Space")&&this.toggleActive()}toggleActive(){this.isActive=!this.isActive,this.isActive?(setTimeout(()=>{this.dynamicPosition()},1),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.isDynamic?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}render(){const e=this.componentClassNames("cre8-c-tooltip",{"cre8-c-tooltip--top":this.position==="top","cre8-c-tooltip--left":this.position==="left","cre8-c-tooltip--right":this.position==="right","cre8-c-tooltip--knockout":this.knockout,"cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return c`
+}`;var R=Object.defineProperty,o=(p,e,t,r)=>{for(var n=void 0,s=p.length-1,y;s>=0;s--)(y=p[s])&&(n=y(e,t,n)||n);return n&&R(e,t,n),n};const b=class b extends z{constructor(){super(...arguments),this.iconRotateDegree=0,this.removeActive=()=>{this.isActive&&this.toggleActive()}}get isRTL(){return document.dir==="rtl"}updated(){const e=this.shadowRoot.querySelectorAll("slot")[1].assignedNodes().reduce(((t,r)=>`${t}${r.textContent.replace(/\n/g,"").trim()}`),"");document.getElementById(this._uniqueId)&&(document.getElementById(this._uniqueId).textContent=e)}firstUpdated(){if(this.ariaDescribes){this._uniqueId=this._uniqueId||A();const e=new RegExp(`\\b${this._uniqueId}\\b`),t=document.createElement("div");t.setAttribute("role","tooltip"),t.setAttribute("style","position:fixed; left: -1000px; top: -1000px;"),t.id=this._uniqueId;const r=document.getElementById(this.ariaDescribes);r.parentNode.insertBefore(t,r);const n=r?.getAttribute("aria-describedBy");r?.setAttribute("aria-describedby",`${n?`${n.replace(e,"")} `:""}${this._uniqueId}`.trim())}}connectedCallback(){super.connectedCallback(),this.addEventListener("mouseover",this.toggleActive),this.addEventListener("mouseout",this.removeActive)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("mouseover",this.toggleActive),this.removeEventListener("mouseout",this.removeActive)}dynamicPosition(){if(this.isDynamic&&this._Cre8TooltipPanel){const e=document.querySelector("body").getBoundingClientRect(),t=this._Cre8TooltipPanel.getBoundingClientRect(),r=this._Cre8Tooltip.clientHeight+t.height+t.top;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),r>=window.innerHeight&&t.bottom>=window.innerHeight&&t.left>=0&&t.right<=e.width&&(this.position="top")}}_handleKeydown(e){this.isActive&&(e.code==="Escape"||e.code==="Tab")&&this.toggleActive(),(e.code==="Enter"||e.code==="Space")&&this.toggleActive()}toggleActive(){this.isActive=!this.isActive,this.isActive?(setTimeout(()=>{this.dynamicPosition()},1),this.dispatchWithLegacyAlias(new CustomEvent("tooltip-open",{detail:{isActive:this.isActive},bubbles:!0,composed:!0}))):this.dispatchWithLegacyAlias(new CustomEvent("tooltip-close",{detail:{isActive:this.isActive},bubbles:!0,composed:!0})),setTimeout(()=>{this.isActive&&this.isDynamic?this.isActiveDynamic=!0:this.isActiveDynamic=!1},2)}render(){const e=this.componentClassNames("cre8-c-tooltip",{"cre8-c-tooltip--top":this.position==="top","cre8-c-tooltip--left":this.position==="left","cre8-c-tooltip--right":this.position==="right","cre8-c-tooltip--knockout":this.knockout,"cre8-is-active":this.isActive,"cre8-is-dynamic":this.isDynamic,"cre8-is-dynamic-active":this.isActiveDynamic});return c`
         <div class="${e}">
             <div 
                 class="cre8-c-tooltip__trigger"
@@ -803,7 +811,7 @@ svg {
       `}};b.styles=[T];let i=b;o([a()],i.prototype,"position");o([a({type:Boolean,reflect:!0})],i.prototype,"knockout");o([a({type:Boolean,reflect:!0})],i.prototype,"isDynamic");o([a({type:Boolean})],i.prototype,"isActiveDynamic");o([a({type:Boolean,reflect:!0})],i.prototype,"isActive");o([a({type:String})],i.prototype,"ariaDescribes");o([a({type:String})],i.prototype,"_uniqueId");o([a()],i.prototype,"svg");o([a({type:Number})],i.prototype,"iconRotateDegree");o([a()],i.prototype,"iconFlipDirection");o([w(".cre8-c-tooltip")],i.prototype,"_Cre8Tooltip");o([w(".cre8-c-tooltip__panel")],i.prototype,"_Cre8TooltipPanel");customElements.get("cre8-tooltip")===void 0&&customElements.define("cre8-tooltip",i);const l=`<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>
-`,q={title:"cre8 Components/Tooltip",component:"cre8-tooltip",parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["open","close"]}},render:({linkText:p,linkURL:e,default:t,trigger:r,dynamicPosition:n,...s})=>e!=="/?path=/story/cre8-components-tooltip--position-dynamic"?c`
+`,q={title:"cre8 Components/Tooltip",component:"cre8-tooltip",parameters:{status:{type:"inProgress"},layout:"centered",actions:{handles:["tooltip-open","tooltip-close"]}},render:({linkText:p,linkURL:e,default:t,trigger:r,dynamicPosition:n,...s})=>e!=="/?path=/story/cre8-components-tooltip--position-dynamic"?c`
       <div style="display:flex; flex-direction: row; padding:70px; align-items:center;">
         <a id="whadayacallit-default-link" href="${e}">${p}</a>
         <cre8-tooltip ${_(s)} ariaDescribes="whadayacallit-default-link">
@@ -834,7 +842,7 @@ svg {
             </cre8-tooltip>
           </div>
         </div>
-      `,args:{ariaDescribes:"whadayacallit-default-link"},argTypes:{ariaDescribes:{control:"text"},close:{table:{disable:!0}},isActive:{table:{disable:!0}},isActiveDynamic:{table:{disable:!0}},isDynamic:{control:"boolean"},isRTL:{table:{disable:!0}},knockout:{control:"boolean"},linkText:{table:{disable:!0}},linkURL:{table:{disable:!0}},open:{table:{disable:!0}},position:{options:["default","top","right","left"]},removeActive:{table:{disable:!0}},svg:{control:"text"},iconRotateDegree:{control:"text"},iconFlipDirection:{options:["vertical","horizontal","both"]}}},m={args:{linkText:"Trouble",linkURL:"/?path=/story/cre8-components-tooltip--default",default:"<span>Something <strong>easy</strong> to get into, but hard to get out of reallyreallylongwordthatshouldbreaktomakethetextwindownotoverflow</span>",svg:l}},g={args:{knockout:!0,linkText:"An iWitness",linkURL:"/?path=/story/cre8-components-tooltip--knockout",default:"Someone that saw an iPhone being stolen",svg:l}},u={args:{position:"top",linkText:"A plain bagel",linkURL:"/?path=/story/cre8-components-tooltip--position-top",default:"A bagel that can fly",svg:l}},h={args:{position:"left",linkText:"An undercover cop",linkURL:"/?path=/story/cre8-components-tooltip--position-left",default:"A policeman in bed",svg:l}},f={args:{position:"right",linkText:"An umbrella",linkURL:"/?path=/story/cre8-components-tooltip--position-right",default:"Something that goes up when the rain comes down",svg:l}},d={args:{isDynamic:!0,linkText:"A URL-ologist",linkURL:"/?path=/story/cre8-components-tooltip--position-dynamic"}};d.parameters={layout:"fullscreen"};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+      `,args:{ariaDescribes:"whadayacallit-default-link"},argTypes:{ariaDescribes:{control:"text"},close:{table:{disable:!0}},isActive:{table:{disable:!0}},isActiveDynamic:{table:{disable:!0}},isDynamic:{control:"boolean"},isRTL:{table:{disable:!0}},knockout:{control:"boolean"},linkText:{table:{disable:!0}},linkURL:{table:{disable:!0}},open:{table:{disable:!0}},position:{options:["default","top","right","left"]},removeActive:{table:{disable:!0}},svg:{control:"text"},iconRotateDegree:{control:"text"},iconFlipDirection:{options:["vertical","horizontal","both"]}}},m={args:{linkText:"Trouble",linkURL:"/?path=/story/cre8-components-tooltip--default",default:"<span>Something <strong>easy</strong> to get into, but hard to get out of reallyreallylongwordthatshouldbreaktomakethetextwindownotoverflow</span>",svg:l}},g={args:{knockout:!0,linkText:"An iWitness",linkURL:"/?path=/story/cre8-components-tooltip--knockout",default:"Someone that saw an iPhone being stolen",svg:l}},h={args:{position:"top",linkText:"A plain bagel",linkURL:"/?path=/story/cre8-components-tooltip--position-top",default:"A bagel that can fly",svg:l}},u={args:{position:"left",linkText:"An undercover cop",linkURL:"/?path=/story/cre8-components-tooltip--position-left",default:"A policeman in bed",svg:l}},f={args:{position:"right",linkText:"An umbrella",linkURL:"/?path=/story/cre8-components-tooltip--position-right",default:"Something that goes up when the rain comes down",svg:l}},d={args:{isDynamic:!0,linkText:"A URL-ologist",linkURL:"/?path=/story/cre8-components-tooltip--position-dynamic"}};d.parameters={layout:"fullscreen"};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   args: {
     linkText: 'Trouble',
     linkURL: '/?path=/story/cre8-components-tooltip--default',
@@ -849,7 +857,7 @@ svg {
     default: 'Someone that saw an iPhone being stolen',
     svg: svgInfoFilled
   }
-}`,...g.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   args: {
     position: 'top',
     linkText: 'A plain bagel',
@@ -857,7 +865,7 @@ svg {
     default: 'A bagel that can fly',
     svg: svgInfoFilled
   }
-}`,...u.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+}`,...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     position: 'left',
     linkText: 'An undercover cop',
@@ -865,7 +873,7 @@ svg {
     default: 'A policeman in bed',
     svg: svgInfoFilled
   }
-}`,...h.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
   args: {
     position: 'right',
     linkText: 'An umbrella',
@@ -879,4 +887,4 @@ svg {
     linkText: 'A URL-ologist',
     linkURL: '/?path=/story/cre8-components-tooltip--position-dynamic'
   }
-}`,...d.parameters?.docs?.source}}};const O=["DefaultIcon","Knockout","PositionTop","PositionLeft","PositionRight","PositionDynamic"];export{m as DefaultIcon,g as Knockout,d as PositionDynamic,h as PositionLeft,f as PositionRight,u as PositionTop,O as __namedExportsOrder,q as default};
+}`,...d.parameters?.docs?.source}}};const O=["DefaultIcon","Knockout","PositionTop","PositionLeft","PositionRight","PositionDynamic"];export{m as DefaultIcon,g as Knockout,d as PositionDynamic,u as PositionLeft,f as PositionRight,h as PositionTop,O as __namedExportsOrder,q as default};

package/dist/assets/{utility-nav.stories-B6xBFe7z.js → utility-nav.stories-Bru0bzcG.js}

@@ -1,4 +1,4 @@
-import{a as y,A as p,b as i}from"./iframe-BNJP6ovU.js";import{s as z}from"./spread-CnPic3C2.js";import{o as c}from"./if-defined-Bxnzk64Q.js";import{C as x,n as o}from"./cre8-element-B35i4Lyg.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const w=y`.cre8-u-content-knockout-brand {
+import{a as x,A as p,b as i}from"./iframe-nwd_1gnU.js";import{s as z}from"./spread-D16Rn3WA.js";import{o as c}from"./if-defined-RYzTvKuT.js";import{C as y,n as o}from"./cre8-element-CaOpCq8p.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.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 */
 }
 
 /**
@@ -640,7 +648,7 @@ cre8-icon-legacy {
 cre8-icon-legacy + .cre8-c-utility-nav__text {
   margin-left: 0.5rem;
   /* 1 */
-}`;var k=Object.defineProperty,l=(a,e,d,v)=>{for(var t=void 0,n=a.length-1,m;n>=0;n--)(m=a[n])&&(t=m(e,d,t)||t);return t&&k(e,d,t),t};const h=class h extends x{constructor(){super(...arguments),this.iconPosition=void 0}render(){const e=this.componentClassNames("cre8-c-utility-nav__item",{});return this.href?i`
+}`;var k=Object.defineProperty,s=(a,e,d,v)=>{for(var t=void 0,n=a.length-1,m;n>=0;n--)(m=a[n])&&(t=m(e,d,t)||t);return t&&k(e,d,t),t};const h=class h extends y{constructor(){super(...arguments),this.iconPosition=void 0}render(){const e=this.componentClassNames("cre8-c-utility-nav__item",{});return this.href?i`
         <li class="${e}">
           <a href="${this.href}" class="cre8-c-utility-nav__link">
             ${this.iconPosition==="before"?i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>`:p}
@@ -664,7 +672,7 @@ cre8-icon-legacy + .cre8-c-utility-nav__text {
             ${this.iconPosition==="after"?i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>`:p}
           </button>
         </li>
-      `}};h.styles=[w];let r=h;l([o({type:Boolean,reflect:!0})],r.prototype,"hideText");l([o()],r.prototype,"href");l([o()],r.prototype,"iconName");l([o()],r.prototype,"iconPosition");l([o()],r.prototype,"text");customElements.get("cre8-utility-nav-item")===void 0&&customElements.define("cre8-utility-nav-item",r);const _=y`.cre8-u-content-knockout-brand {
+      `}};h.styles=[w];let r=h;s([o({type:Boolean,reflect:!0})],r.prototype,"hideText");s([o()],r.prototype,"href");s([o()],r.prototype,"iconName");s([o()],r.prototype,"iconPosition");s([o()],r.prototype,"text");customElements.get("cre8-utility-nav-item")===void 0&&customElements.define("cre8-utility-nav-item",r);const _=x`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -1038,6 +1046,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1210,6 +1222,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1276,13 +1292,13 @@ span.ripple {
 .cre8-c-utility-nav__list ::slotted(cre8-utility-nav-item) {
   margin-left: 1rem;
   margin-top: 1rem;
-}`;var I=Object.defineProperty,b=(a,e,d,v)=>{for(var t=void 0,n=a.length-1,m;n>=0;n--)(m=a[n])&&(t=m(e,d,t)||t);return t&&I(e,d,t),t};const f=class f extends x{constructor(){super(...arguments),this.navAriaLabel="utility"}render(){const e=this.componentClassNames("cre8-c-utility-nav",{"cre8-c-utility-nav--inverted":this.inverted===!0});return i`
+}`;var I=Object.defineProperty,b=(a,e,d,v)=>{for(var t=void 0,n=a.length-1,m;n>=0;n--)(m=a[n])&&(t=m(e,d,t)||t);return t&&I(e,d,t),t};const f=class f extends y{constructor(){super(...arguments),this.navAriaLabel="utility"}render(){const e=this.componentClassNames("cre8-c-utility-nav",{"cre8-c-utility-nav--inverted":this.inverted===!0});return i`
       <nav aria-label="${this.navAriaLabel}" class="${e}">
         <ul class="cre8-c-utility-nav__list">
           <slot></slot>
         </ul>
       </nav>
-    `}};f.styles=[_];let s=f;b([o({type:Boolean,reflect:!0})],s.prototype,"inverted");b([o()],s.prototype,"navAriaLabel");customElements.get("cre8-utility-nav")===void 0&&customElements.define("cre8-utility-nav",s);const X={title:"Cre8 Components/Utility Nav",component:"cre8-utility-nav",parameters:{status:{type:"inProgress"}}},g=a=>i` <cre8-utility-nav ${z(a)}>
+    `}};f.styles=[_];let l=f;b([o({type:Boolean,reflect:!0})],l.prototype,"inverted");b([o()],l.prototype,"navAriaLabel");customElements.get("cre8-utility-nav")===void 0&&customElements.define("cre8-utility-nav",l);const X={title:"Cre8 Components/Utility Nav",component:"cre8-utility-nav",parameters:{status:{type:"inProgress"}}},g=a=>i` <cre8-utility-nav ${z(a)}>
   <cre8-utility-nav-item text="Utility Item 1"></cre8-utility-nav-item>
   <cre8-utility-nav-item text="Utility Item 2"></cre8-utility-nav-item>
 </cre8-utility-nav>`,u=()=>i` <cre8-utility-nav>

package/dist/design-tokens/brands/cre8-a2ui/css/tokens_brand.css

@@ -5,8 +5,8 @@
 :root {
   --cre8-desktop-menu-padding-vertical-padding: 1rem;
   --cre8-desktop-menu-padding-horizontal-padding: 0.5rem;
-  --cre8-input-padding: 1.5rem 2rem;
-  --cre8-input-label-margin-left: 1rem;
+  --cre8-input-padding: 0.625rem 0.875rem;
+  --cre8-input-label-margin-left: 0;
   --cre8-color-header-bg-default: #ffffff;
   --cre8-color-header-inverse-bg-default: #3B82F6;
   --cre8-color-header-menu-bg-default: #ffffff;
@@ -388,7 +388,7 @@
   --cre8-color-content-link-active: #1D4ED8;
   --cre8-color-content-inverse-link-active: #60A5FA;
   --cre8-color-border-default: #E2E8F0;
-  --cre8-color-border-strong: #64748B;
+  --cre8-color-border-strong: #94A3B8;
   --cre8-color-border-knockout: #ffffff;
   --cre8-color-border-disabled: #CBD5E1;
   --cre8-color-border-brand: #3B82F6;
@@ -431,7 +431,7 @@
   --cre8-paragraph-indent-0: 0px;
   --cre8-border-radius-small: 12px;
   --cre8-border-radius-checkbox: 4px;
-  --cre8-border-radius-default: 900px;
+  --cre8-border-radius-default: 12px;
   --cre8-border-radius-large: 24px;
   --cre8-border-radius-round: 900px;
   --cre8-border-radius-button: 900px;

package/dist/design-tokens/core/scss/theming/component.css

@@ -1 +1 @@
-*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}
+*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem;--cre8-l-max-width: 82.5rem;--cre8-l-linelength-width: 42rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem;--cre8-l-max-width: 82.5rem;--cre8-l-linelength-width: 42rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}

package/dist/design-tokens/core/scss/theming/variables.css

@@ -1,5 +1,9 @@
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -36,4 +40,6 @@
  */
 /**
  * Visually hidden from display
- *//*# sourceMappingURL=variables.css.map */
+ */
+
+/*# sourceMappingURL=variables.css.map */

package/dist/design-tokens/core/scss/theming/variables.scss

@@ -1,6 +1,17 @@
 // Global CSS custom properties that aren't part of a themes dcre8gn tokens
 :root {
   --size-base-unit: 0.5rem;
+
+  // Layout widths
+  // 1) `cre8-layout-container` and `cre8-linelength-container` are built
+  //    entirely around these two properties, but neither had a definition
+  //    anywhere in the shipped package. `max-width` therefore resolved to an
+  //    invalid value and fell back to `none`, so both containers silently did
+  //    nothing unless the host page declared the properties itself.
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**

package/dist/iframe.html

@@ -45,7 +45,7 @@
       window.LOGLEVEL = 'info';
       window.FRAMEWORK_OPTIONS = {};
       window.CHANNEL_OPTIONS = {};
-      window.FEATURES = {"actions":true,"argTypeTargetsV7":true,"babelRemoveBugfixes":false,"backgrounds":true,"changeDetection":true,"componentsManifest":false,"controls":true,"disallowImplicitActionsInRenderV8":true,"highlight":true,"interactions":true,"legacyDecoratorFileOrder":false,"measure":true,"outline":true,"menuOnboardingChecklist":true,"sidebarOnboardingChecklist":true,"viewport":true};
+      window.FEATURES = {"actions":true,"argTypeTargetsV7":true,"babelRemoveBugfixes":false,"backgrounds":true,"changeDetection":true,"componentsManifest":true,"controls":true,"disallowImplicitActionsInRenderV8":true,"highlight":true,"interactions":true,"legacyDecoratorFileOrder":false,"measure":true,"outline":true,"menuOnboardingChecklist":true,"sidebarOnboardingChecklist":true,"viewport":true};
       window.STORIES = [{"titlePrefix":"","directory":"./components","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./components","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"./.storybook/components/icon-grid","files":"icon-grid.stories.ts","importPathMatcher":"^\\.[\\\\/](?:\\.storybook\\/components\\/icon-grid\\/icon-grid\\.stories\\.ts)$"},{"titlePrefix":"","directory":"./.storybook/patterns","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook\\/patterns(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"./.storybook/components/system-docs","files":"*.mdx","importPathMatcher":"^\\.[\\\\/](?:\\.storybook\\/components\\/system-docs\\/(?!\\.)(?=.)[^/]*?\\.mdx)$"}];
       window.DOCS_OPTIONS = {"defaultName":"Docs"};
       window.TAGS_OPTIONS = {};
@@ -551,6 +551,28 @@
     console.warn('unable to connect to top frame for connecting dev tools');
   }
 </script>
+<script>
+	/*
+	 * Minimal `process` shim.
+	 *
+	 * `@wc-toolkit/storybook-helpers` imports `path`, which Vite resolves to the
+	 * userland `path@0.12.7` package present transitively via
+	 * `@bundled-es-modules/glob` and `@bundled-es-modules/memfs`. That package is
+	 * a Node polyfill and dereferences `process` at module scope, so pre-bundling
+	 * it for the browser threw `ReferenceError: process is not defined` before any
+	 * story could mount — every story sat on the "preparing story" loader.
+	 *
+	 * This runs before the preview's module graph, which a Vite `define` cannot do
+	 * safely here: defining bare `process` would also rewrite the `process.env.*`
+	 * reads that Storybook and Vite rely on.
+	 */
+	window.process = window.process || {
+		env: {},
+		platform: 'browser',
+		argv: [],
+		cwd: function () { return '/'; },
+	};
+</script>
 <style>
     @font-face {
 	font-family: 'Aeonik';
@@ -615,8 +637,9 @@
 }
 
 </style>
-    <script type="module" crossorigin src="./assets/iframe-BNJP6ovU.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-nwd_1gnU.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-PPVm8Dsz.js">
+    <link rel="stylesheet" crossorigin href="./assets/iframe-CWwoGI65.css">
   </head>
 
   <body>