@tmorrow/cre8-wc 2.0.7 → 2.0.8

package/lib/components/radio-field/radio-field.d.ts

@@ -1,5 +1,13 @@
 import { Cre8Element } from '../cre8-element';
 import '../field-note/field-note';
+/** One option in a data-driven radio field. */
+export interface Cre8RadioItemData {
+    label: string;
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+}
 /**
  * Radio Field is the parent container for `radio-field-item`.
  * It is required to allow for grouping numerous radio fields that need additional context (in the form of `<legend>`).
@@ -45,6 +53,31 @@ export declare class Cre8RadioField extends Cre8Element {
      * Radio field legend label
      */
     label?: string;
+    /**
+     * Options for a data-driven radio field. Each becomes a
+     * `cre8-radio-field-item` sharing the field's `name`, which is what the form
+     * submits under. Exclusivity is enforced by the field itself — see
+     * `enforceSingleSelection`, and do not assume `name` alone does it.
+     */
+    items?: Cre8RadioItemData[];
+    /** Form control name shared by every generated option. */
+    name?: string;
+    /** The composition the data property stands for. */
+    private buildComposition;
+    protected updated(changed: Map<string, unknown>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Keep the group to one selection.
+     *
+     * A native radio group is formed by `name`, but only within one tree scope —
+     * and each `cre8-radio-field-item` keeps its `input` in its own shadow root,
+     * so the browser never sees them as siblings and every option stays checked
+     * once clicked. That is true of a hand-written field too, not just a generated
+     * one, which is why the fix lives here on the group rather than in the
+     * flattened path.
+     */
+    private enforceSingleSelection;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/lib/components/radio-field/radio-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-field.d.ts","sourceRoot":"","sources":["../../../components/radio-field/radio-field.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAGlC;;;;;;;;GAQG;AAEH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;OAGG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM;CAwBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"radio-field.d.ts","sourceRoot":"","sources":["../../../components/radio-field/radio-field.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,0BAA0B,CAAC;AAGlC,+CAA+C;AAC/C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AAGH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;OAGG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IAEC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEhC,0DAA0D;IAEtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAexB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;;;;;;;OASG;IACH,OAAO,CAAC,sBAAsB,CAS5B;IAGF,MAAM;CAwBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}

package/lib/components/radio-field/radio-field.js

@@ -8,6 +8,7 @@ import { html, } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import '../field-note/field-note';
 import styles from './radio-field.styles.js';
 /**
@@ -20,6 +21,61 @@ import styles from './radio-field.styles.js';
  * @slot - The component content, which should be a set of `radio-field-item`s
  */
 export class Cre8RadioField extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Keep the group to one selection.
+         *
+         * A native radio group is formed by `name`, but only within one tree scope —
+         * and each `cre8-radio-field-item` keeps its `input` in its own shadow root,
+         * so the browser never sees them as siblings and every option stays checked
+         * once clicked. That is true of a hand-written field too, not just a generated
+         * one, which is why the fix lives here on the group rather than in the
+         * flattened path.
+         */
+        this.enforceSingleSelection = (event) => {
+            const source = event.target;
+            if (!source)
+                return;
+            const items = [...this.querySelectorAll('cre8-radio-field-item')];
+            const selected = items.find((item) => item === source || item.contains(source));
+            if (!selected)
+                return;
+            for (const item of items) {
+                if (item !== selected)
+                    item.checked = false;
+            }
+        };
+    }
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.items)
+            return null;
+        return this.items.map((item) => ({
+            tag: 'cre8-radio-field-item',
+            props: {
+                label: item.label,
+                value: item.value,
+                checked: item.checked,
+                disabled: item.disabled,
+                required: item.required,
+                name: this.name,
+            },
+        }));
+    }
+    updated(changed) {
+        if (['items', 'name'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('change', this.enforceSingleSelection);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('change', this.enforceSingleSelection);
+        super.disconnectedCallback();
+    }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-radio-field', {});
         return html `
@@ -66,6 +122,12 @@ __decorate([
 __decorate([
     property()
 ], Cre8RadioField.prototype, "label", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8RadioField.prototype, "items", void 0);
+__decorate([
+    property()
+], Cre8RadioField.prototype, "name", void 0);
 if (customElements.get('cre8-radio-field') === undefined) {
     customElements.define('cre8-radio-field', Cre8RadioField);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"radio-field.js","sourceRoot":"","sources":["../../../components/radio-field/radio-field.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,0BAA0B,CAAC;AAClC,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;;;;;GAQG;AAEH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAmD7C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;yBACQ,mBAAmB,uBAAuB,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qDAC7C,IAAI,CAAC,KAAK;;;;;;UAMrD,IAAI,CAAC,SAAS;YAChB,CAAC,CAAC,IAAI,CAAA;sBACQ,IAAI,CAAC,iBAAiB;eAC7B,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qBACzB,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;uBAC/B,IAAI,CAAC,SAAS;qBAChB,IAAI,CAAC,OAAO;;YAErB,IAAI,CAAC,SAAS;2BACC,CAAC,CAAC,CAAC,EAAE;;KAE3B,CAAC;IACJ,CAAC;;AAzEQ,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,EAAE;iDACY;AAOnB;IADH,QAAQ,EAAE;uDACkB;AAOzB;IADH,QAAQ,EAAE;yDACoB;AAO3B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACX;AAO5B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAOpB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACrB;AAMlB;IADH,QAAQ,EAAE;6CACQ;AA4BrB,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,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 '../field-note/field-note';\nimport styles from './radio-field.styles.js';\n\n/**\n * Radio Field is the parent container for `radio-field-item`.\n * It is required to allow for grouping numerous radio fields that need additional context (in the form of `<legend>`).\n * It also provides accessibility roles, aria attributes and field note messaging on the group.\n *\n * See [radio-field-item](?path=/story/cre8-components-radio-field-item--default) for more guidance on its usage.\n *\n * @slot - The component content, which should be a set of `radio-field-item`s\n */\n\nexport class Cre8RadioField extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Radio Field Note\n   * @attr {string}\n   */\n  @property()\n      fieldNote?: string;\n\n  /**\n   * Radio container fieldnote aria describe by\n   * @attr {string}\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * Radio container fieldnote icon name\n   * @attr {string}\n   */\n  @property()\n      fieldNoteIconName?: string;\n\n  /**\n   * Radio container fieldnote knockout\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      fieldNoteKnockout?: boolean;\n\n  /**\n   * Radio container fieldnote isSuccess\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   * Radio container fieldnote isError\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Radio field legend label\n   */\n  @property()\n      label?: string;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-radio-field', {});\n\n      return html`\n      <fieldset class=\"${componentClassNames}\" aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\">\n        <legend class=\"cre8-c-radio-field__legend\">${this.label}</legend>\n        <div class=\"cre8-c-radio-field__body\">\n          <ul class=\"cre8-c-radio-field__list\" role=\"list\">\n            <slot></slot>\n          </ul>\n        </div>\n        ${this.fieldNote\n        ? html`<cre8-field-note\n          ?inverted=${this.fieldNoteKnockout}\n          id=${ifDefined(this.ariaDescribedBy)}\n          iconName=${ifDefined(this.fieldNoteIconName)}\n          ?isSuccess=${this.isSuccess}\n          ?isError=${this.isError}\n        >\n          ${this.fieldNote}\n        </cre8-field-note>` : ''}\n      </fieldset>\n    `;\n  }\n}\n\nif (customElements.get('cre8-radio-field') === undefined) {\n    customElements.define('cre8-radio-field', Cre8RadioField);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-radio-field': Cre8RadioField;\n  }\n}\n\nexport default Cre8RadioField;\n"]}
+{"version":3,"file":"radio-field.js","sourceRoot":"","sources":["../../../components/radio-field/radio-field.ts"],"names":[],"mappings":"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","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 { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport '../field-note/field-note';\nimport styles from './radio-field.styles.js';\n\n/** One option in a data-driven radio field. */\nexport interface Cre8RadioItemData {\n  label: string;\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  required?: boolean;\n}\n\n/**\n * Radio Field is the parent container for `radio-field-item`.\n * It is required to allow for grouping numerous radio fields that need additional context (in the form of `<legend>`).\n * It also provides accessibility roles, aria attributes and field note messaging on the group.\n *\n * See [radio-field-item](?path=/story/cre8-components-radio-field-item--default) for more guidance on its usage.\n *\n * @slot - The component content, which should be a set of `radio-field-item`s\n */\n\n\nexport class Cre8RadioField extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Radio Field Note\n   * @attr {string}\n   */\n  @property()\n      fieldNote?: string;\n\n  /**\n   * Radio container fieldnote aria describe by\n   * @attr {string}\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * Radio container fieldnote icon name\n   * @attr {string}\n   */\n  @property()\n      fieldNoteIconName?: string;\n\n  /**\n   * Radio container fieldnote knockout\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      fieldNoteKnockout?: boolean;\n\n  /**\n   * Radio container fieldnote isSuccess\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   * Radio container fieldnote isError\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Radio field legend label\n   */\n  @property()\n      label?: string;\n  /**\n   * Options for a data-driven radio field. Each becomes a\n   * `cre8-radio-field-item` sharing the field's `name`, which is what the form\n   * submits under. Exclusivity is enforced by the field itself — see\n   * `enforceSingleSelection`, and do not assume `name` alone does it.\n   */\n  @property({ type: Array })\n      items?: Cre8RadioItemData[];\n\n  /** Form control name shared by every generated option. */\n  @property()\n      name?: string;\n\n  /** The composition the data property stands for. */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.items) return null;\n      return this.items.map((item) => ({\n          tag: 'cre8-radio-field-item',\n          props: {\n              label: item.label,\n              value: item.value,\n              checked: item.checked,\n              disabled: item.disabled,\n              required: item.required,\n              name: this.name,\n          },\n      }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['items', 'name'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n  connectedCallback(): void {\n      super.connectedCallback();\n      this.addEventListener('change', this.enforceSingleSelection as EventListener);\n  }\n\n  disconnectedCallback(): void {\n      this.removeEventListener('change', this.enforceSingleSelection as EventListener);\n      super.disconnectedCallback();\n  }\n\n  /**\n   * Keep the group to one selection.\n   *\n   * A native radio group is formed by `name`, but only within one tree scope —\n   * and each `cre8-radio-field-item` keeps its `input` in its own shadow root,\n   * so the browser never sees them as siblings and every option stays checked\n   * once clicked. That is true of a hand-written field too, not just a generated\n   * one, which is why the fix lives here on the group rather than in the\n   * flattened path.\n   */\n  private enforceSingleSelection = (event: Event): void => {\n      const source = event.target as HTMLElement | null;\n      if (!source) return;\n      const items = [...this.querySelectorAll('cre8-radio-field-item')];\n      const selected = items.find((item) => item === source || item.contains(source));\n      if (!selected) return;\n      for (const item of items) {\n          if (item !== selected) (item as HTMLElement & { checked?: boolean }).checked = false;\n      }\n  };\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-radio-field', {});\n\n      return html`\n      <fieldset class=\"${componentClassNames}\" aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\">\n        <legend class=\"cre8-c-radio-field__legend\">${this.label}</legend>\n        <div class=\"cre8-c-radio-field__body\">\n          <ul class=\"cre8-c-radio-field__list\" role=\"list\">\n            <slot></slot>\n          </ul>\n        </div>\n        ${this.fieldNote\n        ? html`<cre8-field-note\n          ?inverted=${this.fieldNoteKnockout}\n          id=${ifDefined(this.ariaDescribedBy)}\n          iconName=${ifDefined(this.fieldNoteIconName)}\n          ?isSuccess=${this.isSuccess}\n          ?isError=${this.isError}\n        >\n          ${this.fieldNote}\n        </cre8-field-note>` : ''}\n      </fieldset>\n    `;\n  }\n}\n\nif (customElements.get('cre8-radio-field') === undefined) {\n    customElements.define('cre8-radio-field', Cre8RadioField);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-radio-field': Cre8RadioField;\n  }\n}\n\nexport default Cre8RadioField;\n"]}

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

@@ -13,7 +13,7 @@ export declare enum Color {
  * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).
  * These tags always display a "Close" icon.
  *
- * @fires removeTagClicked - Fires when the remove tag is clicked.
+ * @fires remove-tag-click - Fires when the remove tag is clicked.
  */
 export declare class Cre8RemoveTag extends Cre8Element {
     static styles: import("lit").CSSResult[];

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

@@ -26,7 +26,7 @@ export var Color;
  * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).
  * These tags always display a "Close" icon.
  *
- * @fires removeTagClicked - Fires when the remove tag is clicked.
+ * @fires remove-tag-click - Fires when the remove tag is clicked.
  */
 export class Cre8RemoveTag extends Cre8Element {
     constructor() {
@@ -51,12 +51,12 @@ export class Cre8RemoveTag extends Cre8Element {
      * Dispatches an event when the tag is clicked
      */
     _handleRemoveTagClicked() {
-        const customEvent = new CustomEvent('removeTagClicked', {
+        const customEvent = new CustomEvent('remove-tag-click', {
             detail: { message: 'Remove Tag clicked.' },
             bubbles: true,
             composed: true,
         });
-        this.dispatchEvent(customEvent);
+        this.dispatchWithLegacyAlias(customEvent);
     }
     render() {
         const componentClassName = classnames('cre8-c-remove-tag', {

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

@@ -1 +1 @@
-{"version":3,"file":"remove-tag.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,0BAAiB,CAAA;AACnB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAED,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;IACnB,yCAAgC,CAAA;AAClC,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAED;;;;;GAKG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QASE;;;;;;WAMG;QAEC,UAAK,GAAwD,KAAK,CAAC,OAAO,CAAC;QAE/E;;;;;WAKG;QAEC,UAAK,GAA+B,KAAK,CAAC,KAAK,CAAC;IA6CtD,CAAC;IArCC;;OAEG;IACK,uBAAuB;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACpD,MAAM,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,mBAAmB,EAAE;YACvD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACpE,0BAA0B,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAClD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;eACF,kBAAkB;gBACjB,IAAI,CAAC,uBAAuB;kBAC1B,IAAI,CAAC,QAAQ;;cAEjB,IAAI,CAAC,IAAI;;;;;iBAKN,QAAQ;;;;cAIX,CAAC;IACb,CAAC;;AArEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACT;AAUd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACoD;AAS3E;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACyB;AAMhD;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACL;AAyCzB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './remove-tag.styles.js';\n\nexport enum Shape {\n  Round = 'round',\n  Square = 'square',\n}\n\nexport enum Color {\n  Neutral = 'neutral',\n  Branded = 'branded',\n  NeutralHybrid = 'neutral-hybrid',\n}\n\n/**\n * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).\n * These tags always display a \"Close\" icon.\n *\n * @fires removeTagClicked - Fires when the remove tag is clicked.\n */\nexport class Cre8RemoveTag extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The tag text\n   */\n  @property({ type: String })\n      text?: string;\n\n  /**\n   * The tag color scheme\n   *\n   *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.\n   *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link\n   *  - **branded** should be used like Neutral, but for marketing / actionable items\n   */\n  @property({ type: String })\n      color: Color.Neutral | Color.Branded | Color.NeutralHybrid = Color.Neutral;\n\n  /**\n   * The tag shape\n   *\n   * - **round** will give the tag a rounded border\n   * - **square** will give the tag a squared border\n   */\n  @property({ type: String })\n      shape: Shape.Round | Shape.Square = Shape.Round;\n\n  /**\n   * Disabled state for remove tag\n   */\n  @property({ type: Boolean })\n      disabled?: boolean;\n\n  /**\n   * Dispatches an event when the tag is clicked\n   */\n  private _handleRemoveTagClicked() {\n      const customEvent = new CustomEvent('removeTagClicked', {\n          detail: { message: 'Remove Tag clicked.' },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassName = classnames('cre8-c-remove-tag', {\n          'cre8-c-remove-tag--neutral': this.color === 'neutral',\n          'cre8-c-remove-tag--branded': this.color === 'branded',\n          'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',\n          'cre8-c-remove-tag--round': this.shape === 'round',\n          'cre8-c-remove-tag--square': this.shape === 'square',\n      });\n\n      return html` <button\n      class=\"${componentClassName}\"\n      @click=\"${this._handleRemoveTagClicked}\"\n      ?disabled=${this.disabled}\n    >\n      <span>${this.text}</span>\n      <div class=\"cre8-c-remove-tag-item__icon\">\n        <cre8-icon\n          width=\"16\"\n          height=\"16\"\n          svg=\"${svgClose}\"\n          aria-hidden=\"true\"\n        ></cre8-icon>\n      </div>\n    </button>`;\n  }\n}\n\nif (customElements.get('cre8-remove-tag') === undefined) {\n    customElements.define('cre8-remove-tag', Cre8RemoveTag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-remove-tag': Cre8RemoveTag;\n  }\n}\n\nexport default Cre8RemoveTag;\n"]}
+{"version":3,"file":"remove-tag.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,0BAAiB,CAAA;AACnB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAED,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;IACnB,yCAAgC,CAAA;AAClC,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAED;;;;;GAKG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QASE;;;;;;WAMG;QAEC,UAAK,GAAwD,KAAK,CAAC,OAAO,CAAC;QAE/E;;;;;WAKG;QAEC,UAAK,GAA+B,KAAK,CAAC,KAAK,CAAC;IA6CtD,CAAC;IArCC;;OAEG;IACK,uBAAuB;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACpD,MAAM,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,mBAAmB,EAAE;YACvD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACpE,0BAA0B,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAClD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;eACF,kBAAkB;gBACjB,IAAI,CAAC,uBAAuB;kBAC1B,IAAI,CAAC,QAAQ;;cAEjB,IAAI,CAAC,IAAI;;;;;iBAKN,QAAQ;;;;cAIX,CAAC;IACb,CAAC;;AArEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACT;AAUd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACoD;AAS3E;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACyB;AAMhD;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACL;AAyCzB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './remove-tag.styles.js';\n\nexport enum Shape {\n  Round = 'round',\n  Square = 'square',\n}\n\nexport enum Color {\n  Neutral = 'neutral',\n  Branded = 'branded',\n  NeutralHybrid = 'neutral-hybrid',\n}\n\n/**\n * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).\n * These tags always display a \"Close\" icon.\n *\n * @fires remove-tag-click - Fires when the remove tag is clicked.\n */\nexport class Cre8RemoveTag extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The tag text\n   */\n  @property({ type: String })\n      text?: string;\n\n  /**\n   * The tag color scheme\n   *\n   *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.\n   *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link\n   *  - **branded** should be used like Neutral, but for marketing / actionable items\n   */\n  @property({ type: String })\n      color: Color.Neutral | Color.Branded | Color.NeutralHybrid = Color.Neutral;\n\n  /**\n   * The tag shape\n   *\n   * - **round** will give the tag a rounded border\n   * - **square** will give the tag a squared border\n   */\n  @property({ type: String })\n      shape: Shape.Round | Shape.Square = Shape.Round;\n\n  /**\n   * Disabled state for remove tag\n   */\n  @property({ type: Boolean })\n      disabled?: boolean;\n\n  /**\n   * Dispatches an event when the tag is clicked\n   */\n  private _handleRemoveTagClicked() {\n      const customEvent = new CustomEvent('remove-tag-click', {\n          detail: { message: 'Remove Tag clicked.' },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchWithLegacyAlias(customEvent);\n  }\n\n  render() {\n      const componentClassName = classnames('cre8-c-remove-tag', {\n          'cre8-c-remove-tag--neutral': this.color === 'neutral',\n          'cre8-c-remove-tag--branded': this.color === 'branded',\n          'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',\n          'cre8-c-remove-tag--round': this.shape === 'round',\n          'cre8-c-remove-tag--square': this.shape === 'square',\n      });\n\n      return html` <button\n      class=\"${componentClassName}\"\n      @click=\"${this._handleRemoveTagClicked}\"\n      ?disabled=${this.disabled}\n    >\n      <span>${this.text}</span>\n      <div class=\"cre8-c-remove-tag-item__icon\">\n        <cre8-icon\n          width=\"16\"\n          height=\"16\"\n          svg=\"${svgClose}\"\n          aria-hidden=\"true\"\n        ></cre8-icon>\n      </div>\n    </button>`;\n  }\n}\n\nif (customElements.get('cre8-remove-tag') === undefined) {\n    customElements.define('cre8-remove-tag', Cre8RemoveTag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-remove-tag': Cre8RemoveTag;\n  }\n}\n\nexport default Cre8RemoveTag;\n"]}

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

@@ -2,6 +2,9 @@ import { Cre8Element } from '../cre8-element';
 import '../button/button';
 /**
  * @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 declare class Cre8SplitButton extends Cre8Element {
     static styles: import("lit").CSSResult[];

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;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"}
+{"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;;;;;GAKG;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

@@ -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"}