@tmorrow/cre8-wc 2.0.6 → 2.0.8

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

@@ -11,6 +11,9 @@ import '../button/button';
 import styles from './split-button.styles.js';
 /**
  * @slot - The component content , this will consist of the dropdown when the user clicks the caret
+ *
+ * @fires split-button-text-click - Fires when the main text button is clicked.
+ * @fires split-button-dropdown-click - Fires when the dropdown toggle is clicked.
  */
 export class Cre8SplitButton extends Cre8Element {
     constructor() {
@@ -49,11 +52,11 @@ export class Cre8SplitButton extends Cre8Element {
     `;
     }
     _textClick(e) {
-        this.dispatchEvent(new Event('text-click', e));
+        this.dispatchWithLegacyAlias(new Event('split-button-text-click', e));
     }
     _dropdownClick(e) {
         this.dropdownOpen = !this.dropdownOpen;
-        this.dispatchEvent(new Event('dropdown-click', e));
+        this.dispatchWithLegacyAlias(new Event('split-button-dropdown-click', e));
     }
 }
 Cre8SplitButton.styles = [styles];

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;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"]}
+{"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;;;;;GAKG;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,uBAAuB,CAAC,IAAI,KAAK,CAAC,yBAAyB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC1E,CAAC;IAEO,cAAc,CAAC,CAAa;QAChC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,uBAAuB,CAAC,IAAI,KAAK,CAAC,6BAA6B,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9E,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 *\n * @fires split-button-text-click - Fires when the main text button is clicked.\n * @fires split-button-dropdown-click - Fires when the dropdown toggle is clicked.\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.dispatchWithLegacyAlias(new Event('split-button-text-click', e));\n  }\n\n  private _dropdownClick(e: MouseEvent) {\n      this.dropdownOpen = !this.dropdownOpen;\n      this.dispatchWithLegacyAlias(new Event('split-button-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

@@ -3,7 +3,7 @@ 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.
+ * @fires tab-select - 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.js

@@ -11,7 +11,7 @@ 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.
+ * @fires tab-select - Fires when the tab is clicked. `event.detail.index` is the tab's index.
  */
 export class Cre8Tab extends Cre8Element {
     /**
@@ -36,14 +36,14 @@ export class Cre8Tab extends Cre8Element {
      * 1. Fire the custom event on click of a tab.
      */
     _handleTabSelected() {
-        const customEvent = new CustomEvent('tabSelected', {
+        const customEvent = new CustomEvent('tab-select', {
             detail: {
                 index: this.index,
             },
             bubbles: true,
             composed: true,
         });
-        this.dispatchEvent(customEvent);
+        this.dispatchWithLegacyAlias(customEvent);
     }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-tab', {

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;;;;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"]}
+{"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,YAAY,EAAE;YAC9C,MAAM,EAAE;gBACJ,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAC9C,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 tab-select - 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('tab-select', {\n          detail: {\n              index: this.index,\n          },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchWithLegacyAlias(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/table.d.ts

@@ -1,9 +1,38 @@
 import { Cre8Element } from '../cre8-element';
+/**
+ * One row in a data-driven table: either an object keyed by column `key`, or a
+ * plain array of cell values positioned to match `columns`.
+ */
+export type Cre8TableRowData = Record<string, string | number> | Array<string | number>;
+/** One column in a data-driven table. */
+export interface Cre8TableColumn {
+    /** Header text. Also stamped onto every cell beneath it as `dataHeader`. */
+    label: string;
+    /** Key to read each row's value from, when rows are objects. */
+    key?: string;
+    /** Inline width for the column, e.g. `"20%"`. */
+    width?: string;
+}
 /**
  * @slot - The component content
  */
 export declare class Cre8Table extends Cre8Element {
     static styles: import("lit").CSSResult[];
+    /**
+     * Columns for a data-driven table. Set this with `rows` and the table builds
+     * its own header, body, rows and cells — the same composition you would write
+     * by hand, generated into the light DOM, so nothing about styling or
+     * behaviour changes.
+     *
+     * Leave both unset to compose the table yourself with `cre8-table-header`,
+     * `cre8-table-body` and friends. Do not do both on one table.
+     */
+    columns?: Cre8TableColumn[];
+    /**
+     * Rows for a data-driven table. Each row is either an object keyed by the
+     * columns' `key`, or an array of values positioned to match `columns`.
+     */
+    rows?: Cre8TableRowData[];
     /**
      * Specifies the caption/title of the table, visible to all users.
      * Increases accessibility of table.
@@ -32,6 +61,13 @@ export declare class Cre8Table extends Cre8Element {
      * </cre8-text-passage>
      */
     variant?: 'striped';
+    /**
+     * The composition `columns` and `rows` stand for. Kept as data rather than
+     * markup so the reconciler can update a cell in place instead of rebuilding
+     * the table under the user's cursor.
+     */
+    private buildComposition;
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../components/table/table.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AAEH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,YAAY,CAAC;IAE5B;;;OAGG;IAEC,WAAW,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,SAAS,CAAC;IAExB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../components/table/table.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAK9C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAExF,yCAAyC;AACzC,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AAEH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;;OAQG;IAEC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAEhC;;;OAGG;IAEC,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,YAAY,CAAC;IAE5B;;;OAGG;IAEC,WAAW,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,SAAS,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IA2CxB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF;AAED,eAAe,SAAS,CAAC"}

package/lib/components/table/table.js

@@ -7,11 +7,60 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import styles from './table.styles.js';
 /**
  * @slot - The component content
  */
 export class Cre8Table extends Cre8Element {
+    /**
+     * The composition `columns` and `rows` stand for. Kept as data rather than
+     * markup so the reconciler can update a cell in place instead of rebuilding
+     * the table under the user's cursor.
+     */
+    buildComposition() {
+        if (!this.columns && !this.rows)
+            return null;
+        const columns = this.columns ?? [];
+        const rows = this.rows ?? [];
+        const cell = (value, column, header = false) => ({
+            tag: header ? 'cre8-table-header-cell' : 'cre8-table-cell',
+            props: header
+                ? { width: column?.width }
+                // `behavior="responsive"` stacks each cell under a repeat of its
+                // column header, which the cell reads from `dataHeader`. Writing
+                // that by hand means restating every header on every row.
+                : { dataHeader: column?.label },
+            text: value === undefined || value === null ? '' : String(value),
+        });
+        const composition = [];
+        if (columns.length) {
+            composition.push({
+                tag: 'cre8-table-header',
+                children: [
+                    {
+                        tag: 'cre8-table-row',
+                        children: columns.map((column) => cell(column.label, column, true)),
+                    },
+                ],
+            });
+        }
+        composition.push({
+            tag: 'cre8-table-body',
+            children: rows.map((row) => ({
+                tag: 'cre8-table-row',
+                children: Array.isArray(row)
+                    ? row.map((value, i) => cell(value, columns[i]))
+                    : columns.map((column) => cell(row[column.key ?? column.label], column)),
+            })),
+        });
+        return composition;
+    }
+    updated(changed) {
+        if (changed.has('columns') || changed.has('rows')) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-table', {
             'cre8-c-table--hoverable': this.isHoverable,
@@ -31,6 +80,12 @@ export class Cre8Table extends Cre8Element {
     }
 }
 Cre8Table.styles = [styles];
+__decorate([
+    property({ type: Array })
+], Cre8Table.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8Table.prototype, "rows", void 0);
 __decorate([
     property()
 ], Cre8Table.prototype, "caption", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../components/table/table.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,mBAAmB,CAAC;AAEvC;;GAEG;AAEH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAuCxC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE;YACjE,yBAAyB,EAAE,IAAI,CAAC,WAAW;YAC3C,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnD,0BAA0B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;SAC7D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mCACkB,mBAAmB;UAC5C,IAAI,CAAC,OAAO;YACd,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,OAAO;qBACL;YACb,CAAC,CAAC,EAAE;UACF,IAAI,CAAA,eAAe;;KAExB,CAAC;IACJ,CAAC;;AAvDQ,gBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,EAAE;0CACU;AAWjB;IADH,QAAQ,EAAE;2CACiB;AAOxB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACjB;AAWtB;IADH,QAAQ,EAAE;0CACa;AAsB1B,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC;AAQD,eAAe,SAAS,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table.styles.js';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8Table extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Specifies the caption/title of the table, visible to all users.\n   * Increases accessibility of table.\n   */\n  @property()\n      caption?: string;\n\n  /**\n   * Behavior variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**responsive** stacks column headers with respective table cells on small screens</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      behavior?: 'responsive';\n\n  /**\n   * Hoverable rows variant\n   * 1) Allows the table rows to be styled on hover\n   */\n  @property({ type: Boolean, reflect: true })\n      isHoverable?: boolean;\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**striped** add zebra-striping to table rows within the `<tbody>`</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'striped';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-table', {\n          'cre8-c-table--hoverable': this.isHoverable,\n          'cre8-c-table--striped': this.variant === 'striped',\n          'cre8-c-table--responsive': this.behavior === 'responsive',\n      });\n\n      return html`\n      <table role=\"table\" class=\"${componentClassNames}\">\n        ${this.caption\n        ? html`<caption class=\"cre8-c-table__caption\">\n            ${this.caption}\n          </caption>`\n        : ''}\n        ${html`<slot></slot>`}\n      </table>\n    `;\n  }\n}\n\nif (customElements.get('cre8-table') === undefined) {\n    customElements.define('cre8-table', Cre8Table);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table': Cre8Table;\n  }\n}\n\nexport default Cre8Table;\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../components/table/table.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport styles from './table.styles.js';\n\n\n/**\n * One row in a data-driven table: either an object keyed by column `key`, or a\n * plain array of cell values positioned to match `columns`.\n */\nexport type Cre8TableRowData = Record<string, string | number> | Array<string | number>;\n\n/** One column in a data-driven table. */\nexport interface Cre8TableColumn {\n  /** Header text. Also stamped onto every cell beneath it as `dataHeader`. */\n  label: string;\n  /** Key to read each row's value from, when rows are objects. */\n  key?: string;\n  /** Inline width for the column, e.g. `\"20%\"`. */\n  width?: string;\n}\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8Table extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Columns for a data-driven table. Set this with `rows` and the table builds\n   * its own header, body, rows and cells — the same composition you would write\n   * by hand, generated into the light DOM, so nothing about styling or\n   * behaviour changes.\n   *\n   * Leave both unset to compose the table yourself with `cre8-table-header`,\n   * `cre8-table-body` and friends. Do not do both on one table.\n   */\n  @property({ type: Array })\n      columns?: Cre8TableColumn[];\n\n  /**\n   * Rows for a data-driven table. Each row is either an object keyed by the\n   * columns' `key`, or an array of values positioned to match `columns`.\n   */\n  @property({ type: Array })\n      rows?: Cre8TableRowData[];\n\n  /**\n   * Specifies the caption/title of the table, visible to all users.\n   * Increases accessibility of table.\n   */\n  @property()\n      caption?: string;\n\n  /**\n   * Behavior variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**responsive** stacks column headers with respective table cells on small screens</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      behavior?: 'responsive';\n\n  /**\n   * Hoverable rows variant\n   * 1) Allows the table rows to be styled on hover\n   */\n  @property({ type: Boolean, reflect: true })\n      isHoverable?: boolean;\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**striped** add zebra-striping to table rows within the `<tbody>`</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'striped';\n\n  /**\n   * The composition `columns` and `rows` stand for. Kept as data rather than\n   * markup so the reconciler can update a cell in place instead of rebuilding\n   * the table under the user's cursor.\n   */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.columns && !this.rows) return null;\n      const columns = this.columns ?? [];\n      const rows = this.rows ?? [];\n\n      const cell = (value: unknown, column?: Cre8TableColumn, header = false): ChildSpec => ({\n          tag: header ? 'cre8-table-header-cell' : 'cre8-table-cell',\n          props: header\n              ? { width: column?.width }\n              // `behavior=\"responsive\"` stacks each cell under a repeat of its\n              // column header, which the cell reads from `dataHeader`. Writing\n              // that by hand means restating every header on every row.\n              : { dataHeader: column?.label },\n          text: value === undefined || value === null ? '' : String(value),\n      });\n\n      const composition: ChildSpec[] = [];\n\n      if (columns.length) {\n          composition.push({\n              tag: 'cre8-table-header',\n              children: [\n                  {\n                      tag: 'cre8-table-row',\n                      children: columns.map((column) => cell(column.label, column, true)),\n                  },\n              ],\n          });\n      }\n\n      composition.push({\n          tag: 'cre8-table-body',\n          children: rows.map((row) => ({\n              tag: 'cre8-table-row',\n              children: Array.isArray(row)\n                  ? row.map((value, i) => cell(value, columns[i]))\n                  : columns.map((column) => cell(row[column.key ?? column.label], column)),\n          })),\n      });\n\n      return composition;\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (changed.has('columns') || changed.has('rows')) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-table', {\n          'cre8-c-table--hoverable': this.isHoverable,\n          'cre8-c-table--striped': this.variant === 'striped',\n          'cre8-c-table--responsive': this.behavior === 'responsive',\n      });\n\n      return html`\n      <table role=\"table\" class=\"${componentClassNames}\">\n        ${this.caption\n        ? html`<caption class=\"cre8-c-table__caption\">\n            ${this.caption}\n          </caption>`\n        : ''}\n        ${html`<slot></slot>`}\n      </table>\n    `;\n  }\n}\n\nif (customElements.get('cre8-table') === undefined) {\n    customElements.define('cre8-table', Cre8Table);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table': Cre8Table;\n  }\n}\n\nexport default Cre8Table;\n"]}

package/lib/components/tabs/tabs.d.ts

@@ -1,6 +1,12 @@
 import { Cre8Element } from '../cre8-element';
 import { Cre8TabPanel } from '../tab-panel/tab-panel';
 import { Cre8Tab } from '../tab/tab';
+/** One tab and its panel in a data-driven tab set. */
+export interface Cre8TabItemData {
+    label: string;
+    /** Panel content. Omit to supply the panel yourself. */
+    content?: string;
+}
 /**
  * Tabs are used to quickly navigate back and forth between views.
  * The Tab design and interaction varies depending on the requirements for your organization and project.
@@ -27,6 +33,8 @@ import { Cre8Tab } from '../tab/tab';
  *
  * @slot default - Default, unnamed slot container for each `cre8-tab` button
  * @slot panel - Container for each `cre8-tab-panel` content item
+ *
+ * @fires tab-change - Fires when the active tab changes. `event.detail` is `{ value, activeTabIndex }`.
  */
 export declare class Cre8Tabs extends Cre8Element {
     static styles: import("lit").CSSResult[];
@@ -185,7 +193,7 @@ export declare class Cre8Tabs extends Cre8Element {
      * 2. If tab is active, make the previous selected tab inactive.
      * 3. Set the clicked tab active.
      * 4. Emit the custom event.
-     * @fires tabSelected
+     * @fires tab-select
      */
     handleTabSelected(event: MouseEvent): void;
     /**
@@ -205,7 +213,7 @@ export declare class Cre8Tabs extends Cre8Element {
      * 2. If current activeIndex is in first position then move the tab focus to last tab.
      * 3. Set the active tab and focus.
      * 4. Emit custom event.
-     * @fires tabChange
+     * @fires tab-change
      */
     setSelectedToPreviousTab(currentTab: Cre8Tab): void;
     /**
@@ -214,7 +222,7 @@ export declare class Cre8Tabs extends Cre8Element {
      * 2. If current activeIndex is in last position then move the tab focus to first tab.
      * 3. Set the active tab and focus.
      * 4. Emit custom event.
-     * @fires tabChange
+     * @fires tab-change
      */
     setSelectedToNextTab(currentTab: Cre8Tab): void;
     /**
@@ -227,6 +235,15 @@ export declare class Cre8Tabs extends Cre8Element {
      * Emit custom event
      */
     emitEvent(): void;
+    /**
+     * Tabs for a data-driven tab set. Each entry becomes a `cre8-tab` in the
+     * default slot *and* a `cre8-tab-panel` in the `panel` slot, with matching
+     * indices — two slots kept in step, which is the part that goes wrong when
+     * these are written by hand.
+     */
+    items?: Cre8TabItemData[];
+    /** The composition the data property stands for. */
+    private buildComposition;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/tabs/tabs.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAKrC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAK;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAQ;IAEzB;;;;;OAKG;IAEH,KAAK,CAAC,EAAE,OAAO,CAAS;IAExB;;OAEG;IAEH,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9B;;OAEG;IAEH,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAEpC;;OAEG;IAEH,eAAe,EAAE,WAAW,CAAC;IAE7B;;OAEG;IAEH,mBAAmB,EAAE,WAAW,CAAC;IAEjC;;;;OAIG;IACH,IAAI,KAAK,YAER;IAED;;OAEG;;IAgBH;;;OAGG;IACH,iBAAiB;IAKjB;;;;OAIG;IACH,oBAAoB;IAKpB;;;;;;OAMG;IACG,YAAY;IAiBlB;;;;;OAKG;IACG,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAerD;;;;;OAKG;IACH,YAAY;IAKZ;;;;;OAKG;IACH,YAAY;IAKZ;;;OAGG;IACH,UAAU;IAcV;;;OAGG;IACH,QAAQ;IAQR;;;;;OAKG;IACH,YAAY;IAYZ;;;OAGG;IACH,aAAa;IAQb;;;;;OAKG;IACH,gBAAgB;IAiBhB;;;;OAIG;IACH,YAAY;IAWZ;;OAEG;IACH,iBAAiB;IAIjB;;;;;;;OAOG;IACH,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAqBnC;;;;;;;;;OASG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa;IAqClC;;;;;;;OAOG;IACH,wBAAwB,CAAC,UAAU,EAAE,OAAO;IAwB5C;;;;;;;OAOG;IACH,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAwBxC;;;;OAIG;IACH,uBAAuB;IAWvB;;OAEG;IACH,SAAS;IAYT,MAAM;CA2BT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/tabs/tabs.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAKrC,sDAAsD;AACtD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAK;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAQ;IAEzB;;;;;OAKG;IAEH,KAAK,CAAC,EAAE,OAAO,CAAS;IAExB;;OAEG;IAEH,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9B;;OAEG;IAEH,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAEpC;;OAEG;IAEH,eAAe,EAAE,WAAW,CAAC;IAE7B;;OAEG;IAEH,mBAAmB,EAAE,WAAW,CAAC;IAEjC;;;;OAIG;IACH,IAAI,KAAK,YAER;IAED;;OAEG;;IAgBH;;;OAGG;IACH,iBAAiB;IAKjB;;;;OAIG;IACH,oBAAoB;IAKpB;;;;;;OAMG;IACG,YAAY;IAiBlB;;;;;OAKG;IACG,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAqBrD;;;;;OAKG;IACH,YAAY;IAKZ;;;;;OAKG;IACH,YAAY;IAKZ;;;OAGG;IACH,UAAU;IAcV;;;OAGG;IACH,QAAQ;IAQR;;;;;OAKG;IACH,YAAY;IAYZ;;;OAGG;IACH,aAAa;IAQb;;;;;OAKG;IACH,gBAAgB;IAiBhB;;;;OAIG;IACH,YAAY;IAWZ;;OAEG;IACH,iBAAiB;IAIjB;;;;;;;OAOG;IACH,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAqBnC;;;;;;;;;OASG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa;IAqClC;;;;;;;OAOG;IACH,wBAAwB,CAAC,UAAU,EAAE,OAAO;IAwB5C;;;;;;;OAOG;IACH,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAwBxC;;;;OAIG;IACH,uBAAuB;IAWvB;;OAEG;IACH,SAAS;IAWX;;;;;OAKG;IAEC,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAE9B,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAiBtB,MAAM;CA2BT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/tabs/tabs.js

@@ -8,6 +8,7 @@ import { html, } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import styles from './tabs.styles.js';
 let tabId = 1;
 /**
@@ -36,6 +37,8 @@ let tabId = 1;
  *
  * @slot default - Default, unnamed slot container for each `cre8-tab` button
  * @slot panel - Container for each `cre8-tab-panel` content item
+ *
+ * @fires tab-change - Fires when the active tab changes. `event.detail` is `{ value, activeTabIndex }`.
  */
 export class Cre8Tabs extends Cre8Element {
     /**
@@ -125,6 +128,11 @@ export class Cre8Tabs extends Cre8Element {
      *    If the new value doesn't equal the old value, activate the proper tab
      */
     async updated(changedProperties) {
+        // Generated tabs and panels must exist before the existing logic below
+        // wires up indices and active state, so this runs first.
+        if (changedProperties.has('items')) {
+            syncLightChildren(this, this.buildComposition());
+        }
         changedProperties.forEach(async (oldValue, propName) => {
             if (propName === 'activeIndex' && this.activeIndex !== oldValue) {
                 await this.updateComplete;
@@ -260,7 +268,7 @@ export class Cre8Tabs extends Cre8Element {
      * 2. If tab is active, make the previous selected tab inactive.
      * 3. Set the clicked tab active.
      * 4. Emit the custom event.
-     * @fires tabSelected
+     * @fires tab-select
      */
     handleTabSelected(event) {
         const { target } = event;
@@ -331,7 +339,7 @@ export class Cre8Tabs extends Cre8Element {
      * 2. If current activeIndex is in first position then move the tab focus to last tab.
      * 3. Set the active tab and focus.
      * 4. Emit custom event.
-     * @fires tabChange
+     * @fires tab-change
      */
     setSelectedToPreviousTab(currentTab) {
         /* 1 */
@@ -360,7 +368,7 @@ export class Cre8Tabs extends Cre8Element {
      * 2. If current activeIndex is in last position then move the tab focus to first tab.
      * 3. Set the active tab and focus.
      * 4. Emit custom event.
-     * @fires tabChange
+     * @fires tab-change
      */
     setSelectedToNextTab(currentTab) {
         /* 1 */
@@ -401,7 +409,7 @@ export class Cre8Tabs extends Cre8Element {
      * Emit custom event
      */
     emitEvent() {
-        const customEvent = new CustomEvent('tabChange', {
+        const customEvent = new CustomEvent('tab-change', {
             detail: {
                 value: this.activeTab,
                 activeTabIndex: this.activeIndex,
@@ -409,7 +417,24 @@ export class Cre8Tabs extends Cre8Element {
             bubbles: true,
             composed: true,
         });
-        this.dispatchEvent(customEvent);
+        this.dispatchWithLegacyAlias(customEvent);
+    }
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.items)
+            return null;
+        const tabs = this.items.map((item, index) => ({
+            tag: 'cre8-tab',
+            props: { index },
+            text: item.label,
+        }));
+        const panels = this.items.map((item, index) => ({
+            tag: 'cre8-tab-panel',
+            props: { index },
+            slot: 'panel',
+            text: item.content ?? '',
+        }));
+        return [...tabs, ...panels];
     }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-tabs', {
@@ -469,6 +494,9 @@ __decorate([
 __decorate([
     query('.cre8-c-tabs__list')
 ], Cre8Tabs.prototype, "_Cre8TabsHeaderList", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8Tabs.prototype, "items", void 0);
 if (customElements.get('cre8-tabs') === undefined) {
     customElements.define('cre8-tabs', Cre8Tabs);
 }

package/lib/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../components/tabs/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, } from 'lit';\nimport {\n    property, query, queryAssignedElements, state,\n} from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8TabPanel } from '../tab-panel/tab-panel';\nimport { Cre8Tab } from '../tab/tab';\nimport styles from './tabs.styles.js';\n\nlet tabId = 1;\n\n/**\n * Tabs are used to quickly navigate back and forth between views.\n * The Tab design and interaction varies depending on the requirements for your organization and project.\n * Standardizing on the best individual controls will improve usability and reduce development and QA time.\n *\n * Create a standard set of Tab controls:\n * Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).\n *\n * ## Usability Guidelines\n * - The selected Tab should be visually differentiated from the other Tabs.\n *   The deselected Tabs should still look enabled.\n *   Dimming the other Tabs decreases the legibility of items that are actually active and clickable.\n * - There must be a minimum of 2 Tabs.\n * - Showing status in a Tab is non-standard (such as 0%, 10%).\n * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab\n *   which can be a rollup of content across other Tabs.\n * - Keep the font size of the Tabs the same.\n *   If the Tabs are a fixed width and one of the labels is too long,\n *   don't resize the text to fit and consider wrapping text to a second line.\n * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.\n * - Try not to use more than six Tabs to keep the UI uncluttered.\n * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs.\n *   Find alternate ways of navigating page hierarchy.\n *\n * @slot default - Default, unnamed slot container for each `cre8-tab` button\n * @slot panel - Container for each `cre8-tab-panel` content item\n */\n\nexport class Cre8Tabs extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Tab sizes\n     * - **default** displays the cre8-tab text with cre8-typography-label-default\n     * - **sm** displays the cre8-tab text with cre8-typography-label-small\n     * @type {\"sm\"}\n     * @attr\n     */\n    @property()\n    size?: 'sm';\n\n    /**\n     * Displays a set of tabs with a spanning the width of the element\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    fullWidth?: boolean;\n\n    /**\n     * Auto Increment id to sync tab and tab panel\n     *\n     * _*This property is dynamically set_\n     */\n    tabId: string;\n\n    /**\n     * Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)\n     * @attr {number}\n     */\n    @property({ type: Number })\n    activeIndex?: number = 0;\n\n    /**\n     * The active tab\n     *\n     * _*This property is dynamically set_\n     */\n    @state()\n    activeTab?: Cre8Tab;\n\n    /**\n     * If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isStart?: boolean = true;\n\n    /**\n     * If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isEnd?: boolean = false;\n\n    /**\n     * Query all the tab items\n     */\n    @queryAssignedElements()\n    _Cre8TabItems: Array<Cre8Tab>;\n\n    /**\n     * Query all the tab panels\n     */\n    @queryAssignedElements({ slot: 'panel' })\n    _Cre8TabPanels: Array<Cre8TabPanel>;\n\n    /**\n     * Query the tabs header element\n     */\n    @query('.cre8-c-tabs__header')\n    _Cre8TabsHeader: HTMLElement;\n\n    /**\n     * Query the tabs header list element\n     */\n    @query('.cre8-c-tabs__list')\n    _Cre8TabsHeaderList: HTMLElement;\n\n    /**\n     * Query the document direction value\n     *\n     * _*This property is dynamically set_\n     */\n    get isRTL() {\n        return document.dir === 'rtl';\n    }\n\n    /**\n     * Initialize Functions\n     */\n    constructor() {\n        super();\n        this.handleScroll = this.handleScroll.bind(this);\n        this.handleResize = this.handleResize.bind(this);\n        this.setIsStart = this.setIsStart.bind(this);\n        this.setIsEnd = this.setIsEnd.bind(this);\n        this.emitEvent = this.emitEvent.bind(this);\n\n        /**\n         * Set the tab id.\n         */\n        this.tabId = `cre8-tabpanel-${tabId}`;\n        tabId += 1;\n    }\n\n    /**\n     * Connected Callback Lifecycle\n     * 1. Fires each time a custom element is appended into a document-connected element.\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * Disconnected Callback Lifecycle\n     * 1. Removes the event listeners to ensure that any memory allocated by your component\n     *    will be cleaned up when your component is destroyed or disconnected from the page.\n     */\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        window.removeEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * First Updated Lifecycle Hook\n     * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.\n     * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.\n     * 3. Initialize isStart and isEnd.\n     * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.\n     */\n    async firstUpdated() {\n        /* 1 */\n        this.setTabAttributes();\n        await this.updateComplete;\n\n        /* 2 */\n        this.activeTab = this._Cre8TabItems[this.activeIndex] || this._Cre8TabItems[0];\n        this.setActiveTab();\n\n        /* 3 */\n        this.setIsStart();\n        this.setIsEnd();\n\n        /* 4 */\n        this.setTabVariant();\n    }\n\n    /**\n     * Updated Lifecycle Hook\n     * 1. remove selected state from previously selected tab\n     * 2. Checks to see if the old `activeIndex` property has been updated.\n     *    If the new value doesn't equal the old value, activate the proper tab\n     */\n    async updated(changedProperties: Map<string, unknown>) {\n        changedProperties.forEach(async (oldValue, propName) => {\n            if (propName === 'activeIndex' && this.activeIndex !== oldValue) {\n                await this.updateComplete;\n\n                if (this.activeTab) {\n                    this.removePreviousActiveTab(); /* 1 */\n                }\n\n                this.activeTab = this._Cre8TabItems[this.activeIndex];\n                this.setActiveTab(); /* 2 */\n            }\n        });\n    }\n\n    /**\n     * Handle Resize\n     * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires resize\n     */\n    handleResize() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Handle Scroll\n     * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires scroll\n     */\n    handleScroll() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Set isStart State\n     * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     */\n    setIsStart() {\n        if (this.isRTL) {\n            if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n                this.isStart = true;\n            } else {\n                this.isStart = false;\n            }\n        } else if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n            this.isStart = false;\n        } else {\n            this.isStart = true;\n        }\n    }\n\n    /**\n     * Set isEnd State\n     * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     */\n    setIsEnd() {\n        if (this.isInViewport() === true) {\n            this.isEnd = true;\n        } else {\n            this.isEnd = false;\n        }\n    }\n\n    /**\n     * Check if last overflow list item is in the viewport\n     * 1. Get children of the overflow list inner container and get bounding client rectangle of last child\n     * 2. Return true if the left property is greater than or equal to 0 and if the right property is less\n     * than or equal to the window inner width or document client width\n     */\n    isInViewport() {\n        const lastChild = this._Cre8TabItems[this._Cre8TabItems.length - 1];\n        const tabElement = lastChild.shadowRoot?.querySelector('.cre8-c-tab');\n        if (!tabElement) {\n            return false; // Return false if the tab element is not found\n        }\n\n        const rect = tabElement.getBoundingClientRect(); /* 1 */\n        const windowWidth = window.innerWidth || document.documentElement.clientWidth;\n        return rect.left >= 0 && rect.right <= windowWidth; /* 2 */\n    }\n\n    /**\n     * Set Tab Variant\n     * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.\n     */\n    setTabVariant() {\n        if (this.size === 'sm') {\n            this._Cre8TabItems.forEach((tab: Cre8Tab) => {\n                tab.size = 'sm';\n            });\n        }\n    }\n\n    /**\n     * Set the attributes on tab and tab panel\n     * 1. Sets the index value on the tab items.\n     * 2. Sets the `aria-labelledby` on the tab items.\n     * 3. Set the index and id on the tab-panel to match the tab.\n     */\n    setTabAttributes() {\n        this._Cre8TabItems.forEach((tab, index) => {\n            /* 1 */\n            tab.index = index;\n\n            /* 2 */\n            const ariaLabelledBy = tab.ariaLabelledBy;\n            const id = ariaLabelledBy || nanoid();\n            tab.ariaLabelledBy = id;\n\n\n            /* 3 */\n            const tabPanel = this._Cre8TabPanels[index];\n            tabPanel.index = index;\n        });\n    }\n\n    /**\n     * Set Active Tab\n     * 1. Sets the active state for the selected tab.\n     * 2. Sets the active state for the tab panel with the same index value as the selected tab.\n     */\n    setActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = true;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = true;\n        }\n    }\n\n    /**\n     * Set Active Tab Focus\n     */\n    setActiveTabFocus() {\n        this.activeTab.shadowRoot?.querySelector<HTMLElement>('.cre8-c-tab').focus();\n    }\n\n    /**\n     * Handle Tab Selected\n     * 1. Only continue if event target is a tab\n     * 2. If tab is active, make the previous selected tab inactive.\n     * 3. Set the clicked tab active.\n     * 4. Emit the custom event.\n     * @fires tabSelected\n     */\n    handleTabSelected(event: MouseEvent) {\n        const { target } = event;\n\n        /* 1 */\n        if (this._Cre8TabItems.includes(target as Cre8Tab)) {\n            /* 2 */\n            if (this.activeTab) {\n                this.removePreviousActiveTab();\n            }\n\n            /* 3 */\n            this.activeTab = target as Cre8Tab;\n            const activeIndex = this._Cre8TabItems.findIndex((tab) => tab === this.activeTab);\n            this.activeIndex = activeIndex;\n            this.setActiveTab();\n\n            /* 4 */\n            this.emitEvent();\n        }\n    }\n\n    /**\n     * Handle Keydown\n     * 1. If the active tab is not focused then handle the keydown events.\n     * 2. On keydown of the right arrow, make the next tab active.\n     * 3. On keydown of the left arrow, make the previous tab active.\n     * 4. On keydown of the home key, make the first tab active.\n     * 5. On keydown of the end key, make the last tab active.\n     * 6. On keydown of the escape key, remove the focus.\n     * @fires keydown\n     */\n    handleKeydown(event: KeyboardEvent) {\n        /* 1 */\n        const { target } = event;\n        const focused = document.activeElement as Cre8Tab;\n        if (!focused.matches('cre8-tab')) {\n            return;\n        }\n        switch (event.key) {\n            /* 2 */\n            case 'ArrowRight':\n                event.preventDefault();\n                this.setSelectedToNextTab(target as Cre8Tab);\n                break;\n            /* 3 */\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(target as Cre8Tab);\n                break;\n            /* 4 */\n            case 'Home':\n                event.preventDefault();\n                this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);\n                break;\n            /* 5 */\n            case 'End':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(this._Cre8TabItems[0]);\n                break;\n            /* 6 */\n            case 'Escape':\n                this.activeTab.blur();\n                break;\n            default:\n            // no default\n        }\n    }\n\n    /**\n     * Set Selected To Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in first position then move the tab focus to last tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tabChange\n     */\n    setSelectedToPreviousTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === 0) {\n            this.activeIndex = tabListLength;\n            this.activeTab = this._Cre8TabItems[tabListLength];\n        } else {\n            const previousIndex = activeIndex - 1;\n            this.activeIndex = previousIndex;\n            this.activeTab = this._Cre8TabItems[previousIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Set Selected To Next Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in last position then move the tab focus to first tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tabChange\n     */\n    setSelectedToNextTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === tabListLength) {\n            this.activeIndex = 0;\n            this.activeTab = this._Cre8TabItems[0];\n        } else {\n            const nextIndex = activeIndex + 1;\n            this.activeIndex = nextIndex;\n            this.activeTab = this._Cre8TabItems[nextIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Remove Active from Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab\n     * 2. If current activeIndex is in first position then move the tab focus to last tab\n     */\n    removePreviousActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = false;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = false;\n        }\n    }\n\n    /**\n     * Emit custom event\n     */\n    emitEvent() {\n        const customEvent = new CustomEvent('tabChange', {\n            detail: {\n                value: this.activeTab,\n                activeTabIndex: this.activeIndex,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchEvent(customEvent);\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-tabs', {\n            'cre8-is-start': this.isStart === true,\n            'cre8-is-end': this.isEnd === true,\n            'cre8-c-tabs--full-width': this.fullWidth,\n        });\n\n        return html`\n        <div class=\"${componentClassNames}\">\n            <div class=\"cre8-c-tabs__header\">\n                <div\n                    class=\"cre8-c-tabs__list\"\n                    role=\"tablist\"\n                    tabindex=0\n                    @scroll=${this.handleScroll}\n                    @keydown=${this.handleKeydown}\n                    @click=${this.handleTabSelected}\n                >\n                    <slot></slot>\n                </div>\n            </div>\n            <div class=\"cre8-c-tabs__body\">\n                <slot name=\"panel\"></slot>\n            </div>\n        </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-tabs') === undefined) {\n    customElements.define('cre8-tabs', Cre8Tabs);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-tabs': Cre8Tabs;\n    }\n}\n\nexport default Cre8Tabs;\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../components/tabs/tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, } from 'lit';\nimport {\n    property, query, queryAssignedElements, state,\n} from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport { Cre8TabPanel } from '../tab-panel/tab-panel';\nimport { Cre8Tab } from '../tab/tab';\nimport styles from './tabs.styles.js';\n\nlet tabId = 1;\n\n/** One tab and its panel in a data-driven tab set. */\nexport interface Cre8TabItemData {\n  label: string;\n  /** Panel content. Omit to supply the panel yourself. */\n  content?: string;\n}\n\n/**\n * Tabs are used to quickly navigate back and forth between views.\n * The Tab design and interaction varies depending on the requirements for your organization and project.\n * Standardizing on the best individual controls will improve usability and reduce development and QA time.\n *\n * Create a standard set of Tab controls:\n * Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).\n *\n * ## Usability Guidelines\n * - The selected Tab should be visually differentiated from the other Tabs.\n *   The deselected Tabs should still look enabled.\n *   Dimming the other Tabs decreases the legibility of items that are actually active and clickable.\n * - There must be a minimum of 2 Tabs.\n * - Showing status in a Tab is non-standard (such as 0%, 10%).\n * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab\n *   which can be a rollup of content across other Tabs.\n * - Keep the font size of the Tabs the same.\n *   If the Tabs are a fixed width and one of the labels is too long,\n *   don't resize the text to fit and consider wrapping text to a second line.\n * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.\n * - Try not to use more than six Tabs to keep the UI uncluttered.\n * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs.\n *   Find alternate ways of navigating page hierarchy.\n *\n * @slot default - Default, unnamed slot container for each `cre8-tab` button\n * @slot panel - Container for each `cre8-tab-panel` content item\n *\n * @fires tab-change - Fires when the active tab changes. `event.detail` is `{ value, activeTabIndex }`.\n */\n\n\nexport class Cre8Tabs extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Tab sizes\n     * - **default** displays the cre8-tab text with cre8-typography-label-default\n     * - **sm** displays the cre8-tab text with cre8-typography-label-small\n     * @type {\"sm\"}\n     * @attr\n     */\n    @property()\n    size?: 'sm';\n\n    /**\n     * Displays a set of tabs with a spanning the width of the element\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    fullWidth?: boolean;\n\n    /**\n     * Auto Increment id to sync tab and tab panel\n     *\n     * _*This property is dynamically set_\n     */\n    tabId: string;\n\n    /**\n     * Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)\n     * @attr {number}\n     */\n    @property({ type: Number })\n    activeIndex?: number = 0;\n\n    /**\n     * The active tab\n     *\n     * _*This property is dynamically set_\n     */\n    @state()\n    activeTab?: Cre8Tab;\n\n    /**\n     * If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isStart?: boolean = true;\n\n    /**\n     * If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isEnd?: boolean = false;\n\n    /**\n     * Query all the tab items\n     */\n    @queryAssignedElements()\n    _Cre8TabItems: Array<Cre8Tab>;\n\n    /**\n     * Query all the tab panels\n     */\n    @queryAssignedElements({ slot: 'panel' })\n    _Cre8TabPanels: Array<Cre8TabPanel>;\n\n    /**\n     * Query the tabs header element\n     */\n    @query('.cre8-c-tabs__header')\n    _Cre8TabsHeader: HTMLElement;\n\n    /**\n     * Query the tabs header list element\n     */\n    @query('.cre8-c-tabs__list')\n    _Cre8TabsHeaderList: HTMLElement;\n\n    /**\n     * Query the document direction value\n     *\n     * _*This property is dynamically set_\n     */\n    get isRTL() {\n        return document.dir === 'rtl';\n    }\n\n    /**\n     * Initialize Functions\n     */\n    constructor() {\n        super();\n        this.handleScroll = this.handleScroll.bind(this);\n        this.handleResize = this.handleResize.bind(this);\n        this.setIsStart = this.setIsStart.bind(this);\n        this.setIsEnd = this.setIsEnd.bind(this);\n        this.emitEvent = this.emitEvent.bind(this);\n\n        /**\n         * Set the tab id.\n         */\n        this.tabId = `cre8-tabpanel-${tabId}`;\n        tabId += 1;\n    }\n\n    /**\n     * Connected Callback Lifecycle\n     * 1. Fires each time a custom element is appended into a document-connected element.\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * Disconnected Callback Lifecycle\n     * 1. Removes the event listeners to ensure that any memory allocated by your component\n     *    will be cleaned up when your component is destroyed or disconnected from the page.\n     */\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        window.removeEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * First Updated Lifecycle Hook\n     * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.\n     * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.\n     * 3. Initialize isStart and isEnd.\n     * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.\n     */\n    async firstUpdated() {\n        /* 1 */\n        this.setTabAttributes();\n        await this.updateComplete;\n\n        /* 2 */\n        this.activeTab = this._Cre8TabItems[this.activeIndex] || this._Cre8TabItems[0];\n        this.setActiveTab();\n\n        /* 3 */\n        this.setIsStart();\n        this.setIsEnd();\n\n        /* 4 */\n        this.setTabVariant();\n    }\n\n    /**\n     * Updated Lifecycle Hook\n     * 1. remove selected state from previously selected tab\n     * 2. Checks to see if the old `activeIndex` property has been updated.\n     *    If the new value doesn't equal the old value, activate the proper tab\n     */\n    async updated(changedProperties: Map<string, unknown>) {\n        // Generated tabs and panels must exist before the existing logic below\n        // wires up indices and active state, so this runs first.\n        if (changedProperties.has('items')) {\n            syncLightChildren(this, this.buildComposition());\n        }\n\n        changedProperties.forEach(async (oldValue, propName) => {\n            if (propName === 'activeIndex' && this.activeIndex !== oldValue) {\n                await this.updateComplete;\n\n                if (this.activeTab) {\n                    this.removePreviousActiveTab(); /* 1 */\n                }\n\n                this.activeTab = this._Cre8TabItems[this.activeIndex];\n                this.setActiveTab(); /* 2 */\n            }\n        });\n    }\n\n    /**\n     * Handle Resize\n     * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires resize\n     */\n    handleResize() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Handle Scroll\n     * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires scroll\n     */\n    handleScroll() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Set isStart State\n     * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     */\n    setIsStart() {\n        if (this.isRTL) {\n            if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n                this.isStart = true;\n            } else {\n                this.isStart = false;\n            }\n        } else if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n            this.isStart = false;\n        } else {\n            this.isStart = true;\n        }\n    }\n\n    /**\n     * Set isEnd State\n     * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     */\n    setIsEnd() {\n        if (this.isInViewport() === true) {\n            this.isEnd = true;\n        } else {\n            this.isEnd = false;\n        }\n    }\n\n    /**\n     * Check if last overflow list item is in the viewport\n     * 1. Get children of the overflow list inner container and get bounding client rectangle of last child\n     * 2. Return true if the left property is greater than or equal to 0 and if the right property is less\n     * than or equal to the window inner width or document client width\n     */\n    isInViewport() {\n        const lastChild = this._Cre8TabItems[this._Cre8TabItems.length - 1];\n        const tabElement = lastChild.shadowRoot?.querySelector('.cre8-c-tab');\n        if (!tabElement) {\n            return false; // Return false if the tab element is not found\n        }\n\n        const rect = tabElement.getBoundingClientRect(); /* 1 */\n        const windowWidth = window.innerWidth || document.documentElement.clientWidth;\n        return rect.left >= 0 && rect.right <= windowWidth; /* 2 */\n    }\n\n    /**\n     * Set Tab Variant\n     * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.\n     */\n    setTabVariant() {\n        if (this.size === 'sm') {\n            this._Cre8TabItems.forEach((tab: Cre8Tab) => {\n                tab.size = 'sm';\n            });\n        }\n    }\n\n    /**\n     * Set the attributes on tab and tab panel\n     * 1. Sets the index value on the tab items.\n     * 2. Sets the `aria-labelledby` on the tab items.\n     * 3. Set the index and id on the tab-panel to match the tab.\n     */\n    setTabAttributes() {\n        this._Cre8TabItems.forEach((tab, index) => {\n            /* 1 */\n            tab.index = index;\n\n            /* 2 */\n            const ariaLabelledBy = tab.ariaLabelledBy;\n            const id = ariaLabelledBy || nanoid();\n            tab.ariaLabelledBy = id;\n\n\n            /* 3 */\n            const tabPanel = this._Cre8TabPanels[index];\n            tabPanel.index = index;\n        });\n    }\n\n    /**\n     * Set Active Tab\n     * 1. Sets the active state for the selected tab.\n     * 2. Sets the active state for the tab panel with the same index value as the selected tab.\n     */\n    setActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = true;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = true;\n        }\n    }\n\n    /**\n     * Set Active Tab Focus\n     */\n    setActiveTabFocus() {\n        this.activeTab.shadowRoot?.querySelector<HTMLElement>('.cre8-c-tab').focus();\n    }\n\n    /**\n     * Handle Tab Selected\n     * 1. Only continue if event target is a tab\n     * 2. If tab is active, make the previous selected tab inactive.\n     * 3. Set the clicked tab active.\n     * 4. Emit the custom event.\n     * @fires tab-select\n     */\n    handleTabSelected(event: MouseEvent) {\n        const { target } = event;\n\n        /* 1 */\n        if (this._Cre8TabItems.includes(target as Cre8Tab)) {\n            /* 2 */\n            if (this.activeTab) {\n                this.removePreviousActiveTab();\n            }\n\n            /* 3 */\n            this.activeTab = target as Cre8Tab;\n            const activeIndex = this._Cre8TabItems.findIndex((tab) => tab === this.activeTab);\n            this.activeIndex = activeIndex;\n            this.setActiveTab();\n\n            /* 4 */\n            this.emitEvent();\n        }\n    }\n\n    /**\n     * Handle Keydown\n     * 1. If the active tab is not focused then handle the keydown events.\n     * 2. On keydown of the right arrow, make the next tab active.\n     * 3. On keydown of the left arrow, make the previous tab active.\n     * 4. On keydown of the home key, make the first tab active.\n     * 5. On keydown of the end key, make the last tab active.\n     * 6. On keydown of the escape key, remove the focus.\n     * @fires keydown\n     */\n    handleKeydown(event: KeyboardEvent) {\n        /* 1 */\n        const { target } = event;\n        const focused = document.activeElement as Cre8Tab;\n        if (!focused.matches('cre8-tab')) {\n            return;\n        }\n        switch (event.key) {\n            /* 2 */\n            case 'ArrowRight':\n                event.preventDefault();\n                this.setSelectedToNextTab(target as Cre8Tab);\n                break;\n            /* 3 */\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(target as Cre8Tab);\n                break;\n            /* 4 */\n            case 'Home':\n                event.preventDefault();\n                this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);\n                break;\n            /* 5 */\n            case 'End':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(this._Cre8TabItems[0]);\n                break;\n            /* 6 */\n            case 'Escape':\n                this.activeTab.blur();\n                break;\n            default:\n            // no default\n        }\n    }\n\n    /**\n     * Set Selected To Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in first position then move the tab focus to last tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tab-change\n     */\n    setSelectedToPreviousTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === 0) {\n            this.activeIndex = tabListLength;\n            this.activeTab = this._Cre8TabItems[tabListLength];\n        } else {\n            const previousIndex = activeIndex - 1;\n            this.activeIndex = previousIndex;\n            this.activeTab = this._Cre8TabItems[previousIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Set Selected To Next Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in last position then move the tab focus to first tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tab-change\n     */\n    setSelectedToNextTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === tabListLength) {\n            this.activeIndex = 0;\n            this.activeTab = this._Cre8TabItems[0];\n        } else {\n            const nextIndex = activeIndex + 1;\n            this.activeIndex = nextIndex;\n            this.activeTab = this._Cre8TabItems[nextIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Remove Active from Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab\n     * 2. If current activeIndex is in first position then move the tab focus to last tab\n     */\n    removePreviousActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = false;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = false;\n        }\n    }\n\n    /**\n     * Emit custom event\n     */\n    emitEvent() {\n        const customEvent = new CustomEvent('tab-change', {\n            detail: {\n                value: this.activeTab,\n                activeTabIndex: this.activeIndex,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchWithLegacyAlias(customEvent);\n    }\n  /**\n   * Tabs for a data-driven tab set. Each entry becomes a `cre8-tab` in the\n   * default slot *and* a `cre8-tab-panel` in the `panel` slot, with matching\n   * indices — two slots kept in step, which is the part that goes wrong when\n   * these are written by hand.\n   */\n  @property({ type: Array })\n      items?: Cre8TabItemData[];\n\n  /** The composition the data property stands for. */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.items) return null;\n      const tabs: ChildSpec[] = this.items.map((item, index) => ({\n          tag: 'cre8-tab',\n          props: { index },\n          text: item.label,\n      }));\n      const panels: ChildSpec[] = this.items.map((item, index) => ({\n          tag: 'cre8-tab-panel',\n          props: { index },\n          slot: 'panel',\n          text: item.content ?? '',\n      }));\n      return [...tabs, ...panels];\n  }\n\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-tabs', {\n            'cre8-is-start': this.isStart === true,\n            'cre8-is-end': this.isEnd === true,\n            'cre8-c-tabs--full-width': this.fullWidth,\n        });\n\n        return html`\n        <div class=\"${componentClassNames}\">\n            <div class=\"cre8-c-tabs__header\">\n                <div\n                    class=\"cre8-c-tabs__list\"\n                    role=\"tablist\"\n                    tabindex=0\n                    @scroll=${this.handleScroll}\n                    @keydown=${this.handleKeydown}\n                    @click=${this.handleTabSelected}\n                >\n                    <slot></slot>\n                </div>\n            </div>\n            <div class=\"cre8-c-tabs__body\">\n                <slot name=\"panel\"></slot>\n            </div>\n        </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-tabs') === undefined) {\n    customElements.define('cre8-tabs', Cre8Tabs);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-tabs': Cre8Tabs;\n    }\n}\n\nexport default Cre8Tabs;\n"]}

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

@@ -1,4 +1,12 @@
 import { Cre8Element } from '../cre8-element';
+/** One tag in a data-driven tag list. */
+export interface Cre8TagData {
+    text: string;
+    variant?: 'neutral' | 'branded' | 'neutral-hybrid';
+    shape?: 'square' | 'round';
+    type?: 'checkbox' | 'radio';
+    disabled?: boolean;
+}
 /**
  * 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.
@@ -19,6 +27,15 @@ export declare class Cre8TagList extends Cre8Element {
     fieldId?: string;
     firstUpdated(): void;
     private _initializeAria;
+    /**
+     * Tags for a data-driven tag list. Set this and the list builds its own
+     * `cre8-tag` children in the light DOM. Leave it unset to compose them
+     * yourself.
+     */
+    tags?: Cre8TagData[];
+    /** The composition the data property stands for. */
+    private buildComposition;
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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;;;;;;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"}
+{"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;AAI9C,yCAAyC;AACzC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC;IACnD,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AAEH,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;IAGvB;;;;OAIG;IAEC,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IAEzB,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAexB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF;AAED,eAAe,WAAW,CAAC"}