@tmorrow/cre8-wc 2.1.0 → 2.2.0

package/dist/assets/{table-header-2837i43H.js → table-header-B2jlwG0L.js}

@@ -1,4 +1,4 @@
-import{a as p,b as r}from"./iframe-BNJP6ovU.js";import{C as g,n as a}from"./cre8-element-B35i4Lyg.js";import"./button-CgaWukz0.js";import{o as b}from"./if-defined-Bxnzk64Q.js";const V=p`.cre8-u-content-knockout-brand {
+import{a as g,b as n}from"./iframe-nwd_1gnU.js";import{C as c,n as a}from"./cre8-element-CaOpCq8p.js";import{s as X}from"./light-children-DDjBxt3J.js";import"./button-rmsX1TVb.js";import{o as x}from"./if-defined-RYzTvKuT.js";const F=g`.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 */
 }
 
 /**
@@ -630,14 +638,14 @@ span.ripple {
   .cre8-c-table--responsive {
     --cre8-table-cell-border-bottom-width: var(--cre8-border-width-default);
   }
-}`;var X=Object.defineProperty,u=(n,e,o,f)=>{for(var t=void 0,i=n.length-1,d;i>=0;i--)(d=n[i])&&(t=d(e,o,t)||t);return t&&X(e,o,t),t};const z=class z extends g{render(){const e=this.componentClassNames("cre8-c-table",{"cre8-c-table--hoverable":this.isHoverable,"cre8-c-table--striped":this.variant==="striped","cre8-c-table--responsive":this.behavior==="responsive"});return r`
-      <table role="table" class="${e}">
-        ${this.caption?r`<caption class="cre8-c-table__caption">
+}`;var T=Object.defineProperty,h=(d,t,o,s)=>{for(var e=void 0,i=d.length-1,r;i>=0;i--)(r=d[i])&&(e=r(t,o,e)||e);return e&&T(t,o,e),e};const v=class v extends c{buildComposition(){if(!this.columns&&!this.rows)return null;const t=this.columns??[],o=this.rows??[],s=(i,r,b=!1)=>({tag:b?"cre8-table-header-cell":"cre8-table-cell",props:b?{width:r?.width}:{dataHeader:r?.label},text:i==null?"":String(i)}),e=[];return t.length&&e.push({tag:"cre8-table-header",children:[{tag:"cre8-table-row",children:t.map(i=>s(i.label,i,!0))}]}),e.push({tag:"cre8-table-body",children:o.map(i=>({tag:"cre8-table-row",children:Array.isArray(i)?i.map((r,b)=>s(r,t[b])):t.map(r=>s(i[r.key??r.label],r))}))}),e}updated(t){(t.has("columns")||t.has("rows"))&&X(this,this.buildComposition())}render(){const t=this.componentClassNames("cre8-c-table",{"cre8-c-table--hoverable":this.isHoverable,"cre8-c-table--striped":this.variant==="striped","cre8-c-table--responsive":this.behavior==="responsive"});return n`
+      <table role="table" class="${t}">
+        ${this.caption?n`<caption class="cre8-c-table__caption">
             ${this.caption}
           </caption>`:""}
-        ${r`<slot></slot>`}
+        ${n`<slot></slot>`}
       </table>
-    `}};z.styles=[V];let s=z;u([a()],s.prototype,"caption");u([a()],s.prototype,"behavior");u([a({type:Boolean,reflect:!0})],s.prototype,"isHoverable");u([a()],s.prototype,"variant");customElements.get("cre8-table")===void 0&&customElements.define("cre8-table",s);const F=p`.cre8-u-content-knockout-brand {
+    `}};v.styles=[F];let m=v;h([a({type:Array})],m.prototype,"columns");h([a({type:Array})],m.prototype,"rows");h([a()],m.prototype,"caption");h([a()],m.prototype,"behavior");h([a({type:Boolean,reflect:!0})],m.prototype,"isHoverable");h([a()],m.prototype,"variant");customElements.get("cre8-table")===void 0&&customElements.define("cre8-table",m);const B=g`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -1011,6 +1019,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1183,6 +1195,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1327,7 +1343,7 @@ span.ripple {
 }
 .cre8-is-expanded .cre8-c-table__expand-button-icon {
   transform: rotate(90deg); /* 1 */
-}`,T=p`.cre8-u-content-knockout-brand {
+}`,E=g`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -1701,6 +1717,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1873,6 +1893,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1951,21 +1975,21 @@ span.ripple {
 
 .cre8-c-table__cell--bare {
   border-bottom-color: transparent;
-}`;var B=Object.defineProperty,w=(n,e,o,f)=>{for(var t=void 0,i=n.length-1,d;i>=0;i--)(d=n[i])&&(t=d(e,o,t)||t);return t&&B(e,o,t),t};const v=class v extends g{render(){const e=this.componentClassNames("cre8-c-table__cell",{"cre8-c-table__cell--bare":this.variant==="bare"});return r`
+}`;var $=Object.defineProperty,z=(d,t,o,s)=>{for(var e=void 0,i=d.length-1,r;i>=0;i--)(r=d[i])&&(e=r(t,o,e)||e);return e&&$(t,o,e),e};const k=class k extends c{render(){const t=this.componentClassNames("cre8-c-table__cell",{"cre8-c-table__cell--bare":this.variant==="bare"});return n`
       <td
         data-header="${this.dataHeader}"
         role="cell"
-        colspan=${b(this.colspan)}
-        class="${e}"
+        colspan=${x(this.colspan)}
+        class="${t}"
       >
-        ${r`<slot></slot>`}
+        ${n`<slot></slot>`}
       </td>
-    `}};v.styles=[T];let l=v;w([a({type:Number})],l.prototype,"colspan");w([a()],l.prototype,"variant");w([a()],l.prototype,"dataHeader");customElements.get("cre8-table-cell")===void 0&&customElements.define("cre8-table-cell",l);var E=Object.defineProperty,h=(n,e,o,f)=>{for(var t=void 0,i=n.length-1,d;i>=0;i--)(d=n[i])&&(t=d(e,o,t)||t);return t&&E(e,o,t),t};const $=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    `}};k.styles=[E];let p=k;z([a({type:Number})],p.prototype,"colspan");z([a()],p.prototype,"variant");z([a()],p.prototype,"dataHeader");customElements.get("cre8-table-cell")===void 0&&customElements.define("cre8-table-cell",p);var C=Object.defineProperty,f=(d,t,o,s)=>{for(var e=void 0,i=d.length-1,r;i>=0;i--)(r=d[i])&&(e=r(t,o,e)||e);return e&&C(t,o,e),e};const L=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.7867 12.1506C15.7192 12.2183 15.639 12.2719 15.5507 12.3085C15.4624 12.3451 15.3678 12.3639 15.2722 12.3639C15.1766 12.3639 15.082 12.3451 14.9937 12.3085C14.9054 12.2719 14.8252 12.2183 14.7577 12.1506L7.99992 5.39197L1.24215 12.1506C1.10569 12.2871 0.920613 12.3638 0.727633 12.3638C0.534652 12.3638 0.349576 12.2871 0.213119 12.1506C0.076661 12.0142 3.8041e-09 11.8291 0 11.6361C-3.8041e-09 11.4432 0.076661 11.2581 0.213119 11.1216L7.4854 3.84933C7.55294 3.78172 7.63315 3.72808 7.72143 3.69148C7.80972 3.65488 7.90435 3.63605 7.99992 3.63605C8.09548 3.63605 8.19012 3.65488 8.2784 3.69148C8.36668 3.72808 8.44689 3.78172 8.51443 3.84933L15.7867 11.1216C15.8543 11.1892 15.908 11.2694 15.9446 11.3576C15.9812 11.4459 16 11.5406 16 11.6361C16 11.7317 15.9812 11.8263 15.9446 11.9146C15.908 12.0029 15.8543 12.0831 15.7867 12.1506Z"/>
 </svg>
-`,k=class k extends g{constructor(){super(...arguments),this.expandedButtonText="Collapse Table Row",this.collapsedButtonText="Expand Table Row"}toggleIsExpanded(){this.isExpanded=!this.isExpanded,this.classList.contains("cre8-is-expanded")?this.classList.remove("cre8-is-expanded"):this.classList.add("cre8-is-expanded")}render(){const e=this.componentClassNames("cre8-c-table__row",{"cre8-c-table__row--expandable":this.isExpandable,"cre8-c-table__row--bare":this.variant==="bare","cre8-is-expanded":this.isExpanded});return r`
-      <tr role="row" class="${e}">
-        ${this.isExpandable?r`<cre8-table-cell>
+`,_=class _ extends c{constructor(){super(...arguments),this.expandedButtonText="Collapse Table Row",this.collapsedButtonText="Expand Table Row"}toggleIsExpanded(){this.isExpanded=!this.isExpanded,this.classList.contains("cre8-is-expanded")?this.classList.remove("cre8-is-expanded"):this.classList.add("cre8-is-expanded")}render(){const t=this.componentClassNames("cre8-c-table__row",{"cre8-c-table__row--expandable":this.isExpandable,"cre8-c-table__row--bare":this.variant==="bare","cre8-is-expanded":this.isExpanded});return n`
+      <tr role="row" class="${t}">
+        ${this.isExpandable?n`<cre8-table-cell>
               <button
                 class="cre8-c-table__expand-button" 
                 aria-expanded=${!!this.isExpanded}
@@ -1974,13 +1998,13 @@ span.ripple {
                 <span class="cre8-c-table__expand-button-text">
                   ${this.isExpanded?this.expandedButtonText:this.collapsedButtonText}
                 </span>
-                <cre8-icon svg='${$}' rotate="90" class="cre8-c-table__expand-button-icon"></cre8-icon>
+                <cre8-icon svg='${L}' rotate="90" class="cre8-c-table__expand-button-icon"></cre8-icon>
               </button>
             </cre8-table-cell>`:""}
-        ${r`<slot></slot>`}
+        ${n`<slot></slot>`}
       </tr>
-      ${this.isExpandable?r` <slot class="cre8-c-table__expandable-content" name="expandableContent"><slot></slot></slot>`:""}
-    `}};k.styles=[F];let m=k;h([a({type:Boolean,reflect:!0})],m.prototype,"isExpanded");h([a({type:Boolean,reflect:!0})],m.prototype,"isExpandable");h([a()],m.prototype,"variant");h([a()],m.prototype,"expandedButtonText");h([a()],m.prototype,"collapsedButtonText");customElements.get("cre8-table-row")===void 0&&customElements.define("cre8-table-row",m);const L=p`.cre8-u-content-knockout-brand {
+      ${this.isExpandable?n` <slot class="cre8-c-table__expandable-content" name="expandableContent"><slot></slot></slot>`:""}
+    `}};_.styles=[B];let l=_;f([a({type:Boolean,reflect:!0})],l.prototype,"isExpanded");f([a({type:Boolean,reflect:!0})],l.prototype,"isExpandable");f([a()],l.prototype,"variant");f([a()],l.prototype,"expandedButtonText");f([a()],l.prototype,"collapsedButtonText");customElements.get("cre8-table-row")===void 0&&customElements.define("cre8-table-row",l);const P=g`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -2354,6 +2378,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2526,6 +2554,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -2583,16 +2615,16 @@ span.ripple {
   border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
   padding: var(--cre8-spacing-8);
   text-align: left;
-}`;var C=Object.defineProperty,O=(n,e,o,f)=>{for(var t=void 0,i=n.length-1,d;i>=0;i--)(d=n[i])&&(t=d(e,o,t)||t);return t&&C(e,o,t),t};const _=class _ extends g{render(){const e=this.componentClassNames("cre8-c-table__header-cell",{});return r`
+}`;var A=Object.defineProperty,V=(d,t,o,s)=>{for(var e=void 0,i=d.length-1,r;i>=0;i--)(r=d[i])&&(e=r(t,o,e)||e);return e&&A(t,o,e),e};const R=class R extends c{render(){const t=this.componentClassNames("cre8-c-table__header-cell",{});return n`
       <th
         role="columnheader"
-        colspan=${b(this.colspan)}
-        class="${e}"
-        style="width: ${b(this.width)}"
+        colspan=${x(this.colspan)}
+        class="${t}"
+        style="width: ${x(this.width)}"
       >
-        ${r`<slot></slot>`}
+        ${n`<slot></slot>`}
       </th>
-    `}};_.styles=[L];let c=_;O([a()],c.prototype,"colspan");O([a()],c.prototype,"width");customElements.get("cre8-table-header-cell")===void 0&&customElements.define("cre8-table-header-cell",c);const P=p`.cre8-u-content-knockout-brand {
+    `}};R.styles=[P];let u=R;V([a()],u.prototype,"colspan");V([a()],u.prototype,"width");customElements.get("cre8-table-header-cell")===void 0&&customElements.define("cre8-table-header-cell",u);const j=g`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -2966,6 +2998,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -3138,6 +3174,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -3183,11 +3223,11 @@ span.ripple {
 */
 :host {
   display: contents;
-}`,R=class R extends g{render(){const e=this.componentClassNames("cre8-c-table__body",{});return r`
-      <tbody role="rowgroup" class="${e}">
-        ${r`<slot></slot>`}
+}`,I=class I extends c{render(){const t=this.componentClassNames("cre8-c-table__body",{});return n`
+      <tbody role="rowgroup" class="${t}">
+        ${n`<slot></slot>`}
       </tbody>
-    `}};R.styles=[P];let x=R;customElements.get("cre8-table-body")===void 0&&customElements.define("cre8-table-body",x);const j=p`.cre8-u-content-knockout-brand {
+    `}};I.styles=[j];let y=I;customElements.get("cre8-table-body")===void 0&&customElements.define("cre8-table-body",y);const N=g`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -3561,6 +3601,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -3733,6 +3777,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -3798,8 +3846,8 @@ span.ripple {
   .cre8-c-table__header {
     display: table-header-group;
   }
-}`,I=class I extends g{render(){const e=this.componentClassNames("cre8-c-table__header",{});return r`
-      <thead role="rowgroup" class="${e}">
-        ${r`<slot></slot>`}
+}`,O=class O extends c{render(){const t=this.componentClassNames("cre8-c-table__header",{});return n`
+      <thead role="rowgroup" class="${t}">
+        ${n`<slot></slot>`}
       </thead>
-    `}};I.styles=[j];let y=I;customElements.get("cre8-table-header")===void 0&&customElements.define("cre8-table-header",y);
+    `}};O.styles=[N];let w=O;customElements.get("cre8-table-header")===void 0&&customElements.define("cre8-table-header",w);

package/dist/assets/{table-object.stories-D4KoI-wA.js → table-object.stories-DCrrXH-U.js}

@@ -1,4 +1,4 @@
-import{a as o,b as t}from"./iframe-BNJP6ovU.js";import{s as n}from"./spread-CnPic3C2.js";import{C as c}from"./cre8-element-B35i4Lyg.js";import"./table-header-2837i43H.js";import"./button-CgaWukz0.js";import"./badge-BTxW3bN2.js";import"./text-link-B3m3KEqY.js";import"./text-passage-xQVosjOr.js";import"./f-po-BdPzDRD-.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-Bxnzk64Q.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";const d=o`.cre8-u-content-knockout-brand {
+import{a as o,b as t}from"./iframe-nwd_1gnU.js";import{s as n}from"./spread-D16Rn3WA.js";import{C as c}from"./cre8-element-CaOpCq8p.js";import"./table-header-B2jlwG0L.js";import"./button-rmsX1TVb.js";import"./badge-D5MyHlf3.js";import"./text-link-VO8qilFK.js";import"./text-passage-C6jDH-er.js";import"./f-po-ByatXsWC.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./light-children-DDjBxt3J.js";import"./if-defined-RYzTvKuT.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";import"./loading-spinner-B7JDCfNK.js";const d=o`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -372,6 +372,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -544,6 +548,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -612,7 +620,7 @@ span.ripple {
           </div>
         `}
       </div>
-    `}};a.styles=[d];let r=a;customElements.get("cre8-table-object")===void 0&&customElements.define("cre8-table-object",r);const P={title:"cre8 Components/Table/Table Object",component:"cre8-table-object",parameters:{status:{type:"beta"}}},e=i=>t`<cre8-table-object ${n(i)}>
+    `}};a.styles=[d];let r=a;customElements.get("cre8-table-object")===void 0&&customElements.define("cre8-table-object",r);const I={title:"cre8 Components/Table/Table Object",component:"cre8-table-object",parameters:{status:{type:"beta"}}},e=i=>t`<cre8-table-object ${n(i)}>
   <f-po slot="header">Content above table</f-po>
   <cre8-table caption='Example Table'>
     <cre8-table-header>
@@ -690,4 +698,4 @@ span.ripple {
     </cre8-table-body>
   </cre8-table>
   <f-po slot="footer">Content below table</f-po>
-</cre8-table-object>\``,...e.parameters?.docs?.source}}};const I=["Default"];export{e as Default,I as __namedExportsOrder,P as default};
+</cre8-table-object>\``,...e.parameters?.docs?.source}}};const R=["Default"];export{e as Default,R as __namedExportsOrder,I as default};

package/dist/assets/{table.stories-DUJDibEp.js → table.stories-DHNUpWFk.js}

@@ -1,4 +1,4 @@
-import{b as e}from"./iframe-BNJP6ovU.js";import{s as d}from"./spread-CnPic3C2.js";import"./table-header-2837i43H.js";import"./button-CgaWukz0.js";import"./badge-BTxW3bN2.js";import"./text-link-B3m3KEqY.js";import"./text-passage-xQVosjOr.js";import"./f-po-BdPzDRD-.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-Bxnzk64Q.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";const g={title:"cre8 Components/Table/Table",component:"cre8-table",parameters:{status:{type:"beta"}}},l=o=>e`<cre8-table ${d(o)}>
+import{b as e}from"./iframe-nwd_1gnU.js";import{s as d}from"./spread-D16Rn3WA.js";import"./table-header-B2jlwG0L.js";import"./button-rmsX1TVb.js";import"./badge-D5MyHlf3.js";import"./text-link-VO8qilFK.js";import"./text-passage-C6jDH-er.js";import"./f-po-ByatXsWC.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-CaOpCq8p.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./light-children-DDjBxt3J.js";import"./if-defined-RYzTvKuT.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";import"./loading-spinner-B7JDCfNK.js";const f={title:"cre8 Components/Table/Table",component:"cre8-table",parameters:{status:{type:"beta"}}},l=o=>e`<cre8-table ${d(o)}>
   <cre8-table-header>
     <cre8-table-row>
       <cre8-table-header-cell>Product Name</cre8-table-header-cell>
@@ -418,4 +418,4 @@ import{b as e}from"./iframe-BNJP6ovU.js";import{s as d}from"./spread-CnPic3C2.js
       <cre8-table-cell dataHeader="Total">$20.00</cre8-table-cell>
     </cre8-table-row>
   </cre8-table-body>
-</cre8-table>\``,...b.parameters?.docs?.source}}};const f=["Default","VisibleCaption","Striped","Hoverable","HoverableStriped","ResponsiveStacked"];export{l as Default,a as Hoverable,t as HoverableStriped,b as ResponsiveStacked,r as Striped,c as VisibleCaption,f as __namedExportsOrder,g as default};
+</cre8-table>\``,...b.parameters?.docs?.source}}};const x=["Default","VisibleCaption","Striped","Hoverable","HoverableStriped","ResponsiveStacked"];export{l as Default,a as Hoverable,t as HoverableStriped,b as ResponsiveStacked,r as Striped,c as VisibleCaption,x as __namedExportsOrder,f as default};

package/dist/assets/{tabs.stories-C06SngOF.js → tabs.stories-o9pLUMwX.js}

@@ -1,4 +1,4 @@
-import{a as w,b as x,o as R}from"./iframe-BNJP6ovU.js";import{s as S}from"./spread-CnPic3C2.js";import{s as C}from"./story-helpers-BFn_kBYw.js";import{C as z,n as s}from"./cre8-element-B35i4Lyg.js";import{e as v}from"./query-BpjciUlk.js";import{r as T}from"./state-DkQhleoO.js";import{o as A}from"./query-assigned-elements-43hYArgI.js";import{n as L}from"./index.browser-BY9c7rfI.js";import"./f-po-BdPzDRD-.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./if-defined-Bxnzk64Q.js";const P=w`.cre8-u-content-knockout-brand {
+import{a as w,b as x,o as R}from"./iframe-nwd_1gnU.js";import{s as S}from"./spread-D16Rn3WA.js";import{s as C}from"./story-helpers-BFn_kBYw.js";import{C as z,n as o}from"./cre8-element-CaOpCq8p.js";import{e as v}from"./query-BpjciUlk.js";import{r as T}from"./state-DZNbmwHN.js";import{o as E}from"./query-assigned-elements-43hYArgI.js";import{n as L}from"./index.browser-BY9c7rfI.js";import{s as V}from"./light-children-DDjBxt3J.js";import"./f-po-ByatXsWC.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";import"./if-defined-RYzTvKuT.js";const O=w`.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 */
 }
 
 /**
@@ -612,11 +620,11 @@ span.ripple {
 .cre8-c-tab-panel.cre8-is-active {
   visibility: visible;
   display: block;
-}`;var V=Object.defineProperty,y=(o,e,t,i)=>{for(var a=void 0,r=o.length-1,p;r>=0;r--)(p=o[r])&&(a=p(e,t,a)||a);return a&&V(e,t,a),a};const k=class k extends z{firstUpdated(){this.skipFocusOnPanel||this._Cre8TabPanel.setAttribute("tabindex","0")}render(){const e=this.componentClassNames("cre8-c-tab-panel",{"cre8-is-active":this.isActive});return x`
+}`;var P=Object.defineProperty,y=(d,e,t,i)=>{for(var a=void 0,n=d.length-1,c;n>=0;n--)(c=d[n])&&(a=c(e,t,a)||a);return a&&P(e,t,a),a};const k=class k extends z{firstUpdated(){this.skipFocusOnPanel||this._Cre8TabPanel.setAttribute("tabindex","0")}render(){const e=this.componentClassNames("cre8-c-tab-panel",{"cre8-is-active":this.isActive});return x`
       <div role="tabpanel" class="${e}">
         <slot></slot>
       </div>
-    `}};k.styles=[P];let m=k;y([s({type:Boolean,reflect:!0})],m.prototype,"skipFocusOnPanel");y([s({type:Boolean,reflect:!0})],m.prototype,"isActive");y([s({type:Number})],m.prototype,"index");y([v(".cre8-c-tab-panel")],m.prototype,"_Cre8TabPanel");customElements.get("cre8-tab-panel")===void 0&&customElements.define("cre8-tab-panel",m);const O=w`.cre8-u-content-knockout-brand {
+    `}};k.styles=[O];let m=k;y([o({type:Boolean,reflect:!0})],m.prototype,"skipFocusOnPanel");y([o({type:Boolean,reflect:!0})],m.prototype,"isActive");y([o({type:Number})],m.prototype,"index");y([v(".cre8-c-tab-panel")],m.prototype,"_Cre8TabPanel");customElements.get("cre8-tab-panel")===void 0&&customElements.define("cre8-tab-panel",m);const B=w`.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 */
 }
 
 /**
@@ -1295,7 +1311,7 @@ span.ripple {
 .cre8-c-tab.cre8-c-tab--small.cre8-is-active:not(:focus-visible) {
   padding-block-end: calc(0.25rem - var(--cre8-border-width-tab-selected));
   /* 1 */
-}`;var B=Object.defineProperty,h=(o,e,t,i)=>{for(var a=void 0,r=o.length-1,p;r>=0;r--)(p=o[r])&&(a=p(e,t,a)||a);return a&&B(e,t,a),a};const I=class I extends z{updated(e){e.has("ariaLabelledBy")&&this._Cre8Tab.setAttribute("id",this.ariaLabelledBy),e.has("isActive")&&(this._Cre8Tab.setAttribute("tabindex",this.isActive?"0":"-1"),this._Cre8Tab.setAttribute("aria-selected",`${this.isActive}`))}_handleTabSelected(){const e=new CustomEvent("tabSelected",{detail:{index:this.index},bubbles:!0,composed:!0});this.dispatchEvent(e)}render(){const e=this.componentClassNames("cre8-c-tab",{"cre8-is-active":this.isActive,"cre8-c-tab--small":this.size==="sm"});return x`
+}`;var F=Object.defineProperty,h=(d,e,t,i)=>{for(var a=void 0,n=d.length-1,c;n>=0;n--)(c=d[n])&&(a=c(e,t,a)||a);return a&&F(e,t,a),a};const I=class I extends z{updated(e){e.has("ariaLabelledBy")&&this._Cre8Tab.setAttribute("id",this.ariaLabelledBy),e.has("isActive")&&(this._Cre8Tab.setAttribute("tabindex",this.isActive?"0":"-1"),this._Cre8Tab.setAttribute("aria-selected",`${this.isActive}`))}_handleTabSelected(){const e=new CustomEvent("tab-select",{detail:{index:this.index},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}render(){const e=this.componentClassNames("cre8-c-tab",{"cre8-is-active":this.isActive,"cre8-c-tab--small":this.size==="sm"});return x`
       <button
         role="tab"
         tabindex="-1"
@@ -1306,7 +1322,7 @@ span.ripple {
       >
         <slot></slot>
       </button>
-    `}};I.styles=[O];let c=I;h([s()],c.prototype,"size");h([s({type:Boolean,reflect:!0})],c.prototype,"isActive");h([s({type:Number})],c.prototype,"index");h([s()],c.prototype,"ariaLabelledBy");h([v(".cre8-c-tab")],c.prototype,"_Cre8Tab");customElements.get("cre8-tab")===void 0&&customElements.define("cre8-tab",c);const F=w`.cre8-u-content-knockout-brand {
+    `}};I.styles=[B];let p=I;h([o()],p.prototype,"size");h([o({type:Boolean,reflect:!0})],p.prototype,"isActive");h([o({type:Number})],p.prototype,"index");h([o()],p.prototype,"ariaLabelledBy");h([v(".cre8-c-tab")],p.prototype,"_Cre8Tab");customElements.get("cre8-tab")===void 0&&customElements.define("cre8-tab",p);const X=w`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -1680,6 +1696,10 @@ img {
 
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1852,6 +1872,10 @@ span.ripple {
 }
 :root {
   --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
 }
 
 /**
@@ -1983,7 +2007,7 @@ span.ripple {
 .cre8-c-tabs--full-width .cre8-c-tabs__body {
   border-top: var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);
   margin-top: calc(var(--cre8-border-width-tab-selected) * -2);
-}`;var X=Object.defineProperty,d=(o,e,t,i)=>{for(var a=void 0,r=o.length-1,p;r>=0;r--)(p=o[r])&&(a=p(e,t,a)||a);return a&&X(e,t,a),a};let E=1;const _=class _ extends z{constructor(){super(),this.activeIndex=0,this.isStart=!0,this.isEnd=!1,this.handleScroll=this.handleScroll.bind(this),this.handleResize=this.handleResize.bind(this),this.setIsStart=this.setIsStart.bind(this),this.setIsEnd=this.setIsEnd.bind(this),this.emitEvent=this.emitEvent.bind(this),this.tabId=`cre8-tabpanel-${E}`,E+=1}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}async firstUpdated(){this.setTabAttributes(),await this.updateComplete,this.activeTab=this._Cre8TabItems[this.activeIndex]||this._Cre8TabItems[0],this.setActiveTab(),this.setIsStart(),this.setIsEnd(),this.setTabVariant()}async updated(e){e.forEach(async(t,i)=>{i==="activeIndex"&&this.activeIndex!==t&&(await this.updateComplete,this.activeTab&&this.removePreviousActiveTab(),this.activeTab=this._Cre8TabItems[this.activeIndex],this.setActiveTab())})}handleResize(){this.setIsStart(),this.setIsEnd()}handleScroll(){this.setIsStart(),this.setIsEnd()}setIsStart(){this.isRTL?this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!0:this.isStart=!1:this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!1:this.isStart=!0}setIsEnd(){this.isInViewport()===!0?this.isEnd=!0:this.isEnd=!1}isInViewport(){const t=this._Cre8TabItems[this._Cre8TabItems.length-1].shadowRoot?.querySelector(".cre8-c-tab");if(!t)return!1;const i=t.getBoundingClientRect(),a=window.innerWidth||document.documentElement.clientWidth;return i.left>=0&&i.right<=a}setTabVariant(){this.size==="sm"&&this._Cre8TabItems.forEach(e=>{e.size="sm"})}setTabAttributes(){this._Cre8TabItems.forEach((e,t)=>{e.index=t;const a=e.ariaLabelledBy||L();e.ariaLabelledBy=a;const r=this._Cre8TabPanels[t];r.index=t})}setActiveTab(){this.activeTab.isActive=!0;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!0)}setActiveTabFocus(){this.activeTab.shadowRoot?.querySelector(".cre8-c-tab").focus()}handleTabSelected(e){const{target:t}=e;if(this._Cre8TabItems.includes(t)){this.activeTab&&this.removePreviousActiveTab(),this.activeTab=t;const i=this._Cre8TabItems.findIndex(a=>a===this.activeTab);this.activeIndex=i,this.setActiveTab(),this.emitEvent()}}handleKeydown(e){const{target:t}=e;if(document.activeElement.matches("cre8-tab"))switch(e.key){case"ArrowRight":e.preventDefault(),this.setSelectedToNextTab(t);break;case"ArrowLeft":e.preventDefault(),this.setSelectedToPreviousTab(t);break;case"Home":e.preventDefault(),this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length-1]);break;case"End":e.preventDefault(),this.setSelectedToPreviousTab(this._Cre8TabItems[0]);break;case"Escape":this.activeTab.blur();break}}setSelectedToPreviousTab(e){const t=e.index;this.removePreviousActiveTab();const i=this._Cre8TabItems.length-1;if(t===0)this.activeIndex=i,this.activeTab=this._Cre8TabItems[i];else{const a=t-1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}setSelectedToNextTab(e){const t=e.index;this.removePreviousActiveTab();const i=this._Cre8TabItems.length-1;if(t===i)this.activeIndex=0,this.activeTab=this._Cre8TabItems[0];else{const a=t+1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}removePreviousActiveTab(){this.activeTab.isActive=!1;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!1)}emitEvent(){const e=new CustomEvent("tabChange",{detail:{value:this.activeTab,activeTabIndex:this.activeIndex},bubbles:!0,composed:!0});this.dispatchEvent(e)}render(){const e=this.componentClassNames("cre8-c-tabs",{"cre8-is-start":this.isStart===!0,"cre8-is-end":this.isEnd===!0,"cre8-c-tabs--full-width":this.fullWidth});return x`
+}`;var $=Object.defineProperty,s=(d,e,t,i)=>{for(var a=void 0,n=d.length-1,c;n>=0;n--)(c=d[n])&&(a=c(e,t,a)||a);return a&&$(e,t,a),a};let A=1;const _=class _ extends z{constructor(){super(),this.activeIndex=0,this.isStart=!0,this.isEnd=!1,this.handleScroll=this.handleScroll.bind(this),this.handleResize=this.handleResize.bind(this),this.setIsStart=this.setIsStart.bind(this),this.setIsEnd=this.setIsEnd.bind(this),this.emitEvent=this.emitEvent.bind(this),this.tabId=`cre8-tabpanel-${A}`,A+=1}get isRTL(){return document.dir==="rtl"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}async firstUpdated(){this.setTabAttributes(),await this.updateComplete,this.activeTab=this._Cre8TabItems[this.activeIndex]||this._Cre8TabItems[0],this.setActiveTab(),this.setIsStart(),this.setIsEnd(),this.setTabVariant()}async updated(e){e.has("items")&&V(this,this.buildComposition()),e.forEach(async(t,i)=>{i==="activeIndex"&&this.activeIndex!==t&&(await this.updateComplete,this.activeTab&&this.removePreviousActiveTab(),this.activeTab=this._Cre8TabItems[this.activeIndex],this.setActiveTab())})}handleResize(){this.setIsStart(),this.setIsEnd()}handleScroll(){this.setIsStart(),this.setIsEnd()}setIsStart(){this.isRTL?this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!0:this.isStart=!1:this._Cre8TabsHeaderList.scrollLeft>0?this.isStart=!1:this.isStart=!0}setIsEnd(){this.isInViewport()===!0?this.isEnd=!0:this.isEnd=!1}isInViewport(){const t=this._Cre8TabItems[this._Cre8TabItems.length-1].shadowRoot?.querySelector(".cre8-c-tab");if(!t)return!1;const i=t.getBoundingClientRect(),a=window.innerWidth||document.documentElement.clientWidth;return i.left>=0&&i.right<=a}setTabVariant(){this.size==="sm"&&this._Cre8TabItems.forEach(e=>{e.size="sm"})}setTabAttributes(){this._Cre8TabItems.forEach((e,t)=>{e.index=t;const a=e.ariaLabelledBy||L();e.ariaLabelledBy=a;const n=this._Cre8TabPanels[t];n.index=t})}setActiveTab(){this.activeTab.isActive=!0;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!0)}setActiveTabFocus(){this.activeTab.shadowRoot?.querySelector(".cre8-c-tab").focus()}handleTabSelected(e){const{target:t}=e;if(this._Cre8TabItems.includes(t)){this.activeTab&&this.removePreviousActiveTab(),this.activeTab=t;const i=this._Cre8TabItems.findIndex(a=>a===this.activeTab);this.activeIndex=i,this.setActiveTab(),this.emitEvent()}}handleKeydown(e){const{target:t}=e;if(document.activeElement.matches("cre8-tab"))switch(e.key){case"ArrowRight":e.preventDefault(),this.setSelectedToNextTab(t);break;case"ArrowLeft":e.preventDefault(),this.setSelectedToPreviousTab(t);break;case"Home":e.preventDefault(),this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length-1]);break;case"End":e.preventDefault(),this.setSelectedToPreviousTab(this._Cre8TabItems[0]);break;case"Escape":this.activeTab.blur();break}}setSelectedToPreviousTab(e){const t=e.index;this.removePreviousActiveTab();const i=this._Cre8TabItems.length-1;if(t===0)this.activeIndex=i,this.activeTab=this._Cre8TabItems[i];else{const a=t-1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}setSelectedToNextTab(e){const t=e.index;this.removePreviousActiveTab();const i=this._Cre8TabItems.length-1;if(t===i)this.activeIndex=0,this.activeTab=this._Cre8TabItems[0];else{const a=t+1;this.activeIndex=a,this.activeTab=this._Cre8TabItems[a]}this.setActiveTab(),this.setActiveTabFocus(),this.emitEvent()}removePreviousActiveTab(){this.activeTab.isActive=!1;const e=this._Cre8TabPanels.find(t=>t.index===this.activeTab.index);e&&(e.isActive=!1)}emitEvent(){const e=new CustomEvent("tab-change",{detail:{value:this.activeTab,activeTabIndex:this.activeIndex},bubbles:!0,composed:!0});this.dispatchWithLegacyAlias(e)}buildComposition(){if(!this.items)return null;const e=this.items.map((i,a)=>({tag:"cre8-tab",props:{index:a},text:i.label})),t=this.items.map((i,a)=>({tag:"cre8-tab-panel",props:{index:a},slot:"panel",text:i.content??""}));return[...e,...t]}render(){const e=this.componentClassNames("cre8-c-tabs",{"cre8-is-start":this.isStart===!0,"cre8-is-end":this.isEnd===!0,"cre8-c-tabs--full-width":this.fullWidth});return x`
         <div class="${e}">
             <div class="cre8-c-tabs__header">
                 <div
@@ -2001,11 +2025,11 @@ span.ripple {
                 <slot name="panel"></slot>
             </div>
         </div>
-    `}};_.styles=[F];let n=_;d([s()],n.prototype,"size");d([s({type:Boolean,reflect:!0})],n.prototype,"fullWidth");d([s({type:Number})],n.prototype,"activeIndex");d([T()],n.prototype,"activeTab");d([T()],n.prototype,"isStart");d([T()],n.prototype,"isEnd");d([A()],n.prototype,"_Cre8TabItems");d([A({slot:"panel"})],n.prototype,"_Cre8TabPanels");d([v(".cre8-c-tabs__header")],n.prototype,"_Cre8TabsHeader");d([v(".cre8-c-tabs__list")],n.prototype,"_Cre8TabsHeaderList");customElements.get("cre8-tabs")===void 0&&customElements.define("cre8-tabs",n);const Q={title:"cre8 Components/Tabs",component:"cre8-tabs",render:({default:o,panel:e,...t})=>x`
+    `}};_.styles=[X];let r=_;s([o()],r.prototype,"size");s([o({type:Boolean,reflect:!0})],r.prototype,"fullWidth");s([o({type:Number})],r.prototype,"activeIndex");s([T()],r.prototype,"activeTab");s([T()],r.prototype,"isStart");s([T()],r.prototype,"isEnd");s([E()],r.prototype,"_Cre8TabItems");s([E({slot:"panel"})],r.prototype,"_Cre8TabPanels");s([v(".cre8-c-tabs__header")],r.prototype,"_Cre8TabsHeader");s([v(".cre8-c-tabs__list")],r.prototype,"_Cre8TabsHeaderList");s([o({type:Array})],r.prototype,"items");customElements.get("cre8-tabs")===void 0&&customElements.define("cre8-tabs",r);const ee={title:"cre8 Components/Tabs",component:"cre8-tabs",render:({default:d,panel:e,...t})=>x`
     <cre8-tabs ${S(t)}>
-      ${R(C(o,"cre8-tab"))}
+      ${R(C(d,"cre8-tab"))}
       ${R(C(e,"cre8-tab-panel","f-po"))}
-    </cre8-tabs>`,parameters:{status:{type:"inProgress"},actions:{handles:["tabChange","tabSelected"]}},argTypes:{activeIndex:{control:{type:"text"}},size:{control:{type:"text"}},activeTab:{table:{disable:!0}},emitEvent:{table:{disable:!0}},handleResize:{table:{disable:!0}},handleScroll:{table:{disable:!0}},isEnd:{table:{disable:!0}},isRTL:{table:{disable:!0}},isStart:{table:{disable:!0}},setIsStart:{table:{disable:!0}},setIsEnd:{table:{disable:!0}},tabChange:{table:{disable:!0}},tabId:{table:{disable:!0}}}},l={args:{default:`<cre8-tab>Tab 1</cre8-tab>
+    </cre8-tabs>`,parameters:{status:{type:"inProgress"},actions:{handles:["tab-change","tab-select"]}},argTypes:{activeIndex:{control:{type:"text"}},size:{control:{type:"text"}},activeTab:{table:{disable:!0}},emitEvent:{table:{disable:!0}},handleResize:{table:{disable:!0}},handleScroll:{table:{disable:!0}},isEnd:{table:{disable:!0}},isRTL:{table:{disable:!0}},isStart:{table:{disable:!0}},setIsStart:{table:{disable:!0}},setIsEnd:{table:{disable:!0}},"tab-change":{table:{disable:!0}},tabId:{table:{disable:!0}}}},l={args:{default:`<cre8-tab>Tab 1</cre8-tab>
       <cre8-tab>Tab 2</cre8-tab>
       <cre8-tab>Tab 3</cre8-tab>`,panel:`<cre8-tab-panel slot="panel">
         <f-po>Tab 1 content</f-po>
@@ -2121,4 +2145,4 @@ span.ripple {
 }`,...g.parameters?.docs?.source},description:{story:`Navigating through Tabs via scrolling is a becoming a popular interaction pattern.
 However, it is generally only used for content heavy web sites, as opposed to table heavy software.
 Be cautious if implementing this pattern, and be sure that it is only used where content is consistent across
-all Tabs and moving from one to the next would be a natural organic experience, instead of disjointed or disconnected.`,...g.parameters?.docs?.description}}};const Z=["Default","fullWidth","Small","WithActiveIndex","WithOverflow"];export{l as Default,u as Small,f as WithActiveIndex,g as WithOverflow,Z as __namedExportsOrder,Q as default,b as fullWidth};
+all Tabs and moving from one to the next would be a natural organic experience, instead of disjointed or disconnected.`,...g.parameters?.docs?.description}}};const te=["Default","fullWidth","Small","WithActiveIndex","WithOverflow"];export{l as Default,u as Small,f as WithActiveIndex,g as WithOverflow,te as __namedExportsOrder,ee as default,b as fullWidth};

package/dist/assets/{tag-oHGdclJl.js → tag-BDbKYA95.js}

@@ -1,4 +1,4 @@
-import{a as p,b as g}from"./iframe-BNJP6ovU.js";import{n as o}from"./cre8-element-B35i4Lyg.js";import{e as h}from"./query-BpjciUlk.js";import{n as u}from"./index.browser-BY9c7rfI.js";import{o as l}from"./if-defined-Bxnzk64Q.js";import{C as f}from"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";const b=p`.cre8-u-content-knockout-brand {
+import{a as p,b as g}from"./iframe-nwd_1gnU.js";import{n as o}from"./cre8-element-CaOpCq8p.js";import{e as h}from"./query-BpjciUlk.js";import{n as u}from"./index.browser-BY9c7rfI.js";import{o as l}from"./if-defined-RYzTvKuT.js";import{C as f}from"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";const b=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/{tag-list.stories-Du-IoYzu.js → tag-list.stories-BLeM-gma.js}

@@ -1,4 +1,4 @@
-import{a as h,b as d}from"./iframe-BNJP6ovU.js";import{s as p}from"./spread-CnPic3C2.js";import"./tag-oHGdclJl.js";import{C as x,n as c}from"./cre8-element-B35i4Lyg.js";import{n as f}from"./index.browser-BY9c7rfI.js";import"./preload-helper-PPVm8Dsz.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./_commonjsHelpers-DaWZu8wl.js";const b=h`.cre8-u-content-knockout-brand {
+import{a as h,b as s}from"./iframe-nwd_1gnU.js";import{s as l}from"./spread-D16Rn3WA.js";import"./tag-BDbKYA95.js";import{C as x,n as m}from"./cre8-element-CaOpCq8p.js";import{n as f}from"./index.browser-BY9c7rfI.js";import{s as b}from"./light-children-DDjBxt3J.js";import"./preload-helper-PPVm8Dsz.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./if-defined-RYzTvKuT.js";import"./cre8-form-element-Dowz62UX.js";import"./icon-BvsTH4V8.js";import"./_commonjsHelpers-DaWZu8wl.js";const y=h`.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 */
 }
 
 /**
@@ -609,53 +617,53 @@ span.ripple {
   padding: 0;
   display: flex;
   flex-wrap: wrap;
-}`;var y=Object.defineProperty,u=(t,r,g,v)=>{for(var e=void 0,s=t.length-1,l;s>=0;s--)(l=t[s])&&(e=l(r,g,e)||e);return e&&y(r,g,e),e};const m=class m extends x{firstUpdated(){this._initializeAria()}_initializeAria(){this.fieldId=this.fieldId||f()}render(){const r=this.componentClassNames("cre8-c-tag-list",{});return d`
-      <fieldset class="${r}">
+}`;var v=Object.defineProperty,g=(e,t,i,z)=>{for(var a=void 0,p=e.length-1,u;p>=0;p--)(u=e[p])&&(a=u(t,i,a)||a);return a&&v(t,i,a),a};const c=class c extends x{firstUpdated(){this._initializeAria()}_initializeAria(){this.fieldId=this.fieldId||f()}buildComposition(){return this.tags?this.tags.map(t=>({tag:"cre8-tag",props:{text:t.text,variant:t.variant,shape:t.shape,type:t.type,disabled:t.disabled,name:this.fieldId}})):null}updated(t){["tags","fieldId"].some(i=>t.has(i))&&b(this,this.buildComposition())}render(){const t=this.componentClassNames("cre8-c-tag-list",{});return s`
+      <fieldset class="${t}">
         <legend class="cre8-c-tag-list__legend">${this.label}</legend>
         <div class="cre8-c-tag-list__list" role="list">   
           <slot></slot>
         </div>
       </fieldset>
-      `}};m.styles=[b];let a=m;u([c()],a.prototype,"label");u([c()],a.prototype,"fieldId");customElements.get("cre8-tag-list")===void 0&&customElements.define("cre8-tag-list",a);const S={title:"In Development/Tag List",component:"cre8-tag-list",parameters:{status:{type:"inProgress"}}},i=t=>d`
-<cre8-tag-list label="Fruits" ${p(t)}>
+      `}};c.styles=[y];let r=c;g([m()],r.prototype,"label");g([m()],r.prototype,"fieldId");g([m({type:Array})],r.prototype,"tags");customElements.get("cre8-tag-list")===void 0&&customElements.define("cre8-tag-list",r);const X={title:"In Development/Tag List",component:"cre8-tag-list",parameters:{status:{type:"inProgress"}}},n=e=>s`
+<cre8-tag-list label="Fruits" ${l(e)}>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Orange"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Apple"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Pear"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Banana"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Peach"></cre8-tag>
-</cre8-tag-list>`,n=t=>d`
-<cre8-tag-list label="Animals" ${p(t)}>
+</cre8-tag-list>`,o=e=>s`
+<cre8-tag-list label="Animals" ${l(e)}>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Dog"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Cat"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Cow"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Fish"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Bear"></cre8-tag>
-</cre8-tag-list>`,o=t=>d`
-<cre8-tag-list label="Emotions" ${p(t)}>
+</cre8-tag-list>`,d=e=>s`
+<cre8-tag-list label="Emotions" ${l(e)}>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Happy"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Sad"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Scared"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Angry"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Confused"></cre8-tag>
-</cre8-tag-list>`;i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`args => html\`
+</cre8-tag-list>`;n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`args => html\`
 <cre8-tag-list label="Fruits" \${spread(args)}>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Orange"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Apple"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Pear"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Banana"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Peach"></cre8-tag>
-</cre8-tag-list>\``,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`args => html\`
+</cre8-tag-list>\``,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`args => html\`
 <cre8-tag-list label="Animals" \${spread(args)}>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Dog"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Cat"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Cow"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Fish"></cre8-tag>
   <cre8-tag type="checkbox" variant="neutral" shape="round" text="Bear"></cre8-tag>
-</cre8-tag-list>\``,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`args => html\`
+</cre8-tag-list>\``,...o.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`args => html\`
 <cre8-tag-list label="Emotions" \${spread(args)}>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Happy"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Sad"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Scared"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Angry"></cre8-tag>
   <cre8-tag type="radio" variant="neutral" shape="round" text="Confused"></cre8-tag>
-</cre8-tag-list>\``,...o.parameters?.docs?.source}}};const V=["Default","CheckBox","Radio"];export{n as CheckBox,i as Default,o as Radio,V as __namedExportsOrder,S as default};
+</cre8-tag-list>\``,...d.parameters?.docs?.source}}};const $=["Default","CheckBox","Radio"];export{o as CheckBox,n as Default,d as Radio,$ as __namedExportsOrder,X as default};