@tmorrow/cre8-wc 2.0.5 → 2.0.7

package/dist/assets/{tooltip.stories-CVPX_J3l.js → tooltip.stories-B7ADDq7o.js}

@@ -1,4 +1,4 @@
-import{i as w,b as c}from"./iframe-CdWmiVXf.js";import{s as _}from"./spread-BOaHI3Dl.js";import{o as v}from"./unsafe-html-BLUBm7l3.js";import{s as x}from"./story-helpers-BJLZYDac.js";import{a as l}from"./icon-DYiIK7a4.js";import{C as z,n as a}from"./cre8-element-gkCuLp-W.js";import{e as k}from"./query-BpjciUlk.js";import{n as A}from"./index.browser-BY9c7rfI.js";import{o as T}from"./if-defined-sxEueMHN.js";import"./preload-helper-PPVm8Dsz.js";import"./directive-b18f_ppQ.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./Caret_Down-Bmqq8eNW.js";import"./Warning-CawqmTvB.js";import"./base-DVmwUFg0.js";const R=w`.cre8-u-content-knockout-brand {
+import{a as k,b as c,o as v}from"./iframe-dHvya7sk.js";import{s as _}from"./spread-BPiNgQQF.js";import{s as x}from"./story-helpers-BFn_kBYw.js";import"./icon-DeTLDzTS.js";import{C as z,n as a}from"./cre8-element-DfmMtHJO.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-HKKhGupN.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 */
 }
 
 /**
@@ -626,7 +634,7 @@ span.ripple {
   color: var(--cre8-color-content-knockout);
   background-color: var(--cre8-color-bg-strong);
   border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  border-radius: var(--cre8-border-radius-default);
+  border-radius: var(--cre8-border-radius-container);
   padding: 0.5rem;
   /**
    * Active state for tooltip panel
@@ -778,7 +786,7 @@ svg {
   display: flex;
   height: 1rem;
   width: 1rem;
-}`;var D=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&&D(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.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`
         <div class="${e}">
             <div 
                 class="cre8-c-tooltip__trigger"
@@ -793,14 +801,17 @@ svg {
             </slot>`:c`<slot name="trigger"></slot>`}
             </div>
             <dialog
-                id=${T(this._uniqueId)}
+                id=${C(this._uniqueId)}
                 aria-labelledby=${this.ariaDescribes}
                 class="cre8-c-tooltip__panel"
                 role="tooltip">
                 <slot></slot>
             </dialog>
         </div>
-      `}};b.styles=[R];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([k(".cre8-c-tooltip")],i.prototype,"_Cre8Tooltip");o([k(".cre8-c-tooltip__panel")],i.prototype,"_Cre8TooltipPanel");customElements.get("cre8-tooltip")===void 0&&customElements.define("cre8-tooltip",i);const V={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`
+      `}};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`
       <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">
@@ -831,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',
@@ -846,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',
@@ -854,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',
@@ -862,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',
@@ -876,4 +887,4 @@ svg {
     linkText: 'A URL-ologist',
     linkURL: '/?path=/story/cre8-components-tooltip--position-dynamic'
   }
-}`,...d.parameters?.docs?.source}}};const Y=["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,Y as __namedExportsOrder,V 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-BVyQKpR1.js → utility-nav.stories-ffXVvyLp.js}

@@ -1,4 +1,4 @@
-import{i as y,A as p,b as i}from"./iframe-CdWmiVXf.js";import{s as z}from"./spread-BOaHI3Dl.js";import{o as c}from"./if-defined-sxEueMHN.js";import{C as x,n as o}from"./cre8-element-gkCuLp-W.js";import"./preload-helper-PPVm8Dsz.js";import"./directive-b18f_ppQ.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-dHvya7sk.js";import{s as z}from"./spread-BPiNgQQF.js";import{o as c}from"./if-defined-HKKhGupN.js";import{C as y,n as o}from"./cre8-element-DfmMtHJO.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 F={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>
@@ -1303,4 +1319,4 @@ span.ripple {
     iconName="search"
     ?hideText=\${true}
   ></cre8-utility-nav-item>
-</cre8-utility-nav>\``,...u.parameters?.docs?.source}}};const N=["Default","IconOnly"];export{g as Default,u as IconOnly,N as __namedExportsOrder,F as default};
+</cre8-utility-nav>\``,...u.parameters?.docs?.source}}};const F=["Default","IconOnly"];export{g as Default,u as IconOnly,F as __namedExportsOrder,X as default};

package/dist/design-tokens/brands/claude-terracotta/css/tokens_brand.css

@@ -0,0 +1,85 @@
+:root {
+  /* ─── Background & Surface ─────────────────────────────────── */
+  --cre8-background-default:    #FFFFFF;
+  --cre8-background-subtle:     #FBF6F3;
+  --cre8-background-strong:     #F2E8E2;
+  --cre8-background-inverse:    #1A1208;
+  --cre8-surface-default:       #FFFFFF;
+  --cre8-surface-elevated:      #FFFAF8;
+
+  /* ─── Content (text) ───────────────────────────────────────── */
+  --cre8-content-default:       #1A1208;
+  --cre8-content-muted:         #8A7A72;
+  --cre8-content-inverse:       #FFFFFF;
+  --cre8-content-link:          #9E3A15;
+
+  /* ─── Borders ──────────────────────────────────────────────── */
+  --cre8-border-subtle:         #F0E2D9;
+  --cre8-border-default:        #D9C4B8;
+  --cre8-border-strong:         #7A5D52;
+  --cre8-border-inverse:        #B09080;
+
+  /* ─── Accent / Brand ───────────────────────────────────────── */
+  --cre8-accent-primary:        #C85F2F;
+  --cre8-accent-primary-hover:  #A84D24;
+  --cre8-accent-primary-active: #8C3F1C;
+  --cre8-accent-primary-subtle: rgba(200, 95, 47, 0.10);
+  --cre8-accent-secondary:      #1A1208;
+  --cre8-focus-ring:            #C85F2F;
+
+  /* ─── Status (brand-neutral, same as cre8-teal) ────────────── */
+  --cre8-status-info:           #1963E1;
+  --cre8-status-success:        #1E9E5A;
+  --cre8-status-warning:        #E08A1F;
+  --cre8-status-error:          #D02525;
+  --cre8-status-error-dark:     #AA1313;
+  --cre8-status-error-darkest:  #7A0000;
+  --cre8-overlay:               rgba(0, 0, 0, 0.20);
+
+  /* ─── Spacing (same across all skins) ─────────────────────── */
+  --cre8-spacing-2xs:  2px;
+  --cre8-spacing-xs:   4px;
+  --cre8-spacing-sm:   8px;
+  --cre8-spacing-md:   12px;
+  --cre8-spacing-lg:   16px;
+  --cre8-spacing-xl:   24px;
+  --cre8-spacing-2xl:  32px;
+  --cre8-spacing-3xl:  48px;
+  --cre8-spacing-4xl:  64px;
+  --cre8-spacing-5xl:  96px;
+
+  /* ─── Radius ───────────────────────────────────────────────── */
+  --cre8-radius-none:  0px;
+  --cre8-radius-sm:    4px;
+  --cre8-radius-md:    8px;
+  --cre8-radius-lg:    12px;
+  --cre8-radius-xl:    16px;
+  --cre8-radius-2xl:   24px;
+  --cre8-radius-full:  9999px;
+
+  /* ─── Typography — Font Size ───────────────────────────────── */
+  --cre8-font-size-xs:   12px;
+  --cre8-font-size-sm:   14px;
+  --cre8-font-size-md:   16px;
+  --cre8-font-size-lg:   18px;
+  --cre8-font-size-xl:   20px;
+  --cre8-font-size-2xl:  24px;
+  --cre8-font-size-3xl:  32px;
+  --cre8-font-size-4xl:  40px;
+  --cre8-font-size-5xl:  56px;
+  --cre8-font-size-6xl:  72px;
+
+  /* ─── Typography — Font Weight ─────────────────────────────── */
+  --cre8-font-weight-regular:   400;
+  --cre8-font-weight-medium:    500;
+  --cre8-font-weight-semibold:  600;
+  --cre8-font-weight-bold:      700;
+
+  /* ─── Typography — Font Family ─────────────────────────────── */
+  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;
+  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+  /* ─── Typography — Line Height ─────────────────────────────── */
+  --cre8-line-height-tight:  1.2;
+  --cre8-line-height-normal: 1.5;
+}

package/dist/design-tokens/brands/claude-terracotta/css/tokens_claude-terracotta.css

@@ -0,0 +1 @@
+@import './tokens_brand.css';

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

@@ -2,8 +2,7 @@
 	font-family: 'Plus Jakarta Sans';
 	font-style: normal;
 	font-weight: 400;
-	src: url('../assets/fonts/PlusJakartaSans-Regular.woff2') format('woff2'),
-			 url('../assets/fonts/PlusJakartaSans-Regular.woff') format('woff');
+	src: url('assets/fonts/PlusJakartaSans-Regular.woff2') format('woff2');
 	font-display: fallback;
 }
 
@@ -11,8 +10,7 @@
 	font-family: 'Plus Jakarta Sans';
 	font-style: medium;
 	font-weight: 500;
-	src: url('../assets/fonts/PlusJakartaSans-Medium.woff2') format('woff2'),
-			 url('../assets/fonts/PlusJakartaSans-Medium.woff') format('woff');
+	src: url('assets/fonts/PlusJakartaSans-Medium.woff2') format('woff2');
 	font-display: fallback;
 }
 
@@ -20,8 +18,7 @@
 	font-family: 'Plus Jakarta Sans';
 	font-style: medium;
 	font-weight: 600;
-	src: url('../assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'),
-			 url('../assets/fonts/PlusJakartaSans-SemiBold.woff') format('woff');
+	src: url('assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
 	font-display: fallback;
 }
 
@@ -29,7 +26,6 @@
 	font-family: 'Plus Jakarta Sans';
 	font-style: normal;
 	font-weight: 700;
-	src: url('../assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2'),
-			 url('../assets/fonts/PlusJakartaSans-Bold.woff') format('woff');
+	src: url('assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
 	font-display: fallback;
 }

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

@@ -430,6 +430,7 @@
   --cre8-text-decoration-underline: underline;
   --cre8-paragraph-indent-0: 0px;
   --cre8-border-radius-small: 12px;
+  --cre8-border-radius-checkbox: 4px;
   --cre8-border-radius-default: 900px;
   --cre8-border-radius-large: 24px;
   --cre8-border-radius-round: 900px;

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

@@ -0,0 +1,87 @@
+/* packages/cre8-wc/design-tokens/brands/cre8-teal/css/tokens_brand.css */
+
+:root {
+  /* ─── Background & Surface ─────────────────────────────────── */
+  --cre8-background-default:    #FFFFFF;
+  --cre8-background-subtle:     #F5F5F5;
+  --cre8-background-strong:     #EAEAEA;
+  --cre8-background-inverse:    #1A1A1A;
+  --cre8-surface-default:       #FFFFFF;
+  --cre8-surface-elevated:      #FFFFFF;
+
+  /* ─── Content (text) ───────────────────────────────────────── */
+  --cre8-content-default:       #1A1A1A;
+  --cre8-content-muted:         #949494;
+  --cre8-content-inverse:       #FFFFFF;
+  --cre8-content-link:          #1963E1;
+
+  /* ─── Borders ──────────────────────────────────────────────── */
+  --cre8-border-subtle:         #EAEAEA;
+  --cre8-border-default:        #D5D5D5;
+  --cre8-border-strong:         #6C6C6C;
+  --cre8-border-inverse:        #ABABAB;
+
+  /* ─── Accent / Brand ───────────────────────────────────────── */
+  --cre8-accent-primary:        #0EA5A8;
+  --cre8-accent-primary-hover:  #0B8588;
+  --cre8-accent-primary-active: #086E70;
+  --cre8-accent-primary-subtle: rgba(14, 165, 168, 0.10);
+  --cre8-accent-secondary:      #1A1A1A;
+  --cre8-focus-ring:            #0EA5A8;
+
+  /* ─── Status ───────────────────────────────────────────────── */
+  --cre8-status-info:           #1963E1;
+  --cre8-status-success:        #1E9E5A;
+  --cre8-status-warning:        #E08A1F;
+  --cre8-status-error:          #D02525;
+  --cre8-status-error-dark:     #AA1313;
+  --cre8-status-error-darkest:  #7A0000;
+  --cre8-overlay:               rgba(0, 0, 0, 0.20);
+
+  /* ─── Spacing ──────────────────────────────────────────────── */
+  --cre8-spacing-2xs:  2px;
+  --cre8-spacing-xs:   4px;
+  --cre8-spacing-sm:   8px;
+  --cre8-spacing-md:   12px;
+  --cre8-spacing-lg:   16px;
+  --cre8-spacing-xl:   24px;
+  --cre8-spacing-2xl:  32px;
+  --cre8-spacing-3xl:  48px;
+  --cre8-spacing-4xl:  64px;
+  --cre8-spacing-5xl:  96px;
+
+  /* ─── Radius ───────────────────────────────────────────────── */
+  --cre8-radius-none:  0px;
+  --cre8-radius-sm:    4px;
+  --cre8-radius-md:    8px;
+  --cre8-radius-lg:    12px;
+  --cre8-radius-xl:    16px;
+  --cre8-radius-2xl:   24px;
+  --cre8-radius-full:  9999px;
+
+  /* ─── Typography — Font Size ───────────────────────────────── */
+  --cre8-font-size-xs:   12px;
+  --cre8-font-size-sm:   14px;
+  --cre8-font-size-md:   16px;
+  --cre8-font-size-lg:   18px;
+  --cre8-font-size-xl:   20px;
+  --cre8-font-size-2xl:  24px;
+  --cre8-font-size-3xl:  32px;
+  --cre8-font-size-4xl:  40px;
+  --cre8-font-size-5xl:  56px;
+  --cre8-font-size-6xl:  72px;
+
+  /* ─── Typography — Font Weight ─────────────────────────────── */
+  --cre8-font-weight-regular:   400;
+  --cre8-font-weight-medium:    500;
+  --cre8-font-weight-semibold:  600;
+  --cre8-font-weight-bold:      700;
+
+  /* ─── Typography — Font Family ─────────────────────────────── */
+  --cre8-font-family-sans: 'Inter', system-ui, sans-serif;
+  --cre8-font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+  /* ─── Typography — Line Height ─────────────────────────────── */
+  --cre8-line-height-tight:  1.2;
+  --cre8-line-height-normal: 1.5;
+}

package/dist/design-tokens/brands/cre8-teal/css/tokens_cre8-teal.css

@@ -0,0 +1 @@
+@import './tokens_brand.css';