@tmorrow/cre8-wc 2.3.4 → 2.3.6

package/dist/assets/{button.stories-Bi5uMmVy.js → button.stories-DIic_g44.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-B4bTcHfE.js";import{s as X}from"./spread-Bid2THYj.js";import"./button-BYSQD8Gp.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-DA22R8ho.js";import"./cre8-element-C-P96xHp.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-1YjfSY90.js";import"./icon-JqBqZA-z.js";import"./loading-spinner-DKyQa4wk.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-Hnd7rRWF.js}

@@ -1,5 +1,5 @@
-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 {
-  color: var(----cre8-color-content-knockout-brand);
+import{a as s,b as i}from"./iframe-B4bTcHfE.js";import{C as p,n as o}from"./cre8-element-C-P96xHp.js";const g=s`.cre8-u-content-knockout-brand {
+  color: var(--cre8-color-content-knockout-brand);
 }
 
 .cre8-u-is-hidden {
@@ -72,23 +72,23 @@ import{a as c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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 c,b as a}from"./iframe-BH5yZqve.js";import{C as p,n as l}from"./cre8
 }
 
 .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) {
@@ -602,8 +601,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 +610,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
  */
@@ -625,9 +637,12 @@ span.ripple {
  * Horizontal card
  * 1) Organized block with flex-direction set to row so that header => footer appears
  * from left to right rather than top to bottom
+ * 2) Wraps to a stack once the body can no longer hold its basis
  */
 .cre8-c-card--horizontal {
   flex-direction: row;
+  flex-wrap: wrap;
+  /* 2 */
   align-items: center;
   justify-content: center;
 }
@@ -647,9 +662,12 @@ span.ripple {
  * Horizontal-bare card
  * 1) Organized block with flex-direction set to row so that header => footer appears
  * from left to right rather than top to bottom without a border, background, or padding
+ * 2) Wraps to a stack once the body can no longer hold its basis
  */
 .cre8-c-card--horizontal-bare {
   flex-direction: row;
+  flex-wrap: wrap;
+  /* 2 */
   border: 0;
   padding: 0;
   gap: 0;
@@ -682,26 +700,42 @@ span.ripple {
 /**
  * Card header
  * 1) Remove flex so that body always takes up remaining space
+ * 2) ...except in a horizontal card, where holding max-content width would
+ * starve the body instead.
  */
 .cre8-c-card__header {
   display: block;
   flex: none;
   /* 1 */
 }
+.cre8-c-card--horizontal .cre8-c-card__header, .cre8-c-card--horizontal-bare .cre8-c-card__header {
+  flex: 0 1 auto;
+  /* 2 */
+}
 
 /**
  * Card body
  * 1) Flex applied to always fill the remaining space of the card
+ * 2) In a horizontal card the body is the flexible track, so it needs a basis
+ * of its own and \`min-width: 0\`; otherwise it is the only item able to shrink
+ * and collapses to min-content beside a wide header.
  */
 .cre8-c-card__body {
   display: block;
   flex: 1 1 auto;
   /* 1 */
 }
+.cre8-c-card--horizontal .cre8-c-card__body, .cre8-c-card--horizontal-bare .cre8-c-card__body {
+  flex: 1 1 20rem;
+  /* 2 */
+  min-width: 0;
+  /* 2 */
+}
 
 /**
  * Card footer
  * 1) Remove flex so that body always takes up remaining space
+ * 2) ...except in a horizontal card - see the note on the header.
  */
 .cre8-c-card__footer {
   display: block;
@@ -713,12 +747,16 @@ 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`
+}
+.cre8-c-card--horizontal .cre8-c-card__footer, .cre8-c-card--horizontal-bare .cre8-c-card__footer {
+  flex: 0 1 auto;
+  /* 2 */
+}`;var h=Object.defineProperty,n=(m,r,l,u)=>{for(var e=void 0,a=m.length-1,c;a>=0;a--)(c=m[a])&&(e=c(r,l,e)||e);return e&&h(r,l,e),e};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 i`
       <div class="${r}" part="card">
-        ${this.slotNotEmpty("header")&&a`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
+        ${this.slotNotEmpty("header")&&i`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
         <div class="cre8-c-card__body" part="body">
           <slot></slot>
         </div>
-        ${this.slotNotEmpty("footer")&&a`<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
+        ${this.slotNotEmpty("footer")&&i`<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 t=d;n([o()],t.prototype,"variant");n([o()],t.prototype,"align");n([o({type:Boolean,reflect:!0})],t.prototype,"fullHeight");customElements.get("cre8-card")===void 0&&customElements.define("cre8-card",t);

package/dist/assets/card.stories-CJ2oVtcP.js

@@ -0,0 +1,69 @@
+import{o as t,b as l}from"./iframe-B4bTcHfE.js";import{s as p}from"./spread-Bid2THYj.js";import{s as o}from"./story-helpers-BFn_kBYw.js";import"./f-po-qGnzb4u2.js";import"./card-Hnd7rRWF.js";import"./icon-JqBqZA-z.js";import"./text-passage-BrueaqOk.js";import"./heading-DJFZJNk9.js";import"./badge-D6EpCJXK.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./if-defined-DA22R8ho.js";import"./cre8-element-C-P96xHp.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};