@tmorrow/cre8-wc 1.1.4 → 1.1.7

package/lib/components/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;OAMG;IAEC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAExD;;;OAGG;IAEC,KAAK,CAAC,EAAE,QAAQ,CAAC;IAErB,MAAM;CAoBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAEpD;;;OAGG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,MAAM;CAoBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/card/card.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
-import styles from './card.styles.js';
+import { styles } from './card.styles.js';
 /** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.
 *
 * # How to Use

package/lib/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;EAmBE;AACF,MAAM,OAAO,QAAS,SAAQ,WAAW;IAoBvC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAChE,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,iBAAiB;YAClE,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eACxB,IAAI,CAAA,kFAAkF;;;;UAIzF,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eACxB,IAAI,CAAA,kFAAkF;;KAE9F,CAAC;IACJ,CAAC;;AAtCQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUvB;IADH,QAAQ,EAAE;yCAC6C;AAOpD;IADH,QAAQ,EAAE;uCACU;AAwBvB,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './card.styles.js';\n\n/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.\n*\n* # How to Use\n* 1. Wrap the card component tags around any html template code which has been properly imported into the file.\n* 2. Decide the layout that best fits the designs assigned to your work.\n*   Generally, we recommend visual elements appear in the `header` (optional slot),\n*   while `body` remains reserved for custom html content that gives further context and meaning to the `header`.\n* 3. The card defaults to a column and includes a `horizontal` directional variant.\n*   If you have a card where the layout of the content is more aligned horizontally,\n*   using the `horizontal` variant will ease the construction of your component\n* 4. Finally, we typically recommend reserving the footer for any interactive elements\n*   such as buttons for navigating to further information.\n*\n*\n* NOTE: Adjusting props not mentioned above may result in unpredictable states\n*\n* @slot body - The card's body content\n* @slot header - (Optional) Content in the card's header\n* @slot footer - (Optional) Content in the card's footer\n*/\nexport class Cre8Card extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Style variants\n   * - **bare** renders a card without a border and without padding around the content\n   * - **horizontal** renders a card with header, body, footer oriented in a row rather than a column\n   * - **horizontal-bare** renders a card with header, body, footer oriented in a row rather than a column\n   *   without a border and without padding around the content\n   */\n  @property()\n      variant?: 'bare' | 'horizontal' | 'horizontal-bare';\n\n  /**\n   * Alignment variant\n   * - **center** renders a card that has center aligned content/text\n   */\n  @property()\n      align?: 'center';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-card', {\n          'cre8-c-card--bare': this.variant === 'bare',\n          'cre8-c-card--horizontal': this.variant === 'horizontal',\n          'cre8-c-card--horizontal-bare': this.variant === 'horizontal-bare',\n          'cre8-c-card--align-center': this.align === 'center',\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\" part=\"card\">\n        ${this.slotNotEmpty('header')\n          && html`<div class=\"cre8-c-card__header\" part=\"header\"><slot name=\"header\"></slot></div>`}\n        <div class=\"cre8-c-card__body\" part=\"body\">\n          <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer')\n          && html`<div class=\"cre8-c-card__footer\" part=\"footer\"><slot name=\"footer\"></slot></div>`}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-card') === undefined) {\n    customElements.define('cre8-card', Cre8Card);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-card': Cre8Card;\n  }\n}\n\nexport default Cre8Card;\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,MAAM,OAAO,QAAS,SAAQ,WAAW;IAoBvC,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAClE,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,iBAAiB;YAClE,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACrD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;;;UAIrF,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;KAE1F,CAAC;IACJ,CAAC;;AAtCM,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUzB;IADC,QAAQ,EAAE;yCACyC;AAOpD;IADC,QAAQ,EAAE;uCACM;AAwBnB,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { styles } from './card.styles.js';\n\n/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.\n*\n* # How to Use\n* 1. Wrap the card component tags around any html template code which has been properly imported into the file.\n* 2. Decide the layout that best fits the designs assigned to your work.\n*   Generally, we recommend visual elements appear in the `header` (optional slot),\n*   while `body` remains reserved for custom html content that gives further context and meaning to the `header`.\n* 3. The card defaults to a column and includes a `horizontal` directional variant.\n*   If you have a card where the layout of the content is more aligned horizontally,\n*   using the `horizontal` variant will ease the construction of your component\n* 4. Finally, we typically recommend reserving the footer for any interactive elements\n*   such as buttons for navigating to further information.\n*\n*\n* NOTE: Adjusting props not mentioned above may result in unpredictable states\n*\n* @slot body - The card's body content\n* @slot header - (Optional) Content in the card's header\n* @slot footer - (Optional) Content in the card's footer\n*/\nexport class Cre8Card extends Cre8Element {\n  static styles = [styles];\n\n  /**\n   * Style variants\n   * - **bare** renders a card without a border and without padding around the content\n   * - **horizontal** renders a card with header, body, footer oriented in a row rather than a column\n   * - **horizontal-bare** renders a card with header, body, footer oriented in a row rather than a column\n   *   without a border and without padding around the content\n   */\n  @property()\n  variant?: 'bare' | 'horizontal' | 'horizontal-bare';\n\n  /**\n   * Alignment variant\n   * - **center** renders a card that has center aligned content/text\n   */\n  @property()\n  align?: 'center';\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-card', {\n      'cre8-c-card--bare': this.variant === 'bare',\n      'cre8-c-card--horizontal': this.variant === 'horizontal',\n      'cre8-c-card--horizontal-bare': this.variant === 'horizontal-bare',\n      'cre8-c-card--align-center': this.align === 'center',\n    });\n\n    return html`\n      <div class=\"${componentClassNames}\" part=\"card\">\n        ${this.slotNotEmpty('header')\n      && html`<div class=\"cre8-c-card__header\" part=\"header\"><slot name=\"header\"></slot></div>`}\n        <div class=\"cre8-c-card__body\" part=\"body\">\n          <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer')\n      && html`<div class=\"cre8-c-card__footer\" part=\"footer\"><slot name=\"footer\"></slot></div>`}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-card') === undefined) {\n  customElements.define('cre8-card', Cre8Card);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-card': Cre8Card;\n  }\n}\n\nexport default Cre8Card;\n"]}

package/lib/components/card/card.styles.d.ts

@@ -1,3 +1,3 @@
 declare const styles: import("lit").CSSResult;
-export default styles;
+export { styles };
 //# sourceMappingURL=card.styles.d.ts.map

package/lib/components/card/card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAovF,CAAC;AACjwF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiVV,CAAC;AACH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/components/card/card.styles.js

@@ -1,4 +1,341 @@
 import { css } from 'lit';
-const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-card{overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;gap:1rem;border-color:var(--cre8-color-border-default);border-style:var(--cre8-border-style-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);background:var(--cre8-color-bg-default)}.cre8-c-card--horizontal{flex-direction:row;align-items:center;justify-content:center}.cre8-c-card--bare{border:0;padding:0;gap:0;box-shadow:none}.cre8-c-card--horizontal-bare{flex-direction:row;border:0;padding:0;gap:0;box-shadow:none;align-items:center;justify-content:center}.cre8-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-card__header{display:block;flex:none}.cre8-c-card__body{display:block;flex:1 1 auto}.cre8-c-card__footer{display:block;flex:none}.cre8-c-card--bare .cre8-c-card__footer{padding:0}.cre8-c-card--horizontal-bare .cre8-c-card__footer{padding:0}`;
-export default styles;
+const styles = css `/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+:host {
+  --cre8-z-index-1: 1;
+  --cre8-z-index-50: 50;
+  --cre8-z-index-100: 100;
+  --cre8-z-index-200: 200;
+  --cre8-z-index-1030: 1030;
+  --cre8-anim-fade-quick: 0.35s;
+  --cre8-anim-ease: ease;
+}
+
+@keyframes fadeIn {
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFwd {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideOutRight {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideUp {
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (width >= 481px) {
+  @keyframes slideInFwd {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+}
+@media (width >= 48rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 330px;
+      height: 330px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 330px;
+      height: 330px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 60rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 460px;
+      height: 460px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 460px;
+      height: 460px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 75rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 592px;
+      height: 591px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 87.5rem) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 120px));
+    }
+  }
+}
+@media (width >= 2200px) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 592px));
+    }
+  }
+}
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-bg-color);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 1;
+  }
+}
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+:host {
+  display: block;
+}
+
+/**
+ * 1) A card is an organized block that typically contains a title, image,
+ * text, and/or calls to action. It is made up of an optional header slot, required
+ * body slot, and optional footer slot to place other Components and content within.
+ */
+.cre8-c-card {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: 1.5rem;
+  gap: 1rem;
+  border-color: var(--cre8-color-border-default);
+  border-style: var(--cre8-border-style-default);
+  border-width: var(--cre8-border-width-default);
+  border-radius: var(--cre8-border-radius-container);
+  background: var(--cre8-color-bg-default);
+}
+
+/**
+ * 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
+ */
+.cre8-c-card--horizontal {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+/**
+ * Bare card
+ * 1) Organized block without a border, background, or padding
+ */
+.cre8-c-card--bare {
+  border: 0;
+  padding: 0;
+  gap: 0;
+  box-shadow: none;
+}
+
+/**
+ * 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
+ */
+.cre8-c-card--horizontal-bare {
+  flex-direction: row;
+  border: 0;
+  padding: 0;
+  gap: 0;
+  box-shadow: none;
+  align-items: center;
+  justify-content: center;
+}
+
+/**
+ * Center aligned card
+ * 1) Center content and text within the card
+ */
+.cre8-c-card--align-center {
+  text-align: center;
+  /* 1 */
+  align-items: center;
+  /* 1 */
+  justify-content: center;
+  /* 1 */
+}
+
+/**
+ * Slotted image within a card
+ * 1) Make the image full width
+ */
+::slotted(img) {
+  width: 100%;
+}
+
+/**
+ * Card header
+ * 1) Remove flex so that body always takes up remaining space
+ */
+.cre8-c-card__header {
+  display: block;
+  flex: none;
+  /* 1 */
+}
+
+/**
+ * Card body
+ * 1) Flex applied to always fill the remaining space of the card
+ */
+.cre8-c-card__body {
+  display: block;
+  flex: 1 1 auto;
+  /* 1 */
+}
+
+/**
+ * Card footer
+ * 1) Remove flex so that body always takes up remaining space
+ */
+.cre8-c-card__footer {
+  display: block;
+  flex: none;
+  /* 1 */
+}
+.cre8-c-card--bare .cre8-c-card__footer {
+  padding: 0;
+}
+.cre8-c-card--horizontal-bare .cre8-c-card__footer {
+  padding: 0;
+}`;
+export { styles };
 //# sourceMappingURL=card.styles.js.map

package/lib/components/card/card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,8uFAA8uF,CAAC;AACjwF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-card{overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;gap:1rem;border-color:var(--cre8-color-border-default);border-style:var(--cre8-border-style-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);background:var(--cre8-color-bg-default)}.cre8-c-card--horizontal{flex-direction:row;align-items:center;justify-content:center}.cre8-c-card--bare{border:0;padding:0;gap:0;box-shadow:none}.cre8-c-card--horizontal-bare{flex-direction:row;border:0;padding:0;gap:0;box-shadow:none;align-items:center;justify-content:center}.cre8-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-card__header{display:block;flex:none}.cre8-c-card__body{display:block;flex:1 1 auto}.cre8-c-card__footer{display:block;flex:none}.cre8-c-card--bare .cre8-c-card__footer{padding:0}.cre8-c-card--horizontal-bare .cre8-c-card__footer{padding:0}`;\nexport default styles;\n"]}
+{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiVhB,CAAC;AACH,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: block;\n}\n\n/**\n * 1) A card is an organized block that typically contains a title, image,\n * text, and/or calls to action. It is made up of an optional header slot, required\n * body slot, and optional footer slot to place other Components and content within.\n */\n.cre8-c-card {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  padding: 1.5rem;\n  gap: 1rem;\n  border-color: var(--cre8-color-border-default);\n  border-style: var(--cre8-border-style-default);\n  border-width: var(--cre8-border-width-default);\n  border-radius: var(--cre8-border-radius-container);\n  background: var(--cre8-color-bg-default);\n}\n\n/**\n * Horizontal card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom\n */\n.cre8-c-card--horizontal {\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n\n/**\n * Bare card\n * 1) Organized block without a border, background, or padding\n */\n.cre8-c-card--bare {\n  border: 0;\n  padding: 0;\n  gap: 0;\n  box-shadow: none;\n}\n\n/**\n * Horizontal-bare card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom without a border, background, or padding\n */\n.cre8-c-card--horizontal-bare {\n  flex-direction: row;\n  border: 0;\n  padding: 0;\n  gap: 0;\n  box-shadow: none;\n  align-items: center;\n  justify-content: center;\n}\n\n/**\n * Center aligned card\n * 1) Center content and text within the card\n */\n.cre8-c-card--align-center {\n  text-align: center;\n  /* 1 */\n  align-items: center;\n  /* 1 */\n  justify-content: center;\n  /* 1 */\n}\n\n/**\n * Slotted image within a card\n * 1) Make the image full width\n */\n::slotted(img) {\n  width: 100%;\n}\n\n/**\n * Card header\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-card__header {\n  display: block;\n  flex: none;\n  /* 1 */\n}\n\n/**\n * Card body\n * 1) Flex applied to always fill the remaining space of the card\n */\n.cre8-c-card__body {\n  display: block;\n  flex: 1 1 auto;\n  /* 1 */\n}\n\n/**\n * Card footer\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-card__footer {\n  display: block;\n  flex: none;\n  /* 1 */\n}\n.cre8-c-card--bare .cre8-c-card__footer {\n  padding: 0;\n}\n.cre8-c-card--horizontal-bare .cre8-c-card__footer {\n  padding: 0;\n}`;\nexport { styles };\n"]}

package/lib/components/field/field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA+qJ,CAAC;AAC5rJ,eAAe,MAAM,CAAC"}
+{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAsWkC,CAAC;AAC/C,eAAe,MAAM,CAAC"}