@tmorrow/cre8-wc 2.0.3 → 2.0.5

package/lib/components/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../components/field/field.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 { nanoid } from 'nanoid';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../field-note/field-note';\nimport styles from './field.styles.js';\n\n/**\n * The Field component renders a form group with label, control, help text and validation styling. There are\n * convenience variants of Field to support HTML5 input types and static content.\n */\nexport class Cre8Field extends Cre8FormElement {\n    static styles = [styles];\n    \n\n  /**\n   * Autocomplete attribute that allows input to expect certain types of information. Note: autocomplete is supported\n   * by most browsers, but the suggested 'completions' are also sourced from those browsers. Values come\n   * from past user stored data from past interactions in that browser, such as:\n   *\n   *  1. From past values entered by the user, but they may also come from pre-configured values. For\n   *  instance, a browser might let the user save their name, address, phone number, and email addresses for\n   *  autocomplete purposes.\n   *\n   *  2. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion\n   *  following a an authentication procedure.\n   *  See: [MDN web docs_](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n   *\n   *  NOTE:: In order to provide autocompletion, user-agents might require input, select, textarea\n   *  elements to:\n   *\n   *  1. Have a {{name}} and/or {{id}} attribute\n   *  2. Be descendants of a form element\n   *  3. The form to have a [submit button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)\n   *\n   * @attr {string}\n   */\n  @property()\n      autocomplete?: 'on' | 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'url' | 'address-line1' | 'address-line2' | 'country' | 'postal-code';\n\n  /**\n   * Pattern attribute defines a regular expression to validate against input\n   *\n   * @attr {string}\n   */\n  @property()\n      pattern?: string;\n\n  /**\n   * Type variants\n   * - **text** renders a standard text input\n   * - **email** renders a text input for an email format\n   * - **number** renders an input for number values only\n   * - **url** renders an input for urls only\n   * - **tel** renders an input for telephone number values only\n   *\n   * @attr {string}\n   */\n  @property()\n      type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date' = 'text';\n\n  /**\n   * The placeholder text that appears inside the input\n   *\n   * @attr {string}\n   */\n  @property()\n      placeholder?: string;\n\n  /**\n   * The required label that appears above the input\n   *\n   * @attr {string}\n   */\n  @property()\n      label: string = 'Label';\n\n  /**\n   * The name property on the input\n   *\n   * @attr {string}\n   */\n\n\n  /**\n   * The unique id of the field\n   * <br/><br/> _*This property is dynamically set_\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n   * The text that displays below in text field input\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldNote?: string;\n\n  /**\n   * Controls how the voiceover will experience the new information when field note changes,\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' = 'polite';\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   *\n   * @attr {string}\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * The required attribute on the input\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      required?: boolean;\n\n  /**\n   * The disabled attribute on the input\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is an error for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      errorText: string = 'Error';\n\n  /**\n   * The error field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      errorNote?: string;\n\n   /**\n    * The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      max?: string;\n\n    /**\n    * The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      min?: string;\n\n  /**\n   * The maxlength is an integer above 0 that indicates the maximum allowed characters to be entered. When using the\n   * maxlength prop, you must also use the \"required\" prop to provide Constraint Validation on the input field.\n   * This allows users to know why the input they attempted didn't render in the input field. see\n   * [MDN maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength#constraint_validation)\n   *\n   * @attr {string}\n   */\n  @property({ type: Number })\n      maxlength?: number;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   *\n   * @attr {string}\n   */\n  @property()\n      validationAriaDescribedBy?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is successful for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      successText: string = 'Success';\n\n  /**\n   * Readonly attribute\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      readonly?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      successNote?: string;\n\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * First update lifecycle hook\n   * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n   */\n  firstUpdated() {\n      this.initializeAria();\n      return super.firstUpdated();\n  }\n\n  /**\n   * Initialize aria attributes\n   */\n  initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n      if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n          this.ariaDescribedBy = this.ariaDescribedBy || `Field_${nanoid()}`;\n      }\n      if (this.successNote || this.errorNote) {\n          this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${nanoid()}`;\n      }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  fieldNoteAria() {\n      if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n          return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n      }\n      if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n          return this.validationAriaDescribedBy; /* 2 */\n      }\n      return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Handle On Input\n   * 1) Set the input's value equal to the event.target.value when the input is changed.\n   * 2) Set the internal form value of the input to the updated value\n   */\n  private _handleOnInput(e: Event) {\n    /* 1 */\n      const inputValue = (e.target as HTMLInputElement).value;\n      this.value = inputValue;\n\n    /* 2 */\n      this._internals.setFormValue(this.value);\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  renderSuccessErrorFieldNote() {\n      if (this.successNote) {\n      /* 1 */\n          return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        class=\"cre8-c-field__field-note-success\"\n        id=${this.validationAriaDescribedBy}\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n      }\n      if (this.errorNote) {\n      /* 2 */\n          return html` <cre8-field-note\n        ?isError=${this.isError}\n        class=\"cre8-c-field__field-note-error\"\n        id=${this.validationAriaDescribedBy}\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n      }\n      return null;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-field', {\n          'cre8-is-error': this.isError,\n          'cre8-is-success': this.isSuccess,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-field__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-field__body\">\n          <input\n            class=\"cre8-c-field__input\"\n            autocomplete=${ifDefined(this.autocomplete)}\n            type=\"${this.type}\"\n            id=\"${this.fieldId}\"\n            max=${(this.type === 'date') && ifDefined(this.max).toString()}\n            min=${(this.type === 'date') && ifDefined(this.max).toString()}\n            maxlength=${ifDefined(this.maxlength)}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            aria-invalid=${this.isError ? 'true' : 'false'}\n            ?disabled=\"${this.disabled}\"\n            pattern=${ifDefined(this.pattern)}\n            aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            .value=\"${this.value}\"\n            @input=${this._handleOnInput}\n          />\n        </div>\n        ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-field__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n        : nothing}\n        ${this.renderSuccessErrorFieldNote()}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-field') === undefined) {\n    customElements.define('cre8-field', Cre8Field);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-field': Cre8Field;\n  }\n}\n\nexport default Cre8Field;\n"]}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../components/field/field.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 { nanoid } from 'nanoid';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../field-note/field-note';\nimport styles from './field.styles.js';\n\n/**\n * The Field component renders a form group with label, control, help text and validation styling. There are\n * convenience variants of Field to support HTML5 input types and static content.\n *\n * @slot fieldNote - Container for optional field note content\n */\nexport class Cre8Field extends Cre8FormElement {\n    static styles = [styles];\n    \n\n  /**\n   * Autocomplete attribute that allows input to expect certain types of information. Note: autocomplete is supported\n   * by most browsers, but the suggested 'completions' are also sourced from those browsers. Values come\n   * from past user stored data from past interactions in that browser, such as:\n   *\n   *  1. From past values entered by the user, but they may also come from pre-configured values. For\n   *  instance, a browser might let the user save their name, address, phone number, and email addresses for\n   *  autocomplete purposes.\n   *\n   *  2. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion\n   *  following a an authentication procedure.\n   *  See: [MDN web docs_](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n   *\n   *  NOTE:: In order to provide autocompletion, user-agents might require input, select, textarea\n   *  elements to:\n   *\n   *  1. Have a {{name}} and/or {{id}} attribute\n   *  2. Be descendants of a form element\n   *  3. The form to have a [submit button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)\n   *\n   * @attr {string}\n   */\n  @property()\n      autocomplete?: 'on' | 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'url' | 'address-line1' | 'address-line2' | 'country' | 'postal-code';\n\n  /**\n   * Pattern attribute defines a regular expression to validate against input\n   *\n   * @attr {string}\n   */\n  @property()\n      pattern?: string;\n\n  /**\n   * Type variants\n   * - **text** renders a standard text input\n   * - **email** renders a text input for an email format\n   * - **number** renders an input for number values only\n   * - **url** renders an input for urls only\n   * - **tel** renders an input for telephone number values only\n   *\n   * @attr {string}\n   */\n  @property()\n      type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date' = 'text';\n\n  /**\n   * The placeholder text that appears inside the input\n   *\n   * @attr {string}\n   */\n  @property()\n      placeholder?: string;\n\n  /**\n   * The required label that appears above the input\n   *\n   * @attr {string}\n   */\n  @property()\n      label: string = 'Label';\n\n  /**\n   * The name property on the input\n   *\n   * @attr {string}\n   */\n\n\n  /**\n   * The unique id of the field\n   * <br/><br/> _*This property is dynamically set_\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n   * The text that displays below in text field input\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldNote?: string;\n\n  /**\n   * Controls how the voiceover will experience the new information when field note changes,\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' = 'polite';\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   *\n   * @attr {string}\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * The required attribute on the input\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      required?: boolean;\n\n  /**\n   * The disabled attribute on the input\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is an error for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      errorText: string = 'Error';\n\n  /**\n   * The error field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      errorNote?: string;\n\n   /**\n    * The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      max?: string;\n\n    /**\n    * The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      min?: string;\n\n  /**\n   * The maxlength is an integer above 0 that indicates the maximum allowed characters to be entered. When using the\n   * maxlength prop, you must also use the \"required\" prop to provide Constraint Validation on the input field.\n   * This allows users to know why the input they attempted didn't render in the input field. see\n   * [MDN maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength#constraint_validation)\n   *\n   * @attr {string}\n   */\n  @property({ type: Number })\n      maxlength?: number;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   *\n   * @attr {string}\n   */\n  @property()\n      validationAriaDescribedBy?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is successful for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      successText: string = 'Success';\n\n  /**\n   * Readonly attribute\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      readonly?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      successNote?: string;\n\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * First update lifecycle hook\n   * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n   */\n  firstUpdated() {\n      this.initializeAria();\n      return super.firstUpdated();\n  }\n\n  /**\n   * Initialize aria attributes\n   */\n  initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n      if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n          this.ariaDescribedBy = this.ariaDescribedBy || `Field_${nanoid()}`;\n      }\n      if (this.successNote || this.errorNote) {\n          this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${nanoid()}`;\n      }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  fieldNoteAria() {\n      if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n          return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n      }\n      if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n          return this.validationAriaDescribedBy; /* 2 */\n      }\n      return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Handle On Input\n   * 1) Set the input's value equal to the event.target.value when the input is changed.\n   * 2) Set the internal form value of the input to the updated value\n   */\n  private _handleOnInput(e: Event) {\n    /* 1 */\n      const inputValue = (e.target as HTMLInputElement).value;\n      this.value = inputValue;\n\n    /* 2 */\n      this._internals.setFormValue(this.value);\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  renderSuccessErrorFieldNote() {\n      if (this.successNote) {\n      /* 1 */\n          return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        class=\"cre8-c-field__field-note-success\"\n        id=${this.validationAriaDescribedBy}\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n      }\n      if (this.errorNote) {\n      /* 2 */\n          return html` <cre8-field-note\n        ?isError=${this.isError}\n        class=\"cre8-c-field__field-note-error\"\n        id=${this.validationAriaDescribedBy}\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n      }\n      return null;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-field', {\n          'cre8-is-error': this.isError,\n          'cre8-is-success': this.isSuccess,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-field__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-field__body\">\n          <input\n            class=\"cre8-c-field__input\"\n            autocomplete=${ifDefined(this.autocomplete)}\n            type=\"${this.type}\"\n            id=\"${this.fieldId}\"\n            name=\"${ifDefined(this.name)}\"\n            max=${(this.type === 'date') && ifDefined(this.max).toString()}\n            min=${(this.type === 'date') && ifDefined(this.max).toString()}\n            maxlength=${ifDefined(this.maxlength)}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            aria-invalid=${this.isError ? 'true' : 'false'}\n            ?disabled=\"${this.disabled}\"\n            pattern=${ifDefined(this.pattern)}\n            aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            .value=\"${this.value}\"\n            @input=${this._handleOnInput}\n          />\n        </div>\n        ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-field__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n        : nothing}\n        ${this.renderSuccessErrorFieldNote()}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-field') === undefined) {\n    customElements.define('cre8-field', Cre8Field);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-field': Cre8Field;\n  }\n}\n\nexport default Cre8Field;\n"]}

package/lib/components/global-nav-item/global-nav-item.d.ts

@@ -1,6 +1,8 @@
 import { Cre8Element } from '../cre8-element';
 /**
  * @slot - The label for the navigation item
+ * @slot itemBefore - Content rendered before the item label, such as an icon
+ * @slot itemAfter - Content rendered after the item label, such as an icon
  */
 export declare class Cre8GlobalNavItem extends Cre8Element {
     /**

package/lib/components/global-nav-item/global-nav-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global-nav-item.d.ts","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C;;GAEG;AACP,qBAAa,iBAAkB,SAAQ,WAAW;IAC9C;;OAEG;IAEC,IAAI,SAAc;IAEtB;;OAEG;IAEC,IAAI,SAAO;IAEf;;OAEG;IAEC,QAAQ,CAAC,EAAE,MAAM,CAAyB;IAE9C;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;;IAOH;;OAEG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAarB,UAAU;IAIV,OAAO,CAAC,gBAAgB;IAcxB,MAAM;CA4CT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,iBAAiB,CAAC;KAC7C;CACJ;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"global-nav-item.d.ts","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C;;;;GAIG;AACP,qBAAa,iBAAkB,SAAQ,WAAW;IAC9C;;OAEG;IAEC,IAAI,SAAc;IAEtB;;OAEG;IAEC,IAAI,SAAO;IAEf;;OAEG;IAEC,QAAQ,CAAC,EAAE,MAAM,CAAyB;IAE9C;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;;IAOH;;OAEG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAarB,UAAU;IAIV,OAAO,CAAC,gBAAgB;IAcxB,MAAM;CA4CT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,iBAAiB,CAAC;KAC7C;CACJ;AAED,eAAe,iBAAiB,CAAC"}

package/lib/components/global-nav-item/global-nav-item.js

@@ -11,6 +11,8 @@ import { Cre8Element } from '../cre8-element';
 import styles from './global-nav-item.styles.js';
 /**
  * @slot - The label for the navigation item
+ * @slot itemBefore - Content rendered before the item label, such as an icon
+ * @slot itemAfter - Content rendered after the item label, such as an icon
  */
 export class Cre8GlobalNavItem extends Cre8Element {
     /**

package/lib/components/global-nav-item/global-nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-nav-item.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './global-nav-item.styles.js';\n\n    /**\n     * @slot - The label for the navigation item\n     */\nexport class Cre8GlobalNavItem extends Cre8Element {\n    /**\n     * Primary nav item text\n     */\n    @property()\n        text = 'Nav item';\n\n    /**\n     * Primary nav item href\n     */\n    @property()\n        href = '#';\n\n    /**\n     * Icon name\n     */\n    @property()\n        iconName?: string = 'keyboard-arrow-down';\n\n    /**\n     * Append to the class name. Used for passing in utility classes\n     */\n    @property({ type: Boolean, reflect: true })\n        megaMenu?: boolean;\n\n    /**\n     * Append to the class name. Used for passing in utility classes\n     */\n    @state()\n        isActive?: boolean;\n\n    static styles = [styles];\n\n    /**\n     * Initialize functions\n     */\n    constructor() {\n        super();\n        this._handleOnClickOutside = this._handleOnClickOutside.bind(this);\n        this._clickHandler = this._clickHandler.bind(this);\n    }\n\n    /**\n     * Connected Callback lifecycle\n     */\n    connectedCallback() {\n        super.connectedCallback();\n\n        document.addEventListener('mousedown', this._handleOnClickOutside, false);\n    }\n\n    /**\n     * Disconnected callback lifecycle\n     * 1) Remove window resize event listener\n     */\n    disconnectedCallback() {\n        document.removeEventListener('mousedown', this._handleOnClickOutside, false);\n        super.disconnectedCallback();\n    }\n\n    /**\n     * Handle click outside the component\n     * 1) Close the show hide panel on click outside\n     * 2) If the nav is already closed then we don't care about outside clicks and we\n     * can bail early\n     * 3) By the time a user clicks on the page the shadowRoot will almost certainly be\n     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n     * undefined. To work around that we'll check that we have a shadowRoot (and a\n     * rendered .host) element here to appease the TypeScript compiler. This should never\n     * actually be shown or run for a human end user.\n     * 4) Check to see if we clicked inside the active navigation item\n     * 5) If the navigation is active and we've clicked outside of the nav then it should\n     * be closed.\n     */\n    private _handleOnClickOutside(event: MouseEvent) {\n        /* 2 */\n        if (!this.isActive) {\n            return;\n        }\n\n        /* 3 */\n        if (!this.shadowRoot?.host) {\n            throw Error('Could not determine navigation context during click handler');\n        }\n\n        /* 4 */\n        const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n\n        /* 5 */\n        if (this.isActive && !didClickInside) {\n            this.isActive = false;\n        }\n    }\n\n    /**\n     * Toggle active state of primary nav item\n     * 1) Remove isActive state from all sibling elements\n     * 2) Toggle active state of element selected\n     */\n    private _clickHandler(e: MouseEvent) {\n        e.preventDefault();\n        if (this.parentNode) {\n            const navItems = this.parentNode.querySelectorAll('cre8-global-nav-item');\n            navItems.forEach((element: Cre8GlobalNavItem) => {\n                if (element !== this) {\n                    element.isActive = false; /* 1 */\n                }\n            });\n        }\n        this.isActive = !this.isActive; /* 2 */\n    }\n\n    closePanel() {\n        this.isActive = false;\n    }\n\n    private _handleOnKeyDown(e: KeyboardEvent) {\n        if (e.key === 'Escape' && this.isActive === true) {\n            this.closePanel();\n            const navLink = this.shadowRoot?.querySelector<HTMLButtonElement | HTMLAnchorElement>(\n                '.cre8-c-global-nav__link'\n            );\n            if (navLink) {\n                setTimeout(() => {\n                    navLink.focus();\n                }, 1);\n            }\n        }\n    }\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-global-nav__item', {\n            'cre8-is-active': this.isActive === true,\n            'cre8-c-global-nav__item--megamenu': this.megaMenu === true,\n        });\n\n        if (this.megaMenu) {\n            return html`\n            <li class=\"${componentClassName}\" @keydown=${this._handleOnKeyDown}>\n                <div class=\"cre8-c-global-nav__item-content\">\n                    ${this.slotNotEmpty('itemBefore') && html`\n                    <div class=\"cre8-c-global-nav__item-before\">\n                        <slot name=\"itemBefore\"></slot>\n                    </div>`}\n                    <button\n                        class=\"cre8-c-global-nav__link\"\n                        @click=${this._clickHandler}\n                        aria-expanded=${this.isActive === true}\n                    >\n                        ${this.text}\n                        <cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>\n                    </button>\n                </div>\n            </li>\n        `;\n        }\n        return html`\n            <li class=\"${componentClassName}\">\n                <div class=\"cre8-c-global-nav__item-content\">\n                    <a class=\"cre8-c-global-nav__link\" href=\"${this.href}\">\n                        ${this.slotNotEmpty('itemBefore') && html`\n                        <div class=\"cre8-c-global-nav__item-before\">\n                            <slot name=\"itemBefore\"></slot>\n                        </div>`}\n                        ${this.text}\n                        ${this.slotNotEmpty('itemAfter') && html`\n                        <div class=\"cre8-c-global-nav__item-after\">\n                            <slot name=\"itemAfter\"></slot>\n                        </div>`}\n                    </a>\n                </div>\n            </li>\n        `;\n    }\n}\n\nif (customElements.get('cre8-global-nav-item') === undefined) {\n    customElements.define('cre8-global-nav-item', Cre8GlobalNavItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-global-nav-item': Cre8GlobalNavItem;\n    }\n}\n\nexport default Cre8GlobalNavItem;\n"]}
+{"version":3,"file":"global-nav-item.js","sourceRoot":"","sources":["../../../components/global-nav-item/global-nav-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './global-nav-item.styles.js';\n\n    /**\n     * @slot - The label for the navigation item\n     * @slot itemBefore - Content rendered before the item label, such as an icon\n     * @slot itemAfter - Content rendered after the item label, such as an icon\n     */\nexport class Cre8GlobalNavItem extends Cre8Element {\n    /**\n     * Primary nav item text\n     */\n    @property()\n        text = 'Nav item';\n\n    /**\n     * Primary nav item href\n     */\n    @property()\n        href = '#';\n\n    /**\n     * Icon name\n     */\n    @property()\n        iconName?: string = 'keyboard-arrow-down';\n\n    /**\n     * Append to the class name. Used for passing in utility classes\n     */\n    @property({ type: Boolean, reflect: true })\n        megaMenu?: boolean;\n\n    /**\n     * Append to the class name. Used for passing in utility classes\n     */\n    @state()\n        isActive?: boolean;\n\n    static styles = [styles];\n\n    /**\n     * Initialize functions\n     */\n    constructor() {\n        super();\n        this._handleOnClickOutside = this._handleOnClickOutside.bind(this);\n        this._clickHandler = this._clickHandler.bind(this);\n    }\n\n    /**\n     * Connected Callback lifecycle\n     */\n    connectedCallback() {\n        super.connectedCallback();\n\n        document.addEventListener('mousedown', this._handleOnClickOutside, false);\n    }\n\n    /**\n     * Disconnected callback lifecycle\n     * 1) Remove window resize event listener\n     */\n    disconnectedCallback() {\n        document.removeEventListener('mousedown', this._handleOnClickOutside, false);\n        super.disconnectedCallback();\n    }\n\n    /**\n     * Handle click outside the component\n     * 1) Close the show hide panel on click outside\n     * 2) If the nav is already closed then we don't care about outside clicks and we\n     * can bail early\n     * 3) By the time a user clicks on the page the shadowRoot will almost certainly be\n     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n     * undefined. To work around that we'll check that we have a shadowRoot (and a\n     * rendered .host) element here to appease the TypeScript compiler. This should never\n     * actually be shown or run for a human end user.\n     * 4) Check to see if we clicked inside the active navigation item\n     * 5) If the navigation is active and we've clicked outside of the nav then it should\n     * be closed.\n     */\n    private _handleOnClickOutside(event: MouseEvent) {\n        /* 2 */\n        if (!this.isActive) {\n            return;\n        }\n\n        /* 3 */\n        if (!this.shadowRoot?.host) {\n            throw Error('Could not determine navigation context during click handler');\n        }\n\n        /* 4 */\n        const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n\n        /* 5 */\n        if (this.isActive && !didClickInside) {\n            this.isActive = false;\n        }\n    }\n\n    /**\n     * Toggle active state of primary nav item\n     * 1) Remove isActive state from all sibling elements\n     * 2) Toggle active state of element selected\n     */\n    private _clickHandler(e: MouseEvent) {\n        e.preventDefault();\n        if (this.parentNode) {\n            const navItems = this.parentNode.querySelectorAll('cre8-global-nav-item');\n            navItems.forEach((element: Cre8GlobalNavItem) => {\n                if (element !== this) {\n                    element.isActive = false; /* 1 */\n                }\n            });\n        }\n        this.isActive = !this.isActive; /* 2 */\n    }\n\n    closePanel() {\n        this.isActive = false;\n    }\n\n    private _handleOnKeyDown(e: KeyboardEvent) {\n        if (e.key === 'Escape' && this.isActive === true) {\n            this.closePanel();\n            const navLink = this.shadowRoot?.querySelector<HTMLButtonElement | HTMLAnchorElement>(\n                '.cre8-c-global-nav__link'\n            );\n            if (navLink) {\n                setTimeout(() => {\n                    navLink.focus();\n                }, 1);\n            }\n        }\n    }\n\n    render() {\n        const componentClassName = this.componentClassNames('cre8-c-global-nav__item', {\n            'cre8-is-active': this.isActive === true,\n            'cre8-c-global-nav__item--megamenu': this.megaMenu === true,\n        });\n\n        if (this.megaMenu) {\n            return html`\n            <li class=\"${componentClassName}\" @keydown=${this._handleOnKeyDown}>\n                <div class=\"cre8-c-global-nav__item-content\">\n                    ${this.slotNotEmpty('itemBefore') && html`\n                    <div class=\"cre8-c-global-nav__item-before\">\n                        <slot name=\"itemBefore\"></slot>\n                    </div>`}\n                    <button\n                        class=\"cre8-c-global-nav__link\"\n                        @click=${this._clickHandler}\n                        aria-expanded=${this.isActive === true}\n                    >\n                        ${this.text}\n                        <cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>\n                    </button>\n                </div>\n            </li>\n        `;\n        }\n        return html`\n            <li class=\"${componentClassName}\">\n                <div class=\"cre8-c-global-nav__item-content\">\n                    <a class=\"cre8-c-global-nav__link\" href=\"${this.href}\">\n                        ${this.slotNotEmpty('itemBefore') && html`\n                        <div class=\"cre8-c-global-nav__item-before\">\n                            <slot name=\"itemBefore\"></slot>\n                        </div>`}\n                        ${this.text}\n                        ${this.slotNotEmpty('itemAfter') && html`\n                        <div class=\"cre8-c-global-nav__item-after\">\n                            <slot name=\"itemAfter\"></slot>\n                        </div>`}\n                    </a>\n                </div>\n            </li>\n        `;\n    }\n}\n\nif (customElements.get('cre8-global-nav-item') === undefined) {\n    customElements.define('cre8-global-nav-item', Cre8GlobalNavItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-global-nav-item': Cre8GlobalNavItem;\n    }\n}\n\nexport default Cre8GlobalNavItem;\n"]}

package/lib/components/header/header.d.ts

@@ -1,6 +1,8 @@
 import { Cre8Element } from '../cre8-element';
 /**
  * @slot - The header content
+ * @slot top - Content rendered above the main header row
+ * @slot bottom - Content rendered below the main header row
  */
 export declare class Cre8Header extends Cre8Element {
     static styles: import("lit").CSSResult[];

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM;CA+BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;GAIG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM;CA+BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF;AAED,eAAe,UAAU,CAAC"}

package/lib/components/header/header.js

@@ -10,6 +10,8 @@ import { Cre8Element } from '../cre8-element';
 import styles from './header.styles.js';
 /**
  * @slot - The header content
+ * @slot top - Content rendered above the main header row
+ * @slot bottom - Content rendered below the main header row
  */
 export class Cre8Header extends Cre8Element {
     render() {

package/lib/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../components/header/header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAUzC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE;YACjE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SAC3C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;uBACM,kBAAkB;UAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;eACvB,IAAI,CAAA;;;;;;eAMA;;;;;;;;UAQL,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC1B,IAAI,CAAA;;;;eAIA;;KAEV,CAAC;IACJ,CAAC;;AAvCQ,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,KAAK,EAAE;4CACe;AAmCzB,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACrD,CAAC;AAQD,eAAe,UAAU,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './header.styles.js';\n\n/**\n * @slot - The header content\n */\nexport class Cre8Header extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Is active state\n   * 1) Set to true when small screen menu is open\n   */\n  @state()\n      isActive?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-header', {\n          'cre8-is-active': this.isActive === true,\n      });\n\n      return html`\n      <header class=\"${componentClassName}\">\n        ${this.slotNotEmpty('top')\n        && html`<div class=\"cre8-c-header__top\">\n          <cre8-layout-container>\n            <div class=\"cre8-c-header__top-inner\">\n              <slot name=\"top\"></slot>\n            </div>\n          </cre8-layout-container>\n        </div>`}\n        <div class=\"cre8-c-header__middle\">\n          <cre8-layout-container>\n            <div class=\"cre8-c-header__middle-inner\">\n              <slot></slot>\n            </div>\n          </cre8-layout-container>\n        </div>\n        ${this.slotNotEmpty('bottom')\n        && html`<div class=\"cre8-c-header__bottom\">\n          <cre8-layout-container>\n            <slot name=\"bottom\"></slot>\n          </cre8-layout-container>\n        </div>`}\n      </header>\n    `;\n  }\n}\n\nif (customElements.get('cre8-header') === undefined) {\n    customElements.define('cre8-header', Cre8Header);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-header': Cre8Header;\n  }\n}\n\nexport default Cre8Header;\n"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../components/header/header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;;;GAIG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAUzC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE;YACjE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SAC3C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;uBACM,kBAAkB;UAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;eACvB,IAAI,CAAA;;;;;;eAMA;;;;;;;;UAQL,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC1B,IAAI,CAAA;;;;eAIA;;KAEV,CAAC;IACJ,CAAC;;AAvCQ,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,KAAK,EAAE;4CACe;AAmCzB,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACrD,CAAC;AAQD,eAAe,UAAU,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './header.styles.js';\n\n/**\n * @slot - The header content\n * @slot top - Content rendered above the main header row\n * @slot bottom - Content rendered below the main header row\n */\nexport class Cre8Header extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Is active state\n   * 1) Set to true when small screen menu is open\n   */\n  @state()\n      isActive?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-header', {\n          'cre8-is-active': this.isActive === true,\n      });\n\n      return html`\n      <header class=\"${componentClassName}\">\n        ${this.slotNotEmpty('top')\n        && html`<div class=\"cre8-c-header__top\">\n          <cre8-layout-container>\n            <div class=\"cre8-c-header__top-inner\">\n              <slot name=\"top\"></slot>\n            </div>\n          </cre8-layout-container>\n        </div>`}\n        <div class=\"cre8-c-header__middle\">\n          <cre8-layout-container>\n            <div class=\"cre8-c-header__middle-inner\">\n              <slot></slot>\n            </div>\n          </cre8-layout-container>\n        </div>\n        ${this.slotNotEmpty('bottom')\n        && html`<div class=\"cre8-c-header__bottom\">\n          <cre8-layout-container>\n            <slot name=\"bottom\"></slot>\n          </cre8-layout-container>\n        </div>`}\n      </header>\n    `;\n  }\n}\n\nif (customElements.get('cre8-header') === undefined) {\n    customElements.define('cre8-header', Cre8Header);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-header': Cre8Header;\n  }\n}\n\nexport default Cre8Header;\n"]}

package/lib/components/hero/hero.d.ts

@@ -28,6 +28,10 @@ export declare class Cre8Hero extends Cre8Element {
      * </cre8-text-passage>
      */
     align?: 'top-left' | 'left' | 'top-center' | 'center' | 'bottom-center' | 'top-right' | 'right' | 'bottom-right';
+    /**
+     * Renders a dark overlay between the background image and the content for legibility.
+     */
+    hasOverlay?: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../components/hero/hero.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;OAcG;IAEC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,eAAe,GAAG,WAAW,GAAG,OAAO,GAAG,cAAc,CAAC;IAErH,MAAM;CAuBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../components/hero/hero.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;OAcG;IAEC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,eAAe,GAAG,WAAW,GAAG,OAAO,GAAG,cAAc,CAAC;IAErH;;OAEG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB,MAAM;CAwBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/hero/hero.js

@@ -22,6 +22,7 @@ export class Cre8Hero extends Cre8Element {
             'cre8-c-hero--top-right': this.align === 'top-right',
             'cre8-c-hero--right': this.align === 'right',
             'cre8-c-hero--bottom-right': this.align === 'bottom-right',
+            'cre8-c-hero--has-overlay': !!this.hasOverlay,
         });
         return html `
       <div class="${componentClassNames}">
@@ -45,6 +46,9 @@ __decorate([
 __decorate([
     property()
 ], Cre8Hero.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Hero.prototype, "hasOverlay", void 0);
 if (customElements.get('cre8-hero') === undefined) {
     customElements.define('cre8-hero', Cre8Hero);
 }

package/lib/components/hero/hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../components/hero/hero.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;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAiCvC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAChE,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YAClD,mBAAmB,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM;YAC1C,yBAAyB,EAAE,IAAI,CAAC,KAAK,KAAK,YAAY;YACtD,qBAAqB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC9C,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,eAAe;YAC5D,wBAAwB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;YACpD,oBAAoB,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC5C,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,cAAc;SAC7D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;iDAEU,IAAI,CAAC,MAAM,UAAU,IAAI,CAAC,MAAM;;;;;;KAM5E,CAAC;IACJ,CAAC;;AAtDQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;wCACS;AAMhB;IADH,QAAQ,EAAE;wCACS;AAkBhB;IADH,QAAQ,EAAE;uCAC0G;AA2BvH,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 './hero.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8Hero extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Image source\n   */\n  @property()\n      imgSrc?: string;\n\n  /**\n   * Image alt text\n   */\n  @property()\n      imgAlt?: string;\n\n  /**\n   * Position variant. Bottom left is the default position\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**top-left** renders content in the top left corner of the image</li>\n   * <li>**left** renders content in the left, center part of the image</li>\n   * <li>**top-center** renders content in the top, center part of the image</li>\n   * <li>**center** renders content center of the image</li>\n   * <li>**bottom-center** renders content bottom center of the image</li>\n   * <li>**top-right** renders content top-right of the image</li>\n   * <li>**right** renders content right of the image</li>\n   * <li>**bottom-right** renders content bottom, right part of the image</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      align?: 'top-left' | 'left' | 'top-center' | 'center' | 'bottom-center' | 'top-right' | 'right' | 'bottom-right';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-hero', {\n          'cre8-c-hero--top-left': this.align === 'top-left',\n          'cre8-c-hero--left': this.align === 'left',\n          'cre8-c-hero--top-center': this.align === 'top-center',\n          'cre8-c-hero--center': this.align === 'center',\n          'cre8-c-hero--bottom-center': this.align === 'bottom-center',\n          'cre8-c-hero--top-right': this.align === 'top-right',\n          'cre8-c-hero--right': this.align === 'right',\n          'cre8-c-hero--bottom-right': this.align === 'bottom-right',\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <cre8-layout-container>\n          <img class=\"cre8-c-hero__image\" src=\"${this.imgSrc}\" alt=\"${this.imgAlt}\" />\n          <div class=\"cre8-c-hero__body\">\n            <slot></slot>\n          </div>\n        </cre8-layout-container>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-hero') === undefined) {\n    customElements.define('cre8-hero', Cre8Hero);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-hero': Cre8Hero;\n  }\n}\n\nexport default Cre8Hero;\n"]}
+{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../components/hero/hero.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;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAuCvC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAChE,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YAClD,mBAAmB,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM;YAC1C,yBAAyB,EAAE,IAAI,CAAC,KAAK,KAAK,YAAY;YACtD,qBAAqB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC9C,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,eAAe;YAC5D,wBAAwB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;YACpD,oBAAoB,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC5C,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,cAAc;YAC1D,0BAA0B,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;SAChD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;iDAEU,IAAI,CAAC,MAAM,UAAU,IAAI,CAAC,MAAM;;;;;;KAM5E,CAAC;IACJ,CAAC;;AA7DQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;wCACS;AAMhB;IADH,QAAQ,EAAE;wCACS;AAkBhB;IADH,QAAQ,EAAE;uCAC0G;AAMjH;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACH;AA4B3B,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 './hero.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8Hero extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Image source\n   */\n  @property()\n      imgSrc?: string;\n\n  /**\n   * Image alt text\n   */\n  @property()\n      imgAlt?: string;\n\n  /**\n   * Position variant. Bottom left is the default position\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**top-left** renders content in the top left corner of the image</li>\n   * <li>**left** renders content in the left, center part of the image</li>\n   * <li>**top-center** renders content in the top, center part of the image</li>\n   * <li>**center** renders content center of the image</li>\n   * <li>**bottom-center** renders content bottom center of the image</li>\n   * <li>**top-right** renders content top-right of the image</li>\n   * <li>**right** renders content right of the image</li>\n   * <li>**bottom-right** renders content bottom, right part of the image</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      align?: 'top-left' | 'left' | 'top-center' | 'center' | 'bottom-center' | 'top-right' | 'right' | 'bottom-right';\n\n  /**\n   * Renders a dark overlay between the background image and the content for legibility.\n   */\n  @property({ type: Boolean })\n      hasOverlay?: boolean;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-hero', {\n          'cre8-c-hero--top-left': this.align === 'top-left',\n          'cre8-c-hero--left': this.align === 'left',\n          'cre8-c-hero--top-center': this.align === 'top-center',\n          'cre8-c-hero--center': this.align === 'center',\n          'cre8-c-hero--bottom-center': this.align === 'bottom-center',\n          'cre8-c-hero--top-right': this.align === 'top-right',\n          'cre8-c-hero--right': this.align === 'right',\n          'cre8-c-hero--bottom-right': this.align === 'bottom-right',\n          'cre8-c-hero--has-overlay': !!this.hasOverlay,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <cre8-layout-container>\n          <img class=\"cre8-c-hero__image\" src=\"${this.imgSrc}\" alt=\"${this.imgAlt}\" />\n          <div class=\"cre8-c-hero__body\">\n            <slot></slot>\n          </div>\n        </cre8-layout-container>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-hero') === undefined) {\n    customElements.define('cre8-hero', Cre8Hero);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-hero': Cre8Hero;\n  }\n}\n\nexport default Cre8Hero;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAgtBV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA6tBV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/hero/hero.styles.js

@@ -719,6 +719,19 @@ span.ripple {
     justify-content: flex-end;
     align-items: flex-end;
   }
+}
+
+.cre8-c-hero--has-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1;
+}
+.cre8-c-hero--has-overlay .cre8-c-hero__body {
+  z-index: 2;
+  --cre8-color-content-default: #ffffff;
+  --cre8-color-content-subtle: rgba(255, 255, 255, 0.85);
 }`;
 export default styles;
 //# sourceMappingURL=hero.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgtBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\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/**\n * 1) Block with an image and overlay on medium and large screens\n */\n.cre8-c-hero {\n  position: relative;\n  margin-bottom: 2rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero {\n    height: 40vh;\n  }\n}\n\n/**\n * Hero image\n */\n.cre8-c-hero__image {\n  width: 100%;\n  height: 100%;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    object-fit: cover;\n  }\n}\n\n/**\n * Hero body\n * 1) Content is placed in the bottom left part of the image on medium/large screens by default\n */\n.cre8-c-hero__body {\n  display: flex;\n  flex-direction: column;\n  padding-top: 1rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__body {\n    position: absolute;\n    align-items: flex-start;\n    justify-content: flex-end;\n    width: 100%;\n    height: 100%;\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top left variant\n   * 1) Place body content in the top left part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-left .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align left variant\n   * 1) Place body content along left part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--left .cre8-c-hero__body {\n    justify-content: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top center variant\n   * 1) Place body content in the top center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-center .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align center variant\n   * 1) Place body content horizontally and vertically centered overlaying the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--center .cre8-c-hero__body {\n    justify-content: center;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom center variant\n   * 1) Place body content in the bottom center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-center .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: center;\n  }\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-right .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align right variant\n   * 1) Place body content along right part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--right .cre8-c-hero__body {\n    justify-content: center;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom right variant\n   * 1) Place body content in the bottom right part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-right .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: flex-end;\n  }\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6tBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\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/**\n * 1) Block with an image and overlay on medium and large screens\n */\n.cre8-c-hero {\n  position: relative;\n  margin-bottom: 2rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero {\n    height: 40vh;\n  }\n}\n\n/**\n * Hero image\n */\n.cre8-c-hero__image {\n  width: 100%;\n  height: 100%;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    object-fit: cover;\n  }\n}\n\n/**\n * Hero body\n * 1) Content is placed in the bottom left part of the image on medium/large screens by default\n */\n.cre8-c-hero__body {\n  display: flex;\n  flex-direction: column;\n  padding-top: 1rem;\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero__body {\n    position: absolute;\n    align-items: flex-start;\n    justify-content: flex-end;\n    width: 100%;\n    height: 100%;\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top left variant\n   * 1) Place body content in the top left part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-left .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align left variant\n   * 1) Place body content along left part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--left .cre8-c-hero__body {\n    justify-content: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align top center variant\n   * 1) Place body content in the top center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-center .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align center variant\n   * 1) Place body content horizontally and vertically centered overlaying the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--center .cre8-c-hero__body {\n    justify-content: center;\n    align-items: center;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom center variant\n   * 1) Place body content in the bottom center part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-center .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: center;\n  }\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--top-right .cre8-c-hero__body {\n    justify-content: flex-start;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align right variant\n   * 1) Place body content along right part of the image and vertically centered on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--right .cre8-c-hero__body {\n    justify-content: center;\n    align-items: flex-end;\n  }\n}\n.cre8-c-hero__body {\n  /**\n   * Hero body within align bottom right variant\n   * 1) Place body content in the bottom right part of the image on medium/large screens\n   */\n}\n@media all and (min-width: 768px) {\n  .cre8-c-hero--bottom-right .cre8-c-hero__body {\n    justify-content: flex-end;\n    align-items: flex-end;\n  }\n}\n\n.cre8-c-hero--has-overlay::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 1;\n}\n.cre8-c-hero--has-overlay .cre8-c-hero__body {\n  z-index: 2;\n  --cre8-color-content-default: #ffffff;\n  --cre8-color-content-subtle: rgba(255, 255, 255, 0.85);\n}`;\nexport default styles;\n"]}

package/lib/components/icon/icon.d.ts

@@ -46,6 +46,9 @@ export declare class Cre8Icon extends Cre8Element {
      * @required
      */
     name: string;
+    /**
+     * Raw SVG markup to render. Preferred over `name`/sprite-path icons.
+     */
     svg?: string;
     /**
      * Icon path

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/icon/icon.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,cAAc,EAAG,MAAM,KAAK,CAAC;AAyD5C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IAEH,IAAI,EAAE,MAAM,CAAC;IAGb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAc;IAE9B;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW;IAaX,MAAM;CA0FT;AAOD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;IACD,UAAU,MAAM;QACZ,aAAa,CAAC,EAAE,MAAM,CAAC;KAC1B;CACJ;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/icon/icon.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,cAAc,EAAG,MAAM,KAAK,CAAC;AA0D5C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAc;IAE9B;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW;IAaX,MAAM;CA2FT;AAOD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;IACD,UAAU,MAAM;QACZ,aAAa,CAAC,EAAE,MAAM,CAAC;KAC1B;CACJ;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/icon/icon.js

@@ -9,11 +9,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /* eslint-disable max-statements */
 import { html, } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import svgAdd from '@tmorrow/cre8-wc/icons/Add.svg?raw';
+import svgAdd from '@tmorrow/cre8-wc/icons/add.svg?raw';
 import svgArrowLeft from '@tmorrow/cre8-wc/icons/Arrow_-_Left.svg?raw';
 import svgChat from '@tmorrow/cre8-wc/icons/Chat_Default.svg?raw';
-import svgCalendar from '@tmorrow/cre8-wc/icons/Calendar.svg?raw';
+import svgCalendar from '@tmorrow/cre8-wc/icons/calendar.svg?raw';
 import svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';
 import svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';
 import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';
@@ -200,10 +201,11 @@ export class Cre8Icon extends Cre8Element {
             console.warn('Cre8Icon: No icon name or svg provided. Please provide either a name or svg.');
             return html ``;
         }
+        const wrapperRole = this.iconTitle ? 'img' : undefined;
         return html `
-            ${this.svg ? html `<span class="${componentClassName}" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}">${unsafeHTML(this.svg)}</span>` : html `
-        <span class="${componentClassName}" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}">
-            <svg class="cre8-c-icon" xmlns="http://www.w3.org/2000/svg" focusable="${this.focusable ? 'true' : 'false'}" role="img">
+            ${this.svg ? html `<span class="${componentClassName}" role="${ifDefined(wrapperRole)}" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}">${unsafeHTML(this.svg)}</span>` : html `
+        <span class="${componentClassName}" role="${ifDefined(wrapperRole)}" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}">
+            <svg class="cre8-c-icon" xmlns="http://www.w3.org/2000/svg" focusable="${this.focusable ? 'true' : 'false'}" aria-hidden="true">
                 <use href="${iconPath}#${this.name}"></use>
             </svg>
         </span>`}`;