@tmorrow/cre8-wc 2.0.4 → 2.0.5

package/lib/components/accordion/accordion.d.ts

@@ -8,6 +8,7 @@ import { Cre8Element } from '../cre8-element';
  *
  * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.
  *
+ * @slot - The `cre8-accordion-item` children to group
  */
 export declare class Cre8Accordion extends Cre8Element {
     static styles: import("lit").CSSResult[];

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/accordion/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;GASG;AAEH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAG3B;;;;;;OAMG;IAEC,UAAU,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;IAErE;;;;;;OAMG;IAEC,UAAU,CAAC,UAAS;IAExB,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CAeP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/accordion/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;GAUG;AAEH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAG3B;;;;;;OAMG;IAEC,UAAU,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;IAErE;;;;;;OAMG;IAEC,UAAU,CAAC,UAAS;IAExB,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CAeP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF;AAED,eAAe,aAAa,CAAC"}

package/lib/components/accordion/accordion.js

@@ -17,6 +17,7 @@ import styles from './accordion.styles.js';
  *
  * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.
  *
+ * @slot - The `cre8-accordion-item` children to group
  */
 export class Cre8Accordion extends Cre8Element {
     constructor() {

package/lib/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../components/accordion/accordion.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,uBAAuB,CAAC;AAE3C;;;;;;;;;GASG;AAEH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QAcE;;;;;;WAMG;QAEC,eAAU,GAAI,KAAK,CAAC;IAqB1B,CAAC;IAnBC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACrE,sBAAsB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;YAChD,+BAA+B,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM;YAC5F,oCAAoC,EAAE,IAAI,CAAC,UAAU,KAAK,WAAW;YACrE,yCAAyC,EAAE,IAAI,CAAC,UAAU,KAAK,gBAAgB;YAC/E,kCAAkC,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;SACpE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;KAGlC,CAAC;IACJ,CAAC;;AAzCQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAWvB;IADH,QAAQ,EAAE;iDAC0D;AAUjE;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAuB1B,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AAC3D,CAAC;AAOD,eAAe,aAAa,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './accordion.styles.js';\n\n/**\n * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.\n * The header title gives the user a high level overview of the content allowing the user to decide\n * which sections to expand for the information.\n *\n * Accordion contains Accordion Items as children. This component is the wrapper for grouping related accordion items.\n *\n * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.\n *\n */\n\nexport class Cre8Accordion extends Cre8Element {\n    static styles = [styles];\n\n\n  /**\n   * borderType\n   * @prop {'rectangle' | 'rounded-bottom' | 'rounded' | 'none'}\n   *\n   * Controls the border and border-radius of the parent container of the slotted accordions.\n   *\n   */\n  @property()\n      borderType?: 'rectangle' | 'rounded-bottom' | 'rounded' | 'none';\n\n  /**\n   *\n   * When it is true, the inner dividers are displayed;\n   * if it is false, the inner dividers are not displayed\n   * @prop {boolean} hasDivider\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      hasDivider? = false;\n\n  connectedCallback(): void {\n      super.connectedCallback();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion', {\n          'cre8-c-inner-divider': this.hasDivider === true,\n          'cre8-c-accordion--border-none': this.borderType === undefined || this.borderType === 'none',\n          'cre8-c-accordion--border-rectangle': this.borderType === 'rectangle',\n          'cre8-c-accordion--border-rounded-bottom': this.borderType === 'rounded-bottom',\n          'cre8-c-accordion--border-rounded': this.borderType === 'rounded',\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-accordion') === undefined) {\n    customElements.define('cre8-accordion', Cre8Accordion);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion': Cre8Accordion;\n  }\n}\n\nexport default Cre8Accordion;\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../components/accordion/accordion.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,uBAAuB,CAAC;AAE3C;;;;;;;;;;GAUG;AAEH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QAcE;;;;;;WAMG;QAEC,eAAU,GAAI,KAAK,CAAC;IAqB1B,CAAC;IAnBC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACrE,sBAAsB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;YAChD,+BAA+B,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM;YAC5F,oCAAoC,EAAE,IAAI,CAAC,UAAU,KAAK,WAAW;YACrE,yCAAyC,EAAE,IAAI,CAAC,UAAU,KAAK,gBAAgB;YAC/E,kCAAkC,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;SACpE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;KAGlC,CAAC;IACJ,CAAC;;AAzCQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAWvB;IADH,QAAQ,EAAE;iDAC0D;AAUjE;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAuB1B,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AAC3D,CAAC;AAOD,eAAe,aAAa,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './accordion.styles.js';\n\n/**\n * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.\n * The header title gives the user a high level overview of the content allowing the user to decide\n * which sections to expand for the information.\n *\n * Accordion contains Accordion Items as children. This component is the wrapper for grouping related accordion items.\n *\n * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.\n *\n * @slot - The `cre8-accordion-item` children to group\n */\n\nexport class Cre8Accordion extends Cre8Element {\n    static styles = [styles];\n\n\n  /**\n   * borderType\n   * @prop {'rectangle' | 'rounded-bottom' | 'rounded' | 'none'}\n   *\n   * Controls the border and border-radius of the parent container of the slotted accordions.\n   *\n   */\n  @property()\n      borderType?: 'rectangle' | 'rounded-bottom' | 'rounded' | 'none';\n\n  /**\n   *\n   * When it is true, the inner dividers are displayed;\n   * if it is false, the inner dividers are not displayed\n   * @prop {boolean} hasDivider\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      hasDivider? = false;\n\n  connectedCallback(): void {\n      super.connectedCallback();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion', {\n          'cre8-c-inner-divider': this.hasDivider === true,\n          'cre8-c-accordion--border-none': this.borderType === undefined || this.borderType === 'none',\n          'cre8-c-accordion--border-rectangle': this.borderType === 'rectangle',\n          'cre8-c-accordion--border-rounded-bottom': this.borderType === 'rounded-bottom',\n          'cre8-c-accordion--border-rounded': this.borderType === 'rounded',\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-accordion') === undefined) {\n    customElements.define('cre8-accordion', Cre8Accordion);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion': Cre8Accordion;\n  }\n}\n\nexport default Cre8Accordion;\n"]}

package/lib/components/accordion-item/accordion-item.d.ts

@@ -24,6 +24,7 @@ import '../button/button';
  *
  * @slot The body of the accordion item will be any valid html
  * inserted between the cre8-accordion-item opening and closing tags.
+ * @slot heading - Custom heading content, used when the `heading` property is not set.
  *
  *
  * @csspart ::part('header') - The container around the interactive header.

package/lib/components/accordion-item/accordion-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAG1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,qBAAa,iBAAkB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;OAKG;IAGC,QAAQ,CAAC,UAAS;IAGtB;;;;;;OAMG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;;;;OAOG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;;OAOG;IAEC,YAAY,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;OAMG;IAEC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE7B;;;;;;;OAOG;IAGC,iBAAiB,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEtE;;;;;;OAMG;IAEC,OAAO,EAAG,MAAM,CAAC;IAErB;;;;;;OAMG;IAEC,WAAW,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IAEH,OAAO,CAAC,aAAa,CAAU;IAE/B;;;;;;OAMG;IAEH,OAAO,CAAC,OAAO,CAAU;IAEzB;;;;;;OAMG;IAGH,OAAO,CAAC,UAAU,CAAC,CAAU;;IASpB,iBAAiB;YASZ,iBAAiB;IAY/B,OAAO,CAAC,oBAAoB;IAmB5B,MAAM;CAsEP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAG1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,qBAAa,iBAAkB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;OAKG;IAGC,QAAQ,CAAC,UAAS;IAGtB;;;;;;OAMG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;;;;OAOG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;;OAOG;IAEC,YAAY,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;OAMG;IAEC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE7B;;;;;;;OAOG;IAGC,iBAAiB,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEtE;;;;;;OAMG;IAEC,OAAO,EAAG,MAAM,CAAC;IAErB;;;;;;OAMG;IAEC,WAAW,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IAEH,OAAO,CAAC,aAAa,CAAU;IAE/B;;;;;;OAMG;IAEH,OAAO,CAAC,OAAO,CAAU;IAEzB;;;;;;OAMG;IAGH,OAAO,CAAC,UAAU,CAAC,CAAU;;IASpB,iBAAiB;YASZ,iBAAiB;IAY/B,OAAO,CAAC,oBAAoB;IAmB5B,MAAM;CAsEP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,eAAe,iBAAiB,CAAC"}

package/lib/components/accordion-item/accordion-item.js

@@ -36,6 +36,7 @@ import styles from './accordion-item.styles.js';
  *
  * @slot The body of the accordion item will be any valid html
  * inserted between the cre8-accordion-item opening and closing tags.
+ * @slot heading - Custom heading content, used when the `heading` property is not set.
  *
  *
  * @csspart ::part('header') - The container around the interactive header.

package/lib/components/accordion-item/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport classnames from 'classnames';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport '../button/button';\nimport styles from './accordion-item.styles.js';\n\n/**\n *\n * The accordion item component delivers large amounts of content in a small space\n * through progressive disclosure. That is, the user gets key details about the\n * underlying content and can choose to expand that content within the constraints\n * of the accordion item. Accordion Items work especially well on mobile interfaces or\n * whenever vertical space is at a premium.\n *\n * ## HOW TO USE\n * Avoid “nested” accordion items—that is, collapsible content within collapsible content.\n * This type of pattern goes against UX best practices.\n *\n * The Cre8 accordion item header allows for two sizes:\n * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]\n *\n * A chevron is used to indicate the “expand/collapse” action, though the entire\n * header area is clickable for the same action.\n *\n * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that\n * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.\n *\n * @slot The body of the accordion item will be any valid html\n * inserted between the cre8-accordion-item opening and closing tags.\n *\n *\n * @csspart ::part('header') - The container around the interactive header.\n * @csspart ::part('button') - The button containing the header text and the animated icon.\n * @csspart ::part('icon') - The animated icon that revolves on click.\n * @csspart ::part('body') - The container around the expanding body section.\n * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.\n *\n */\n\nexport class Cre8AccordionItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   *\n   * When true, the Accordion Item is opens, when false it closes;\n   * @prop {boolean} isActive\n   *\n   */\n\n  @property({ type: Boolean, reflect: true })\n      isActive? = false;\n\n\n  /**\n   *\n   * Optional custom id for the accordion item, if one is not set, a random id is generated for you.\n   * @prop {string} accordionItemId\n   *\n   *\n   */\n  @property({ type: String, reflect: true })\n      accordionItemId?: string;\n\n  /**\n   *\n   * Controls the positioning of the dropdown icon in relation to the text, true puts the icon before the text\n   * and false/undefined default the icon to the opposite side of the accordion item\n   * @prop {boolean} iconBefore\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      iconBefore?: boolean;\n\n  /**\n   *\n   * Controls the appearance  of dropdown icon as being an icon-only button. true renders the tertiary variant and\n   * false/undefined renders the default secondary appearance.\n   * @prop {boolean} tertiaryIcon\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      tertiaryIcon?: boolean;\n\n  /**\n   *\n   * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].\n   * @prop {'sm' | 'lg'} size\n   *\n   *\n   */\n  @property({ reflect: true })\n      size: 'sm' | 'lg' = 'sm';\n\n  /**\n   *\n   * Purely meant to help the user structure the HTML page hierarchy. Does not change the\n   * header size. Defaults to 'h3'\n   * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant\n   *\n   *\n   */\n\n  @property({ reflect: true })\n      headingTagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  /**\n   *\n   * Controls the text content of the Accordion Item heading.\n   * @prop {string} heading\n   *\n   *\n   */\n  @property({ type: String })\n      heading!: string;\n\n  /**\n   *\n   * Controls whether the header takes on the theme's 'brand-strong' color\n   * @prop {boolean} brandHeader\n   *\n   *\n   */\n  @property({ type: Boolean })\n      brandHeader?: boolean;\n\n  /**\n   *\n   * The aria attribute to which is assigned the id of the details section which is revealed via interaction\n   * with the header.\n   * @private _ariaControls\n   *\n   *\n   */\n  @property({ attribute: 'aria-controls' })\n  private _ariaControls!: string;\n\n  /**\n   *\n   * Private internal state which indicates the current _height of the accordion item panel.\n   * @private _height\n   *\n   *\n   */\n  @state()\n  private _height!: string;\n\n  /**\n   *\n   * Private internal state which Indicates if the accordion item panel is completely open.\n   * @private _fullyOpen\n   *\n   *\n   */\n\n  @state()\n  private _fullyOpen?: boolean;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this._ariaControls = `cre8-accordion-item-details-${randomId}`;\n      this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${randomId}`;\n  }\n\n  override connectedCallback() {\n      super.connectedCallback();\n      this._setContentHeight();\n      if (this.isActive) {\n          this._fullyOpen = true;\n          this._setContentHeight();\n      }\n  }\n\n  private async _setContentHeight() {\n      await this.updateComplete;\n\n      if ((this.isActive && !this._fullyOpen) || (!this.isActive && this._fullyOpen)) {\n          this._height = `${this.shadowRoot?.querySelector('.cre8-c-accordion-item__body-inner')?.scrollHeight}px`;\n      } else if (this.isActive && this._fullyOpen) {\n          this._height = 'auto';\n      } else if (!this.isActive && !this._fullyOpen) {\n          this._height = '0';\n      }\n  }\n\n  private _toggleAccordionItem() {\n      this.isActive = !this.isActive;\n\n      if (this.isActive) {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = true;\n              this._setContentHeight();\n          }, 350);\n      } else {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = false;\n              this._setContentHeight();\n          }, 50);\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion-item', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-accordion-item--icon-before': this.iconBefore,\n          'cre8-c-accordion-item--small': this.size === 'sm',\n          'cre8-c-accordion-item--large': this.size === 'lg',\n      });\n\n      const buttonClassNames = classnames('cre8-c-accordion-item__button', {\n          'cre8-is-active': this.isActive,\n          'cre8-u-justify-content-start': this.iconBefore,\n          'cre8-brand-color': this.brandHeader === true,\n      });\n\n      return html` <div id=${this.accordionItemId} class=\"${componentClassNames}\">\n      <cre8-heading\n        type=${this.size === 'lg' ? 'title-large' : 'title-default'}\n        part=\"heading\"\n        ?brandColor=${(this.brandHeader)}\n        tagVariant=\"${this.headingTagVariant ?? 'h3'}\"\n        class=\"cre8-c-accordion-item__header\"\n      >\n        <button\n          class=\"${buttonClassNames}\"\n          aria-expanded=\"${ifDefined(this.isActive)}\"\n          aria-controls=\"${this._ariaControls}\"\n          part=\"button\"\n          role=\"button\"\n          id=\"${this.id}\"\n          @click=${this._toggleAccordionItem}\n        >\n          ${this.iconBefore\n        ? html`\n            <div class=\"cre8-c-accordion-item--icon-before-heading-text\">\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before'}\n                >\n                  <cre8-icon rotate=\"180\" svg=${svgCaretUp} aria-hidden=\"true\"></cre8-icon>\n                </div>\n                ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n            </div>\n              `\n        : html`\n          <div class=\"cre8-c-accordion-item--icon-after-heading-text\">\n            ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after'}\n                >\n                  <cre8-icon rotate=\"180\" svg='${svgCaretUp}' aria-hidden=\"true\"></cre8-icon>\n                </div>\n            </div>`}\n        </button>\n      </cre8-heading>\n      <div\n        class=\"cre8-c-accordion-item__body\"\n        aria-hidden=\"${!this.isActive}\"\n        id=\"${this._ariaControls}\"\n        part=\"body\"\n        style=${`height: ${this._height}`}\n      >\n        <div class=\"cre8-c-accordion-item__body-inner\" part=\"body-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-accordion-item') === undefined) {\n    customElements.define('cre8-accordion-item', Cre8AccordionItem);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion-item': Cre8AccordionItem;\n  }\n}\n\nexport default Cre8AccordionItem;\n"]}
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport classnames from 'classnames';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport '../button/button';\nimport styles from './accordion-item.styles.js';\n\n/**\n *\n * The accordion item component delivers large amounts of content in a small space\n * through progressive disclosure. That is, the user gets key details about the\n * underlying content and can choose to expand that content within the constraints\n * of the accordion item. Accordion Items work especially well on mobile interfaces or\n * whenever vertical space is at a premium.\n *\n * ## HOW TO USE\n * Avoid “nested” accordion items—that is, collapsible content within collapsible content.\n * This type of pattern goes against UX best practices.\n *\n * The Cre8 accordion item header allows for two sizes:\n * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]\n *\n * A chevron is used to indicate the “expand/collapse” action, though the entire\n * header area is clickable for the same action.\n *\n * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that\n * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.\n *\n * @slot The body of the accordion item will be any valid html\n * inserted between the cre8-accordion-item opening and closing tags.\n * @slot heading - Custom heading content, used when the `heading` property is not set.\n *\n *\n * @csspart ::part('header') - The container around the interactive header.\n * @csspart ::part('button') - The button containing the header text and the animated icon.\n * @csspart ::part('icon') - The animated icon that revolves on click.\n * @csspart ::part('body') - The container around the expanding body section.\n * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.\n *\n */\n\nexport class Cre8AccordionItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   *\n   * When true, the Accordion Item is opens, when false it closes;\n   * @prop {boolean} isActive\n   *\n   */\n\n  @property({ type: Boolean, reflect: true })\n      isActive? = false;\n\n\n  /**\n   *\n   * Optional custom id for the accordion item, if one is not set, a random id is generated for you.\n   * @prop {string} accordionItemId\n   *\n   *\n   */\n  @property({ type: String, reflect: true })\n      accordionItemId?: string;\n\n  /**\n   *\n   * Controls the positioning of the dropdown icon in relation to the text, true puts the icon before the text\n   * and false/undefined default the icon to the opposite side of the accordion item\n   * @prop {boolean} iconBefore\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      iconBefore?: boolean;\n\n  /**\n   *\n   * Controls the appearance  of dropdown icon as being an icon-only button. true renders the tertiary variant and\n   * false/undefined renders the default secondary appearance.\n   * @prop {boolean} tertiaryIcon\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      tertiaryIcon?: boolean;\n\n  /**\n   *\n   * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].\n   * @prop {'sm' | 'lg'} size\n   *\n   *\n   */\n  @property({ reflect: true })\n      size: 'sm' | 'lg' = 'sm';\n\n  /**\n   *\n   * Purely meant to help the user structure the HTML page hierarchy. Does not change the\n   * header size. Defaults to 'h3'\n   * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant\n   *\n   *\n   */\n\n  @property({ reflect: true })\n      headingTagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  /**\n   *\n   * Controls the text content of the Accordion Item heading.\n   * @prop {string} heading\n   *\n   *\n   */\n  @property({ type: String })\n      heading!: string;\n\n  /**\n   *\n   * Controls whether the header takes on the theme's 'brand-strong' color\n   * @prop {boolean} brandHeader\n   *\n   *\n   */\n  @property({ type: Boolean })\n      brandHeader?: boolean;\n\n  /**\n   *\n   * The aria attribute to which is assigned the id of the details section which is revealed via interaction\n   * with the header.\n   * @private _ariaControls\n   *\n   *\n   */\n  @property({ attribute: 'aria-controls' })\n  private _ariaControls!: string;\n\n  /**\n   *\n   * Private internal state which indicates the current _height of the accordion item panel.\n   * @private _height\n   *\n   *\n   */\n  @state()\n  private _height!: string;\n\n  /**\n   *\n   * Private internal state which Indicates if the accordion item panel is completely open.\n   * @private _fullyOpen\n   *\n   *\n   */\n\n  @state()\n  private _fullyOpen?: boolean;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this._ariaControls = `cre8-accordion-item-details-${randomId}`;\n      this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${randomId}`;\n  }\n\n  override connectedCallback() {\n      super.connectedCallback();\n      this._setContentHeight();\n      if (this.isActive) {\n          this._fullyOpen = true;\n          this._setContentHeight();\n      }\n  }\n\n  private async _setContentHeight() {\n      await this.updateComplete;\n\n      if ((this.isActive && !this._fullyOpen) || (!this.isActive && this._fullyOpen)) {\n          this._height = `${this.shadowRoot?.querySelector('.cre8-c-accordion-item__body-inner')?.scrollHeight}px`;\n      } else if (this.isActive && this._fullyOpen) {\n          this._height = 'auto';\n      } else if (!this.isActive && !this._fullyOpen) {\n          this._height = '0';\n      }\n  }\n\n  private _toggleAccordionItem() {\n      this.isActive = !this.isActive;\n\n      if (this.isActive) {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = true;\n              this._setContentHeight();\n          }, 350);\n      } else {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = false;\n              this._setContentHeight();\n          }, 50);\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion-item', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-accordion-item--icon-before': this.iconBefore,\n          'cre8-c-accordion-item--small': this.size === 'sm',\n          'cre8-c-accordion-item--large': this.size === 'lg',\n      });\n\n      const buttonClassNames = classnames('cre8-c-accordion-item__button', {\n          'cre8-is-active': this.isActive,\n          'cre8-u-justify-content-start': this.iconBefore,\n          'cre8-brand-color': this.brandHeader === true,\n      });\n\n      return html` <div id=${this.accordionItemId} class=\"${componentClassNames}\">\n      <cre8-heading\n        type=${this.size === 'lg' ? 'title-large' : 'title-default'}\n        part=\"heading\"\n        ?brandColor=${(this.brandHeader)}\n        tagVariant=\"${this.headingTagVariant ?? 'h3'}\"\n        class=\"cre8-c-accordion-item__header\"\n      >\n        <button\n          class=\"${buttonClassNames}\"\n          aria-expanded=\"${ifDefined(this.isActive)}\"\n          aria-controls=\"${this._ariaControls}\"\n          part=\"button\"\n          role=\"button\"\n          id=\"${this.id}\"\n          @click=${this._toggleAccordionItem}\n        >\n          ${this.iconBefore\n        ? html`\n            <div class=\"cre8-c-accordion-item--icon-before-heading-text\">\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before'}\n                >\n                  <cre8-icon rotate=\"180\" svg=${svgCaretUp} aria-hidden=\"true\"></cre8-icon>\n                </div>\n                ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n            </div>\n              `\n        : html`\n          <div class=\"cre8-c-accordion-item--icon-after-heading-text\">\n            ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after'}\n                >\n                  <cre8-icon rotate=\"180\" svg='${svgCaretUp}' aria-hidden=\"true\"></cre8-icon>\n                </div>\n            </div>`}\n        </button>\n      </cre8-heading>\n      <div\n        class=\"cre8-c-accordion-item__body\"\n        aria-hidden=\"${!this.isActive}\"\n        id=\"${this._ariaControls}\"\n        part=\"body\"\n        style=${`height: ${this._height}`}\n      >\n        <div class=\"cre8-c-accordion-item__body-inner\" part=\"body-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-accordion-item') === undefined) {\n    customElements.define('cre8-accordion-item', Cre8AccordionItem);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion-item': Cre8AccordionItem;\n  }\n}\n\nexport default Cre8AccordionItem;\n"]}

package/lib/components/alert/alert.d.ts

@@ -17,6 +17,8 @@ import { Cre8Element } from '../cre8-element';
  * If users choose to emphasize the alert (**strong**), user needs to used **"inverted"** prop in button or link.
  * - User can choose whether the alert can be dismissed or not
  *
+ * @slot - The alert body content
+ * @slot cta - Container for a call-to-action button or link
  */
 export declare class Cre8Alert extends Cre8Element {
     static styles: import("lit").CSSResult[];
@@ -24,13 +26,17 @@ export declare class Cre8Alert extends Cre8Element {
     status?: 'error' | 'info' | 'notification' | 'neutral' | 'warning' | 'success';
     /** The alert variant. */
     variant: 'standalone' | 'banner';
+    /** The alert emphasis. `strong` uses a filled background; pair contained buttons/links with their `inverted` prop. */
     emphasis: 'subtle' | 'strong';
+    /** Overrides the default status icon. Accepts a cre8 icon name. */
     iconAlert: string;
     /**
      * Icon title used for the icon alt text
      */
     iconTitle?: string;
+    /** The alert heading text. */
     headerText: string;
+    /** Text content for the call-to-action area. Superseded by the `cta` slot when provided. */
     ctaBody: string;
     /**
      * Dismissed property

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"AAQA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;GAaG;AAEH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAEzB,sBAAsB;IAEtB,MAAM,CAAC,EACD,OAAO,GACP,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,SAAS,CAAU;IAEzB,yBAAyB;IAEzB,OAAO,EAAE,YAAY,GAAG,QAAQ,CAAgB;IAGhD,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAY;IAIzC,SAAS,EAAE,MAAM,CAAa;IAE9B;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,UAAU,EAAE,MAAM,CAAa;IAG/B,OAAO,EAAE,MAAM,CAAa;IAE5B;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IAEH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,SAAS;IAIT,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,oBAAoB,CA+C1B;IAEF,MAAM;CAsDT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"AAQA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;GAeG;AAEH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAEzB,sBAAsB;IAEtB,MAAM,CAAC,EACD,OAAO,GACP,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,SAAS,CAAU;IAEzB,yBAAyB;IAEzB,OAAO,EAAE,YAAY,GAAG,QAAQ,CAAgB;IAEhD,sHAAsH;IAEtH,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAY;IAEzC,mEAAmE;IAEnE,SAAS,EAAE,MAAM,CAAa;IAE9B;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8BAA8B;IAE9B,UAAU,EAAE,MAAM,CAAa;IAE/B,4FAA4F;IAE5F,OAAO,EAAE,MAAM,CAAa;IAE5B;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IAEH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,SAAS;IAIT,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,oBAAoB,CA+C1B;IAEF,MAAM;CAsDT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ;AAED,eAAe,SAAS,CAAC"}

package/lib/components/alert/alert.js

@@ -32,6 +32,8 @@ import styles from './alert.styles.js';
  * If users choose to emphasize the alert (**strong**), user needs to used **"inverted"** prop in button or link.
  * - User can choose whether the alert can be dismissed or not
  *
+ * @slot - The alert body content
+ * @slot cta - Container for a call-to-action button or link
  */
 export class Cre8Alert extends Cre8Element {
     constructor() {
@@ -40,9 +42,13 @@ export class Cre8Alert extends Cre8Element {
         this.status = 'info';
         /** The alert variant. */
         this.variant = 'standalone';
+        /** The alert emphasis. `strong` uses a filled background; pair contained buttons/links with their `inverted` prop. */
         this.emphasis = 'subtle';
+        /** Overrides the default status icon. Accepts a cre8 icon name. */
         this.iconAlert = undefined;
+        /** The alert heading text. */
         this.headerText = undefined;
+        /** Text content for the call-to-action area. Superseded by the `cta` slot when provided. */
         this.ctaBody = undefined;
         this.checkEmphasisAlert = () => {
             if (this.emphasis === 'subtle') {

package/lib/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"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","sourcesContent":["import svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgErrorFilled from '@tmorrow/cre8-wc/icons/Error_Filled.svg?raw';\nimport svgLightbulbFilled from '@tmorrow/cre8-wc/icons/Lightbulb_Filled.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../button/button';\nimport '../link/link';\nimport '../heading/heading';\nimport '../text-passage/text-passage';\nimport '../icon/icon';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './alert.styles.js';\n\n/**\n * The general purpose of an alert or notification is to draw the user’s attention\n * and provide the user with timely, relevant information.\n *\n * ## Alert Styles:\n * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.\n * Each alert will have different icon to be displayed in the alert.\n * - Users can select two types of alert variants: 'standalone', or 'banner'.\n * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.\n * - User can add button or link in the alert.\n * If users choose to emphasize the alert (**strong**), user needs to used **\"inverted\"** prop in button or link.\n * - User can choose whether the alert can be dismissed or not\n *\n */\n\nexport class Cre8Alert extends Cre8Element {\n    static styles = [styles];\n\n    /** The alert type. */\n    @property({ reflect: true })\n    status?:\n        | 'error'\n        | 'info'\n        | 'notification'\n        | 'neutral'\n        | 'warning'\n        | 'success' = 'info';\n\n    /** The alert variant. */\n    @property({ reflect: true })\n    variant: 'standalone' | 'banner' = 'standalone';\n\n    @property({ reflect: true })\n    emphasis: 'subtle' | 'strong' = 'subtle';\n\n\n    @property({ type: String })\n    iconAlert: string = undefined;\n\n    /**\n     * Icon title used for the icon alt text\n     */\n    @property()\n    iconTitle?: string;\n\n    @property({ type: String })\n    headerText: string = undefined;\n\n    @property({ type: String })\n    ctaBody: string = undefined;\n\n    /**\n     * Dismissed property\n     * 1) State that changes to true and is removed when the banner is dismissed\n     */\n    @property({ type: Boolean, reflect: true })\n    dismissed?: boolean;\n\n    /**\n     * Dismissable property\n     * 1) Adds the ability to close when toggled to true\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * On banner dismiss\n     * 1) Function that toggles dismissed to true and removes the banner from the UI\n     */\n    onDismiss() {\n        this.dismissed = true; /* 1 */\n    }\n\n    private checkEmphasisAlert = () => {\n        if (this.emphasis === 'subtle') {\n            return false;\n        } return true;\n    };\n\n    private mapStatusToIconAlert = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon\n              svg=\"${svgErrorFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon\n              svg=\"${svgCheckCircle}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon\n              svg=\"${svgWarningFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'notification':\n                return html`<cre8-icon\n              svg=\"${svgLightbulbFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'neutral':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            default:\n                return nothing;\n        }\n    };\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-alert', {\n            'cre8-c-alert--error': this.status === 'error',\n            'cre8-c-alert--info': this.status === 'info',\n            'cre8-c-alert--notification': this.status === 'notification',\n            'cre8-c-alert--neutral': this.status === 'neutral',\n            'cre8-c-alert--success': this.status === 'success',\n            'cre8-c-alert--warning': this.status === 'warning',\n            'cre8-c-alert--standalone': this.variant === 'standalone',\n            'cre8-c-alert--banner': this.variant === 'banner',\n            'cre8-c-alert--emphasis-subtle': this.emphasis === 'subtle',\n            'cre8-c-alert--notdismissible': this.notDismissible,\n        });\n\n        return this.dismissed\n            ? null\n            : html`\n          <dialog open>\n            <div class=\"${componentClassNames}\">\n              <div class=\"cre8-c-alert__container\">\n                ${this.status\n                    ? html` ${this.mapStatusToIconAlert(this.status)}`\n                    : ''}\n                <div class=\"cre8-c-alert__message-container\">\n                  <div class=\"cre8-c-alert__heading-container\">\n                    ${this.headerText\n                    ? html`${this.headerText}`\n                    : ''}\n                    ${this.notDismissible\n                    ? ''\n                    : html`<cre8-button\n                     class=\"cre8-c-alert__close-btn\"\n                     svg=${svgClose}\n                     iconRotateDegree=\"90\"\n                     iconPosition=\"after\"\n                     variant=\"tertiary\"\n                     aria-label=\"close\"\n                     ?hideText=${true}\n                     @click=${this.onDismiss}\n                     ?inverted=${this.checkEmphasisAlert()}\n              ></cre8-button>`}\n                  </div>\n                  <div class=\"cre8-c-alert__body-container\">\n                    <slot></slot>\n                  </div>\n                  <div class=\"cre8-c-alert__footer-container\">\n                        <slot name=\"cta\">${this.ctaBody}</slot>\n                      </div>\n                </div>\n              </div>\n            </div>\n          </dialog>\n        `;\n    }\n}\n\nif (customElements.get('cre8-alert') === undefined) {\n    customElements.define('cre8-alert', Cre8Alert);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-alert': Cre8Alert;\n    }\n}\n\nexport default Cre8Alert;\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"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","sourcesContent":["import svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgErrorFilled from '@tmorrow/cre8-wc/icons/Error_Filled.svg?raw';\nimport svgLightbulbFilled from '@tmorrow/cre8-wc/icons/Lightbulb_Filled.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../button/button';\nimport '../link/link';\nimport '../heading/heading';\nimport '../text-passage/text-passage';\nimport '../icon/icon';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './alert.styles.js';\n\n/**\n * The general purpose of an alert or notification is to draw the user’s attention\n * and provide the user with timely, relevant information.\n *\n * ## Alert Styles:\n * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.\n * Each alert will have different icon to be displayed in the alert.\n * - Users can select two types of alert variants: 'standalone', or 'banner'.\n * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.\n * - User can add button or link in the alert.\n * If users choose to emphasize the alert (**strong**), user needs to used **\"inverted\"** prop in button or link.\n * - User can choose whether the alert can be dismissed or not\n *\n * @slot - The alert body content\n * @slot cta - Container for a call-to-action button or link\n */\n\nexport class Cre8Alert extends Cre8Element {\n    static styles = [styles];\n\n    /** The alert type. */\n    @property({ reflect: true })\n    status?:\n        | 'error'\n        | 'info'\n        | 'notification'\n        | 'neutral'\n        | 'warning'\n        | 'success' = 'info';\n\n    /** The alert variant. */\n    @property({ reflect: true })\n    variant: 'standalone' | 'banner' = 'standalone';\n\n    /** The alert emphasis. `strong` uses a filled background; pair contained buttons/links with their `inverted` prop. */\n    @property({ reflect: true })\n    emphasis: 'subtle' | 'strong' = 'subtle';\n\n    /** Overrides the default status icon. Accepts a cre8 icon name. */\n    @property({ type: String })\n    iconAlert: string = undefined;\n\n    /**\n     * Icon title used for the icon alt text\n     */\n    @property()\n    iconTitle?: string;\n\n    /** The alert heading text. */\n    @property({ type: String })\n    headerText: string = undefined;\n\n    /** Text content for the call-to-action area. Superseded by the `cta` slot when provided. */\n    @property({ type: String })\n    ctaBody: string = undefined;\n\n    /**\n     * Dismissed property\n     * 1) State that changes to true and is removed when the banner is dismissed\n     */\n    @property({ type: Boolean, reflect: true })\n    dismissed?: boolean;\n\n    /**\n     * Dismissable property\n     * 1) Adds the ability to close when toggled to true\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * On banner dismiss\n     * 1) Function that toggles dismissed to true and removes the banner from the UI\n     */\n    onDismiss() {\n        this.dismissed = true; /* 1 */\n    }\n\n    private checkEmphasisAlert = () => {\n        if (this.emphasis === 'subtle') {\n            return false;\n        } return true;\n    };\n\n    private mapStatusToIconAlert = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon\n              svg=\"${svgErrorFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon\n              svg=\"${svgCheckCircle}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon\n              svg=\"${svgWarningFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'notification':\n                return html`<cre8-icon\n              svg=\"${svgLightbulbFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'neutral':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            default:\n                return nothing;\n        }\n    };\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-alert', {\n            'cre8-c-alert--error': this.status === 'error',\n            'cre8-c-alert--info': this.status === 'info',\n            'cre8-c-alert--notification': this.status === 'notification',\n            'cre8-c-alert--neutral': this.status === 'neutral',\n            'cre8-c-alert--success': this.status === 'success',\n            'cre8-c-alert--warning': this.status === 'warning',\n            'cre8-c-alert--standalone': this.variant === 'standalone',\n            'cre8-c-alert--banner': this.variant === 'banner',\n            'cre8-c-alert--emphasis-subtle': this.emphasis === 'subtle',\n            'cre8-c-alert--notdismissible': this.notDismissible,\n        });\n\n        return this.dismissed\n            ? null\n            : html`\n          <dialog open>\n            <div class=\"${componentClassNames}\">\n              <div class=\"cre8-c-alert__container\">\n                ${this.status\n                    ? html` ${this.mapStatusToIconAlert(this.status)}`\n                    : ''}\n                <div class=\"cre8-c-alert__message-container\">\n                  <div class=\"cre8-c-alert__heading-container\">\n                    ${this.headerText\n                    ? html`${this.headerText}`\n                    : ''}\n                    ${this.notDismissible\n                    ? ''\n                    : html`<cre8-button\n                     class=\"cre8-c-alert__close-btn\"\n                     svg=${svgClose}\n                     iconRotateDegree=\"90\"\n                     iconPosition=\"after\"\n                     variant=\"tertiary\"\n                     aria-label=\"close\"\n                     ?hideText=${true}\n                     @click=${this.onDismiss}\n                     ?inverted=${this.checkEmphasisAlert()}\n              ></cre8-button>`}\n                  </div>\n                  <div class=\"cre8-c-alert__body-container\">\n                    <slot></slot>\n                  </div>\n                  <div class=\"cre8-c-alert__footer-container\">\n                        <slot name=\"cta\">${this.ctaBody}</slot>\n                      </div>\n                </div>\n              </div>\n            </div>\n          </dialog>\n        `;\n    }\n}\n\nif (customElements.get('cre8-alert') === undefined) {\n    customElements.define('cre8-alert', Cre8Alert);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-alert': Cre8Alert;\n    }\n}\n\nexport default Cre8Alert;\n"]}

package/lib/components/button/button.d.ts

@@ -70,6 +70,8 @@ import '../loading-spinner/loading-spinner';
  * - DO use only large buttons with input fields.
  * - DO NOT use small buttons with input fields.
  *
+ * @slot before - Content rendered before the button text, such as an icon
+ * @slot after - Content rendered after the button text, such as an icon
  */
 export declare class Cre8Button extends Cre8FormElement {
     static styles: import("lit").CSSResult[];

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,oCAAoC,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEH,qBAAa,UAAW,SAAQ,eAAe;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;OAKG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE3D;;;;;;;OAOG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;MAKE;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;;OASG;IAEH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEjD;;;;;OAKG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAK;IAE9B;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IAEH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAa;IAE9C;;;;;OAKG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IAEH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IAEH,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAe;IAE/C;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnC;;OAEG;IAEH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,KAAK,EAAG,iBAAiB,CAAC;IAE1B,UAAU;IAOV,SAAS;IAOT,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,iBAAiB;IAiBzB,MAAM;IA0EN,OAAO,CAAC,YAAY;CAevB;AAMD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,oCAAoC,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,qBAAa,UAAW,SAAQ,eAAe;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;OAKG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE3D;;;;;;;OAOG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;MAKE;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;;OASG;IAEH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEjD;;;;;OAKG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAK;IAE9B;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IAEH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAa;IAE9C;;;;;OAKG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IAEH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IAEH,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAe;IAE/C;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnC;;OAEG;IAEH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,KAAK,EAAG,iBAAiB,CAAC;IAE1B,UAAU;IAOV,SAAS;IAOT,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,iBAAiB;IAiBzB,MAAM;IA0EN,OAAO,CAAC,YAAY;CAevB;AAMD,eAAe,UAAU,CAAC"}

package/lib/components/button/button.js

@@ -80,6 +80,8 @@ import styles from './button.styles.js';
  * - DO use only large buttons with input fields.
  * - DO NOT use small buttons with input fields.
  *
+ * @slot before - Content rendered before the button text, such as an icon
+ * @slot after - Content rendered after the button text, such as an icon
  */
 export class Cre8Button extends Cre8FormElement {
     constructor() {

package/lib/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../components/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\nimport '../loading-spinner/loading-spinner';\nimport styles from './button.styles.js';\n\n/**\n * The size and state of buttons on the screen serve as visual cues for the user\n * about what they can do and what they should do next.\n * They indicate the availability and priority of the action on the page.\n *\n * - Buttons are a single call-to-action where a single click performs that action\n * - Use buttons when you are performing an action which is almost always on the same page\n * - Use a link instead of a button when you're navigating to another place\n *\n * ## How to Use\n *\n * Buttons are distinguished by three key properties:\n *\n * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles;\n *   each with large and small variations\n * - **State**: Interaction state: hover/click (press), focus, disabled,\n *   and submitting/loading (only for large buttons)\n * - **Brand**: Styles determined by the site or component theme\n *\n * ### Usage Guidelines\n *\n * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define\n * background, font style, and border colors. Large and small sizing assists with visual priority by defining button\n * heights, left and right internal padding, and font-size.\n *\n * #### System Feedback\n * Each button has a default and hover/click (press) state that give the user feedback\n * that they have successfully interacted with a button.\n * Button presses should always be combined with other types of timely system feedback.\n * Examples of system feedback may be a page refresh, exposing additional controls or content,\n * dialogs, alerts and notifications.\n * If there is perceived a delay in system response, generally due to technical constraints,\n * provide a progress or loading indicator.\n *\n * #### Button Text\n *\n * - Button text should be as short and simple as possible, ideally a maximum of 3 words.\n * - Use Title Case for readability.\n * - They should not include punctuation (exception: \"Loading...\").\n * - They should not be used as an indicator of what happens on the next page, or as a substitute\n * for a progress meter.\n *\n * #### Button With Icon\n *\n * For button with icon:\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct direction for icons, for example,\n * arrows, caret up or caret down.\n *\n * #### Button Styling\n *\n * - DO use only the styles of the brand you are working on.\n * - DO NOT combine styles, even if the page is co-branded.\n *\n * #### Button Sizes\n * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.\n * - DO NOT mix sizes of buttons when they are used together as a group.\n *\n * #### Input Pairing\n *\n * Primary and Secondary buttons may be paired with input fields.\n * Only one Primary button may appear on each screen.\n * Use the Secondary button when there are multiple in-context buttons\n * and/or when there is an emphasized page level button.\n * When used in a form context, the button's `type` needs to be `submit` to pass along form data.\n *\n * - DO use only large buttons with input fields.\n * - DO NOT use small buttons with input fields.\n *\n */\n\nexport class Cre8Button extends Cre8FormElement {\n    static styles = [styles];\n\n    /**\n     * The button text. Should be as short and simple as possible, ideally a maximum of 3 words.\n     * - Use Title Case for readability.\n     * - Should not include punctuation (exception: \"Loading...\").\n     * - Should not be used as an indicator of what happens on the next page, or as a substitute for a progress meter.\n     */\n    @property()\n    text?: string;\n\n    /**\n     * Style variant\n     * - **primary** renders the button used for primary actions. Presents highest visual priority.\n     *   When grouped with other buttons, only one primary is allowed\n     * - **secondary** renders a secondary button. Presents a lower visual priority\n     * - **tertiary** renders a tertiary button. Presents the lowest visual priority.\n     *   Should be used in limited amounts - consider if a link (`<a>`) would be more appropriate\n     */\n    @property({ type: String })\n    variant?: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n    /**\n     * Disabled attribute\n     * @attr {boolean}\n     *\n     * **NOTE**: Disabled states are used to indicate that an action is temporarily unavailable.\n     * In general, using disabled states is NOT advised. It should be clear to the user what actions they must\n     * take to activate the button. Real-time, field-level validation can help provide clarity.\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * This property is for a neutral button propery mainly used for the secondary or tertiary button variant.\n     * @attr {boolean)\n     */\n    @property({ type: Boolean, reflect: true })\n    neutral?: boolean;\n\n    /**\n    * Inverse attribute\n    * @attr {boolean}\n    *\n    * The inverse prop allows the button to work on either a light or dark surface.\n    */\n    @property({ type: Boolean, reflect: true })\n    inverse?: boolean;\n\n    /**\n     *\n     * Provide this property if you intend to use button styles for an anchor tag (`<a>`).\n     * This changes the component markup from `<button>` usage to `<a>` instead.\n     */\n    @property()\n    href?: string;\n\n    /**\n     * Target attribute for a link if providing `href` to style a link as a button\n     * - **_blank** yields a link that opens in a new tab\n     * - **_self** yields a link that loads the URL into the same browsing context as the current one.\n     *   This is the default behavior\n     * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.\n     *   If there is no parent, this behaves the same way as _self\n     * - **_top** yields a link that loads the URL into the top-level browsing context.\n     *   If there is no parent, this behaves the same way as _self.\n     */\n    @property()\n    target?: '_blank' | '_self' | '_parent' | '_top';\n\n    /**\n     * Type of button.\n     * - **button** (default) button has no default behavior and does nothing unless provided some sort\n     * of client-side trigger\n     * - **submit** button for submitting form data to a server\n     */\n    @property()\n    type: 'button' | 'submit' | 'reset' = 'button';\n\n    /**\n     * Rel if this is an <a> element - this swaps <button> for <a>\n     */\n    @property()\n    rel?: string;\n\n    /**\n     * Deprecated: iconName, use svg instead\n     * Icon name if including an icon within a button.\n     * Must include the icon's position with `iconPostion`. This prop is used for <cre8-icon-legacy>\n     * @deprecated\n     */\n    @property()\n    iconName?: string;\n\n    /**\n     * svg as a raw string\n     * - For button with icon, the icon is defined by this prop.\n     * - Pass in a raw svg as a String for using <cre8-icon>\n     * - Must include the icon's position with `iconPostion`.\n     */\n    @property()\n    svg?: string;\n\n    /**\n     * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n     */\n    @property({ type: Number })\n    iconRotateDegree?: number = 0;\n\n    /**\n     * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n     */\n    @property()\n    iconFlipDirection?: string;\n\n    /**\n     * Icon position. Must include the name of the icon with `iconName`\n     *\n     * - **before** places the icon before the button text\n     * - **after** places the icon after the button text\n     */\n    @property()\n    iconPosition?: 'before' | 'after' = undefined;\n\n    /**\n     * Size variants add another way to increase or decrease visual priority of a button.\n     * - **sm** Shrinks the button typography and overall size from the default. Use when vertical space is constrained.\n     * - **md** This is the default value for the size.\n     * - **lg** Increases the button typography and overall size from the default.\n     */\n    @property()\n    size: 'sm' | 'md' | 'lg' = 'md';\n\n    /**\n     * Visually hide button text. Text is still accessible to assistive technology.\n     * Use this for icon-only buttons for accessibility\n     */\n    @property({ type: Boolean, reflect: true })\n    hideText?: boolean;\n\n    /**\n     * Full width button\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n    fullWidth?: boolean;\n\n    /**\n     * * Changes styling to an active state with a spinning icon.\n     * * Adds accessibility treatment by:\n     *   * announcing via voiceover when the loading success/error state via a aria-live region\n     *   * setting `aria-disabled`\n     * * Disables click events / form submitting while allowing focus (for accessibility)\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n    loading?: boolean;\n\n    /**\n     * * Variant of the loading button that:\n     *   * Removes loading spinner\n     *   * Informs the SR user that the loading status is now complete, with visually hidden text in the live area\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n    loadingComplete?: boolean;\n\n    /**\n     * Controls whether your loading status update to voiceover users will occur\n     * immediately (used for more urgently needed updates) using `assertive` or at the next convenient\n     * pause in their navigation using `polite`.\n     */\n    @property()\n    ariaLive: 'polite' | 'assertive' = 'assertive';\n\n    /**\n     * These two subvariants of the split button style the two seperate buttons to style as a singular button\n     */\n    @property()\n    splitButtonType?: 'text' | 'caret';\n\n    /**\n     * Button aria expanded attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    buttonAriaExpanded?: boolean;\n\n    @query('button')\n    field!: HTMLButtonElement;\n\n    formSubmit() {\n        const form = this._internals.form;\n        if (form) {\n            form.requestSubmit();\n        }\n    }\n\n    formReset() {\n        const form = this._internals.form;\n        if (form) {\n            form.reset();\n        }\n    }\n\n    private generateIconBefore() {\n        if (this.iconPosition === 'before') {\n            if (this.iconName) {\n                return html`<cre8-icon-legacy slot=\"before\" aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\">\n                </cre8-icon-legacy>`;\n            }\n            if (this.svg) {\n                return html`<cre8-icon slot=\"before\" aria-hidden=\"true\"\n                svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" flip=\"${this.iconFlipDirection}\">\n                </cre8-icon>`;\n            }\n        }\n        return nothing;\n    }\n\n    private generateIconAfter() {\n        if (this.iconPosition === 'after') {\n            if (this.iconName) {\n                return html`<cre8-icon-legacy slot=\"after\" aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\">\n                </cre8-icon-legacy>`;\n            }\n            if (this.svg) {\n                return html`<cre8-icon slot=\"after\" aria-hidden=\"true\"\n                svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" flip=\"${this.iconFlipDirection}\">\n                </cre8-icon>`;\n            }\n        }\n        return nothing;\n    }\n\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-button', {\n            'cre8-c-button--primary': this.variant === 'primary',\n            'cre8-c-button--secondary': this.variant === 'secondary',\n            'cre8-c-button--tertiary': this.variant === 'tertiary',\n            'cre8-c-button--full-width': this.fullWidth === true,\n            'cre8-c-button--sm': this.size === 'sm',\n            'cre8-c-button--lg': this.size === 'lg',\n            'cre8-c-button--icon-only': this.hideText,\n            'cre8-c-button--split-button-text': this.splitButtonType === 'text',\n            'cre8-c-button--split-button-caret': this.splitButtonType === 'caret',\n            'cre8-c-button--neutral': this.neutral,\n            'cre8-c-button--inverse': this.inverse,\n            'cre8-c-button--loading': this.loading,\n        });\n\n        if (this.hideText) {\n            this.iconPosition = 'after';\n        }\n\n        if (this.href) {\n            return html`\n            <a\n                href=\"${ifDefined(this.href)}\"\n                class=\"${componentClassName}\"\n                rel=\"${ifDefined(this.rel)}\"\n                target=\"${ifDefined(this.target)}\"\n            >\n            ${this.generateIconBefore()}\n            <span\n                class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-button__text' : 'cre8-c-button__text'}\"\n            >\n                ${this.text}\n            </span>\n            ${this.generateIconAfter()}\n            </a>\n        `;\n        }\n        return html` <button\n            class=\"${componentClassName}\"\n            part=\"button\"\n            aria-disabled=\"${ifDefined(this.loading)}\"\n            ?disabled=${this.disabled}\n            @click=\"${this._buttonClick}\"\n            aria-expanded=\"${ifDefined(this.buttonAriaExpanded)}\"\n        >\n            <slot name=\"before\"></slot>\n            ${this.generateIconBefore()}\n            <span\n                class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-button__text' : 'cre8-c-button__text'}\"\n            >\n                ${this.text}\n            </span>\n            ${this.generateIconAfter()}\n            <slot name=\"after\"></slot>\n            ${this.loading || this.loadingComplete\n                ? html`<span class=\"cre8-c-button__icon\" aria-live=\"${this.ariaLive}\" role=\"alert\">\n                <span class=\"cre8-u-is-vishidden\">${this.loadingComplete ? 'Loading Complete' : 'Loading'}</span>\n                ${!this.loadingComplete\n                        ? html`\n            <cre8-loading-spinner\n                class=\"cre8-c-button__loading-icon\"\n                size=\"small\"\n                ?neutral=${this.neutral}\n                ?inverse=${this.inverse}\n                buttonVariant=${this.variant}\n                aria-hidden=\"true\"\n            ></cre8-loading-spinner>`\n                        : nothing}\n                </span>`\n                : nothing}\n        </button>`;\n    }\n\n    private _buttonClick(e: MouseEvent | KeyboardEvent) {\n        if (this.loading) {\n            e.stopPropagation();\n        } else {\n            switch (this.type) {\n                case 'submit':\n                    this.formSubmit();\n                    break;\n                case 'reset':\n                    this.formReset();\n                    break;\n                // no default\n            }\n        }\n    }\n}\n\nif (customElements.get('cre8-button') === undefined) {\n    customElements.define('cre8-button', Cre8Button);\n}\n\nexport default Cre8Button;\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../components/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\nimport '../loading-spinner/loading-spinner';\nimport styles from './button.styles.js';\n\n/**\n * The size and state of buttons on the screen serve as visual cues for the user\n * about what they can do and what they should do next.\n * They indicate the availability and priority of the action on the page.\n *\n * - Buttons are a single call-to-action where a single click performs that action\n * - Use buttons when you are performing an action which is almost always on the same page\n * - Use a link instead of a button when you're navigating to another place\n *\n * ## How to Use\n *\n * Buttons are distinguished by three key properties:\n *\n * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles;\n *   each with large and small variations\n * - **State**: Interaction state: hover/click (press), focus, disabled,\n *   and submitting/loading (only for large buttons)\n * - **Brand**: Styles determined by the site or component theme\n *\n * ### Usage Guidelines\n *\n * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define\n * background, font style, and border colors. Large and small sizing assists with visual priority by defining button\n * heights, left and right internal padding, and font-size.\n *\n * #### System Feedback\n * Each button has a default and hover/click (press) state that give the user feedback\n * that they have successfully interacted with a button.\n * Button presses should always be combined with other types of timely system feedback.\n * Examples of system feedback may be a page refresh, exposing additional controls or content,\n * dialogs, alerts and notifications.\n * If there is perceived a delay in system response, generally due to technical constraints,\n * provide a progress or loading indicator.\n *\n * #### Button Text\n *\n * - Button text should be as short and simple as possible, ideally a maximum of 3 words.\n * - Use Title Case for readability.\n * - They should not include punctuation (exception: \"Loading...\").\n * - They should not be used as an indicator of what happens on the next page, or as a substitute\n * for a progress meter.\n *\n * #### Button With Icon\n *\n * For button with icon:\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct direction for icons, for example,\n * arrows, caret up or caret down.\n *\n * #### Button Styling\n *\n * - DO use only the styles of the brand you are working on.\n * - DO NOT combine styles, even if the page is co-branded.\n *\n * #### Button Sizes\n * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.\n * - DO NOT mix sizes of buttons when they are used together as a group.\n *\n * #### Input Pairing\n *\n * Primary and Secondary buttons may be paired with input fields.\n * Only one Primary button may appear on each screen.\n * Use the Secondary button when there are multiple in-context buttons\n * and/or when there is an emphasized page level button.\n * When used in a form context, the button's `type` needs to be `submit` to pass along form data.\n *\n * - DO use only large buttons with input fields.\n * - DO NOT use small buttons with input fields.\n *\n * @slot before - Content rendered before the button text, such as an icon\n * @slot after - Content rendered after the button text, such as an icon\n */\n\nexport class Cre8Button extends Cre8FormElement {\n    static styles = [styles];\n\n    /**\n     * The button text. Should be as short and simple as possible, ideally a maximum of 3 words.\n     * - Use Title Case for readability.\n     * - Should not include punctuation (exception: \"Loading...\").\n     * - Should not be used as an indicator of what happens on the next page, or as a substitute for a progress meter.\n     */\n    @property()\n    text?: string;\n\n    /**\n     * Style variant\n     * - **primary** renders the button used for primary actions. Presents highest visual priority.\n     *   When grouped with other buttons, only one primary is allowed\n     * - **secondary** renders a secondary button. Presents a lower visual priority\n     * - **tertiary** renders a tertiary button. Presents the lowest visual priority.\n     *   Should be used in limited amounts - consider if a link (`<a>`) would be more appropriate\n     */\n    @property({ type: String })\n    variant?: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n    /**\n     * Disabled attribute\n     * @attr {boolean}\n     *\n     * **NOTE**: Disabled states are used to indicate that an action is temporarily unavailable.\n     * In general, using disabled states is NOT advised. It should be clear to the user what actions they must\n     * take to activate the button. Real-time, field-level validation can help provide clarity.\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * This property is for a neutral button propery mainly used for the secondary or tertiary button variant.\n     * @attr {boolean)\n     */\n    @property({ type: Boolean, reflect: true })\n    neutral?: boolean;\n\n    /**\n    * Inverse attribute\n    * @attr {boolean}\n    *\n    * The inverse prop allows the button to work on either a light or dark surface.\n    */\n    @property({ type: Boolean, reflect: true })\n    inverse?: boolean;\n\n    /**\n     *\n     * Provide this property if you intend to use button styles for an anchor tag (`<a>`).\n     * This changes the component markup from `<button>` usage to `<a>` instead.\n     */\n    @property()\n    href?: string;\n\n    /**\n     * Target attribute for a link if providing `href` to style a link as a button\n     * - **_blank** yields a link that opens in a new tab\n     * - **_self** yields a link that loads the URL into the same browsing context as the current one.\n     *   This is the default behavior\n     * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.\n     *   If there is no parent, this behaves the same way as _self\n     * - **_top** yields a link that loads the URL into the top-level browsing context.\n     *   If there is no parent, this behaves the same way as _self.\n     */\n    @property()\n    target?: '_blank' | '_self' | '_parent' | '_top';\n\n    /**\n     * Type of button.\n     * - **button** (default) button has no default behavior and does nothing unless provided some sort\n     * of client-side trigger\n     * - **submit** button for submitting form data to a server\n     */\n    @property()\n    type: 'button' | 'submit' | 'reset' = 'button';\n\n    /**\n     * Rel if this is an <a> element - this swaps <button> for <a>\n     */\n    @property()\n    rel?: string;\n\n    /**\n     * Deprecated: iconName, use svg instead\n     * Icon name if including an icon within a button.\n     * Must include the icon's position with `iconPostion`. This prop is used for <cre8-icon-legacy>\n     * @deprecated\n     */\n    @property()\n    iconName?: string;\n\n    /**\n     * svg as a raw string\n     * - For button with icon, the icon is defined by this prop.\n     * - Pass in a raw svg as a String for using <cre8-icon>\n     * - Must include the icon's position with `iconPostion`.\n     */\n    @property()\n    svg?: string;\n\n    /**\n     * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n     */\n    @property({ type: Number })\n    iconRotateDegree?: number = 0;\n\n    /**\n     * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n     */\n    @property()\n    iconFlipDirection?: string;\n\n    /**\n     * Icon position. Must include the name of the icon with `iconName`\n     *\n     * - **before** places the icon before the button text\n     * - **after** places the icon after the button text\n     */\n    @property()\n    iconPosition?: 'before' | 'after' = undefined;\n\n    /**\n     * Size variants add another way to increase or decrease visual priority of a button.\n     * - **sm** Shrinks the button typography and overall size from the default. Use when vertical space is constrained.\n     * - **md** This is the default value for the size.\n     * - **lg** Increases the button typography and overall size from the default.\n     */\n    @property()\n    size: 'sm' | 'md' | 'lg' = 'md';\n\n    /**\n     * Visually hide button text. Text is still accessible to assistive technology.\n     * Use this for icon-only buttons for accessibility\n     */\n    @property({ type: Boolean, reflect: true })\n    hideText?: boolean;\n\n    /**\n     * Full width button\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n    fullWidth?: boolean;\n\n    /**\n     * * Changes styling to an active state with a spinning icon.\n     * * Adds accessibility treatment by:\n     *   * announcing via voiceover when the loading success/error state via a aria-live region\n     *   * setting `aria-disabled`\n     * * Disables click events / form submitting while allowing focus (for accessibility)\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n    loading?: boolean;\n\n    /**\n     * * Variant of the loading button that:\n     *   * Removes loading spinner\n     *   * Informs the SR user that the loading status is now complete, with visually hidden text in the live area\n     * @attr {boolean}\n     *\n     */\n    @property({ type: Boolean, reflect: true })\n    loadingComplete?: boolean;\n\n    /**\n     * Controls whether your loading status update to voiceover users will occur\n     * immediately (used for more urgently needed updates) using `assertive` or at the next convenient\n     * pause in their navigation using `polite`.\n     */\n    @property()\n    ariaLive: 'polite' | 'assertive' = 'assertive';\n\n    /**\n     * These two subvariants of the split button style the two seperate buttons to style as a singular button\n     */\n    @property()\n    splitButtonType?: 'text' | 'caret';\n\n    /**\n     * Button aria expanded attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    buttonAriaExpanded?: boolean;\n\n    @query('button')\n    field!: HTMLButtonElement;\n\n    formSubmit() {\n        const form = this._internals.form;\n        if (form) {\n            form.requestSubmit();\n        }\n    }\n\n    formReset() {\n        const form = this._internals.form;\n        if (form) {\n            form.reset();\n        }\n    }\n\n    private generateIconBefore() {\n        if (this.iconPosition === 'before') {\n            if (this.iconName) {\n                return html`<cre8-icon-legacy slot=\"before\" aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\">\n                </cre8-icon-legacy>`;\n            }\n            if (this.svg) {\n                return html`<cre8-icon slot=\"before\" aria-hidden=\"true\"\n                svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" flip=\"${this.iconFlipDirection}\">\n                </cre8-icon>`;\n            }\n        }\n        return nothing;\n    }\n\n    private generateIconAfter() {\n        if (this.iconPosition === 'after') {\n            if (this.iconName) {\n                return html`<cre8-icon-legacy slot=\"after\" aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\">\n                </cre8-icon-legacy>`;\n            }\n            if (this.svg) {\n                return html`<cre8-icon slot=\"after\" aria-hidden=\"true\"\n                svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" flip=\"${this.iconFlipDirection}\">\n                </cre8-icon>`;\n            }\n        }\n        return nothing;\n    }\n\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-button', {\n            'cre8-c-button--primary': this.variant === 'primary',\n            'cre8-c-button--secondary': this.variant === 'secondary',\n            'cre8-c-button--tertiary': this.variant === 'tertiary',\n            'cre8-c-button--full-width': this.fullWidth === true,\n            'cre8-c-button--sm': this.size === 'sm',\n            'cre8-c-button--lg': this.size === 'lg',\n            'cre8-c-button--icon-only': this.hideText,\n            'cre8-c-button--split-button-text': this.splitButtonType === 'text',\n            'cre8-c-button--split-button-caret': this.splitButtonType === 'caret',\n            'cre8-c-button--neutral': this.neutral,\n            'cre8-c-button--inverse': this.inverse,\n            'cre8-c-button--loading': this.loading,\n        });\n\n        if (this.hideText) {\n            this.iconPosition = 'after';\n        }\n\n        if (this.href) {\n            return html`\n            <a\n                href=\"${ifDefined(this.href)}\"\n                class=\"${componentClassName}\"\n                rel=\"${ifDefined(this.rel)}\"\n                target=\"${ifDefined(this.target)}\"\n            >\n            ${this.generateIconBefore()}\n            <span\n                class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-button__text' : 'cre8-c-button__text'}\"\n            >\n                ${this.text}\n            </span>\n            ${this.generateIconAfter()}\n            </a>\n        `;\n        }\n        return html` <button\n            class=\"${componentClassName}\"\n            part=\"button\"\n            aria-disabled=\"${ifDefined(this.loading)}\"\n            ?disabled=${this.disabled}\n            @click=\"${this._buttonClick}\"\n            aria-expanded=\"${ifDefined(this.buttonAriaExpanded)}\"\n        >\n            <slot name=\"before\"></slot>\n            ${this.generateIconBefore()}\n            <span\n                class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-button__text' : 'cre8-c-button__text'}\"\n            >\n                ${this.text}\n            </span>\n            ${this.generateIconAfter()}\n            <slot name=\"after\"></slot>\n            ${this.loading || this.loadingComplete\n                ? html`<span class=\"cre8-c-button__icon\" aria-live=\"${this.ariaLive}\" role=\"alert\">\n                <span class=\"cre8-u-is-vishidden\">${this.loadingComplete ? 'Loading Complete' : 'Loading'}</span>\n                ${!this.loadingComplete\n                        ? html`\n            <cre8-loading-spinner\n                class=\"cre8-c-button__loading-icon\"\n                size=\"small\"\n                ?neutral=${this.neutral}\n                ?inverse=${this.inverse}\n                buttonVariant=${this.variant}\n                aria-hidden=\"true\"\n            ></cre8-loading-spinner>`\n                        : nothing}\n                </span>`\n                : nothing}\n        </button>`;\n    }\n\n    private _buttonClick(e: MouseEvent | KeyboardEvent) {\n        if (this.loading) {\n            e.stopPropagation();\n        } else {\n            switch (this.type) {\n                case 'submit':\n                    this.formSubmit();\n                    break;\n                case 'reset':\n                    this.formReset();\n                    break;\n                // no default\n            }\n        }\n    }\n}\n\nif (customElements.get('cre8-button') === undefined) {\n    customElements.define('cre8-button', Cre8Button);\n}\n\nexport default Cre8Button;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../components/button/button.styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,yBAi3BX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../components/button/button.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAo6CV,CAAC;AACH,eAAe,MAAM,CAAC"}