@tmorrow/cre8-wc 2.3.6 → 2.3.9

package/dist/assets/{text-link.stories-CwSENnir.js → text-link.stories-DVRc917C.js}

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

package/dist/assets/{text-passage-BrueaqOk.js → text-passage-CXhgRa33.js}

@@ -1,4 +1,4 @@
-import{a as d,b as p}from"./iframe-B4bTcHfE.js";import{C as g,n as l}from"./cre8-element-C-P96xHp.js";const c=d`.cre8-u-content-knockout-brand {
+import{a as m,b as p}from"./iframe-DDPT8KPE.js";import{C as g,n as l}from"./cre8-element-D6gzFubi.js";const c=m`.cre8-u-content-knockout-brand {
   color: var(--cre8-color-content-knockout-brand);
 }
 
@@ -627,7 +627,7 @@ cre8-text-passage[size=default] h1 {
 }
 cre8-text-passage h1,
 cre8-text-passage[size=default] h1 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -657,7 +657,7 @@ cre8-text-passage[size=default] h2 {
 }
 cre8-text-passage h2,
 cre8-text-passage[size=default] h2 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -687,7 +687,7 @@ cre8-text-passage[size=default] h3 {
 }
 cre8-text-passage h3,
 cre8-text-passage[size=default] h3 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -717,7 +717,7 @@ cre8-text-passage[size=default] h4 {
 }
 cre8-text-passage h4,
 cre8-text-passage[size=default] h4 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -733,7 +733,7 @@ cre8-text-passage[size=default] h5 {
   line-height: var(--cre8-typography-meta-large-line-height);
   text-decoration: var(--cre8-typography-meta-large-text-decoration);
   text-transform: var(--cre8-typography-meta-large-text-transform);
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--cre8-spacing-12);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -755,7 +755,7 @@ cre8-text-passage[size=default] {
 }
 cre8-text-passage ul,
 cre8-text-passage[size=default] ul {
-  margin-left: 1.25rem;
+  margin-left: var(--cre8-spacing-18);
   padding-left: 0;
 }
 cre8-text-passage,
@@ -766,7 +766,7 @@ cre8-text-passage[size=default] {
 }
 cre8-text-passage ol,
 cre8-text-passage[size=default] ol {
-  margin-left: 1.125rem;
+  margin-left: var(--cre8-spacing-18);
   padding-left: 0;
 }
 cre8-text-passage,
@@ -794,7 +794,7 @@ cre8-text-passage[size=default] {
 cre8-text-passage p,
 cre8-text-passage[size=default] p {
   margin-top: 0;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--cre8-spacing-24);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -807,9 +807,9 @@ cre8-text-passage[size=default] blockquote {
   font-style: italic;
   border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);
   color: var(--cre8-color-content-subtle);
-  padding-left: 1rem;
+  padding-left: var(--cre8-padding-16);
   margin-left: 0;
-  margin-bottom: 1rem;
+  margin-bottom: var(--cre8-spacing-16);
 }
 cre8-text-passage,
 cre8-text-passage[size=default] {
@@ -841,10 +841,10 @@ cre8-text-passage[inverted] blockquote {
   color: var(--cre8-color-content-knockout);
   font-style: italic;
   border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);
-  padding-left: 1rem;
+  padding-left: var(--cre8-padding-16);
   margin-left: 0;
-  margin-bottom: 1rem;
-}`,h=d`.cre8-u-content-knockout-brand {
+  margin-bottom: var(--cre8-spacing-16);
+}`,h=m`.cre8-u-content-knockout-brand {
   color: var(--cre8-color-content-knockout-brand);
 }
 
@@ -1471,8 +1471,8 @@ span.ripple {
 }
 
 ::slotted(.header) {
-  margin-bottom: 0.75rem;
-}`;var f=Object.defineProperty,s=(o,a,e,u)=>{for(var t=void 0,i=o.length-1,m;i>=0;i--)(m=o[i])&&(t=m(a,e,t)||t);return t&&f(a,e,t),t};const n=class n extends g{constructor(){super(...arguments),this.size="default"}connectedCallback(){if(super.connectedCallback(),!document.head.querySelector("#cre8-text-passage-styles")){const e=document.createElement("style");e.id="cre8-text-passage-styles",e.innerHTML=c.cssText,document.head.appendChild(e)}}render(){const a=this.componentClassNames("cre8-c-text-passage",{"cre8-c-text-passage--default":this.size==="default"||void 0,"cre8-c-text-passage--inverted":this.inverted,"cre8-c-text-passage--small":this.size==="small","cre8-c-text-passage--large":this.size==="large"});return p`
+  margin-bottom: var(--cre8-spacing-12);
+}`;var f=Object.defineProperty,s=(o,a,e,u)=>{for(var t=void 0,i=o.length-1,d;i>=0;i--)(d=o[i])&&(t=d(a,e,t)||t);return t&&f(a,e,t),t};const n=class n extends g{constructor(){super(...arguments),this.size="default"}connectedCallback(){if(super.connectedCallback(),!document.head.querySelector("#cre8-text-passage-styles")){const e=document.createElement("style");e.id="cre8-text-passage-styles",e.innerHTML=c.cssText,document.head.appendChild(e)}}render(){const a=this.componentClassNames("cre8-c-text-passage",{"cre8-c-text-passage--default":this.size==="default"||void 0,"cre8-c-text-passage--inverted":this.inverted,"cre8-c-text-passage--small":this.size==="small","cre8-c-text-passage--large":this.size==="large"});return p`
       <div class="${a}">
         <slot></slot>
       </div>

package/dist/assets/{text-passage.stories-Cnaez_uH.js → text-passage.stories-NTGzgDSD.js}

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

package/dist/assets/{tooltip.stories-CcqiPZI9.js → tooltip.stories-DmjF7lgI.js}

@@ -1,4 +1,4 @@
-import{a as k,b as c,o as v}from"./iframe-B4bTcHfE.js";import{s as _}from"./spread-Bid2THYj.js";import{s as x}from"./story-helpers-BFn_kBYw.js";import"./icon-JqBqZA-z.js";import{C as A,n as a}from"./cre8-element-C-P96xHp.js";import{e as w}from"./query-BpjciUlk.js";import{n as C}from"./index.browser-BY9c7rfI.js";import{o as T}from"./if-defined-DA22R8ho.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const R=k`.cre8-u-content-knockout-brand {
+import{a as k,b as c,o as v}from"./iframe-DDPT8KPE.js";import{s as _}from"./spread-B6c5bbZ0.js";import{s as x}from"./story-helpers-BFn_kBYw.js";import"./icon-CxPUuckL.js";import{C as A,n as a}from"./cre8-element-D6gzFubi.js";import{e as w}from"./query-BpjciUlk.js";import{n as C}from"./index.browser-BY9c7rfI.js";import{o as T}from"./if-defined-D9Db4BBK.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./base-DVmwUFg0.js";const R=k`.cre8-u-content-knockout-brand {
   color: var(--cre8-color-content-knockout-brand);
 }
 
@@ -626,7 +626,7 @@ span.ripple {
   transform: translateX(var(--rtlTranslateX, -50%));
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--cre8-spacing-8);
   width: max-content;
   max-width: 17.5rem;
   z-index: 400;
@@ -634,7 +634,7 @@ span.ripple {
   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-container);
-  padding: 0.5rem;
+  padding: var(--cre8-padding-8);
   /**
    * Active state for tooltip panel
    */
@@ -764,7 +764,7 @@ span.ripple {
  */
 .cre8-c-tooltip__footer {
   display: flex;
-  gap: 1rem;
+  gap: var(--cre8-spacing-16);
   justify-content: flex-end;
   flex-grow: 1;
 }

package/dist/assets/{utility-nav.stories-CWPHaVQf.js → utility-nav.stories-CS-pU-eS.js}

@@ -1,4 +1,4 @@
-import{a as x,A as s,b as i}from"./iframe-B4bTcHfE.js";import{s as w}from"./spread-Bid2THYj.js";import{o as c}from"./if-defined-DA22R8ho.js";import{C as y,n as o}from"./cre8-element-C-P96xHp.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const k=x`.cre8-u-content-knockout-brand {
+import{a as x,A as s,b as i}from"./iframe-DDPT8KPE.js";import{s as w}from"./spread-B6c5bbZ0.js";import{o as c}from"./if-defined-D9Db4BBK.js";import{C as y,n as o}from"./cre8-element-D6gzFubi.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";const k=x`.cre8-u-content-knockout-brand {
   color: var(--cre8-color-content-knockout-brand);
 }
 
@@ -636,7 +636,7 @@ cre8-icon-legacy {
 * 1) Create space between text and icon
 */
 .cre8-c-utility-nav__text + cre8-icon-legacy {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   /* 1 */
 }
 
@@ -645,7 +645,7 @@ cre8-icon-legacy {
 * 1) Create space between text and icon
 */
 cre8-icon-legacy + .cre8-c-utility-nav__text {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   /* 1 */
 }`;var _=Object.defineProperty,p=(a,e,m,v)=>{for(var t=void 0,n=a.length-1,d;n>=0;n--)(d=a[n])&&(t=d(e,m,t)||t);return t&&_(e,m,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}">
@@ -1288,8 +1288,8 @@ span.ripple {
   */
 }
 .cre8-c-utility-nav__list ::slotted(cre8-utility-nav-item) {
-  margin-left: 1rem;
-  margin-top: 1rem;
+  margin-left: var(--cre8-spacing-16);
+  margin-top: var(--cre8-spacing-16);
 }`;var z=Object.defineProperty,b=(a,e,m,v)=>{for(var t=void 0,n=a.length-1,d;n>=0;n--)(d=a[n])&&(t=d(e,m,t)||t);return t&&z(e,m,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">

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

@@ -99,8 +99,16 @@
   --cre8-warning-500: var(--cre8-seed-warning);
   --cre8-warning-600: oklch(from var(--cre8-seed-warning) 0.6658 calc(c * 0.956) calc(h - 11.76));
 
-  /* accent */
+  /* accent
+     -50 and -500 added by hand (not from the original generator, which never
+     emitted them) to give info-status tokens a real ramp to point at instead
+     of borrowing primary's. Simple relative lightness offsets from the -600
+     identity step, not the per-hue-tuned coefficients the rest of this ramp
+     uses -- close enough for a light tint and a mid-strength fill, not a
+     claim of the same precision. */
+  --cre8-accent-50: oklch(from var(--cre8-seed-accent) 0.96 calc(c * 0.15) h);
   --cre8-accent-200: oklch(from var(--cre8-seed-accent) 0.9024 calc(c * 0.245) calc(h + 13.69));
+  --cre8-accent-500: oklch(from var(--cre8-seed-accent) calc(l + 0.08) c h);
   --cre8-accent-600: var(--cre8-seed-accent);
 
   /* Overlays — neutral-900 at fixed alpha */
@@ -129,6 +137,22 @@
   --cre8-spacing-120: calc(var(--cre8-seed-space) * 30);
   --cre8-spacing-160: calc(var(--cre8-seed-space) * 40);
 
+  /* Padding — a deliberately narrow slice of the spacing scale.
+     The full scale above spans a 0.5x-40x range (80x), which is right for
+     layout gaps and section margins but wrong for component padding: reseed
+     --cre8-seed-space for a chunkier padding feel and the *layout* end of
+     that same scale swings by tens of pixels for a change meant to nudge
+     button/card padding by a couple of pixels. Padding gets its own 0.5x-6x
+     range (12x) instead -- aliases of the existing tight-end steps, not new
+     math -- so retheming padding doesn't also retheme page layout. Component
+     padding should reference these, never --cre8-spacing-* directly; gap and
+     margin (genuine layout) can still reach the full scale above. */
+  --cre8-padding-2: var(--cre8-spacing-2);
+  --cre8-padding-4: var(--cre8-spacing-4);
+  --cre8-padding-8: var(--cre8-spacing-8);
+  --cre8-padding-16: var(--cre8-spacing-16);
+  --cre8-padding-24: var(--cre8-spacing-24);
+
   /* Font size — multiples of the font-size seed */
   --cre8-font-size-0: calc(var(--cre8-seed-font-size) * 0.75);
   --cre8-font-size-1: calc(var(--cre8-seed-font-size) * 0.875);
@@ -251,9 +275,9 @@
   --cre8-color-bg-warning: var(--cre8-bg-warning);
   --cre8-bg-warning-strong: var(--cre8-warning-500);
   --cre8-color-bg-warning-strong: var(--cre8-bg-warning-strong);
-  --cre8-bg-info: var(--cre8-primary-50);
+  --cre8-bg-info: var(--cre8-accent-50);
   --cre8-color-bg-info: var(--cre8-bg-info);
-  --cre8-bg-info-strong: var(--cre8-primary-500);
+  --cre8-bg-info-strong: var(--cre8-accent-500);
   --cre8-color-bg-info-strong: var(--cre8-bg-info-strong);
   --cre8-bg-attention: var(--cre8-neutral-0);
   --cre8-color-bg-attention: var(--cre8-bg-attention);
@@ -291,7 +315,7 @@
   --cre8-color-content-error-icon: var(--cre8-content-error-icon);
   --cre8-content-warning-icon: var(--cre8-warning-600);
   --cre8-color-content-warning-icon: var(--cre8-content-warning-icon);
-  --cre8-content-info-icon: var(--cre8-primary-500);
+  --cre8-content-info-icon: var(--cre8-accent-500);
   --cre8-color-content-info-icon: var(--cre8-content-info-icon);
   --cre8-content-attention-icon: var(--cre8-primary-400);
   --cre8-color-content-attention-icon: var(--cre8-content-attention-icon);
@@ -339,7 +363,7 @@
   --cre8-color-border-error: var(--cre8-border-error);
   --cre8-border-warning: var(--cre8-warning-400);
   --cre8-color-border-warning: var(--cre8-border-warning);
-  --cre8-border-info: var(--cre8-primary-500);
+  --cre8-border-info: var(--cre8-accent-500);
   --cre8-color-border-info: var(--cre8-border-info);
   --cre8-border-attention: var(--cre8-primary-400);
   --cre8-color-border-attention: var(--cre8-border-attention);

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

@@ -364,7 +364,7 @@
   --cre8-color-bg-brand-xstrong-hover: #4338CA;
   --cre8-color-bg-brand-xstrong-active: #312E81;
   --cre8-color-bg-success: #E7FBF3;
-  --cre8-color-bg-success-strong: #10B981;
+  --cre8-color-bg-success-strong: #047857;
   --cre8-color-bg-error: #FFEFF2;
   --cre8-color-bg-error-strong: #E11D48;
   --cre8-color-bg-warning: #FFF7E6;
@@ -384,8 +384,8 @@
   --cre8-color-content-brand: #4F46E5;
   --cre8-color-content-brand-strong: #4338CA;
   --cre8-color-content-brand-knockout: #ECFEFF;
-  --cre8-color-content-success: #059669;
-  --cre8-color-content-success-icon: #059669;
+  --cre8-color-content-success: #047857;
+  --cre8-color-content-success-icon: #047857;
   --cre8-color-content-error: #BE123C;
   --cre8-color-content-error-icon: #BE123C;
   --cre8-color-content-warning-icon: #D97706;

package/dist/design-tokens/brands/whitelabel/css/fonts.css

@@ -0,0 +1,7 @@
+/**
+ * whitelabel ships no custom typeface on purpose — --cre8-seed-font resolves
+ * to the system font stack, so there is nothing to declare here. Once an
+ * integrator reseeds --cre8-seed-font to a real brand typeface, that
+ * typeface's own @font-face rules (if it isn't a system/Google font) belong
+ * in the integrator's own stylesheet, loaded after this one.
+ */