@tmorrow/cre8-wc 2.3.4 → 2.3.5

package/dist/assets/{breadcrumbs.stories-DQpKOPux.js → breadcrumbs.stories-D05EgMNz.js}

@@ -1,4 +1,4 @@
-import{a as g,b as m}from"./iframe-BH5yZqve.js";import{C as c,n as u}from"./cre8-element-C32P9iMC.js";import"./icon-CRGiEUM0.js";import"./link-B6NbXrLJ.js";import{s as f}from"./light-children-DDjBxt3J.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-CE1QkYoV.js";const b=g`.cre8-u-content-knockout-brand {
+import{a as g,b as m}from"./iframe-DgoqrgRr.js";import{C as c,n as u}from"./cre8-element-D4jUl3yv.js";import"./icon-BmyJ3psE.js";import"./link-BCInFTin.js";import{s as f}from"./light-children-DDjBxt3J.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-Bh0SnORx.js";const b=g`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 

package/dist/assets/{button-CKAKDdnt.js → button-BKkXnzpg.js}

@@ -1,4 +1,4 @@
-import{a as v,b as c,A as i}from"./iframe-BH5yZqve.js";import{o as n}from"./if-defined-CE1QkYoV.js";import{n as e}from"./cre8-element-C32P9iMC.js";import{e as p}from"./query-BpjciUlk.js";import{C as g}from"./cre8-form-element-C-cxFbUF.js";import"./icon-CRGiEUM0.js";import"./loading-spinner-KSDrx_ka.js";const y=v`@charset "UTF-8";
+import{a as v,b as c,A as i}from"./iframe-DgoqrgRr.js";import{o as n}from"./if-defined-Bh0SnORx.js";import{n as e}from"./cre8-element-D4jUl3yv.js";import{e as p}from"./query-BpjciUlk.js";import{C as g}from"./cre8-form-element-B-sJI1kh.js";import"./icon-BmyJ3psE.js";import"./loading-spinner-BcPlxdFy.js";const y=v`@charset "UTF-8";
 .cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }

package/dist/assets/{button-group-BE61zidL.js → button-group-Cz-4Ghaw.js}

@@ -1,4 +1,4 @@
-import{a as s,b as l}from"./iframe-BH5yZqve.js";import{C as g,n as a}from"./cre8-element-C32P9iMC.js";const c=s`.cre8-u-content-knockout-brand {
+import{a as s,b as l}from"./iframe-DgoqrgRr.js";import{C as g,n as a}from"./cre8-element-D4jUl3yv.js";const c=s`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 

package/dist/assets/{button-group.stories-DJTqGcwu.js → button-group.stories-BtmH6cty.js}

@@ -1,4 +1,4 @@
-import{b as n}from"./iframe-BH5yZqve.js";import{s as a}from"./spread-CEvCYGEM.js";import"./button-group-BE61zidL.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-C32P9iMC.js";import"./_commonjsHelpers-DaWZu8wl.js";const m={title:"Cre8 Components/Button Group",component:"cre8-button-group",parameters:{status:{type:"beta"}}},r=t=>n`<cre8-button-group ${a(t)}>
+import{b as n}from"./iframe-DgoqrgRr.js";import{s as a}from"./spread-Cc0YLoqh.js";import"./button-group-Cz-4Ghaw.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-D4jUl3yv.js";import"./_commonjsHelpers-DaWZu8wl.js";const m={title:"Cre8 Components/Button Group",component:"cre8-button-group",parameters:{status:{type:"beta"}}},r=t=>n`<cre8-button-group ${a(t)}>
   <cre8-button variant="primary" text="Button"></cre8-button>
   <cre8-button variant="tertiary" text="Button"></cre8-button>
 </cre8-button-group>`,e=t=>n`<cre8-button-group ${a(t)} orientation="responsive-full-width">

package/dist/assets/{button.stories-Bi5uMmVy.js → button.stories-Cwum3yAS.js}

@@ -1,4 +1,4 @@
-import{b as Q}from"./iframe-BH5yZqve.js";import{s as X}from"./spread-CEvCYGEM.js";import"./button-CKAKDdnt.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-CE1QkYoV.js";import"./cre8-element-C32P9iMC.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-C-cxFbUF.js";import"./icon-CRGiEUM0.js";import"./loading-spinner-KSDrx_ka.js";const e=`<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+import{b as Q}from"./iframe-DgoqrgRr.js";import{s as X}from"./spread-Cc0YLoqh.js";import"./button-BKkXnzpg.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bh0SnORx.js";import"./cre8-element-D4jUl3yv.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-B-sJI1kh.js";import"./icon-BmyJ3psE.js";import"./loading-spinner-BcPlxdFy.js";const e=`<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>
 `,me={title:"cre8 Components/Button",component:"cre8-button",render:J=>Q`<cre8-button ${X(J)}></cre8-button>`,parameters:{withDesign:{type:"figma",url:"https://www.figma.com/file/WkOaGhOMq5lOGwAUfASz8K/Cre8-Web?node-id=4651%3A51525&t=3jUKYPYoGMClqBbL-1"},status:{type:"inProgress"},actions:{handles:["click","submit"]}},argTypes:{ariaLive:{options:["assertive","polite"],control:"radio"},buttonAriaExpanded:{control:"boolean"},disabled:{control:"boolean"},fullWidth:{control:"boolean"},hideText:{control:"boolean"},iconName:{control:"text"},svg:{control:"text"},iconRotateDegree:{control:"text"},iconPosition:{options:["before","after"],control:{type:"radio"}},inverse:{control:"boolean"},loading:{control:"boolean"},loadingComplete:{control:"boolean"},text:{control:"text"},href:{control:"text"},size:{options:["sm","md","lg"],control:{type:"radio"}},variant:{options:["primary","secondary","tertiary"],control:{type:"radio"}}},args:{text:"Button",loading:void 0,size:"md"}},a={args:{text:"Primary"}},r={args:{type:"submit",text:"Submit"}},n={args:{disabled:!0,text:"Button",buttonAriaExpanded:!1}},s={args:{text:"Button",variant:"primary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},o={args:{disabled:!0,text:"Button",variant:"primary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},i={args:{loading:!0,text:"Button",variant:"primary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},u={args:{text:"Button",variant:"primary",inverse:!0,size:"sm"},parameters:{backgrounds:{default:"dark"}}},c={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"primary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},d={args:{fullWidth:!0,text:"Button",variant:"primary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},l={args:{svg:e,iconRotateDegree:"-90",iconPosition:"before",text:"Button"}},m={args:{svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button"}},p={args:{text:"Button",variant:"secondary"}},g={args:{disabled:!0,text:"Button",variant:"secondary"}},v={args:{text:"Button",variant:"secondary",neutral:!0}},y={args:{disabled:!0,text:"Button",variant:"secondary",neutral:!0}},x={args:{loading:!0,text:"Button",variant:"secondary",neutral:!0}},b={args:{text:"Button",variant:"secondary",neutral:!0,inverse:!0},parameters:{backgrounds:{default:"dark"}}},f={args:{disabled:!0,text:"Button",variant:"secondary",neutral:!0,inverse:!0},parameters:{backgrounds:{default:"dark"}}},S={args:{loading:!0,text:"Button",variant:"secondary",neutral:!0,inverse:!0},parameters:{backgrounds:{default:"dark"}}},B={args:{text:"Button",variant:"secondary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},k={args:{disabled:!0,text:"Button",variant:"secondary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},I={args:{loading:!0,text:"Button",variant:"secondary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},h={args:{text:"Button",variant:"secondary",inverse:!0,size:"sm"},parameters:{backgrounds:{default:"dark"}}},T={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"secondary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},P={args:{fullWidth:!0,text:"Button",variant:"secondary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},D={args:{text:"Button",variant:"tertiary"}},C={args:{disabled:!0,text:"Button",variant:"tertiary"}},W={args:{text:"Button",variant:"tertiary",neutral:!0}},N={args:{text:"Button",variant:"tertiary",neutral:!0,disabled:!0}},R={args:{text:"Button",variant:"tertiary",neutral:!0,loading:!0}},L={args:{text:"Button",variant:"tertiary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},O={args:{text:"Button",variant:"tertiary",inverse:!0,neutral:!0},parameters:{backgrounds:{default:"dark"}}},H={args:{disabled:!0,text:"Button",variant:"tertiary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},V={args:{loading:!0,text:"Button",variant:"tertiary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},z={args:{text:"Button",variant:"tertiary",inverse:!0,size:"sm"},parameters:{backgrounds:{default:"dark"}}},U={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"tertiary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},w={args:{fullWidth:!0,text:"Button",variant:"tertiary",inverse:!0},parameters:{backgrounds:{default:"dark"}}},A={args:{fullWidth:!0,text:"Button"}},F={args:{size:"sm",text:"Button"}},E={args:{svg:e,iconRotateDegree:"90",iconPosition:"after",size:"sm",text:"Button"}},G={args:{size:"lg",text:"Button"}},M={args:{svg:e,iconRotateDegree:"90",iconPosition:"after",size:"lg",text:"Button"}},t={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"primary"}},q={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"secondary"}},K={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"secondary",inverse:!0,neutral:!0},parameters:{backgrounds:{default:"dark"}}},Y={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"tertiary"}},_={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"tertiary",neutral:!0}},j={args:{hideText:!0,svg:e,iconRotateDegree:"90",iconPosition:"after",text:"Button With Visually Hidden Text",variant:"tertiary",neutral:!0,inverse:!0},parameters:{backgrounds:{default:"dark"}}},Z={args:{loading:!0,text:"Submit",variant:"primary"}},$={args:{loadingComplete:!0,text:"Submit",variant:"primary"}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{

package/dist/assets/{card-Ba_U5Ofz.js → card-Ba9UBp6t.js}

@@ -1,4 +1,4 @@
-import{a as c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8-element-C32P9iMC.js";const g=c`.cre8-u-content-knockout-brand {
+import{a as c,b as a}from"./iframe-DgoqrgRr.js";import{C as p,n as o}from"./cre8-element-D4jUl3yv.js";const g=c`.cre8-u-content-knockout-brand {
   color: var(----cre8-color-content-knockout-brand);
 }
 
@@ -602,8 +602,6 @@ span.ripple {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  width: 100%;
   padding: 1.5rem;
   gap: 1rem;
   border-color: var(--cre8-color-border-default);
@@ -613,6 +611,21 @@ span.ripple {
   background: var(--cre8-color-bg-default);
 }
 
+/**
+ * Full height card
+ * 1) Stretches the card to fill its parent's height and width. Off by
+ * default: the host is \`display: block\` with no explicit height, so a card
+ * placed in a flex or grid ancestor with \`align-items: stretch\` would
+ * otherwise inherit whatever height that ancestor happens to establish -
+ * invisible from outside the shadow boundary and unrelated to the card's
+ * own content. Opt in only when the parent's height is actually meant to be
+ * shared, e.g. cards as flex/grid items that should line up edge to edge.
+ */
+.cre8-c-card--full-height {
+  height: 100%;
+  width: 100%;
+}
+
 /**
  * Compact card - reduced padding for narrow layouts
  */
@@ -713,7 +726,7 @@ span.ripple {
 }
 .cre8-c-card--horizontal-bare .cre8-c-card__footer {
   padding: 0;
-}`;var h=Object.defineProperty,s=(n,r,d,u)=>{for(var t=void 0,i=n.length-1,m;i>=0;i--)(m=n[i])&&(t=m(r,d,t)||t);return t&&h(r,d,t),t};const o=class o extends p{render(){const r=this.componentClassNames("cre8-c-card",{"cre8-c-card--bare":this.variant==="bare","cre8-c-card--compact":this.variant==="compact","cre8-c-card--horizontal":this.variant==="horizontal","cre8-c-card--horizontal-bare":this.variant==="horizontal-bare","cre8-c-card--align-center":this.align==="center"});return a`
+}`;var h=Object.defineProperty,n=(l,r,s,u)=>{for(var t=void 0,i=l.length-1,m;i>=0;i--)(m=l[i])&&(t=m(r,s,t)||t);return t&&h(r,s,t),t};const d=class d extends p{render(){const r=this.componentClassNames("cre8-c-card",{"cre8-c-card--bare":this.variant==="bare","cre8-c-card--compact":this.variant==="compact","cre8-c-card--horizontal":this.variant==="horizontal","cre8-c-card--horizontal-bare":this.variant==="horizontal-bare","cre8-c-card--align-center":this.align==="center","cre8-c-card--full-height":this.fullHeight===!0});return a`
       <div class="${r}" part="card">
         ${this.slotNotEmpty("header")&&a`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
         <div class="cre8-c-card__body" part="body">
@@ -721,4 +734,4 @@ span.ripple {
         </div>
         ${this.slotNotEmpty("footer")&&a`<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
       </div>
-    `}};o.styles=[g];let e=o;s([l()],e.prototype,"variant");s([l()],e.prototype,"align");customElements.get("cre8-card")===void 0&&customElements.define("cre8-card",e);
+    `}};d.styles=[g];let e=d;n([o()],e.prototype,"variant");n([o()],e.prototype,"align");n([o({type:Boolean,reflect:!0})],e.prototype,"fullHeight");customElements.get("cre8-card")===void 0&&customElements.define("cre8-card",e);

package/dist/assets/card.stories-2rhA29TT.js

@@ -0,0 +1,69 @@
+import{o as t,b as l}from"./iframe-DgoqrgRr.js";import{s as p}from"./spread-Cc0YLoqh.js";import{s as o}from"./story-helpers-BFn_kBYw.js";import"./f-po-CDPxLfff.js";import"./card-Ba9UBp6t.js";import"./icon-BmyJ3psE.js";import"./text-passage-D_pRCxLR.js";import"./heading-TaL9d36K.js";import"./badge-DoPOxLq7.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-Bh0SnORx.js";import"./cre8-element-D4jUl3yv.js";const C={title:"cre8 Components/Card",component:"cre8-card",render:({header:r,body:d,footer:m,...h})=>l`
+    <cre8-card ${p(h)}>
+      ${t(o(r,"cre8-icon-legacy"))}
+      ${t(o(d,"cre8-text-passage","cre8-heading"))}
+      ${t(o(m,"cre8-badge","cre8-text-passage"))}
+    </cre8-card>`,parameters:{status:{type:"inProgress"}},argTypes:{align:{options:["center"],control:{type:"radio"}},variant:{options:["bare","horizontal","horizontal-bare"],control:{type:"radio"}}}},e={args:{header:'<cre8-icon-legacy slot="header" name="rx" style="--cre8-icon-width: 32px; --cre8-icon-height: 32px;"></cre8-icon-legacy>',body:`<cre8-text-passage>
+      <cre8-heading headingtagname="h2" variant="title-default">Bactrim</cre8-heading>
+      <p style="color: var(--cre8-color-content-subtle">Filled by Pharmacy</p>
+    </cre8-text-passage>`,footer:'<cre8-badge slot="footer" status="error" variant="light" text="Shipping Delay"></cre8-badge>'}},a={args:{...e.args,footer:'<cre8-text-passage slot="footer"><p style="color: var(--cre8-color-content-subtle">15 mg</p></cre8-text-passage>',variant:"horizontal"}},s={args:{...e.args,variant:"bare"}},c={args:{...a.args,variant:"horizontal-bare"}},n={args:{...e.args,align:"center"}},i={args:{...a.args,align:"center",variant:"horizontal"}},g={args:{...e.args,fullHeight:!0},render:r=>l`<div style="display: flex; gap: 16px; height: 320px;">
+    <cre8-card ${p(r)}>
+      ${t(o(r.header,"cre8-icon-legacy"))}
+      ${t(o(r.body,"cre8-text-passage","cre8-heading"))}
+      ${t(o(r.footer,"cre8-badge","cre8-text-passage"))}
+    </cre8-card>
+    <cre8-card ${p(r)}>
+      <cre8-text-passage><p>A shorter card, forced to the same height by its flex parent.</p></cre8-text-passage>
+    </cre8-card>
+  </div>`};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+  args: {
+    header: '<cre8-icon-legacy slot="header" name="rx" style="--cre8-icon-width: 32px; --cre8-icon-height: 32px;"></cre8-icon-legacy>',
+    body: \`<cre8-text-passage>
+      <cre8-heading headingtagname="h2" variant="title-default">Bactrim</cre8-heading>
+      <p style="color: var(--cre8-color-content-subtle">Filled by Pharmacy</p>
+    </cre8-text-passage>\`,
+    footer: '<cre8-badge slot="footer" status="error" variant="light" text="Shipping Delay"></cre8-badge>'
+  }
+}`,...e.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Default.args,
+    footer: '<cre8-text-passage slot="footer"><p style="color: var(--cre8-color-content-subtle">15 mg</p></cre8-text-passage>',
+    variant: 'horizontal'
+  }
+}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Default.args,
+    variant: 'bare'
+  }
+}`,...s.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Horizontal.args,
+    variant: 'horizontal-bare'
+  }
+}`,...c.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Default.args,
+    align: 'center'
+  }
+}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Horizontal.args,
+    align: 'center',
+    variant: 'horizontal'
+  }
+}`,...i.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    ...Default.args,
+    fullHeight: true
+  },
+  render: args => html\`<div style="display: flex; gap: 16px; height: 320px;">
+    <cre8-card \${spread(args)}>
+      \${unsafeHTML(sanitizeInput(args.header, 'cre8-icon-legacy'))}
+      \${unsafeHTML(sanitizeInput(args.body, 'cre8-text-passage', 'cre8-heading'))}
+      \${unsafeHTML(sanitizeInput(args.footer, 'cre8-badge', 'cre8-text-passage'))}
+    </cre8-card>
+    <cre8-card \${spread(args)}>
+      <cre8-text-passage><p>A shorter card, forced to the same height by its flex parent.</p></cre8-text-passage>
+    </cre8-card>
+  </div>\`
+}`,...g.parameters?.docs?.source}}};const F=["Default","Horizontal","Bare","HorizontalBare","AlignCenter","HorizontalAlignCenter","FullHeight"];export{n as AlignCenter,s as Bare,e as Default,g as FullHeight,a as Horizontal,i as HorizontalAlignCenter,c as HorizontalBare,F as __namedExportsOrder,C as default};