@tmorrow/cre8-wc 2.3.4 → 2.3.6

package/dist/assets/{field-note-VLKkFhY-.js → field-note-Bo9Uvf0_.js}

@@ -1,5 +1,5 @@
-import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-element-C32P9iMC.js";import"./icon-CRGiEUM0.js";const c=p`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as p,b as a}from"./iframe-B4bTcHfE.js";import{C as g,n}from"./cre8-element-C-P96xHp.js";import"./icon-JqBqZA-z.js";const c=p`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 
 .cre8-u-margin-top-none {
@@ -96,23 +96,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 
 .cre8-u-margin-right-none {
@@ -120,23 +120,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 
 .cre8-u-margin-bottom-none {
@@ -144,32 +144,32 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -177,23 +177,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 
 .cre8-u-padding-none {
@@ -201,23 +201,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 
 .cre8-u-padding-top-none {
@@ -225,23 +225,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 
 .cre8-u-padding-right-none {
@@ -249,23 +249,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 
 .cre8-u-padding-bottom-none {
@@ -273,23 +273,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 
 .cre8-u-padding-left-none {
@@ -297,23 +297,23 @@ import{a as p,b as a}from"./iframe-BH5yZqve.js";import{C as g,n}from"./cre8-elem
 }
 
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 
 .cre8-u-display-flex {
@@ -329,7 +329,6 @@ body {
   font-size: var(--cre8-typography-body-default-font-size);
   font-weight: var(--cre8-typography-body-default-font-weight);
   line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
@@ -337,7 +336,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 
 @media all and (min-width: 60rem) {
@@ -630,18 +629,18 @@ span.ripple {
  */
 .cre8-c-field-note--inverted {
   color: var(--cre8-color-content-knockout);
-}`;var h=Object.defineProperty,o=(s,i,m,x)=>{for(var e=void 0,r=s.length-1,l;r>=0;r--)(l=s[r])&&(e=l(i,m,e)||e);return e&&h(i,m,e),e};const u=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+}`;var h=Object.defineProperty,o=(d,r,l,x)=>{for(var e=void 0,i=d.length-1,s;i>=0;i--)(s=d[i])&&(e=s(r,l,e)||e);return e&&h(r,l,e),e};const u=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM11.5123 6.58923L7.20462 10.8969C7.14746 10.9541 7.07959 10.9995 7.00489 11.0305C6.93018 11.0615 6.8501 11.0774 6.76923 11.0774C6.68836 11.0774 6.60828 11.0615 6.53358 11.0305C6.45887 10.9995 6.391 10.9541 6.33385 10.8969L4.48769 9.05077C4.37222 8.9353 4.30735 8.77868 4.30735 8.61538C4.30735 8.45208 4.37222 8.29547 4.48769 8.18C4.60317 8.06453 4.75978 7.99966 4.92308 7.99966C5.08638 7.99966 5.24299 8.06453 5.35846 8.18L6.76923 9.59154L10.6415 5.71846C10.6987 5.66128 10.7666 5.61593 10.8413 5.58499C10.916 5.55404 10.9961 5.53812 11.0769 5.53812C11.1578 5.53812 11.2378 5.55404 11.3126 5.58499C11.3873 5.61593 11.4551 5.66128 11.5123 5.71846C11.5695 5.77564 11.6148 5.84351 11.6458 5.91822C11.6767 5.99292 11.6927 6.07299 11.6927 6.15384C11.6927 6.2347 11.6767 6.31477 11.6458 6.38947C11.6148 6.46418 11.5695 6.53205 11.5123 6.58923Z"/>
 </svg>
 `,f=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM7.38462 4.30769C7.38462 4.14448 7.44945 3.98796 7.56486 3.87255C7.68027 3.75714 7.83679 3.69231 8 3.69231C8.16321 3.69231 8.31974 3.75714 8.43514 3.87255C8.55055 3.98796 8.61539 4.14448 8.61539 4.30769V8.61538C8.61539 8.77859 8.55055 8.93512 8.43514 9.05053C8.31974 9.16593 8.16321 9.23077 8 9.23077C7.83679 9.23077 7.68027 9.16593 7.56486 9.05053C7.44945 8.93512 7.38462 8.77859 7.38462 8.61538V4.30769ZM8 12.3077C7.81743 12.3077 7.63897 12.2536 7.48717 12.1521C7.33537 12.0507 7.21706 11.9065 7.14719 11.7379C7.07732 11.5692 7.05904 11.3836 7.09466 11.2045C7.13028 11.0255 7.21819 10.861 7.34729 10.7319C7.47638 10.6028 7.64086 10.5149 7.81992 10.4793C7.99898 10.4437 8.18458 10.4619 8.35325 10.5318C8.52192 10.6017 8.66608 10.72 8.76751 10.8718C8.86894 11.0236 8.92308 11.202 8.92308 11.3846C8.92308 11.6294 8.82583 11.8642 8.65271 12.0373C8.4796 12.2104 8.24482 12.3077 8 12.3077Z"/>
 </svg>
-`,d=class d extends g{fieldNoteAriaLive(){return this.isError||this.isSuccess?"polite":null}render(){const i=this.componentClassNames("cre8-c-field-note",{"cre8-is-error":this.isError,"cre8-is-success":this.isSuccess});return a`
+`,m=class m extends g{fieldNoteAriaLive(){return this.isError||this.isSuccess?"polite":null}render(){const r=this.componentClassNames("cre8-c-field-note",{"cre8-is-error":this.isError,"cre8-is-success":this.isSuccess});return a`
         <div
           aria-live="${this.fieldNoteAriaLive()??"off"}"
-          class="${i}">
+          class="${r}">
         ${this.isError===!0?a`<cre8-icon class="cre8-field-note-icon" svg='${f}' aria-hidden="true" ></cre8-icon>`:""}
             ${this.isSuccess===!0?a`<cre8-icon class="cre8-field-note-icon" svg='${u}' aria-hidden="true"></cre8-icon>`:""}
           <div><slot></slot></div>
         </div>
-    `}};d.styles=[c];let t=d;o([n({type:Boolean,reflect:!0})],t.prototype,"isError");o([n({type:Boolean,reflect:!0})],t.prototype,"isSuccess");o([n()],t.prototype,"iconName");customElements.get("cre8-field-note")===void 0&&customElements.define("cre8-field-note",t);
+    `}};m.styles=[c];let t=m;o([n({type:Boolean,reflect:!0})],t.prototype,"isError");o([n({type:Boolean,reflect:!0})],t.prototype,"isSuccess");o([n()],t.prototype,"iconName");customElements.get("cre8-field-note")===void 0&&customElements.define("cre8-field-note",t);

package/dist/assets/{field-note.stories-Csbwk50n.js → field-note.stories-BtghmWb1.js}

@@ -1,4 +1,4 @@
-import{o as c,b as l}from"./iframe-BH5yZqve.js";import{s as d}from"./spread-CEvCYGEM.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./field-note-VLKkFhY-.js";import"./text-link-DLmoWt5E.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./cre8-element-C32P9iMC.js";import"./icon-CRGiEUM0.js";import"./if-defined-CE1QkYoV.js";const E={title:"cre8 Components/Field Note",render:({slot:i,...a})=>l`<cre8-field-note ${d(a)}>${c(p(i,"cre8-text-link"))}</cre8-field-note>`,component:"cre8-field-note",parameters:{status:{type:"inProgress"}},argTypes:{iconName:{control:"text"},isError:{control:"boolean"},isSuccess:{control:"boolean"}}},e={args:{slot:"This is a field note."}},r={args:{slot:'<cre8-text-link href="#">Helpful link</cre8-text-link> at the beginning of a field note'}},s={args:{slot:'This is a field note with a <cre8-text-link href="#">helpful link</cre8-text-link> in the middle of content'}},t={args:{slot:'This is a field note with an ending <cre8-text-link href="#">helpful link</cre8-text-link>'}},n={args:{isError:!0,slot:"This is a field note with an error state."}},o={args:{isSuccess:!0,slot:"This is a field note with a success state."}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{o as c,b as l}from"./iframe-B4bTcHfE.js";import{s as d}from"./spread-Bid2THYj.js";import{s as p}from"./story-helpers-BFn_kBYw.js";import"./field-note-Bo9Uvf0_.js";import"./text-link-BmXuHtC1.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./cre8-element-C-P96xHp.js";import"./icon-JqBqZA-z.js";import"./if-defined-DA22R8ho.js";const E={title:"cre8 Components/Field Note",render:({slot:i,...a})=>l`<cre8-field-note ${d(a)}>${c(p(i,"cre8-text-link"))}</cre8-field-note>`,component:"cre8-field-note",parameters:{status:{type:"inProgress"}},argTypes:{iconName:{control:"text"},isError:{control:"boolean"},isSuccess:{control:"boolean"}}},e={args:{slot:"This is a field note."}},r={args:{slot:'<cre8-text-link href="#">Helpful link</cre8-text-link> at the beginning of a field note'}},s={args:{slot:'This is a field note with a <cre8-text-link href="#">helpful link</cre8-text-link> in the middle of content'}},t={args:{slot:'This is a field note with an ending <cre8-text-link href="#">helpful link</cre8-text-link>'}},n={args:{isError:!0,slot:"This is a field note with an error state."}},o={args:{isSuccess:!0,slot:"This is a field note with a success state."}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {
     slot: 'This is a field note.'
   }

package/dist/assets/{field.stories-BSYd3vhk.js → field.stories-CZtgfXbq.js}

@@ -1,4 +1,4 @@
-import{b as h}from"./iframe-BH5yZqve.js";import{s as S}from"./spread-CEvCYGEM.js";import"./field.styles-DsJqDxUf.js";import"./preload-helper-PPVm8Dsz.js";const x={title:"cre8 Components/Field",component:"cre8-field",render:F=>h`<cre8-field ${S(F)}></cre8-field>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]}},argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"},type:{control:"select",options:["text","email","number","url","tel","password","date"]}},args:{label:"Label"}},e={},r={args:{label:"Email Field",type:"email"}},a={args:{label:"Number Field",type:"number"}},s={args:{label:"Url Field",type:"url"}},o={args:{label:"Telephone Field",type:"tel"}},t={args:{label:"Password Field",type:"password"}},l={args:{label:"Date Field",type:"date",value:"1969-06-28"}},n={args:{type:"date",label:"Max date should not be 2025-01-01",max:"2025-01-01",value:"2024-01-01"}},c={args:{label:"Required Field",required:"true"}},d={args:{label:"Required Field with Max Length",maxlength:"10",required:"true"}},i={args:{label:"Disabled Field",disabled:"true"}},u={args:{label:"Readonly Field",readonly:"true",value:"value"}},m={args:{label:"Field with a Field Note",fieldNote:"This is a field note."}},p={args:{label:"Field with Error Message and Field Note",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},g={args:{label:"Field with Success Message",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}},b={args:{label:"Field with Error Message",isError:"true",errorNote:"Short, clear error message"}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"{}",...e.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+import{b as h}from"./iframe-B4bTcHfE.js";import{s as S}from"./spread-Bid2THYj.js";import"./field.styles-DY4WEjtf.js";import"./preload-helper-PPVm8Dsz.js";const x={title:"cre8 Components/Field",component:"cre8-field",render:F=>h`<cre8-field ${S(F)}></cre8-field>`,parameters:{status:{type:"inProgress"},actions:{handles:["input","change","blur"]}},argTypes:{ariaDescribedBy:{control:"text"},autocomplete:{control:"text"},type:{control:"select",options:["text","email","number","url","tel","password","date"]}},args:{label:"Label"}},e={},r={args:{label:"Email Field",type:"email"}},a={args:{label:"Number Field",type:"number"}},s={args:{label:"Url Field",type:"url"}},o={args:{label:"Telephone Field",type:"tel"}},t={args:{label:"Password Field",type:"password"}},l={args:{label:"Date Field",type:"date",value:"1969-06-28"}},n={args:{type:"date",label:"Max date should not be 2025-01-01",max:"2025-01-01",value:"2024-01-01"}},c={args:{label:"Required Field",required:"true"}},d={args:{label:"Required Field with Max Length",maxlength:"10",required:"true"}},i={args:{label:"Disabled Field",disabled:"true"}},u={args:{label:"Readonly Field",readonly:"true",value:"value"}},m={args:{label:"Field with a Field Note",fieldNote:"This is a field note."}},p={args:{label:"Field with Error Message and Field Note",errorNote:"Short, clear error message",isError:"true",fieldNote:"This is a field note."}},g={args:{label:"Field with Success Message",isSuccess:"true",fieldNote:"This is a field note.",successNote:"Short, clear success message"}},b={args:{label:"Field with Error Message",isError:"true",errorNote:"Short, clear error message"}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:"{}",...e.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Email Field',
     type: 'email'