@tmorrow/cre8-wc 2.0.3 → 2.0.5

package/lib/components/section/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../components/section/section.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,qBAAqB,CAAC;AACzC;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAU1C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;QAE1E,OAAO,IAAI,CAAA;wBACO,kBAAkB;UAChC,IAAI,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,CAAA;8CACgC,IAAI,CAAC,QAAQ;;sBAErC;YACd,CAAC,CAAC,IAAI,CAAA;;sBAEQ;;;;;KAKjB,CAAC;IACJ,CAAC;;AA3BQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,EAAE;6CACW;AAuBxB,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './section.styles.js';\n/**\n * The section component acts as a block level HTML element that takes a 'headline' property\n * that renders the section's heading which wraps around any HTML template\n * that is found under this heading in the page layout.\n *\n * # How to Use\n * 1. Use the headline attribute to create the section header, or if you need a more custom header\n *    there is a slot=\"header\" that you can target for inserting a custom template.\n * 2. For the main body contents, any html template can be placed inside the cre8-section component\n *    and will automatically render below the header.\n *\n * Note: for a section with a dark background please control this with the internal Components' inverted attributes.\n *\n *\n * @slot The content of the section should go here.\n * It could be a cre8-text-passage, a cre8-card or any other block level html.\n */\n\nexport class Cre8Section extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The Headline will be rendered as the Section Headline with the correct brand styling applied\n   */\n\n  @property()\n      headline?: string;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-section', {});\n\n      return html`\n      <section class=\"${componentClassName}\">\n        ${this.headline\n        ? html`<header class=\"cre8-c-section__header\">\n              <cre8-heading tagVariant=\"h2\">${this.headline}</cre8-heading>\n              <slot name=\"header\"></slot>\n            </header>`\n        : html`<header class=\"cre8-c-section__header\">\n              <slot name=\"header\"></slot>\n            </header>`}\n        <div class=\"cre8-c-section__body\">\n          <slot></slot>\n        </div>\n      </section>\n    `;\n  }\n}\n\nif (customElements.get('cre8-section') === undefined) {\n    customElements.define('cre8-section', Cre8Section);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-section': Cre8Section;\n  }\n}\n\nexport default Cre8Section;\n"]}
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../components/section/section.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,qBAAqB,CAAC;AACzC;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAU1C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;QAE1E,OAAO,IAAI,CAAA;wBACO,kBAAkB;UAChC,IAAI,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,CAAA;8CACgC,IAAI,CAAC,QAAQ;;sBAErC;YACd,CAAC,CAAC,IAAI,CAAA;;sBAEQ;;;;;KAKjB,CAAC;IACJ,CAAC;;AA3BQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,EAAE;6CACW;AAuBxB,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './section.styles.js';\n/**\n * The section component acts as a block level HTML element that takes a 'headline' property\n * that renders the section's heading which wraps around any HTML template\n * that is found under this heading in the page layout.\n *\n * # How to Use\n * 1. Use the headline attribute to create the section header, or if you need a more custom header\n *    there is a slot=\"header\" that you can target for inserting a custom template.\n * 2. For the main body contents, any html template can be placed inside the cre8-section component\n *    and will automatically render below the header.\n *\n * Note: for a section with a dark background please control this with the internal Components' inverted attributes.\n *\n *\n * @slot The content of the section should go here.\n * It could be a cre8-text-passage, a cre8-card or any other block level html.\n * @slot header - Custom header content, rendered in place of the `headline` property\n */\n\nexport class Cre8Section extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The Headline will be rendered as the Section Headline with the correct brand styling applied\n   */\n\n  @property()\n      headline?: string;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-section', {});\n\n      return html`\n      <section class=\"${componentClassName}\">\n        ${this.headline\n        ? html`<header class=\"cre8-c-section__header\">\n              <cre8-heading tagVariant=\"h2\">${this.headline}</cre8-heading>\n              <slot name=\"header\"></slot>\n            </header>`\n        : html`<header class=\"cre8-c-section__header\">\n              <slot name=\"header\"></slot>\n            </header>`}\n        <div class=\"cre8-c-section__body\">\n          <slot></slot>\n        </div>\n      </section>\n    `;\n  }\n}\n\nif (customElements.get('cre8-section') === undefined) {\n    customElements.define('cre8-section', Cre8Section);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-section': Cre8Section;\n  }\n}\n\nexport default Cre8Section;\n"]}

package/lib/components/select/select.d.ts

@@ -35,6 +35,8 @@ export interface Cre8SelectOptionGroup {
  *    or helpful link rather than placeholder text.
  *
  * @slot fieldNote - Container for optional field note content
+ *
+ * @fires change - Fires when the selected option changes. `event.detail` is `{ name, value }`.
  */
 export declare class Cre8Select extends Cre8FormElement {
     readonly type = "select";

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"AAKA,OAAO,0BAA0B,CAAC;AAElC,OAAO,eAAe,MAAM,yBAAyB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,qBAAa,UAAW,SAAQ,eAAe;IAE7C,QAAQ,CAAC,IAAI,YAAY;IACzB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;;;OAQG;IAEH,KAAK,EAAE,KAAK,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,CAAM;IAE5D;;;OAGG;IAEH,KAAK,EAAE,MAAM,CAAW;IAGxB;;;MAGE;IAEF,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAIH;;OAEG;IAEH,cAAc,EAAE,qBAAqB,CAAC;IAGtC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAUvB;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAG5B;;;;;OAKG;IACH,YAAY;IAaZ;;;;KAIC;IACD,OAAO,CAAC,YAAY;IAOpB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAmBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAc5B;;;;OAIG;IACH,OAAO,CAAC,4BAA4B;IA4BpC,MAAM;CAoCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"AAKA,OAAO,0BAA0B,CAAC;AAElC,OAAO,eAAe,MAAM,yBAAyB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,qBAAa,UAAW,SAAQ,eAAe;IAE7C,QAAQ,CAAC,IAAI,YAAY;IACzB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;;;OAQG;IAEH,KAAK,EAAE,KAAK,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,CAAM;IAE5D;;;OAGG;IAEH,KAAK,EAAE,MAAM,CAAW;IAGxB;;;MAGE;IAEF,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAIH;;OAEG;IAEH,cAAc,EAAE,qBAAqB,CAAC;IAGtC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAUvB;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAG5B;;;;;OAKG;IACH,YAAY;IAeZ;;;;KAIC;IACD,OAAO,CAAC,YAAY;IAOpB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAmBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAc5B;;;;OAIG;IACH,OAAO,CAAC,4BAA4B;IA4BpC,MAAM;CAoCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/lib/components/select/select.js

@@ -39,6 +39,8 @@ import Cre8FormElement from '../cre8-form-element.js';
  *    or helpful link rather than placeholder text.
  *
  * @slot fieldNote - Container for optional field note content
+ *
+ * @fires change - Fires when the selected option changes. `event.detail` is `{ name, value }`.
  */
 export class Cre8Select extends Cre8FormElement {
     constructor() {
@@ -96,7 +98,7 @@ export class Cre8Select extends Cre8FormElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.field.setAttribute('name', this.name ?? '');
+        this.field?.setAttribute('name', this.name ?? '');
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -109,6 +111,8 @@ export class Cre8Select extends Cre8FormElement {
      */
     firstUpdated() {
         super.firstUpdated();
+        this.field = this.renderRoot.querySelector('select');
+        this.field?.setAttribute('name', this.name ?? '');
         [...this._selectOptions].forEach((item) => {
             if (item.selected === true) {
                 this.selectedItem = item.value; /* 1 */

package/lib/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../field-note/field-note';\nimport styles from './select.styles.js';\nimport Cre8FormElement from '../cre8-form-element.js';\n\nexport interface Cre8SelectOption {\n  label: string;\n  value: number | string;\n}\n\nexport interface Cre8SelectOptionGroup {\n  optGroupLabel: string;\n  options: Cre8SelectOption[];\n}\n\n/**\n * The Select control is designed and built to be used for selecting between choices in a form.\n * It is not a Dropdown control which is generally used for displaying lists of choices\n * that act as links or actions, like filter options.\n *\n * Consider the use of a Select control carefully.\n * When you have less than 5 options for the user to choose from,\n * Radio or Checkbox inputs may be a better choice to display all of the options at once.\n * Users have to slow down to scan a list with more than 15 options,\n * so using an option group to give the options hierarchy may help users find their choice faster.\n * Alternately, a text input field might be a more appropriate control to use when there are too many options,\n * especially when used with typeahead/auto-complete.\n *\n * ## How to use\n * 1. The collapsed default state always shows a default placeholder value or a selected value.\n * 2. Sort list items in a logical order, such as grouping highly related options together,\n *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.\n * 3. A list that includes 6+ items should show a scrollbar.\n * 4. Users should be able to use a keystroke to quickly jump\n *    to selecting an option that begins with the entered letter.\n * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.\n * 6. Adhere to our common form field conventions and always include a Label,\n *    provide short and clear error messages in context, avoid using the Read-only\n *    and Disabled states as much as possible, and utilize the info/formatting tip\n *    or helpful link rather than placeholder text.\n *\n * @slot fieldNote - Container for optional field note content\n */\n\nexport class Cre8Select extends Cre8FormElement {\n\n  readonly type = 'select';\n  static styles = [styles];\n\n  /**\n   * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:\n   * - Cre8SelectOption\n   *   - label: option label text - `string`\n   *   - value: option value - `number | string`\n   * - Cre8SelectOptionGroup\n   *  - optGroupLabel: optgroup label text - `string`\n   *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`\n   */\n  @property({ type: Array })\n  items: Array<Cre8SelectOption | Cre8SelectOptionGroup> = [];\n\n  /**\n   * The required label that appears above the select\n   * @attr {string}\n   */\n  @property()\n  label: string = 'Label';\n\n\n  /**\n  * The unique id of the select\n  * @attr {string}\n  */\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The required attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * The disabled attribute on the select\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   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /**\n   * Select input querySelector\n   */\n\n\n\n  /**\n   * Get all select option elements\n   */\n  @queryAll('option')\n  _selectOptions: HTMLOptionsCollection;\n\n\n  /**\n   * Selected item value\n   */\n  private selectedItem: string;\n\n  /**\n   * Initialize aria attributes\n   */\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || 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  private _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  connectedCallback(): void {\n    super.connectedCallback();\n    this.field.setAttribute('name', this.name ?? '')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n  /**\n   * First updatedLifecycle\n   * 1) Get the option in the items array with selected set to true. Set that as the selected item\n   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the\n   * select the first item value like the native select.\n   */\n  firstUpdated() {\n    super.firstUpdated();\n    [...this._selectOptions].forEach((item: { selected: boolean; value: string; }) => { /* 1 */\n      if (item.selected === true) {\n        this.selectedItem = item.value; /* 1 */\n      }\n    });\n    this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */\n    this._setFormData();\n    this._initializeAria();\n    this.updateField();\n  }\n\n  /**\n * Set form data\n * 1) Set the element internals to the selected item value if it exists,\n *    otherwise the default selected item is the first one\n */\n  private _setFormData() {\n    if (this.selectedItem) {\n      return this._internals?.setFormValue(this.selectedItem);\n    }\n    return this._internals?.setFormValue(this.defaultValue.toString());\n  }\n\n  /**\n   * Handle On Change\n   * 1. Set the value when the select is changed.\n   * 2. Fire the custom event with the current value.\n   */\n  private _handleOnChange(e: Event) {\n    /* 1 */\n    const target = e.target as HTMLSelectElement;\n    this.value = target.options[target.selectedIndex].value;\n    this._internals.setFormValue(this.value);\n\n\n    /* 2 */\n    const customEvent = new CustomEvent('change', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  /**\n   * Render the select options\n   */\n  private _renderSelectOptions() {\n    return this.items.map((item: Cre8SelectOption | Cre8SelectOptionGroup) => {\n      if ('options' in item) {\n        const selectedGroup = item.options.map((option: Cre8SelectOption) => html`\n                  <option value=\"${option.value}\">${option.label}</option>\n              `);\n        return html`<optgroup label=\"${item.optGroupLabel}\">\n          ${selectedGroup}\n        </optgroup>`;\n      }\n      return html`<option value=\"${item.value}\">${item.label}</option>`;\n    });\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  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html`\n        <cre8-field-note\n          ?isSuccess=${this.isSuccess}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-success\"\n          iconName=\"success\"\n        >\n          ${this.successNote}\n        </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html`\n        <cre8-field-note\n          ?isError=${this.isError}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-error\"\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-select', {\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-select__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-select__body\">\n          <select\n            class=\"cre8-c-select__input\"\n            id=${this.fieldId}\n            name=${ifDefined(this.name)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n            @change=${this._handleOnChange}\n          >\n            ${this._renderSelectOptions()}\n          </select>\n          <div class=\"cre8-c-select__icons\">\n            <cre8-icon svg='${svgCaretUp}' rotate=\"180\" class=\"cre8-c-select__icon-arrow\" aria-hidden='true'>\n          </div>\n        </div>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`\n          <cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-select__field-note\"\n          ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-select') === undefined) {\n  customElements.define('cre8-select', Cre8Select);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select': Cre8Select;\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../field-note/field-note';\nimport styles from './select.styles.js';\nimport Cre8FormElement from '../cre8-form-element.js';\n\nexport interface Cre8SelectOption {\n  label: string;\n  value: number | string;\n}\n\nexport interface Cre8SelectOptionGroup {\n  optGroupLabel: string;\n  options: Cre8SelectOption[];\n}\n\n/**\n * The Select control is designed and built to be used for selecting between choices in a form.\n * It is not a Dropdown control which is generally used for displaying lists of choices\n * that act as links or actions, like filter options.\n *\n * Consider the use of a Select control carefully.\n * When you have less than 5 options for the user to choose from,\n * Radio or Checkbox inputs may be a better choice to display all of the options at once.\n * Users have to slow down to scan a list with more than 15 options,\n * so using an option group to give the options hierarchy may help users find their choice faster.\n * Alternately, a text input field might be a more appropriate control to use when there are too many options,\n * especially when used with typeahead/auto-complete.\n *\n * ## How to use\n * 1. The collapsed default state always shows a default placeholder value or a selected value.\n * 2. Sort list items in a logical order, such as grouping highly related options together,\n *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.\n * 3. A list that includes 6+ items should show a scrollbar.\n * 4. Users should be able to use a keystroke to quickly jump\n *    to selecting an option that begins with the entered letter.\n * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.\n * 6. Adhere to our common form field conventions and always include a Label,\n *    provide short and clear error messages in context, avoid using the Read-only\n *    and Disabled states as much as possible, and utilize the info/formatting tip\n *    or helpful link rather than placeholder text.\n *\n * @slot fieldNote - Container for optional field note content\n *\n * @fires change - Fires when the selected option changes. `event.detail` is `{ name, value }`.\n */\n\nexport class Cre8Select extends Cre8FormElement {\n\n  readonly type = 'select';\n  static styles = [styles];\n\n  /**\n   * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:\n   * - Cre8SelectOption\n   *   - label: option label text - `string`\n   *   - value: option value - `number | string`\n   * - Cre8SelectOptionGroup\n   *  - optGroupLabel: optgroup label text - `string`\n   *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`\n   */\n  @property({ type: Array })\n  items: Array<Cre8SelectOption | Cre8SelectOptionGroup> = [];\n\n  /**\n   * The required label that appears above the select\n   * @attr {string}\n   */\n  @property()\n  label: string = 'Label';\n\n\n  /**\n  * The unique id of the select\n  * @attr {string}\n  */\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The required attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * The disabled attribute on the select\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   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /**\n   * Select input querySelector\n   */\n\n\n\n  /**\n   * Get all select option elements\n   */\n  @queryAll('option')\n  _selectOptions: HTMLOptionsCollection;\n\n\n  /**\n   * Selected item value\n   */\n  private selectedItem: string;\n\n  /**\n   * Initialize aria attributes\n   */\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || 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  private _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  connectedCallback(): void {\n    super.connectedCallback();\n    this.field?.setAttribute('name', this.name ?? '')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n  /**\n   * First updatedLifecycle\n   * 1) Get the option in the items array with selected set to true. Set that as the selected item\n   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the\n   * select the first item value like the native select.\n   */\n  firstUpdated() {\n    super.firstUpdated();\n    this.field = this.renderRoot.querySelector('select');\n    this.field?.setAttribute('name', this.name ?? '');\n    [...this._selectOptions].forEach((item: { selected: boolean; value: string; }) => { /* 1 */\n      if (item.selected === true) {\n        this.selectedItem = item.value; /* 1 */\n      }\n    });\n    this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */\n    this._setFormData();\n    this._initializeAria();\n    this.updateField();\n  }\n\n  /**\n * Set form data\n * 1) Set the element internals to the selected item value if it exists,\n *    otherwise the default selected item is the first one\n */\n  private _setFormData() {\n    if (this.selectedItem) {\n      return this._internals?.setFormValue(this.selectedItem);\n    }\n    return this._internals?.setFormValue(this.defaultValue.toString());\n  }\n\n  /**\n   * Handle On Change\n   * 1. Set the value when the select is changed.\n   * 2. Fire the custom event with the current value.\n   */\n  private _handleOnChange(e: Event) {\n    /* 1 */\n    const target = e.target as HTMLSelectElement;\n    this.value = target.options[target.selectedIndex].value;\n    this._internals.setFormValue(this.value);\n\n\n    /* 2 */\n    const customEvent = new CustomEvent('change', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  /**\n   * Render the select options\n   */\n  private _renderSelectOptions() {\n    return this.items.map((item: Cre8SelectOption | Cre8SelectOptionGroup) => {\n      if ('options' in item) {\n        const selectedGroup = item.options.map((option: Cre8SelectOption) => html`\n                  <option value=\"${option.value}\">${option.label}</option>\n              `);\n        return html`<optgroup label=\"${item.optGroupLabel}\">\n          ${selectedGroup}\n        </optgroup>`;\n      }\n      return html`<option value=\"${item.value}\">${item.label}</option>`;\n    });\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  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html`\n        <cre8-field-note\n          ?isSuccess=${this.isSuccess}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-success\"\n          iconName=\"success\"\n        >\n          ${this.successNote}\n        </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html`\n        <cre8-field-note\n          ?isError=${this.isError}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-error\"\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-select', {\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-select__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-select__body\">\n          <select\n            class=\"cre8-c-select__input\"\n            id=${this.fieldId}\n            name=${ifDefined(this.name)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n            @change=${this._handleOnChange}\n          >\n            ${this._renderSelectOptions()}\n          </select>\n          <div class=\"cre8-c-select__icons\">\n            <cre8-icon svg='${svgCaretUp}' rotate=\"180\" class=\"cre8-c-select__icon-arrow\" aria-hidden='true'>\n          </div>\n        </div>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`\n          <cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-select__field-note\"\n          ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-select') === undefined) {\n  customElements.define('cre8-select', Cre8Select);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select': Cre8Select;\n  }\n}\n"]}

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

@@ -6,6 +6,9 @@ import '../button/button';
 export declare class Cre8SplitButton extends Cre8Element {
     static styles: import("lit").CSSResult[];
     dropdownOpen: boolean;
+    /**
+     * Disables both the main button and the dropdown toggle.
+     */
     disabled?: boolean;
     /**
      * Size variant

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../components/split-button/split-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAG1B;;GAEG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAGvB,YAAY,UAAS;IAGrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;;;OAQG;IAEC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEvB;;OAEG;IAEC,UAAU,EAAE,MAAM,CAAC;IAEvB,MAAM;IAiCN,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,cAAc;CAIvB;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../components/split-button/split-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAG1B;;GAEG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAGvB,YAAY,UAAS;IAEzB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;;;OAQG;IAEC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEvB;;OAEG;IAEC,UAAU,EAAE,MAAM,CAAC;IAEvB,MAAM;IAiCN,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,cAAc;CAIvB;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../components/split-button/split-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAIM,iBAAY,GAAG,KAAK,CAAC;IAgE3B,CAAC;IAzCC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QAEhF,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;;;;wBAMf,IAAI,CAAC,QAAQ;oBACjB,IAAI,CAAC,UAAU;oBACf,IAAI,CAAC,IAAI;sBACP,IAAI,CAAC,UAAU;;;;;;;wBAOb,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;wBAC7C,IAAI,CAAC,QAAQ;;oBAEjB,IAAI,CAAC,IAAI;sBACP,IAAI,CAAC,cAAc;;;;UAI/B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,CAAC,CAAC,CAAC,EAAE;;KAEjD,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,CAAa;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACnD,CAAC;IAEO,cAAc,CAAC,CAAa;QAChC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;;AAlEQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGvB;IADH,KAAK,EAAE;qDACiB;AAGrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACpB;AAYnB;IADH,QAAQ,EAAE;6CACY;AAMnB;IADH,QAAQ,EAAE;mDACY;AA6CzB,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport styles from './split-button.styles.js';\n\n/**\n * @slot - The component content , this will consist of the dropdown when the user clicks the caret\n */\nexport class Cre8SplitButton extends Cre8Element {\n    static styles = [styles];\n\n  @state()\n      dropdownOpen = false;\n\n  @property({ type: Boolean, reflect: true })\n      disabled?: boolean;\n\n  /**\n   * Size variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**sm** shrinks the button typography and overall size</li>\n   * <li>**lg** increases the button typography size and overall size</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      size?: 'sm' | 'lg';\n\n  /**\n   * Display text on the button\n   */\n  @property()\n      buttonText: string;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-split-button', {});\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <div class=\"cre8-c-split-button__button-container\">\n          <cre8-button\n            class=\"cre8-c-split-button__text-button\"\n            variant=\"secondary\"\n            splitButtonType=\"text\"\n            ?disabled=${this.disabled}\n            text=\"${this.buttonText}\"\n            size=\"${this.size}\"\n            @click=\"${this._textClick}\"\n          >\n          </cre8-button>\n          <cre8-button\n            class=\"cre8-c-split-button__arrow-button\"\n            variant=\"icon-only secondary\"\n            splitButtonType=\"caret\"\n            iconName=\"${this.dropdownOpen ? 'delta-down' : 'delta-up'}\"\n            ?disabled=${this.disabled}\n            hideText=\"true\"\n            size=\"${this.size}\"\n            @click=\"${this._dropdownClick}\"\n          >\n          </cre8-button>\n        </div>\n        ${this.dropdownOpen ? html`<slot></slot>` : ''}\n      </div>\n    `;\n  }\n\n  private _textClick(e: MouseEvent) {\n      this.dispatchEvent(new Event('text-click', e));\n  }\n\n  private _dropdownClick(e: MouseEvent) {\n      this.dropdownOpen = !this.dropdownOpen;\n      this.dispatchEvent(new Event('dropdown-click', e));\n  }\n}\n\nif (customElements.get('cre8-split-button') === undefined) {\n    customElements.define('cre8-split-button', Cre8SplitButton);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-split-button': Cre8SplitButton;\n  }\n}\n\nexport default Cre8SplitButton;\n"]}
+{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../components/split-button/split-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAIM,iBAAY,GAAG,KAAK,CAAC;IAmE3B,CAAC;IAzCC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QAEhF,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;;;;wBAMf,IAAI,CAAC,QAAQ;oBACjB,IAAI,CAAC,UAAU;oBACf,IAAI,CAAC,IAAI;sBACP,IAAI,CAAC,UAAU;;;;;;;wBAOb,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;wBAC7C,IAAI,CAAC,QAAQ;;oBAEjB,IAAI,CAAC,IAAI;sBACP,IAAI,CAAC,cAAc;;;;UAI/B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,CAAC,CAAC,CAAC,EAAE;;KAEjD,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,CAAa;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACnD,CAAC;IAEO,cAAc,CAAC,CAAa;QAChC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;;AArEQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGvB;IADH,KAAK,EAAE;qDACiB;AAMrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACpB;AAYnB;IADH,QAAQ,EAAE;6CACY;AAMnB;IADH,QAAQ,EAAE;mDACY;AA6CzB,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport styles from './split-button.styles.js';\n\n/**\n * @slot - The component content , this will consist of the dropdown when the user clicks the caret\n */\nexport class Cre8SplitButton extends Cre8Element {\n    static styles = [styles];\n\n  @state()\n      dropdownOpen = false;\n\n  /**\n   * Disables both the main button and the dropdown toggle.\n   */\n  @property({ type: Boolean, reflect: true })\n      disabled?: boolean;\n\n  /**\n   * Size variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**sm** shrinks the button typography and overall size</li>\n   * <li>**lg** increases the button typography size and overall size</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      size?: 'sm' | 'lg';\n\n  /**\n   * Display text on the button\n   */\n  @property()\n      buttonText: string;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-split-button', {});\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <div class=\"cre8-c-split-button__button-container\">\n          <cre8-button\n            class=\"cre8-c-split-button__text-button\"\n            variant=\"secondary\"\n            splitButtonType=\"text\"\n            ?disabled=${this.disabled}\n            text=\"${this.buttonText}\"\n            size=\"${this.size}\"\n            @click=\"${this._textClick}\"\n          >\n          </cre8-button>\n          <cre8-button\n            class=\"cre8-c-split-button__arrow-button\"\n            variant=\"icon-only secondary\"\n            splitButtonType=\"caret\"\n            iconName=\"${this.dropdownOpen ? 'delta-down' : 'delta-up'}\"\n            ?disabled=${this.disabled}\n            hideText=\"true\"\n            size=\"${this.size}\"\n            @click=\"${this._dropdownClick}\"\n          >\n          </cre8-button>\n        </div>\n        ${this.dropdownOpen ? html`<slot></slot>` : ''}\n      </div>\n    `;\n  }\n\n  private _textClick(e: MouseEvent) {\n      this.dispatchEvent(new Event('text-click', e));\n  }\n\n  private _dropdownClick(e: MouseEvent) {\n      this.dropdownOpen = !this.dropdownOpen;\n      this.dispatchEvent(new Event('dropdown-click', e));\n  }\n}\n\nif (customElements.get('cre8-split-button') === undefined) {\n    customElements.define('cre8-split-button', Cre8SplitButton);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-split-button': Cre8SplitButton;\n  }\n}\n\nexport default Cre8SplitButton;\n"]}

package/lib/components/tab/tab.d.ts

@@ -2,6 +2,8 @@ import { PropertyValues } from 'lit';
 import { Cre8Element } from '../cre8-element';
 /**
  * @slot - The component content
+ *
+ * @fires tabSelected - Fires when the tab is clicked. `event.detail.index` is the tab's index.
  */
 export declare class Cre8Tab extends Cre8Element {
     static styles: import("lit").CSSResult[];

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

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../components/tab/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AAEH,qBAAa,OAAQ,SAAQ,WAAW;IACpC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;OAMG;IAEC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEhB;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IAEC,cAAc,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IAEC,QAAQ,EAAE,iBAAiB,CAAC;IAEhC;;;;;OAKG;IACM,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAYlD;;;OAGG;IAEH,OAAO,CAAC,kBAAkB;IAW1B,MAAM;CAmBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../components/tab/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;GAIG;AAEH,qBAAa,OAAQ,SAAQ,WAAW;IACpC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;OAMG;IAEC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEhB;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IAEC,cAAc,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IAEC,QAAQ,EAAE,iBAAiB,CAAC;IAEhC;;;;;OAKG;IACM,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAYlD;;;OAGG;IAEH,OAAO,CAAC,kBAAkB;IAW1B,MAAM;CAmBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF;AAED,eAAe,OAAO,CAAC"}

package/lib/components/tab/tab.js

@@ -10,6 +10,8 @@ import { Cre8Element } from '../cre8-element';
 import styles from './tab.styles.js';
 /**
  * @slot - The component content
+ *
+ * @fires tabSelected - Fires when the tab is clicked. `event.detail.index` is the tab's index.
  */
 export class Cre8Tab extends Cre8Element {
     /**

package/lib/components/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../components/tab/tab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;GAEG;AAEH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IA2CtC;;;;;OAKG;IACM,OAAO,CAAC,iBAAiC;QAChD,OAAO;QACL,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,CAAC;QACH,OAAO;QACL,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACpE,CAAC;IACL,CAAC;IAED;;;OAGG;IAEK,kBAAkB;QACtB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC/C,MAAM,EAAE;gBACJ,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE;YAC/D,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC1C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;;;;iBAMA,mBAAmB;iBACnB,IAAI,CAAC,kBAAkB;;;;KAInC,CAAC;IACJ,CAAC;;AA9FQ,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUvB;IADH,QAAQ,EAAE;qCACK;AAQZ;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACR;AAQf;IADH,QAAQ,EAAE;+CACiB;AAMxB;IADH,KAAK,CAAC,aAAa,CAAC;yCACW;AAyDlC,IAAI,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,OAAO,CAAC","sourcesContent":["import { html, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tab.styles.js';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8Tab extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tab sizes\n   * - **default** displays the tab text with cre8-typography-label-default\n   * - **sm** displays the tab text with cre8-typography-label-small and decrease padding\n   *\n   * _*This property is dynamically set_\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * If is true, tab has active state and cooresponding tab panel is visible.\n   *\n   * _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   * Used to align the tab with the tab panel\n   *\n   * _*This property is dynamically set_\n   */\n  @property({ type: Number })\n      index?: number;\n\n  /**\n   * Used to connect tab trigger and tab panel for accessibility\n   *\n   * _*This property is dynamically set_\n   */\n  @property()\n      ariaLabelledBy?: string;\n\n  /**\n   * Query the tab element\n   */\n  @query('.cre8-c-tab')\n      _Cre8Tab: HTMLButtonElement;\n\n  /**\n   * Updated\n   * 1. Called when the element's DOM has been updated and rendered.\n   * 2. If has ariaLabelledBy, then set the tab ID with the value.\n   * 3. If the tab is active, set the tabindex to 0 and aria-selected to true.\n   */\n  override updated(changedProperties: PropertyValues) {\n    /* 2 */\n      if (changedProperties.has('ariaLabelledBy')) {\n          this._Cre8Tab.setAttribute('id', this.ariaLabelledBy);\n      }\n    /* 3 */\n      if (changedProperties.has('isActive')) {\n          this._Cre8Tab.setAttribute('tabindex', this.isActive ? '0' : '-1');\n          this._Cre8Tab.setAttribute('aria-selected', `${this.isActive}`);\n      }\n  }\n\n  /**\n   * Handle Tab Selected\n   * 1. Fire the custom event on click of a tab.\n   */\n\n  private _handleTabSelected() {\n      const customEvent = new CustomEvent('tabSelected', {\n          detail: {\n              index: this.index,\n          },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tab', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-tab--small': this.size === 'sm',\n      });\n\n      return html`\n      <button\n        role=\"tab\"\n        tabindex=\"-1\"\n        aria-selected=\"false\"\n        type=\"button\"\n        class=\"${componentClassNames}\"\n        @click=${this._handleTabSelected}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\nif (customElements.get('cre8-tab') === undefined) {\n    customElements.define('cre8-tab', Cre8Tab);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tab': Cre8Tab;\n  }\n}\n\nexport default Cre8Tab;\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../components/tab/tab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;GAIG;AAEH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IA2CtC;;;;;OAKG;IACM,OAAO,CAAC,iBAAiC;QAChD,OAAO;QACL,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,CAAC;QACH,OAAO;QACL,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACpE,CAAC;IACL,CAAC;IAED;;;OAGG;IAEK,kBAAkB;QACtB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC/C,MAAM,EAAE;gBACJ,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE;YAC/D,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC1C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;;;;iBAMA,mBAAmB;iBACnB,IAAI,CAAC,kBAAkB;;;;KAInC,CAAC;IACJ,CAAC;;AA9FQ,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUvB;IADH,QAAQ,EAAE;qCACK;AAQZ;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACR;AAQf;IADH,QAAQ,EAAE;+CACiB;AAMxB;IADH,KAAK,CAAC,aAAa,CAAC;yCACW;AAyDlC,IAAI,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,OAAO,CAAC","sourcesContent":["import { html, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tab.styles.js';\n\n/**\n * @slot - The component content\n *\n * @fires tabSelected - Fires when the tab is clicked. `event.detail.index` is the tab's index.\n */\n\nexport class Cre8Tab extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tab sizes\n   * - **default** displays the tab text with cre8-typography-label-default\n   * - **sm** displays the tab text with cre8-typography-label-small and decrease padding\n   *\n   * _*This property is dynamically set_\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * If is true, tab has active state and cooresponding tab panel is visible.\n   *\n   * _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   * Used to align the tab with the tab panel\n   *\n   * _*This property is dynamically set_\n   */\n  @property({ type: Number })\n      index?: number;\n\n  /**\n   * Used to connect tab trigger and tab panel for accessibility\n   *\n   * _*This property is dynamically set_\n   */\n  @property()\n      ariaLabelledBy?: string;\n\n  /**\n   * Query the tab element\n   */\n  @query('.cre8-c-tab')\n      _Cre8Tab: HTMLButtonElement;\n\n  /**\n   * Updated\n   * 1. Called when the element's DOM has been updated and rendered.\n   * 2. If has ariaLabelledBy, then set the tab ID with the value.\n   * 3. If the tab is active, set the tabindex to 0 and aria-selected to true.\n   */\n  override updated(changedProperties: PropertyValues) {\n    /* 2 */\n      if (changedProperties.has('ariaLabelledBy')) {\n          this._Cre8Tab.setAttribute('id', this.ariaLabelledBy);\n      }\n    /* 3 */\n      if (changedProperties.has('isActive')) {\n          this._Cre8Tab.setAttribute('tabindex', this.isActive ? '0' : '-1');\n          this._Cre8Tab.setAttribute('aria-selected', `${this.isActive}`);\n      }\n  }\n\n  /**\n   * Handle Tab Selected\n   * 1. Fire the custom event on click of a tab.\n   */\n\n  private _handleTabSelected() {\n      const customEvent = new CustomEvent('tabSelected', {\n          detail: {\n              index: this.index,\n          },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tab', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-tab--small': this.size === 'sm',\n      });\n\n      return html`\n      <button\n        role=\"tab\"\n        tabindex=\"-1\"\n        aria-selected=\"false\"\n        type=\"button\"\n        class=\"${componentClassNames}\"\n        @click=${this._handleTabSelected}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\nif (customElements.get('cre8-tab') === undefined) {\n    customElements.define('cre8-tab', Cre8Tab);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tab': Cre8Tab;\n  }\n}\n\nexport default Cre8Tab;\n"]}

package/lib/components/table-object/table-object.d.ts

@@ -1,6 +1,8 @@
 import { Cre8Element } from '../cre8-element';
 /**
  * @slot - The component content
+ * @slot header - Content rendered in the table object header
+ * @slot footer - Content rendered in the table object footer
  */
 export declare class Cre8TableObject extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/table-object/table-object.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-object.d.ts","sourceRoot":"","sources":["../../../components/table-object/table-object.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AAEH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAEzB,MAAM;CAqBT;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"table-object.d.ts","sourceRoot":"","sources":["../../../components/table-object/table-object.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;GAIG;AAEH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAEzB,MAAM;CAqBT;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}

package/lib/components/table-object/table-object.js

@@ -3,6 +3,8 @@ import { Cre8Element } from '../cre8-element';
 import styles from './table-object.styles.js';
 /**
  * @slot - The component content
+ * @slot header - Content rendered in the table object header
+ * @slot footer - Content rendered in the table object footer
  */
 export class Cre8TableObject extends Cre8Element {
     render() {

package/lib/components/table-object/table-object.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-object.js","sourceRoot":"","sources":["../../../components/table-object/table-object.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;GAEG;AAEH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAG5C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QAEhF,OAAO,IAAI,CAAA;oBACC,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;;;;SAIpC;;;;UAIC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;;;;SAIpC;;KAEJ,CAAC;IACF,CAAC;;AAtBM,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAyB7B,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table-object.styles.js';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8TableObject extends Cre8Element {\n    static styles = [styles];\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-table-object', {});\n\n        return html`\n      <div class=\"${componentClassNames}\">\n        ${this.slotNotEmpty('header') && html`\n          <div class=\"cre8-c-table-object__header\" part=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n        `}\n        <div class=\"cre8-c-table-object__body\">\n          <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`\n          <div class=\"cre8-c-table-object__footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        `}\n      </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-table-object') === undefined) {\n    customElements.define('cre8-table-object', Cre8TableObject);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table-object': Cre8TableObject;\n  }\n}\n\nexport default Cre8TableObject;\n"]}
+{"version":3,"file":"table-object.js","sourceRoot":"","sources":["../../../components/table-object/table-object.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;;;GAIG;AAEH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAG5C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QAEhF,OAAO,IAAI,CAAA;oBACC,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;;;;SAIpC;;;;UAIC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;;;;SAIpC;;KAEJ,CAAC;IACF,CAAC;;AAtBM,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAyB7B,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table-object.styles.js';\n\n/**\n * @slot - The component content\n * @slot header - Content rendered in the table object header\n * @slot footer - Content rendered in the table object footer\n */\n\nexport class Cre8TableObject extends Cre8Element {\n    static styles = [styles];\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-table-object', {});\n\n        return html`\n      <div class=\"${componentClassNames}\">\n        ${this.slotNotEmpty('header') && html`\n          <div class=\"cre8-c-table-object__header\" part=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n        `}\n        <div class=\"cre8-c-table-object__body\">\n          <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`\n          <div class=\"cre8-c-table-object__footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        `}\n      </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-table-object') === undefined) {\n    customElements.define('cre8-table-object', Cre8TableObject);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table-object': Cre8TableObject;\n  }\n}\n\nexport default Cre8TableObject;\n"]}

package/lib/components/table-row/table-row.d.ts

@@ -3,6 +3,7 @@ import '../button/button';
 import '../table-cell/table-cell';
 /**
  * @slot - The component content
+ * @slot expandableContent - Content revealed when the row is expanded
  */
 export declare class Cre8TableRow extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/table-row/table-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../components/table-row/table-row.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AAEH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAEzB,gBAAgB;IASlB;;OAEG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEC,YAAY,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEC,kBAAkB,EAAE,MAAM,CAAwB;IAEtD;;OAEG;IAEC,mBAAmB,EAAE,MAAM,CAAsB;IAErD,MAAM;CA8BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../components/table-row/table-row.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC;;;GAGG;AAEH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAEzB,gBAAgB;IASlB;;OAEG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEC,YAAY,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEC,kBAAkB,EAAE,MAAM,CAAwB;IAEtD;;OAEG;IAEC,mBAAmB,EAAE,MAAM,CAAsB;IAErD,MAAM;CA8BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF;AAED,eAAe,YAAY,CAAC"}

package/lib/components/table-row/table-row.js

@@ -13,6 +13,7 @@ import '../button/button';
 import '../table-cell/table-cell';
 /**
  * @slot - The component content
+ * @slot expandableContent - Content revealed when the row is expanded
  */
 export class Cre8TableRow extends Cre8Element {
     constructor() {

package/lib/components/table-row/table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../components/table-row/table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AAEH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAmCE;;WAEG;QAEC,uBAAkB,GAAW,oBAAoB,CAAC;QAEtD;;WAEG;QAEC,wBAAmB,GAAW,kBAAkB,CAAC;IAgCvD,CAAC;IA1EG,gBAAgB;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC3C,CAAC;IACL,CAAC;IAqCH,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACtE,+BAA+B,EAAE,IAAI,CAAC,YAAY;YAClD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAClD,kBAAkB,EAAE,IAAI,CAAC,UAAU;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACa,mBAAmB;UACvC,IAAI,CAAC,YAAY;YACnB,CAAC,CAAC,IAAI,CAAA;;;gCAGkB,CAAC,CAAC,IAAI,CAAC,UAAU;yBACxB,IAAI,CAAC,gBAAgB;;;oBAG1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB;;kCAEtD,UAAU;;+BAEb;YACvB,CAAC,CAAC,EAAE;UACF,IAAI,CAAA,eAAe;;QAErB,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA,+FAA+F;YACrG,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;;AA3EQ,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAevB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAClB;AAMrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAChB;AAWvB;IADH,QAAQ,EAAE;6CACU;AAMjB;IADH,QAAQ,EAAE;wDAC2C;AAMlD;IADH,QAAQ,EAAE;yDAC0C;AAkCvD,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table-row.styles.js';\nimport '../button/button';\nimport '../table-cell/table-cell';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8TableRow extends Cre8Element {\n    static styles = [styles];\n\n    toggleIsExpanded() {\n        this.isExpanded = !this.isExpanded;\n        if (this.classList.contains('cre8-is-expanded')) {\n            this.classList.remove('cre8-is-expanded');\n        } else {\n            this.classList.add('cre8-is-expanded');\n        }\n    }\n\n  /**\n   * Visually show additional expandable content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpanded?: boolean;\n\n  /**\n   * Indicates row has additional visually hidden related content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpandable?: boolean;\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**bare** renders a table row without a border</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'bare';\n\n  /**\n   * Expanded button text\n   */\n  @property()\n      expandedButtonText: string = 'Collapse Table Row';\n\n  /**\n   * Expand button text\n   */\n  @property()\n      collapsedButtonText: string = 'Expand Table Row';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-table__row', {\n          'cre8-c-table__row--expandable': this.isExpandable,\n          'cre8-c-table__row--bare': this.variant === 'bare',\n          'cre8-is-expanded': this.isExpanded,\n      });\n\n      return html`\n      <tr role=\"row\" class=\"${componentClassNames}\">\n        ${this.isExpandable\n        ? html`<cre8-table-cell>\n              <button\n                class=\"cre8-c-table__expand-button\" \n                aria-expanded=${!!this.isExpanded}\n                @click=${this.toggleIsExpanded}\n              >\n                <span class=\"cre8-c-table__expand-button-text\">\n                  ${this.isExpanded ? this.expandedButtonText : this.collapsedButtonText}\n                </span>\n                <cre8-icon svg='${svgCaretUp}' rotate=\"90\" class=\"cre8-c-table__expand-button-icon\"></cre8-icon>\n              </button>\n            </cre8-table-cell>`\n        : ''}\n        ${html`<slot></slot>`}\n      </tr>\n      ${this.isExpandable\n        ? html` <slot class=\"cre8-c-table__expandable-content\" name=\"expandableContent\"><slot></slot></slot>`\n        : ''}\n    `;\n  }\n}\n\nif (customElements.get('cre8-table-row') === undefined) {\n    customElements.define('cre8-table-row', Cre8TableRow);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table-row': Cre8TableRow;\n  }\n}\n\nexport default Cre8TableRow;\n"]}
+{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../components/table-row/table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAElC;;;GAGG;AAEH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAmCE;;WAEG;QAEC,uBAAkB,GAAW,oBAAoB,CAAC;QAEtD;;WAEG;QAEC,wBAAmB,GAAW,kBAAkB,CAAC;IAgCvD,CAAC;IA1EG,gBAAgB;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC3C,CAAC;IACL,CAAC;IAqCH,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACtE,+BAA+B,EAAE,IAAI,CAAC,YAAY;YAClD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAClD,kBAAkB,EAAE,IAAI,CAAC,UAAU;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACa,mBAAmB;UACvC,IAAI,CAAC,YAAY;YACnB,CAAC,CAAC,IAAI,CAAA;;;gCAGkB,CAAC,CAAC,IAAI,CAAC,UAAU;yBACxB,IAAI,CAAC,gBAAgB;;;oBAG1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB;;kCAEtD,UAAU;;+BAEb;YACvB,CAAC,CAAC,EAAE;UACF,IAAI,CAAA,eAAe;;QAErB,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA,+FAA+F;YACrG,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;;AA3EQ,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAevB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAClB;AAMrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAChB;AAWvB;IADH,QAAQ,EAAE;6CACU;AAMjB;IADH,QAAQ,EAAE;wDAC2C;AAMlD;IADH,QAAQ,EAAE;yDAC0C;AAkCvD,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table-row.styles.js';\nimport '../button/button';\nimport '../table-cell/table-cell';\n\n/**\n * @slot - The component content\n * @slot expandableContent - Content revealed when the row is expanded\n */\n\nexport class Cre8TableRow extends Cre8Element {\n    static styles = [styles];\n\n    toggleIsExpanded() {\n        this.isExpanded = !this.isExpanded;\n        if (this.classList.contains('cre8-is-expanded')) {\n            this.classList.remove('cre8-is-expanded');\n        } else {\n            this.classList.add('cre8-is-expanded');\n        }\n    }\n\n  /**\n   * Visually show additional expandable content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpanded?: boolean;\n\n  /**\n   * Indicates row has additional visually hidden related content\n   */\n  @property({ type: Boolean, reflect: true })\n      isExpandable?: boolean;\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**bare** renders a table row without a border</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'bare';\n\n  /**\n   * Expanded button text\n   */\n  @property()\n      expandedButtonText: string = 'Collapse Table Row';\n\n  /**\n   * Expand button text\n   */\n  @property()\n      collapsedButtonText: string = 'Expand Table Row';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-table__row', {\n          'cre8-c-table__row--expandable': this.isExpandable,\n          'cre8-c-table__row--bare': this.variant === 'bare',\n          'cre8-is-expanded': this.isExpanded,\n      });\n\n      return html`\n      <tr role=\"row\" class=\"${componentClassNames}\">\n        ${this.isExpandable\n        ? html`<cre8-table-cell>\n              <button\n                class=\"cre8-c-table__expand-button\" \n                aria-expanded=${!!this.isExpanded}\n                @click=${this.toggleIsExpanded}\n              >\n                <span class=\"cre8-c-table__expand-button-text\">\n                  ${this.isExpanded ? this.expandedButtonText : this.collapsedButtonText}\n                </span>\n                <cre8-icon svg='${svgCaretUp}' rotate=\"90\" class=\"cre8-c-table__expand-button-icon\"></cre8-icon>\n              </button>\n            </cre8-table-cell>`\n        : ''}\n        ${html`<slot></slot>`}\n      </tr>\n      ${this.isExpandable\n        ? html` <slot class=\"cre8-c-table__expandable-content\" name=\"expandableContent\"><slot></slot></slot>`\n        : ''}\n    `;\n  }\n}\n\nif (customElements.get('cre8-table-row') === undefined) {\n    customElements.define('cre8-table-row', Cre8TableRow);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table-row': Cre8TableRow;\n  }\n}\n\nexport default Cre8TableRow;\n"]}

package/lib/components/tag/tag.d.ts

@@ -10,9 +10,14 @@ import '../icon/icon';
  * horizontally
  *
  *  - **checkbox** It allows for selecting options, It can be toggled on and off.
+ *
+ * @fires change - Fires when the tag is clicked while enabled. `event.detail` is `{ isSelected, type }`.
  */
 export declare class Cre8Tag extends Cre8FormElement {
     static styles: import("lit").CSSResult[];
+    /**
+     * The text label displayed inside the tag.
+     */
     text: string;
     /**
      * Type of tag

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../components/tag/tag.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;GAUG;AAEH,qBAAa,OAAQ,SAAQ,eAAe;IACxC,MAAM,CAAC,MAAM,4BAAY;IAGvB,IAAI,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IAGC,IAAI,EAAE,UAAU,GAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IAGC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAa;IAElE;;OAEG;IAEC,KAAK,EAAE,QAAQ,GAAG,OAAO,CAAY;IAOrC,UAAU,CAAC,EAAE,OAAO,CAAC;IAOrB,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB;;MAEE;IAEE,KAAK,EAAG,gBAAgB,CAAC;IAE7B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;MAEE;IACF,OAAO,CAAC,eAAe,CAAC,CAAU;IAElC,iBAAiB;IASjB,oBAAoB;IAQpB,kBAAkB;IASlB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,mBAAmB;IAO7B;;MAEE;IACO,UAAU;IAInB;;MAEE;IACA,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE;IAMjC;;;;MAIE;IACA,OAAO,CAAC,cAAc;IAYxB;;;;;MAKE;IACA,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,aAAa;IAgBrB,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAiBvC;;MAEE;IACF,OAAO,CAAC,QAAQ;IAQhB,MAAM;CAqCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../components/tag/tag.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;;;GAYG;AAEH,qBAAa,OAAQ,SAAQ,eAAe;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,IAAI,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IAGC,IAAI,EAAE,UAAU,GAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IAGC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAa;IAElE;;OAEG;IAEC,KAAK,EAAE,QAAQ,GAAG,OAAO,CAAY;IAOrC,UAAU,CAAC,EAAE,OAAO,CAAC;IAOrB,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB;;MAEE;IAEE,KAAK,EAAG,gBAAgB,CAAC;IAE7B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;MAEE;IACF,OAAO,CAAC,eAAe,CAAC,CAAU;IAElC,iBAAiB;IASjB,oBAAoB;IAQpB,kBAAkB;IASlB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,mBAAmB;IAO7B;;MAEE;IACO,UAAU;IAInB;;MAEE;IACA,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE;IAMjC;;;;MAIE;IACA,OAAO,CAAC,cAAc;IAYxB;;;;;MAKE;IACA,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,aAAa;IAgBrB,kBAAkB,CAAC,KAAK,EAAE,aAAa;IAiBvC;;MAEE;IACF,OAAO,CAAC,QAAQ;IAQhB,MAAM;CAqCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF;AAED,eAAe,OAAO,CAAC"}

package/lib/components/tag/tag.js

@@ -22,6 +22,8 @@ import styles from './tag.styles.js';
  * horizontally
  *
  *  - **checkbox** It allows for selecting options, It can be toggled on and off.
+ *
+ * @fires change - Fires when the tag is clicked while enabled. `event.detail` is `{ isSelected, type }`.
  */
 export class Cre8Tag extends Cre8FormElement {
     constructor() {

package/lib/components/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../components/tag/tag.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\nimport styles from './tag.styles.js';\n\n/**\n * The tag component allows you to make selections, filter content, or trigger actions. While buttons are\n * expected to appear consistently and with familiar calls to actions, tags should appear dynamically\n * as a group of multiple interactions elements. It is a flexible\n * component that comes in the following types:\n *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow\n * one option to be chosen and can be used in place of radio button when they need to be listed\n * horizontally\n *\n *  - **checkbox** It allows for selecting options, It can be toggled on and off.\n */\n\nexport class Cre8Tag extends Cre8FormElement {\n    static styles = [styles];\n\n  @property()\n      text: string;\n\n  /**\n   * Type of tag\n   * **checkbox** renders a checkbox tag\n   ***radio** renders a radio tag\n   */\n\n  @property()\n      type: 'checkbox'| 'radio';\n\n  /**\n   * Color variant\n   * **neutral** renders the default, unselected tag\n   * **branded** renders a selected tag\n   * **neutral-hybrid** renders a tag when mouse is hovering tag\n   */\n\n  @property()\n      variant: 'neutral' | 'branded' | 'neutral-hybrid' = 'neutral';\n\n  /**\n   * shape of the tag, supports square and round, and default not mentioned its a square\n   */\n  @property()\n      shape: 'square' | 'round' = 'square';\n\n  /*\n  * Disabled attribute\n  * renders a greyed out tag that the user cannot interact with\n  */\n  @property({ type: Boolean })\n      isDisabled?: boolean;\n\n  /*\n  * Selected attribute\n  * renders a selected tag\n  */\n  @property({ type: Boolean })\n      isSelected?: boolean;\n\n  /**\n  * Get the radio field item input\n  */\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the\n   * corresponding label.\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n  * Initial checked for initial checked state\n  */\n  private initialSelected?: boolean;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n      window.addEventListener('click', this._clickCheckHandler, false);\n      window.addEventListener('click', this._clickRadioHandler, false);\n      window.addEventListener('keydown', this._handleCheckKeyDown, false);\n      window.addEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      window.removeEventListener('click', this._clickCheckHandler, false);\n      window.removeEventListener('click', this._clickRadioHandler, false);\n      window.removeEventListener('keydown', this._handleCheckKeyDown, false);\n      window.removeEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  renderCheckboxIcon() {\n      if (this.type === 'checkbox' && this.isSelected) {\n          return html`\n    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-tag-icon\" aria-hidden=\"true\"></cre8-icon>\n     `;\n      }\n      return null;\n  }\n\n  private _clickCheckHandler() {\n      if (!this.isDisabled) {\n          if (this.type === 'checkbox') {\n              this.isSelected = !this.isSelected;\n          }\n          this.dispatchEvent(new CustomEvent('change', { detail: { isSelected: this.isSelected, type: this.type } }));\n      }\n  }\n\n  private _handleCheckKeyDown(event: KeyboardEvent) {\n      if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          this._clickCheckHandler();\n      }\n  }\n\n/**\n* Reset the radio tag field\n*/\n  public resetField() {\n      this._internals.setFormValue(null);\n  }\n\n/**\n* Reset the radio field tags tab indeces\n*/\n  resetTabIndeces(tags: Cre8Tag[]) {\n      tags.forEach((element: HTMLElement) => {\n          element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '0');\n      });\n  }\n\n/**\n* Remove checked\n* 1) Remove checked property from all tags and set tabindex to -1\n* 2) Reset the form field to not checked\n*/\n  private _removeChecked() {\n      if (this.parentNode) {\n      /* 1 */\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: Cre8Tag) => {\n              element.isSelected = false;\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n              element.resetField();\n          });\n      }\n  }\n\n/**\n* Reset form callback\n* 1) Remove the checked state from all radio tags\n* 2) Set the checked state to the initial checked state\n* 3) Set the radio field input checked attribute to the initial checked state\n*/\n  formResetCallback(): void {\n      this._removeChecked();\n      this.isSelected = this.initialSelected;\n      this.field.checked = this.initialSelected;\n  }\n\n  private _clickRadioHandler() {\n      this._removeChecked();\n      this.isSelected = !this.isSelected;\n      const tagInput = this.shadowRoot?.querySelector<HTMLInputElement>('.cre8-c-tag');\n      if (tagInput) {\n          tagInput.setAttribute('tabindex', '0');\n      }\n      if (this.isSelected) {\n          this._internals.setFormValue(this.value || 'on');\n      } else {\n          this._internals.setFormValue(null);\n      }\n  }\n\n  private _updateSibling(event: KeyboardEvent, sibling: Element, element: HTMLElement) {\n      event.preventDefault();\n      this._removeChecked();\n      element.focus();\n      element.setAttribute('tabindex', '0');\n      sibling.setAttribute('isSelected', '');\n  }\n\n  private _checkPreviousTag(event: KeyboardEvent) {\n      let previous = this.previousElementSibling;\n      while (previous) {\n          const previousElement = previous?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (previousElement) {\n              this._updateSibling(event, previous, previousElement);\n              return;\n          }\n\n          previous = previous.previousElementSibling;\n      }\n  }\n\n  private _checkNextTag(event: KeyboardEvent) {\n      let next = this.nextElementSibling;\n      while (next) {\n          const nextElement = next?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (nextElement) {\n              this._updateSibling(event, next, nextElement);\n              return;\n          }\n\n          next = next.nextElementSibling;\n      }\n  }\n\n  handleRadioKeyDown(event: KeyboardEvent) {\n      if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {\n          this._checkPreviousTag(event);\n      } else if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {\n          this._checkNextTag(event);\n      } else if (event.code === 'Tab' && !this.isSelected) {\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: HTMLElement) => {\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n          });\n\n      // After making tabbing away from the fieldset,\n      // reset the items to be tabbable again so the user can come back to the fieldset\n          setTimeout(this.resetTabIndeces, 100, tags);\n      }\n  }\n\n  /**\n  * access role when tag embedded in tag-list\n  */\n  private _getRole(): 'listitem' | undefined {\n      const tagContainer = this.closest('cre8-tag-list');\n      if (tagContainer) {\n          return 'listitem';\n      }\n      return undefined;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag', {\n          [`cre8-c-tag--${this.type}`]: true,\n          [`cre8-c-tag--${this.shape}`]: true,\n          [`cre8-c-tag--${this.variant}`]: true,\n          [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,\n          'cre8-c-tag--disabled': this.isDisabled,\n      });\n\n      const isSelected = this.isSelected === true || this.initialSelected === true;\n\n      return html` \n        <div role=\"${ifDefined(this._getRole())}\">\n            <div role=\"${ifDefined(this.type)}\" aria-checked=\"${isSelected}\" class=\"${componentClassNames}\"\n                aria-disabled=\"${ifDefined(this.isDisabled)}\"\n                @click=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                @keydown=\"${this.type === 'radio' ? this.handleRadioKeyDown : this._handleCheckKeyDown}\"\n                tabindex=\"0\"\n            >\n                ${this.renderCheckboxIcon()}\n                <label \n                    @input=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                    for=\"${this.fieldId}\" class=\"cre8-tag-text\">${this.text}\n                </label>\n            </div>\n            <input\n                class=\"cre8-c-tag__input\" \n                type=\"${this.type}\"\n                id=\"${this.fieldId}\"\n                name=${this.text}\n                .value=\"${this.text}\"\n                ?disabled=\"${this.isDisabled}\"\n                .checked = \"${isSelected}\"\n            />\n        </div>\n  `;\n  }\n}\n\nif (customElements.get('cre8-tag') === undefined) {\n    customElements.define('cre8-tag', Cre8Tag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag': Cre8Tag;\n  }\n}\n\nexport default Cre8Tag;\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../components/tag/tag.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\nimport styles from './tag.styles.js';\n\n/**\n * The tag component allows you to make selections, filter content, or trigger actions. While buttons are\n * expected to appear consistently and with familiar calls to actions, tags should appear dynamically\n * as a group of multiple interactions elements. It is a flexible\n * component that comes in the following types:\n *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow\n * one option to be chosen and can be used in place of radio button when they need to be listed\n * horizontally\n *\n *  - **checkbox** It allows for selecting options, It can be toggled on and off.\n *\n * @fires change - Fires when the tag is clicked while enabled. `event.detail` is `{ isSelected, type }`.\n */\n\nexport class Cre8Tag extends Cre8FormElement {\n    static styles = [styles];\n\n  /**\n   * The text label displayed inside the tag.\n   */\n  @property()\n      text: string;\n\n  /**\n   * Type of tag\n   * **checkbox** renders a checkbox tag\n   ***radio** renders a radio tag\n   */\n\n  @property()\n      type: 'checkbox'| 'radio';\n\n  /**\n   * Color variant\n   * **neutral** renders the default, unselected tag\n   * **branded** renders a selected tag\n   * **neutral-hybrid** renders a tag when mouse is hovering tag\n   */\n\n  @property()\n      variant: 'neutral' | 'branded' | 'neutral-hybrid' = 'neutral';\n\n  /**\n   * shape of the tag, supports square and round, and default not mentioned its a square\n   */\n  @property()\n      shape: 'square' | 'round' = 'square';\n\n  /*\n  * Disabled attribute\n  * renders a greyed out tag that the user cannot interact with\n  */\n  @property({ type: Boolean })\n      isDisabled?: boolean;\n\n  /*\n  * Selected attribute\n  * renders a selected tag\n  */\n  @property({ type: Boolean })\n      isSelected?: boolean;\n\n  /**\n  * Get the radio field item input\n  */\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the\n   * corresponding label.\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n  * Initial checked for initial checked state\n  */\n  private initialSelected?: boolean;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n      window.addEventListener('click', this._clickCheckHandler, false);\n      window.addEventListener('click', this._clickRadioHandler, false);\n      window.addEventListener('keydown', this._handleCheckKeyDown, false);\n      window.addEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      window.removeEventListener('click', this._clickCheckHandler, false);\n      window.removeEventListener('click', this._clickRadioHandler, false);\n      window.removeEventListener('keydown', this._handleCheckKeyDown, false);\n      window.removeEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  renderCheckboxIcon() {\n      if (this.type === 'checkbox' && this.isSelected) {\n          return html`\n    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-tag-icon\" aria-hidden=\"true\"></cre8-icon>\n     `;\n      }\n      return null;\n  }\n\n  private _clickCheckHandler() {\n      if (!this.isDisabled) {\n          if (this.type === 'checkbox') {\n              this.isSelected = !this.isSelected;\n          }\n          this.dispatchEvent(new CustomEvent('change', { detail: { isSelected: this.isSelected, type: this.type } }));\n      }\n  }\n\n  private _handleCheckKeyDown(event: KeyboardEvent) {\n      if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          this._clickCheckHandler();\n      }\n  }\n\n/**\n* Reset the radio tag field\n*/\n  public resetField() {\n      this._internals.setFormValue(null);\n  }\n\n/**\n* Reset the radio field tags tab indeces\n*/\n  resetTabIndeces(tags: Cre8Tag[]) {\n      tags.forEach((element: HTMLElement) => {\n          element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '0');\n      });\n  }\n\n/**\n* Remove checked\n* 1) Remove checked property from all tags and set tabindex to -1\n* 2) Reset the form field to not checked\n*/\n  private _removeChecked() {\n      if (this.parentNode) {\n      /* 1 */\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: Cre8Tag) => {\n              element.isSelected = false;\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n              element.resetField();\n          });\n      }\n  }\n\n/**\n* Reset form callback\n* 1) Remove the checked state from all radio tags\n* 2) Set the checked state to the initial checked state\n* 3) Set the radio field input checked attribute to the initial checked state\n*/\n  formResetCallback(): void {\n      this._removeChecked();\n      this.isSelected = this.initialSelected;\n      this.field.checked = this.initialSelected;\n  }\n\n  private _clickRadioHandler() {\n      this._removeChecked();\n      this.isSelected = !this.isSelected;\n      const tagInput = this.shadowRoot?.querySelector<HTMLInputElement>('.cre8-c-tag');\n      if (tagInput) {\n          tagInput.setAttribute('tabindex', '0');\n      }\n      if (this.isSelected) {\n          this._internals.setFormValue(this.value || 'on');\n      } else {\n          this._internals.setFormValue(null);\n      }\n  }\n\n  private _updateSibling(event: KeyboardEvent, sibling: Element, element: HTMLElement) {\n      event.preventDefault();\n      this._removeChecked();\n      element.focus();\n      element.setAttribute('tabindex', '0');\n      sibling.setAttribute('isSelected', '');\n  }\n\n  private _checkPreviousTag(event: KeyboardEvent) {\n      let previous = this.previousElementSibling;\n      while (previous) {\n          const previousElement = previous?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (previousElement) {\n              this._updateSibling(event, previous, previousElement);\n              return;\n          }\n\n          previous = previous.previousElementSibling;\n      }\n  }\n\n  private _checkNextTag(event: KeyboardEvent) {\n      let next = this.nextElementSibling;\n      while (next) {\n          const nextElement = next?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (nextElement) {\n              this._updateSibling(event, next, nextElement);\n              return;\n          }\n\n          next = next.nextElementSibling;\n      }\n  }\n\n  handleRadioKeyDown(event: KeyboardEvent) {\n      if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {\n          this._checkPreviousTag(event);\n      } else if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {\n          this._checkNextTag(event);\n      } else if (event.code === 'Tab' && !this.isSelected) {\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: HTMLElement) => {\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n          });\n\n      // After making tabbing away from the fieldset,\n      // reset the items to be tabbable again so the user can come back to the fieldset\n          setTimeout(this.resetTabIndeces, 100, tags);\n      }\n  }\n\n  /**\n  * access role when tag embedded in tag-list\n  */\n  private _getRole(): 'listitem' | undefined {\n      const tagContainer = this.closest('cre8-tag-list');\n      if (tagContainer) {\n          return 'listitem';\n      }\n      return undefined;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag', {\n          [`cre8-c-tag--${this.type}`]: true,\n          [`cre8-c-tag--${this.shape}`]: true,\n          [`cre8-c-tag--${this.variant}`]: true,\n          [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,\n          'cre8-c-tag--disabled': this.isDisabled,\n      });\n\n      const isSelected = this.isSelected === true || this.initialSelected === true;\n\n      return html` \n        <div role=\"${ifDefined(this._getRole())}\">\n            <div role=\"${ifDefined(this.type)}\" aria-checked=\"${isSelected}\" class=\"${componentClassNames}\"\n                aria-disabled=\"${ifDefined(this.isDisabled)}\"\n                @click=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                @keydown=\"${this.type === 'radio' ? this.handleRadioKeyDown : this._handleCheckKeyDown}\"\n                tabindex=\"0\"\n            >\n                ${this.renderCheckboxIcon()}\n                <label \n                    @input=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                    for=\"${this.fieldId}\" class=\"cre8-tag-text\">${this.text}\n                </label>\n            </div>\n            <input\n                class=\"cre8-c-tag__input\" \n                type=\"${this.type}\"\n                id=\"${this.fieldId}\"\n                name=${this.text}\n                .value=\"${this.text}\"\n                ?disabled=\"${this.isDisabled}\"\n                .checked = \"${isSelected}\"\n            />\n        </div>\n  `;\n  }\n}\n\nif (customElements.get('cre8-tag') === undefined) {\n    customElements.define('cre8-tag', Cre8Tag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag': Cre8Tag;\n  }\n}\n\nexport default Cre8Tag;\n"]}

package/lib/components/tag-list/tag-list.d.ts

@@ -3,6 +3,8 @@ import { Cre8Element } from '../cre8-element';
  * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.
  * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.
  * Tag List has a label that should be used to describe the purpose of the list.
+ *
+ * @slot - The `cre8-tag` children of the list
  */
 export declare class Cre8TagList extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/tag-list/tag-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-list.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;GAIG;AACH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB,YAAY;IAIZ,OAAO,CAAC,eAAe;IAIvB,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"tag-list.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;GAMG;AACH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB,YAAY;IAIZ,OAAO,CAAC,eAAe;IAIvB,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF;AAED,eAAe,WAAW,CAAC"}

package/lib/components/tag-list/tag-list.js

@@ -13,6 +13,8 @@ import styles from './tag-list.styles.js';
  * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.
  * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.
  * Tag List has a label that should be used to describe the purpose of the list.
+ *
+ * @slot - The `cre8-tag` children of the list
  */
 export class Cre8TagList extends Cre8Element {
     firstUpdated() {

package/lib/components/tag-list/tag-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-list.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAgB1C,YAAY;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,EAAG,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;yBACQ,mBAAmB;kDACM,IAAI,CAAC,KAAK;;;;;OAKrD,CAAC;IACN,CAAC;;AAlCQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACQ;AAOf;IADH,QAAQ,EAAE;4CACU;AAwBvB,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tag-list.styles.js';\n\n/**\n * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.\n * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.\n * Tag List has a label that should be used to describe the purpose of the list.\n */\nexport class Cre8TagList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tag list legend label\n   */\n  @property()\n      label?: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  firstUpdated() {\n      this._initializeAria();\n  }\n\n  private _initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag-list', { });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend class=\"cre8-c-tag-list__legend\">${this.label}</legend>\n        <div class=\"cre8-c-tag-list__list\" role=\"list\">   \n          <slot></slot>\n        </div>\n      </fieldset>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tag-list') === undefined) {\n    customElements.define('cre8-tag-list', Cre8TagList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag-list': Cre8TagList;\n  }\n}\n\nexport default Cre8TagList;\n"]}
+{"version":3,"file":"tag-list.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAgB1C,YAAY;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,EAAG,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;yBACQ,mBAAmB;kDACM,IAAI,CAAC,KAAK;;;;;OAKrD,CAAC;IACN,CAAC;;AAlCQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACQ;AAOf;IADH,QAAQ,EAAE;4CACU;AAwBvB,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tag-list.styles.js';\n\n/**\n * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.\n * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.\n * Tag List has a label that should be used to describe the purpose of the list.\n *\n * @slot - The `cre8-tag` children of the list\n */\nexport class Cre8TagList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tag list legend label\n   */\n  @property()\n      label?: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  firstUpdated() {\n      this._initializeAria();\n  }\n\n  private _initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag-list', { });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend class=\"cre8-c-tag-list__legend\">${this.label}</legend>\n        <div class=\"cre8-c-tag-list__list\" role=\"list\">   \n          <slot></slot>\n        </div>\n      </fieldset>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tag-list') === undefined) {\n    customElements.define('cre8-tag-list', Cre8TagList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag-list': Cre8TagList;\n  }\n}\n\nexport default Cre8TagList;\n"]}

package/lib/components/text-link/text-link.d.ts

@@ -1,6 +1,7 @@
 import { Cre8Element } from '../cre8-element';
 /**
  * @slot - The component content
+ * @slot linkAfter - Content rendered after the link text, such as an icon
  */
 export declare class Cre8TextLink extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/text-link/text-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../../components/text-link/text-link.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;OAQG;IAEC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEtC;;;;;;;OAOG;IAEC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEhB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../../components/text-link/text-link.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;GAGG;AACH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;OAQG;IAEC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEtC;;;;;;;OAOG;IAEC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEhB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF;AAED,eAAe,YAAY,CAAC"}

package/lib/components/text-link/text-link.js

@@ -11,6 +11,7 @@ import { Cre8Element } from '../cre8-element';
 import styles from './text-link.styles.js';
 /**
  * @slot - The component content
+ * @slot linkAfter - Content rendered after the link text, such as an icon
  */
 export class Cre8TextLink extends Cre8Element {
     render() {

package/lib/components/text-link/text-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-link.js","sourceRoot":"","sources":["../../../components/text-link/text-link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAuC3C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACpE,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;YACpD,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACvD,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC7C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;iBACA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,kBAAkB;;UAEzD,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;eAC7B,IAAI,CAAA;;eAEA;;KAEV,CAAC;IACJ,CAAC;;AAvDQ,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACO;AAYd;IADH,QAAQ,EAAE;6CAC2B;AAWlC;IADH,QAAQ,EAAE;0CACK;AAOZ;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACpB;AAsBzB,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './text-link.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8TextLink extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The link URL\n   */\n  @property()\n      href?: string;\n\n  /**\n   * Style variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li> **display** applies display treatment to the text link (e.g. article title link)</li>\n   * <li> **secondary** applies secondary treatment to the text link (e.g. non-prominent links)</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'display' | 'secondary';\n\n  /**\n   * Size variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li> **sm** renders a smaller typography preset than the default</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * Inverted variant\n   * 1) Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-text-link', {\n          'cre8-c-text-link--inverted': this.inverted === true,\n          'cre8-c-text-link--display': this.variant === 'display',\n          'cre8-c-text-link--secondary': this.variant === 'secondary',\n          'cre8-c-text-link--sm': this.size === 'sm',\n      });\n\n      return html`\n      <a href=\"${ifDefined(this.href)}\" class=\"${componentClassName}\">\n        <slot></slot>\n        ${this.slotNotEmpty('linkAfter')\n        && html`<div class=\"cre8-c-text-link__after\">\n          <slot name=\"linkAfter\"></slot>\n        </div>`}\n      </a>\n    `;\n  }\n}\n\nif (customElements.get('cre8-text-link') === undefined) {\n    customElements.define('cre8-text-link', Cre8TextLink);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-text-link': Cre8TextLink;\n  }\n}\n\nexport default Cre8TextLink;\n"]}
+{"version":3,"file":"text-link.js","sourceRoot":"","sources":["../../../components/text-link/text-link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAuC3C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACpE,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;YACpD,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACvD,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC7C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;iBACA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,kBAAkB;;UAEzD,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;eAC7B,IAAI,CAAA;;eAEA;;KAEV,CAAC;IACJ,CAAC;;AAvDQ,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACO;AAYd;IADH,QAAQ,EAAE;6CAC2B;AAWlC;IADH,QAAQ,EAAE;0CACK;AAOZ;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACpB;AAsBzB,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './text-link.styles.js';\n\n/**\n * @slot - The component content\n * @slot linkAfter - Content rendered after the link text, such as an icon\n */\nexport class Cre8TextLink extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The link URL\n   */\n  @property()\n      href?: string;\n\n  /**\n   * Style variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li> **display** applies display treatment to the text link (e.g. article title link)</li>\n   * <li> **secondary** applies secondary treatment to the text link (e.g. non-prominent links)</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'display' | 'secondary';\n\n  /**\n   * Size variant\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li> **sm** renders a smaller typography preset than the default</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * Inverted variant\n   * 1) Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-text-link', {\n          'cre8-c-text-link--inverted': this.inverted === true,\n          'cre8-c-text-link--display': this.variant === 'display',\n          'cre8-c-text-link--secondary': this.variant === 'secondary',\n          'cre8-c-text-link--sm': this.size === 'sm',\n      });\n\n      return html`\n      <a href=\"${ifDefined(this.href)}\" class=\"${componentClassName}\">\n        <slot></slot>\n        ${this.slotNotEmpty('linkAfter')\n        && html`<div class=\"cre8-c-text-link__after\">\n          <slot name=\"linkAfter\"></slot>\n        </div>`}\n      </a>\n    `;\n  }\n}\n\nif (customElements.get('cre8-text-link') === undefined) {\n    customElements.define('cre8-text-link', Cre8TextLink);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-text-link': Cre8TextLink;\n  }\n}\n\nexport default Cre8TextLink;\n"]}

package/lib/components/tooltip/tooltip.d.ts

@@ -32,6 +32,9 @@ import { Cre8Element } from '../cre8-element';
  *
  * @slot default - Default, unnamed slot container for Tooltip text
  * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
+ *
+ * @fires open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
+ * @fires close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
  */
 export declare class Cre8Tooltip extends Cre8Element {
     static styles: import("lit").CSSResult[];
@@ -79,6 +82,9 @@ export declare class Cre8Tooltip extends Cre8Element {
      *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element
      */
     ariaDescribes?: string;
+    /**
+     * Internal unique id used to associate the trigger with the tooltip text. Generated automatically.
+     */
     _uniqueId?: string;
     /**
      * svg as a raw string

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;;OAQG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;;;OAKG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;OAMG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IAEC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEC,gBAAgB,CAAC,EAAE,MAAM,CAAK;IAElC;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;SAKK;IACL,OAAO;IAcP;;;;;;MAME;IACF,YAAY;IAoBZ;;;;;;OAMG;IACH,iBAAiB;IAMjB;;;;OAIG;IACH,oBAAoB;IAMpB;;OAEG;IACH,eAAe;IA2Cf;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAWtB;;;;;;OAMG;IACH,YAAY;IA4BZ;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;;OAQG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;;;OAKG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;OAMG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,aAAa,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IAEC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEC,gBAAgB,CAAC,EAAE,MAAM,CAAK;IAElC;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;SAKK;IACL,OAAO;IAcP;;;;;;MAME;IACF,YAAY;IAoBZ;;;;;;OAMG;IACH,iBAAiB;IAMjB;;;;OAIG;IACH,oBAAoB;IAMpB;;OAEG;IACH,eAAe;IA2Cf;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAWtB;;;;;;OAMG;IACH,YAAY;IA4BZ;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}