@tmorrow/cre8-wc 2.0.7 → 2.0.8

package/lib/components/heading/heading.d.ts

@@ -32,7 +32,7 @@ export declare class Cre8Heading extends Cre8Element {
      * <li>**title-default** renders a heading with the heading title-default preset treatment</li>
      * <li>**title-small** renders a heading with the heading title-small preset treatment</li>
      * <li>**label-large** renders a heading with the label-large preset treatment</li>
-     * <li>**label** renders a heading with the label preset treatment</li>
+     * <li>**label-default** renders a heading with the label-default preset treatment</li>
      * <li>**label-small** renders a heading with the label-small preset treatment</li>
      * <li>**meta-large** renders a heading with the meta-large preset treatment</li>
      * <li>**meta-default** renders a heading with the meta-default preset treatment</li>
@@ -47,15 +47,13 @@ export declare class Cre8Heading extends Cre8Element {
      * <cre8-text-passage size="small">
      * <ul>
      * <li>**h1** renders an `h1` tag</li>
-     * <li>**h2** renders an `h2` tag. This is the default</li>
+     * <li>**h2** renders an `h2` tag</li>
      * <li>**h3** renders an `h3` tag</li>
      * <li>**h4** renders an `h4` tag</li>
-     * <li>**h5** renders an `h5` tag</li>
+     * <li>**h5** renders an `h5` tag. This is the default</li>
      * <li>**h6** renders an `h6` tag</li>
      * </ul>
      * </cre8-text-passage>
-     *
-     * @attr{string}
      */
     tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C;;;;;;;;;;;;;;;;GAgBG;AACP,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IAEC,IAAI,CAAC,EACH,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,aAAa,GACb,eAAe,GACf,aAAa,GACb,aAAa,GACb,eAAe,GACf,aAAa,GACb,YAAY,GACZ,cAAc,GACd,YAAY,CAAC;IAEnB;;;;;;;;;;;;;;;OAeG;IAEC,UAAU,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE/D;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB,MAAM;CAwDT;AAOD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,WAAW,CAAC;KAC/B;CACJ;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C;;;;;;;;;;;;;;;;GAgBG;AACP,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IAEC,IAAI,CAAC,EACH,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,aAAa,GACb,eAAe,GACf,aAAa,GACb,aAAa,GACb,eAAe,GACf,aAAa,GACb,YAAY,GACZ,cAAc,GACd,YAAY,CAAC;IAEnB;;;;;;;;;;;;;OAaG;IAEC,UAAU,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE/D;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB,MAAM;CAwDT;AAOD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,WAAW,CAAC;KAC/B;CACJ;AAED,eAAe,WAAW,CAAC"}

package/lib/components/heading/heading.js

@@ -34,15 +34,13 @@ export class Cre8Heading extends Cre8Element {
          * <cre8-text-passage size="small">
          * <ul>
          * <li>**h1** renders an `h1` tag</li>
-         * <li>**h2** renders an `h2` tag. This is the default</li>
+         * <li>**h2** renders an `h2` tag</li>
          * <li>**h3** renders an `h3` tag</li>
          * <li>**h4** renders an `h4` tag</li>
-         * <li>**h5** renders an `h5` tag</li>
+         * <li>**h5** renders an `h5` tag. This is the default</li>
          * <li>**h6** renders an `h6` tag</li>
          * </ul>
          * </cre8-text-passage>
-         *
-         * @attr{string}
          */
         this.tagVariant = 'h5';
     }

package/lib/components/heading/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './heading.styles.js';\n\n    /**\n     *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6\n     *  is the least important in the content hierarchy.\n     *\n     * # How to Use\n     * 1. The cre8-heading tag wraps around one of the six native HTML \"h\" tags, depending on your chosen variation.\n     * 2. There are two main use cases for using this component:\n     *    text passage headings and Components with a title (i.e. modal, card or alert)\n     * 3. There will be instances when the design requires the heading text to have the brand color applied\n     *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)\n     *    attribute to true on the cre8-heading tag.\n     * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)\n     *    attribute to the tag for white text.\n     *\n     *\n     * @slot - The heading text content\n     */\nexport class Cre8Heading extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Heading type\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**display-default** renders a heading with the heading display-default preset treatment</li>\n     * <li>**display-small** renders a heading with the heading display-small preset treatment</li>\n     * <li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n     * <li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n     * <li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n     * <li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n     * <li>**title-large** renders a heading with the heading title-large preset treatment</li>\n     * <li>**title-default** renders a heading with the heading title-default preset treatment</li>\n     * <li>**title-small** renders a heading with the heading title-small preset treatment</li>\n     * <li>**label-large** renders a heading with the label-large preset treatment</li>\n     * <li>**label** renders a heading with the label preset treatment</li>\n     * <li>**label-small** renders a heading with the label-small preset treatment</li>\n     * <li>**meta-large** renders a heading with the meta-large preset treatment</li>\n     * <li>**meta-default** renders a heading with the meta-default preset treatment</li>\n     * <li>**meta-small** renders a heading with the meta-small preset treatment</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n        type?:\n        | 'display-default'\n        | 'display-small'\n        | 'headline-large'\n        | 'headline-default'\n        | 'headline-small'\n        | 'title-xlarge'\n        | 'title-large'\n        | 'title-default'\n        | 'title-small'\n        | 'label-large'\n        | 'label-default'\n        | 'label-small'\n        | 'meta-large'\n        | 'meta-default'\n        | 'meta-small';\n\n    /**\n     * Dynamic tag name for the component\n     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**h1** renders an `h1` tag</li>\n     * <li>**h2** renders an `h2` tag. This is the default</li>\n     * <li>**h3** renders an `h3` tag</li>\n     * <li>**h4** renders an `h4` tag</li>\n     * <li>**h5** renders an `h5` tag</li>\n     * <li>**h6** renders an `h6` tag</li>\n     * </ul>\n     * </cre8-text-passage>\n     *\n     * @attr{string}\n     */\n    @property()\n        tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h5';\n\n    /**\n     * Invert the color of the font from dark to light. An inverted `heading` should be used on a dark background.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        inverted?: boolean;\n\n    /**\n     * Apply the brand color to the heading text.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        brandColor?: boolean;\n\n    render() {\n        const tagVariantClassNames = !this.type\n            ? {\n                'cre8-c-heading--headline-large': this.tagVariant === 'h1',\n                'cre8-c-heading--headline-default': this.tagVariant === 'h2',\n                'cre8-c-heading--headline-small': this.tagVariant === 'h3',\n                'cre8-c-heading--title-large': this.tagVariant === 'h4',\n                'cre8-c-heading--title-default': this.tagVariant === 'h5',\n                'cre8-c-heading--title-small': this.tagVariant === 'h6',\n            }\n            : {};\n\n        const componentClassName = this.componentClassNames('cre8-c-heading', {\n            'cre8-c-heading--headline-large': this.type === 'headline-large',\n            'cre8-c-heading--headline-default': this.type === 'headline-default',\n            'cre8-c-heading--headline-small': this.type === 'headline-small',\n            'cre8-c-heading--title-large': this.type === 'title-large',\n            'cre8-c-heading--title-default': this.type === 'title-default',\n            'cre8-c-heading--title-small': this.type === 'title-small',\n            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',\n            'cre8-c-heading--display-default': this.type === 'display-default',\n            'cre8-c-heading--display-small': this.type === 'display-small',\n            'cre8-c-heading--label-large': this.type === 'label-large',\n            'cre8-c-heading--label-default': this.type === 'label-default',\n            'cre8-c-heading--label-small': this.type === 'label-small',\n            'cre8-c-heading--meta-large': this.type === 'meta-large',\n            'cre8-c-heading--meta-default': this.type === 'meta-default',\n            'cre8-c-heading--meta-small': this.type === 'meta-small',\n            // Spread last. `tagVariantClassNames` is `{}` whenever `type` is\n            // set, so the type-derived keys above still win when both could\n            // apply. Spreading it first meant those same keys immediately\n            // overwrote the tagVariant fallback with `false`, so an unset\n            // `type` produced no preset class at all and every heading fell\n            // back to the bare `.cre8-c-heading` size.\n            ...tagVariantClassNames,\n            'cre8-c-heading--brand-color': this.brandColor,\n            'cre8-c-heading--inverted': this.inverted,\n        });\n\n        switch (this.tagVariant) {\n            case 'h1':\n                return html` <h1 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h1> `;\n            case 'h2':\n                return html` <h2 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h2> `;\n            case 'h3':\n                return html` <h3 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h3> `;\n            case 'h4':\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n            case 'h5':\n                return html` <h5 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h5> `;\n            case 'h6':\n                return html` <h6 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h6> `;\n            default:\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n        }\n    }\n}\n\n\nif (customElements.get('cre8-heading') === undefined) {\n    customElements.define('cre8-heading', Cre8Heading);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-heading': Cre8Heading;\n    }\n}\n\nexport default Cre8Heading;\n"]}
+{"version":3,"file":"heading.js","sourceRoot":"","sources":["../../../components/heading/heading.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './heading.styles.js';\n\n    /**\n     *  HTML headings are titles or subtitles that you want to display on a webpage. The H1 is the most important and H6\n     *  is the least important in the content hierarchy.\n     *\n     * # How to Use\n     * 1. The cre8-heading tag wraps around one of the six native HTML \"h\" tags, depending on your chosen variation.\n     * 2. There are two main use cases for using this component:\n     *    text passage headings and Components with a title (i.e. modal, card or alert)\n     * 3. There will be instances when the design requires the heading text to have the brand color applied\n     *    in which case you should set the [brandColor](?path=/story/cre8-components-heading--brand-color)\n     *    attribute to true on the cre8-heading tag.\n     * 4. For dark backgrounds, add the [inverted](?path=/story/cre8-components-heading--inverted)\n     *    attribute to the tag for white text.\n     *\n     *\n     * @slot - The heading text content\n     */\nexport class Cre8Heading extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Heading type\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**display-default** renders a heading with the heading display-default preset treatment</li>\n     * <li>**display-small** renders a heading with the heading display-small preset treatment</li>\n     * <li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n     * <li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n     * <li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n     * <li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n     * <li>**title-large** renders a heading with the heading title-large preset treatment</li>\n     * <li>**title-default** renders a heading with the heading title-default preset treatment</li>\n     * <li>**title-small** renders a heading with the heading title-small preset treatment</li>\n     * <li>**label-large** renders a heading with the label-large preset treatment</li>\n     * <li>**label-default** renders a heading with the label-default preset treatment</li>\n     * <li>**label-small** renders a heading with the label-small preset treatment</li>\n     * <li>**meta-large** renders a heading with the meta-large preset treatment</li>\n     * <li>**meta-default** renders a heading with the meta-default preset treatment</li>\n     * <li>**meta-small** renders a heading with the meta-small preset treatment</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n        type?:\n        | 'display-default'\n        | 'display-small'\n        | 'headline-large'\n        | 'headline-default'\n        | 'headline-small'\n        | 'title-xlarge'\n        | 'title-large'\n        | 'title-default'\n        | 'title-small'\n        | 'label-large'\n        | 'label-default'\n        | 'label-small'\n        | 'meta-large'\n        | 'meta-default'\n        | 'meta-small';\n\n    /**\n     * Dynamic tag name for the component\n     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n     * <cre8-text-passage size=\"small\">\n     * <ul>\n     * <li>**h1** renders an `h1` tag</li>\n     * <li>**h2** renders an `h2` tag</li>\n     * <li>**h3** renders an `h3` tag</li>\n     * <li>**h4** renders an `h4` tag</li>\n     * <li>**h5** renders an `h5` tag. This is the default</li>\n     * <li>**h6** renders an `h6` tag</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n        tagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h5';\n\n    /**\n     * Invert the color of the font from dark to light. An inverted `heading` should be used on a dark background.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        inverted?: boolean;\n\n    /**\n     * Apply the brand color to the heading text.\n     *\n     * @attr{boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        brandColor?: boolean;\n\n    render() {\n        const tagVariantClassNames = !this.type\n            ? {\n                'cre8-c-heading--headline-large': this.tagVariant === 'h1',\n                'cre8-c-heading--headline-default': this.tagVariant === 'h2',\n                'cre8-c-heading--headline-small': this.tagVariant === 'h3',\n                'cre8-c-heading--title-large': this.tagVariant === 'h4',\n                'cre8-c-heading--title-default': this.tagVariant === 'h5',\n                'cre8-c-heading--title-small': this.tagVariant === 'h6',\n            }\n            : {};\n\n        const componentClassName = this.componentClassNames('cre8-c-heading', {\n            'cre8-c-heading--headline-large': this.type === 'headline-large',\n            'cre8-c-heading--headline-default': this.type === 'headline-default',\n            'cre8-c-heading--headline-small': this.type === 'headline-small',\n            'cre8-c-heading--title-large': this.type === 'title-large',\n            'cre8-c-heading--title-default': this.type === 'title-default',\n            'cre8-c-heading--title-small': this.type === 'title-small',\n            'cre8-c-heading--title-xlarge': this.type === 'title-xlarge',\n            'cre8-c-heading--display-default': this.type === 'display-default',\n            'cre8-c-heading--display-small': this.type === 'display-small',\n            'cre8-c-heading--label-large': this.type === 'label-large',\n            'cre8-c-heading--label-default': this.type === 'label-default',\n            'cre8-c-heading--label-small': this.type === 'label-small',\n            'cre8-c-heading--meta-large': this.type === 'meta-large',\n            'cre8-c-heading--meta-default': this.type === 'meta-default',\n            'cre8-c-heading--meta-small': this.type === 'meta-small',\n            // Spread last. `tagVariantClassNames` is `{}` whenever `type` is\n            // set, so the type-derived keys above still win when both could\n            // apply. Spreading it first meant those same keys immediately\n            // overwrote the tagVariant fallback with `false`, so an unset\n            // `type` produced no preset class at all and every heading fell\n            // back to the bare `.cre8-c-heading` size.\n            ...tagVariantClassNames,\n            'cre8-c-heading--brand-color': this.brandColor,\n            'cre8-c-heading--inverted': this.inverted,\n        });\n\n        switch (this.tagVariant) {\n            case 'h1':\n                return html` <h1 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h1> `;\n            case 'h2':\n                return html` <h2 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h2> `;\n            case 'h3':\n                return html` <h3 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h3> `;\n            case 'h4':\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n            case 'h5':\n                return html` <h5 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h5> `;\n            case 'h6':\n                return html` <h6 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h6> `;\n            default:\n                return html` <h4 part=\"tag\" class=\"${componentClassName}\"><slot></slot></h4> `;\n        }\n    }\n}\n\n\nif (customElements.get('cre8-heading') === undefined) {\n    customElements.define('cre8-heading', Cre8Heading);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-heading': Cre8Heading;\n    }\n}\n\nexport default Cre8Heading;\n"]}

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

@@ -1,4 +1,10 @@
 import { Cre8Element } from '../cre8-element';
+/** One link in a data-driven link list. */
+export interface Cre8LinkData {
+    text: string;
+    href: string;
+    isActive?: boolean;
+}
 /**
  * @slot - The link list items
  */
@@ -31,6 +37,19 @@ export declare class Cre8LinkList extends Cre8Element {
      * - **display** renders a link list with a display treatment (e.g. article title)
      */
     variant?: 'secondary' | 'display';
+    /**
+     * Links for a data-driven list. Each becomes a `cre8-link-list-item`.
+     *
+     * Worth knowing if you compose these by hand: the label goes in the item's
+     * default slot, *not* its `text` prop. That prop is declared and documented
+     * but never rendered, so setting it produces an empty link that passes every
+     * check — see the drift ledger in `docs/kb/07-research.md`. This API routes
+     * around it.
+     */
+    items?: Cre8LinkData[];
+    /** 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/link-list/link-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.d.ts","sourceRoot":"","sources":["../../../components/link-list/link-list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC;IAE3C;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IAEC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEhB;;;OAGG;IAEC,OAAO,CAAC,EAAE,WAAW,CAAC;IAE1B;;;;OAIG;IAEC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAEtC,MAAM;CAiBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"link-list.d.ts","sourceRoot":"","sources":["../../../components/link-list/link-list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,2CAA2C;AAC3C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AAEH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC;IAE3C;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IAEC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEhB;;;OAGG;IAEC,OAAO,CAAC,EAAE,WAAW,CAAC;IAE1B;;;;OAIG;IAEC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACtC;;;;;;;;OAQG;IAEC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IAE3B,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IASxB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,MAAM;CAiBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF;AAED,eAAe,YAAY,CAAC"}

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

@@ -7,11 +7,27 @@ 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 './link-list.styles.js';
 /**
  * @slot - The link list items
  */
 export class Cre8LinkList extends Cre8Element {
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.items)
+            return null;
+        return this.items.map((item) => ({
+            tag: 'cre8-link-list-item',
+            props: { href: item.href, isActive: item.isActive },
+            text: item.text,
+        }));
+    }
+    updated(changed) {
+        if (['items'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassName = this.componentClassNames('cre8-c-link-list', {
             'cre8-c-link-list--secondary': this.variant === 'secondary',
@@ -45,6 +61,9 @@ __decorate([
 __decorate([
     property()
 ], Cre8LinkList.prototype, "variant", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8LinkList.prototype, "items", void 0);
 if (customElements.get('cre8-link-list') === undefined) {
     customElements.define('cre8-link-list', Cre8LinkList);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"link-list.js","sourceRoot":"","sources":["../../../components/link-list/link-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAwC3C,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACpE,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACvD,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;YACpD,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;YAC9D,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;YAC9D,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC7C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACE,kBAAkB;;;KAGhC,CAAC;IACJ,CAAC;;AAvDQ,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAQvB;IADH,QAAQ,EAAE;8CACgC;AAOvC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACpB;AAOnB;IADH,QAAQ,EAAE;0CACK;AAOZ;IADH,QAAQ,EAAE;6CACe;AAQtB;IADH,QAAQ,EAAE;6CAC2B;AAqBxC,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './link-list.styles.js';\n\n/**\n * @slot - The link list items\n */\nexport class Cre8LinkList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Behavioral variant\n   * - **responsive** renders a horizontal wrapping link list that converts to a stacked link list on large screens\n   * - **horizontal** renders a horizontal wrapping link list on all screens\n   */\n  @property()\n      behavior?: 'responsive' | 'horizontal';\n\n  /**\n   * Inverted variant\n   * 1. Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  /**\n   * Size variants\n   * - **sm** renders a link list with a smaller typography\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * Spacing between link list items\n   * - **condensed** renders a link list with a more compact display\n   */\n  @property()\n      spacing?: 'condensed';\n\n  /**\n   * Style variants\n   * - **secondary** renders a link list with a more subtle visual treatment\n   * - **display** renders a link list with a display treatment (e.g. article title)\n   */\n  @property()\n      variant?: 'secondary' | 'display';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-link-list', {\n          'cre8-c-link-list--secondary': this.variant === 'secondary',\n          'cre8-c-link-list--display': this.variant === 'display',\n          'cre8-c-link-list--inverted': this.inverted === true,\n          'cre8-c-link-list--responsive': this.behavior === 'responsive',\n          'cre8-c-link-list--horizontal': this.behavior === 'horizontal',\n          'cre8-c-link-list--condensed': this.spacing === 'condensed',\n          'cre8-c-link-list--sm': this.size === 'sm',\n      });\n\n      return html`\n      <ul class=\"${componentClassName}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n}\n\nif (customElements.get('cre8-link-list') === undefined) {\n    customElements.define('cre8-link-list', Cre8LinkList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-link-list': Cre8LinkList;\n  }\n}\n\nexport default Cre8LinkList;\n"]}
+{"version":3,"file":"link-list.js","sourceRoot":"","sources":["../../../components/link-list/link-list.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,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAS3C;;GAEG;AAEH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAmD3C,oDAAoD;IAC5C,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC7B,GAAG,EAAE,qBAAqB;YAC1B,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;YACnD,IAAI,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CAAC,CAAC;IACR,CAAC;IAES,OAAO,CAAC,OAA6B;QAC3C,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YAC5C,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAGD,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACpE,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,2BAA2B,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACvD,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;YACpD,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;YAC9D,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;YAC9D,6BAA6B,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAC3D,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC7C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACE,kBAAkB;;;KAGhC,CAAC;IACJ,CAAC;;AAnFQ,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAQvB;IADH,QAAQ,EAAE;8CACgC;AAOvC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACpB;AAOnB;IADH,QAAQ,EAAE;0CACK;AAOZ;IADH,QAAQ,EAAE;6CACe;AAQtB;IADH,QAAQ,EAAE;6CAC2B;AAWlC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACC;AAsC7B,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport styles from './link-list.styles.js';\n\n/** One link in a data-driven link list. */\nexport interface Cre8LinkData {\n  text: string;\n  href: string;\n  isActive?: boolean;\n}\n\n/**\n * @slot - The link list items\n */\n\nexport class Cre8LinkList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Behavioral variant\n   * - **responsive** renders a horizontal wrapping link list that converts to a stacked link list on large screens\n   * - **horizontal** renders a horizontal wrapping link list on all screens\n   */\n  @property()\n      behavior?: 'responsive' | 'horizontal';\n\n  /**\n   * Inverted variant\n   * 1. Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n  /**\n   * Size variants\n   * - **sm** renders a link list with a smaller typography\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * Spacing between link list items\n   * - **condensed** renders a link list with a more compact display\n   */\n  @property()\n      spacing?: 'condensed';\n\n  /**\n   * Style variants\n   * - **secondary** renders a link list with a more subtle visual treatment\n   * - **display** renders a link list with a display treatment (e.g. article title)\n   */\n  @property()\n      variant?: 'secondary' | 'display';\n  /**\n   * Links for a data-driven list. Each becomes a `cre8-link-list-item`.\n   *\n   * Worth knowing if you compose these by hand: the label goes in the item's\n   * default slot, *not* its `text` prop. That prop is declared and documented\n   * but never rendered, so setting it produces an empty link that passes every\n   * check — see the drift ledger in `docs/kb/07-research.md`. This API routes\n   * around it.\n   */\n  @property({ type: Array })\n      items?: Cre8LinkData[];\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-link-list-item',\n          props: { href: item.href, isActive: item.isActive },\n          text: item.text,\n      }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['items'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-link-list', {\n          'cre8-c-link-list--secondary': this.variant === 'secondary',\n          'cre8-c-link-list--display': this.variant === 'display',\n          'cre8-c-link-list--inverted': this.inverted === true,\n          'cre8-c-link-list--responsive': this.behavior === 'responsive',\n          'cre8-c-link-list--horizontal': this.behavior === 'horizontal',\n          'cre8-c-link-list--condensed': this.spacing === 'condensed',\n          'cre8-c-link-list--sm': this.size === 'sm',\n      });\n\n      return html`\n      <ul class=\"${componentClassName}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n}\n\nif (customElements.get('cre8-link-list') === undefined) {\n    customElements.define('cre8-link-list', Cre8LinkList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-link-list': Cre8LinkList;\n  }\n}\n\nexport default Cre8LinkList;\n"]}

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

@@ -1,4 +1,8 @@
 import { Cre8Element } from '../cre8-element';
+/** One item in a data-driven list. */
+export interface Cre8ListItemData {
+    text: string;
+}
 /**
  * @slot - The list items
  */
@@ -23,6 +27,15 @@ export declare class Cre8List extends Cre8Element {
      * </cre8-text-passage>
      */
     spacing?: 'padded' | 'condensed';
+    /**
+     * Items for a data-driven list. Set this and the list builds its own
+     * `cre8-list-item` children in the light DOM — the same composition you would
+     * write by hand. Leave it unset to compose the list yourself.
+     */
+    items?: Cre8ListItemData[];
+    /** 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/list/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../components/list/list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;OAQG;IAEC,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAErC,MAAM;CAaP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../components/list/list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AAEH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;OAQG;IAEC,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrC;;;;OAIG;IAEC,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE/B,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAKxB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,MAAM;CAaP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/list/list.js

@@ -7,11 +7,23 @@ 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 './list.styles.js';
 /**
  * @slot - The list items
  */
 export class Cre8List extends Cre8Element {
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.items)
+            return null;
+        return this.items.map((item) => ({ tag: 'cre8-list-item', text: item.text }));
+    }
+    updated(changed) {
+        if (['items'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassName = this.componentClassNames('cre8-c-list', {
             'cre8-c-list--bare': this.variant === 'bare',
@@ -32,6 +44,9 @@ __decorate([
 __decorate([
     property()
 ], Cre8List.prototype, "spacing", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8List.prototype, "items", void 0);
 if (customElements.get('cre8-list') === undefined) {
     customElements.define('cre8-list', Cre8List);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../components/list/list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IA0BvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAC/D,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAChD,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;SACzD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACE,kBAAkB;;;KAGhC,CAAC;IACJ,CAAC;;AArCQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAWvB;IADH,QAAQ,EAAE;yCACU;AAYjB;IADH,QAAQ,EAAE;yCAC0B;AAiBvC,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './list.styles.js';\n\n/**\n * @slot - The list items\n */\nexport class Cre8List extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**bare** removes any lines from in between list items</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'bare';\n\n  /**\n   * Spacing variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**padded** applies more padding in between list items compared to the default</li>\n   * <li>**condensed** reduces padding in between list items compared to the default</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      spacing?: 'padded' | 'condensed';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-list', {\n          'cre8-c-list--bare': this.variant === 'bare',\n          'cre8-c-list--padded': this.spacing === 'padded',\n          'cre8-c-list--condensed': this.spacing === 'condensed',\n      });\n\n      return html`\n      <ul class=\"${componentClassName}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n}\n\nif (customElements.get('cre8-list') === undefined) {\n    customElements.define('cre8-list', Cre8List);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-list': Cre8List;\n  }\n}\n\nexport default Cre8List;\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../components/list/list.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,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAOtC;;GAEG;AAEH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAiCvC,oDAAoD;IAC5C,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAClF,CAAC;IAES,OAAO,CAAC,OAA6B;QAC3C,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YAC5C,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAGD,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAC/D,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAChD,wBAAwB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;SACzD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACE,kBAAkB;;;KAGhC,CAAC;IACJ,CAAC;;AAzDQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAWvB;IADH,QAAQ,EAAE;yCACU;AAYjB;IADH,QAAQ,EAAE;yCAC0B;AAOjC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCACK;AA8BjC,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport styles from './list.styles.js';\n\n/** One item in a data-driven list. */\nexport interface Cre8ListItemData {\n  text: string;\n}\n\n/**\n * @slot - The list items\n */\n\nexport class Cre8List extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**bare** removes any lines from in between list items</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'bare';\n\n  /**\n   * Spacing variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**padded** applies more padding in between list items compared to the default</li>\n   * <li>**condensed** reduces padding in between list items compared to the default</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      spacing?: 'padded' | 'condensed';\n  /**\n   * Items for a data-driven list. Set this and the list builds its own\n   * `cre8-list-item` children in the light DOM — the same composition you would\n   * write by hand. Leave it unset to compose the list yourself.\n   */\n  @property({ type: Array })\n      items?: Cre8ListItemData[];\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) => ({ tag: 'cre8-list-item', text: item.text }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['items'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-list', {\n          'cre8-c-list--bare': this.variant === 'bare',\n          'cre8-c-list--padded': this.spacing === 'padded',\n          'cre8-c-list--condensed': this.spacing === 'condensed',\n      });\n\n      return html`\n      <ul class=\"${componentClassName}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n}\n\nif (customElements.get('cre8-list') === undefined) {\n    customElements.define('cre8-list', Cre8List);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-list': Cre8List;\n  }\n}\n\nexport default Cre8List;\n"]}

package/lib/components/modal/modal.d.ts

@@ -14,7 +14,7 @@ import '@a11y/focus-trap';
  * @slot header - Custom header content for the modal
  * @slot footer - Custom footer content for the modal
  *
- * @fires close-modal - Fires when the modal is dismissed via the close button, overlay click, or Escape key.
+ * @fires modal-close - Fires when the modal is dismissed via the close button, overlay click, or Escape key.
  */
 export declare class Cre8Modal extends Cre8Element {
     static styles: import("lit").CSSResult[];
@@ -92,7 +92,7 @@ export declare class Cre8Modal extends Cre8Element {
 export interface CloseModalEvent extends CustomEvent<{
     isActive: boolean;
 }> {
-    type: 'close-modal';
+    type: 'modal-close';
     currentTarget: Cre8Modal;
 }
 declare global {

package/lib/components/modal/modal.js

@@ -28,7 +28,7 @@ import styles from './modal.styles.js';
  * @slot header - Custom header content for the modal
  * @slot footer - Custom footer content for the modal
  *
- * @fires close-modal - Fires when the modal is dismissed via the close button, overlay click, or Escape key.
+ * @fires modal-close - Fires when the modal is dismissed via the close button, overlay click, or Escape key.
  */
 export class Cre8Modal extends Cre8Element {
     constructor() {
@@ -79,7 +79,7 @@ export class Cre8Modal extends Cre8Element {
     handleCloseModal() {
         this.isActive = false;
         this.dispatch({
-            eventName: 'close-modal',
+            eventName: 'modal-close',
             detailObj: {
                 isActive: this.isActive,
             },

package/lib/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon.js';\nimport '@a11y/focus-trap';\nimport styles from './modal.styles.js';\n\n/**\n * Modal component should be used in all modal situations.\n * It is natuarally composable and can even have a custom header and remove the close button.\n * (note: adding `slot=\"header\"` will insert the given element into the header section of the modal,\n * same for `slot=\"footer\"` and no given slot name will inset it into the body)\n *\n * If it is desired to create a utility modal. Cre8Modal requires a status value (see props table below,\n * and a UtilityModalTitle since all utility modals have a cre8-heading)\n * @slot - The component content\n * @slot header - Custom header content for the modal\n * @slot footer - Custom footer content for the modal\n *\n * @fires close-modal - Fires when the modal is dismissed via the close button, overlay click, or Escape key.\n */\nexport class Cre8Modal extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Query the modal window\n     */\n    @query('.cre8-c-modal__window')\n    _modalWindow: HTMLDivElement;\n\n    /**\n     * Is Active attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    isActive?: boolean;\n\n    /**\n     * Status Types\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**default (no value)** renders a default modal</li>\n     * <li>**error** renders an error modal</li>\n     * <li>**warning** renders a warning modal</li>\n     * <li>**success** renders a success modal</li>\n     * <li>**info** renders an info modal</li>\n     * <li>**help** renders an help modal</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n    status?: 'error' | 'warning' | 'success' | 'info' | 'help';\n\n    /**\n     * Utility Modal Heading (String)\n     */\n    @property()\n    utilityModalTitle: string;\n\n    /**\n     * Not dismissible modal\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * Close Button Text\n     */\n    @property()\n    closeButtonText: string = 'close';\n\n    /**\n     * Close Button Icon\n     */\n    @property()\n    closeButtonIcon: string = 'close';\n\n    /**\n     * Modal Aria Label - This is required for accessibility and provides context of the entire modal!\n     */\n    @property()\n    ariaLabel: string;\n\n    /**\n     * Handle keydown\n     * 1) Close the modal when escape is hit when the user is focused within the modal\n     */\n    handleKeydown(e: KeyboardEvent) {\n        if (e.code === 'Escape' && !this.notDismissible) {\n            this.handleCloseModal(); /* 2 */\n        }\n    }\n\n    /**\n     * Handle on close\n     * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.\n     */\n    handleCloseModal() {\n        this.isActive = false;\n        this.dispatch({\n            eventName: 'close-modal',\n            detailObj: {\n                isActive: this.isActive,\n            },\n        });\n    }\n\n    /**\n     * Handle \"click outside\"\n     * 1) onClick of the area around the modal window, close the modal.\n     */\n\n    handleOnClickOutside(e: Event) {\n        const eventTarget = e.target as HTMLElement;\n        if (this.isActive && this._modalWindow && eventTarget.classList.contains('cre8-c-modal') && !this.notDismissible) {\n            this.handleCloseModal();\n        }\n    }\n\n    /**\n     * Lifecycle method to focus on modal\n     * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.\n     * 2) Disable the body from scrolling behind while the modal is open.\n     */\n\n    updated(changedProperties: PropertyValues<this>) {\n        if (this.isActive === true) {\n            setTimeout(() => {\n                this._modalWindow.focus();\n            }, 200);\n        } /* 1 */\n\n        if (changedProperties.has('isActive')) {\n            const body = document.querySelector('body');\n            if (this.isActive) {\n                body.style.overflow = 'hidden';\n            } else {\n                body.style.removeProperty('overflow');\n            }\n        } /* 2 */\n    }\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be\n    * see: (https://digital.#.com/patterns-and-Components/informational-display/alerts-and-notifications#query=alerts)\n    * this provides the recommendated alt text of different statuses\n    */\n    mapStatusToIconModal = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgError} aria-hidden='true'></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgCheckCircle} aria-hidden='true'></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgWarningFilled} aria-hidden='true'></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgHelp} aria-hidden='true'></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgInfoFilled} aria-hidden='true'></cre8-icon>`;\n            default:\n                return null;\n        }\n    };\n\n    /**\n     * Lifecycle method on removal from the DOM\n     * Removed body overflow and handle close (isActive set to false)\n     */\n    disconnectedCallback() {\n        this.isActive = false;\n        const body = document.querySelector('body');\n        body.style.removeProperty('overflow');\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-modal', {\n            'cre8-is-active': this.isActive,\n            'cre8-c-modal--error': this.status === 'error',\n            'cre8-c-modal--warning': this.status === 'warning',\n            'cre8-c-modal--success': this.status === 'success',\n            'cre8-c-modal--info': this.status === 'info',\n            'cre8-c-modal--help': this.status === 'help',\n        });\n\n        return html`\n    <div class=\"${componentClassNames}\" @click=\"${this.handleOnClickOutside}\" @keydown=${this.handleKeydown}>\n    <focus-trap class=\"cre8-c-modal__focus-trap\" ?inactive=${!this.isActive}>\n        <div class=\"cre8-c-modal__window\" role=\"dialog\" aria-label=${this.ariaLabel} tabindex=${this.isActive ? 0 : -1}>\n        <div class=\"cre8-c-modal__header\">\n            ${this.status\n                ? html`<div class=\"cre8-c-modal__header-inner\">\n                ${this.mapStatusToIconModal(this.status)}\n                <cre8-heading type=\"title-large\" ?brandColor=${true}>${this.utilityModalTitle}</cre8-heading>\n                </div>`\n                : html`<slot name=\"header\"></slot>`}\n        ${!this.notDismissible\n                ? html`<cre8-button\n                class=\"cre8-c-modal__close-button\"\n                variant=\"tertiary\"\n                svg=${svgClose}\n                iconPosition=\"after\"\n                ?inverted=${!this.status}\n                @click=${this.handleCloseModal}\n                ></cre8-button>`\n                : ''}\n        </div>\n        <div class=\"cre8-c-modal__body\">\n            <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`<div class=\"cre8-c-modal__footer\"><slot name=\"footer\"></slot></div>`}\n        </div>\n    </focus-trap>\n    </div>\n`;\n    }\n}\n\nif (customElements.get('cre8-modal') === undefined) {\n    customElements.define('cre8-modal', Cre8Modal);\n}\n\nexport interface CloseModalEvent extends CustomEvent<{ isActive: boolean }> {\n    type: 'close-modal';\n    currentTarget: Cre8Modal;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-modal': Cre8Modal;\n    }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon.js';\nimport '@a11y/focus-trap';\nimport styles from './modal.styles.js';\n\n/**\n * Modal component should be used in all modal situations.\n * It is natuarally composable and can even have a custom header and remove the close button.\n * (note: adding `slot=\"header\"` will insert the given element into the header section of the modal,\n * same for `slot=\"footer\"` and no given slot name will inset it into the body)\n *\n * If it is desired to create a utility modal. Cre8Modal requires a status value (see props table below,\n * and a UtilityModalTitle since all utility modals have a cre8-heading)\n * @slot - The component content\n * @slot header - Custom header content for the modal\n * @slot footer - Custom footer content for the modal\n *\n * @fires modal-close - Fires when the modal is dismissed via the close button, overlay click, or Escape key.\n */\nexport class Cre8Modal extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Query the modal window\n     */\n    @query('.cre8-c-modal__window')\n    _modalWindow: HTMLDivElement;\n\n    /**\n     * Is Active attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    isActive?: boolean;\n\n    /**\n     * Status Types\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**default (no value)** renders a default modal</li>\n     * <li>**error** renders an error modal</li>\n     * <li>**warning** renders a warning modal</li>\n     * <li>**success** renders a success modal</li>\n     * <li>**info** renders an info modal</li>\n     * <li>**help** renders an help modal</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n    status?: 'error' | 'warning' | 'success' | 'info' | 'help';\n\n    /**\n     * Utility Modal Heading (String)\n     */\n    @property()\n    utilityModalTitle: string;\n\n    /**\n     * Not dismissible modal\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * Close Button Text\n     */\n    @property()\n    closeButtonText: string = 'close';\n\n    /**\n     * Close Button Icon\n     */\n    @property()\n    closeButtonIcon: string = 'close';\n\n    /**\n     * Modal Aria Label - This is required for accessibility and provides context of the entire modal!\n     */\n    @property()\n    ariaLabel: string;\n\n    /**\n     * Handle keydown\n     * 1) Close the modal when escape is hit when the user is focused within the modal\n     */\n    handleKeydown(e: KeyboardEvent) {\n        if (e.code === 'Escape' && !this.notDismissible) {\n            this.handleCloseModal(); /* 2 */\n        }\n    }\n\n    /**\n     * Handle on close\n     * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.\n     */\n    handleCloseModal() {\n        this.isActive = false;\n        this.dispatch({\n            eventName: 'modal-close',\n            detailObj: {\n                isActive: this.isActive,\n            },\n        });\n    }\n\n    /**\n     * Handle \"click outside\"\n     * 1) onClick of the area around the modal window, close the modal.\n     */\n\n    handleOnClickOutside(e: Event) {\n        const eventTarget = e.target as HTMLElement;\n        if (this.isActive && this._modalWindow && eventTarget.classList.contains('cre8-c-modal') && !this.notDismissible) {\n            this.handleCloseModal();\n        }\n    }\n\n    /**\n     * Lifecycle method to focus on modal\n     * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.\n     * 2) Disable the body from scrolling behind while the modal is open.\n     */\n\n    updated(changedProperties: PropertyValues<this>) {\n        if (this.isActive === true) {\n            setTimeout(() => {\n                this._modalWindow.focus();\n            }, 200);\n        } /* 1 */\n\n        if (changedProperties.has('isActive')) {\n            const body = document.querySelector('body');\n            if (this.isActive) {\n                body.style.overflow = 'hidden';\n            } else {\n                body.style.removeProperty('overflow');\n            }\n        } /* 2 */\n    }\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be\n    * see: (https://digital.#.com/patterns-and-Components/informational-display/alerts-and-notifications#query=alerts)\n    * this provides the recommendated alt text of different statuses\n    */\n    mapStatusToIconModal = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgError} aria-hidden='true'></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgCheckCircle} aria-hidden='true'></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgWarningFilled} aria-hidden='true'></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgHelp} aria-hidden='true'></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgInfoFilled} aria-hidden='true'></cre8-icon>`;\n            default:\n                return null;\n        }\n    };\n\n    /**\n     * Lifecycle method on removal from the DOM\n     * Removed body overflow and handle close (isActive set to false)\n     */\n    disconnectedCallback() {\n        this.isActive = false;\n        const body = document.querySelector('body');\n        body.style.removeProperty('overflow');\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-modal', {\n            'cre8-is-active': this.isActive,\n            'cre8-c-modal--error': this.status === 'error',\n            'cre8-c-modal--warning': this.status === 'warning',\n            'cre8-c-modal--success': this.status === 'success',\n            'cre8-c-modal--info': this.status === 'info',\n            'cre8-c-modal--help': this.status === 'help',\n        });\n\n        return html`\n    <div class=\"${componentClassNames}\" @click=\"${this.handleOnClickOutside}\" @keydown=${this.handleKeydown}>\n    <focus-trap class=\"cre8-c-modal__focus-trap\" ?inactive=${!this.isActive}>\n        <div class=\"cre8-c-modal__window\" role=\"dialog\" aria-label=${this.ariaLabel} tabindex=${this.isActive ? 0 : -1}>\n        <div class=\"cre8-c-modal__header\">\n            ${this.status\n                ? html`<div class=\"cre8-c-modal__header-inner\">\n                ${this.mapStatusToIconModal(this.status)}\n                <cre8-heading type=\"title-large\" ?brandColor=${true}>${this.utilityModalTitle}</cre8-heading>\n                </div>`\n                : html`<slot name=\"header\"></slot>`}\n        ${!this.notDismissible\n                ? html`<cre8-button\n                class=\"cre8-c-modal__close-button\"\n                variant=\"tertiary\"\n                svg=${svgClose}\n                iconPosition=\"after\"\n                ?inverted=${!this.status}\n                @click=${this.handleCloseModal}\n                ></cre8-button>`\n                : ''}\n        </div>\n        <div class=\"cre8-c-modal__body\">\n            <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`<div class=\"cre8-c-modal__footer\"><slot name=\"footer\"></slot></div>`}\n        </div>\n    </focus-trap>\n    </div>\n`;\n    }\n}\n\nif (customElements.get('cre8-modal') === undefined) {\n    customElements.define('cre8-modal', Cre8Modal);\n}\n\nexport interface CloseModalEvent extends CustomEvent<{ isActive: boolean }> {\n    type: 'modal-close';\n    currentTarget: Cre8Modal;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-modal': Cre8Modal;\n    }\n}\n"]}

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

@@ -9,12 +9,12 @@ import '../checkbox-field-item/checkbox-field-item';
  * The checkbox will always reflect the selected nature of the item and is not removed
  * from the dropdown when clicked, the tags will be added and removed based on their state.
  *
- * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * Event `multi-select-change` emits whenever a tag is added or remove from the list and the
  * current list after the change is given in the detail.
  *
  * @slot fieldNote - Container for optional field note content
  *
- * @fires selectedItemsChange - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
+ * @fires multi-select-change - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
  */
 export declare class Cre8MultiSelect extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/multi-select/multi-select.js

@@ -26,12 +26,12 @@ import '../checkbox-field-item/checkbox-field-item';
  * The checkbox will always reflect the selected nature of the item and is not removed
  * from the dropdown when clicked, the tags will be added and removed based on their state.
  *
- * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * Event `multi-select-change` emits whenever a tag is added or remove from the list and the
  * current list after the change is given in the detail.
  *
  * @slot fieldNote - Container for optional field note content
  *
- * @fires selectedItemsChange - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
+ * @fires multi-select-change - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
  */
 export class Cre8MultiSelect extends Cre8Element {
     /* Life Cycle Methods */
@@ -91,7 +91,7 @@ export class Cre8MultiSelect extends Cre8Element {
           color="neutral"
           shape="square"
           ?disabled="${this.disabled}"
-          @removeTagClicked="${() => this._handleRemoveTagClick(item)}"
+          @remove-tag-click="${() => this._handleRemoveTagClick(item)}"
         ></cre8-remove-tag>
       </li>`);
     }
@@ -116,14 +116,14 @@ export class Cre8MultiSelect extends Cre8Element {
         }
     }
     emitSelectedItems() {
-        const customEvent = new CustomEvent('selectedItemsChange', {
+        const customEvent = new CustomEvent('multi-select-change', {
             detail: {
                 selectedItems: this.selectedTagItems,
             },
             bubbles: true,
             composed: true,
         });
-        this.dispatchEvent(customEvent);
+        this.dispatchWithLegacyAlias(customEvent);
     }
     toggleDropDown() {
         this.dropdownOpen = !this.dropdownOpen;

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../components/multi-select/multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\n/* eslint-disable no-duplicate-imports */\n/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { html, nothing, } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down.svg?raw';\nimport svgClear from '@tmorrow/cre8-wc/icons/Clear_X.svg?raw';\nimport styles from './multi-select.styles.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../remove-tag/remove-tag';\nimport '../field-note/field-note';\nimport '../button/button';\nimport '../checkbox-field-item/checkbox-field-item';\n// eslint-disable-next-line import/no-named-as-default\nimport Cre8CheckboxFieldItem from '../checkbox-field-item/checkbox-field-item';\n\n/**\n * Multiselect is used when multiple options can be chosen from a static dropdown\n * This component has a list of items in the dropdown that can be added as \"selected tags\"\n * The checkbox will always reflect the selected nature of the item and is not removed\n * from the dropdown when clicked, the tags will be added and removed based on their state.\n *\n * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the\n * current list after the change is given in the detail.\n *\n * @slot fieldNote - Container for optional field note content\n *\n * @fires selectedItemsChange - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.\n */\nexport class Cre8MultiSelect extends Cre8Element {\n  static styles = [styles];\n\n\n  /**\n   * The list of string items the user can choose in the dropdown\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  items: string[] = [];\n\n  @state()\n  selectedTagItems: string[] = [];\n\n  /**\n   * The list of string items that are initially in the selected list of tags\n   * Note: This list MUST be a subset of the array of items to function.\n   * i.e. if items=['cat', 'dog', 'bird'], preselectedItems=['cat'] is valid\n   * while preselectedItems=['cat', 'goat'] is not and will break the component.\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  preselectedItems: string[];\n\n  @state()\n  dropdownOpen: boolean = false;\n\n  /**\n   * The required label that appears above the multiselect\n   * @attr {string}\n   */\n  @property()\n  label: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /* Life Cycle Methods */\n\n  constructor() {\n    super();\n    this._handleOnClick = this._handleOnClick.bind(this);\n  }\n\n  firstUpdated() {\n    if (this.preselectedItems) this.setPreselectedItemsinDropdown();\n    this.selectedTagItems = this.preselectedItems || [];\n    this._initializeAria();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('click', this._handleOnClick, false);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('click', this._handleOnClick, false);\n  }\n\n  /* HTML Content functions */\n\n  private _renderDropdownItems() {\n    return this.items.map(\n      // Note: Keyboard can already navigate to the checkbox\n      // eslint-disable-next-line lit-a11y/click-events-have-key-events\n      (item, index) => html`<li\n        @click=\"${(e: MouseEvent) => this._handleListItemClick(e, index)}\"\n      >\n        <cre8-checkbox-field-item\n          .checked=\"${!!this.selectedTagItems.includes(item)}\"\n          label=${item}\n          id=${index}\n          @input=\"${(e: InputEvent) => this._handleDropdownItemInput(item, e)}\"\n        >\n        </cre8-checkbox-field-item>\n      </li>`\n    );\n  }\n\n  private _renderSelectedTags() {\n    if (!this.selectedTagItems.length) {\n      return nothing;\n    }\n    return this.selectedTagItems.map(\n      (item) => html`<li>\n        <cre8-remove-tag\n          text=\"${item}\"\n          color=\"neutral\"\n          shape=\"square\"\n          ?disabled=\"${this.disabled}\"\n          @removeTagClicked=\"${() => this._handleRemoveTagClick(item)}\"\n        ></cre8-remove-tag>\n      </li>`\n    );\n  }\n\n  /* Helper Functions */\n\n  private setPreselectedItemsinDropdown() {\n    this.preselectedItems.forEach((item) => {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    });\n  }\n\n  private clearAllTags() {\n    if (!this.disabled) {\n      if (this.dropdownOpen) {\n        this.selectedTagItems.forEach((item) => {\n          this.shadowRoot\n            ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n            .shadowRoot?.querySelector('input')\n            .click();\n        });\n      }\n      this.selectedTagItems = [];\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private emitSelectedItems(): void {\n    const customEvent = new CustomEvent('selectedItemsChange', {\n      detail: {\n        selectedItems: this.selectedTagItems,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  private toggleDropDown(): void {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  /* Click Event Functions */\n\n  private _handleOnClick(event?: MouseEvent) {\n    if (!this.shadowRoot?.host) {\n      throw Error(\n        'Could not determine navigation context during click handler'\n      );\n    }\n\n    const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n    const label = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__label'\n    );\n    const buttonsWrapper = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__icons-wrapper'\n    );\n    const removeTagWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__tag-wrapper'\n    );\n    const dropdownWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__dropdown'\n    );\n\n    if (!didClickInside) {\n      this.dropdownOpen = false;\n    } else if (\n      !event.composedPath().includes(label)\n      && !event.composedPath().includes(removeTagWrapper)\n      && !event.composedPath().includes(buttonsWrapper)\n      && !event.composedPath().includes(dropdownWrapper)\n      && !this.disabled\n    ) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleListItemClick(e: MouseEvent, index: number) {\n    if (\n      e.target\n      !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n    ) {\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n    }\n  }\n\n  private _handleDropdownItemInput(item: string, e: InputEvent) {\n    const targetCheckbox = e.target as Cre8CheckboxFieldItem;\n\n    if (targetCheckbox.checked) {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    } else {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n    }\n\n    this.emitSelectedItems();\n  }\n\n  private async _handleRemoveTagClick(item: string) {\n    if (!this.disabled) {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n      await this.updateComplete;\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private dropdownArrowClick() {\n    if (!this.disabled) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleButtonToListKeydown(e: KeyboardEvent): void {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n\n  private _handleListKeydown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n    }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-success\"\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames(\n      'cre8-c-multi-select',\n      {\n        'cre8-is-error': this.isError,\n        'cre8-is-success': this.isSuccess,\n        'cre8-is-disabled': this.disabled,\n        'cre8-c-multi-select--no-clear-icon': !this.selectedTagItems.length,\n      }\n    );\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-multi-select__label\" id=\"${this.fieldId}\"\n          >${this.label}</label\n        >\n        <div class=\"cre8-c-multi-select__body\" ?disabled=${this.disabled}>\n          <div\n            class=\"cre8-c-multi-select__content\"\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n          >\n            <ul\n              class=\"cre8-c-multi-select__tag-wrapper\"\n              aria-label=\"selected items\"\n            >\n              ${this._renderSelectedTags()}\n            </ul>\n          </div>\n          <div class=\"cre8-c-multi-select__icons-wrapper\">\n            <cre8-button\n              ?hideText=${true}\n              svg=\"${svgClear}\"\n              text=\"Clear All\"\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__clear_icon\"\n              @click=\"${this.clearAllTags}\"\n            >\n            </cre8-button>\n            <cre8-button\n              hideText\n              svg=${svgCaretDown}\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__down_icon\"\n              @click=\"${this.dropdownArrowClick}\"\n              @keydown=\"${this._handleButtonToListKeydown}\"\n              text=\"Open Dropdown\"\n              aria-expanded=\"${this.dropdownOpen}\"\n            >\n            </cre8-button>\n          </div>\n        </div>\n        ${this.dropdownOpen\n        ? html`\n            <fieldset class=\"cre8-c-multi-select__dropdown\" aria-describedby=\"${this.fieldId}\">\n              <ul\n                aria-label=\"available items\"\n                @keydown=\"${this._handleListKeydown}\"\n              >\n                ${this._renderDropdownItems()}\n              </ul>\n            </fieldset>`\n        : nothing}\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-multi-select__field-note\"\n          >\n            <slot name=\"fieldNote\">${this.fieldNote}</slot>\n          </cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-multi-select') === undefined) {\n  customElements.define('cre8-multi-select', Cre8MultiSelect);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-multi-select': Cre8MultiSelect;\n  }\n}\n\nexport default Cre8MultiSelect;\n"]}
+{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../components/multi-select/multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\n/* eslint-disable no-duplicate-imports */\n/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { html, nothing, } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down.svg?raw';\nimport svgClear from '@tmorrow/cre8-wc/icons/Clear_X.svg?raw';\nimport styles from './multi-select.styles.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../remove-tag/remove-tag';\nimport '../field-note/field-note';\nimport '../button/button';\nimport '../checkbox-field-item/checkbox-field-item';\n// eslint-disable-next-line import/no-named-as-default\nimport Cre8CheckboxFieldItem from '../checkbox-field-item/checkbox-field-item';\n\n/**\n * Multiselect is used when multiple options can be chosen from a static dropdown\n * This component has a list of items in the dropdown that can be added as \"selected tags\"\n * The checkbox will always reflect the selected nature of the item and is not removed\n * from the dropdown when clicked, the tags will be added and removed based on their state.\n *\n * Event `multi-select-change` emits whenever a tag is added or remove from the list and the\n * current list after the change is given in the detail.\n *\n * @slot fieldNote - Container for optional field note content\n *\n * @fires multi-select-change - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.\n */\nexport class Cre8MultiSelect extends Cre8Element {\n  static styles = [styles];\n\n\n  /**\n   * The list of string items the user can choose in the dropdown\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  items: string[] = [];\n\n  @state()\n  selectedTagItems: string[] = [];\n\n  /**\n   * The list of string items that are initially in the selected list of tags\n   * Note: This list MUST be a subset of the array of items to function.\n   * i.e. if items=['cat', 'dog', 'bird'], preselectedItems=['cat'] is valid\n   * while preselectedItems=['cat', 'goat'] is not and will break the component.\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  preselectedItems: string[];\n\n  @state()\n  dropdownOpen: boolean = false;\n\n  /**\n   * The required label that appears above the multiselect\n   * @attr {string}\n   */\n  @property()\n  label: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /* Life Cycle Methods */\n\n  constructor() {\n    super();\n    this._handleOnClick = this._handleOnClick.bind(this);\n  }\n\n  firstUpdated() {\n    if (this.preselectedItems) this.setPreselectedItemsinDropdown();\n    this.selectedTagItems = this.preselectedItems || [];\n    this._initializeAria();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('click', this._handleOnClick, false);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('click', this._handleOnClick, false);\n  }\n\n  /* HTML Content functions */\n\n  private _renderDropdownItems() {\n    return this.items.map(\n      // Note: Keyboard can already navigate to the checkbox\n      // eslint-disable-next-line lit-a11y/click-events-have-key-events\n      (item, index) => html`<li\n        @click=\"${(e: MouseEvent) => this._handleListItemClick(e, index)}\"\n      >\n        <cre8-checkbox-field-item\n          .checked=\"${!!this.selectedTagItems.includes(item)}\"\n          label=${item}\n          id=${index}\n          @input=\"${(e: InputEvent) => this._handleDropdownItemInput(item, e)}\"\n        >\n        </cre8-checkbox-field-item>\n      </li>`\n    );\n  }\n\n  private _renderSelectedTags() {\n    if (!this.selectedTagItems.length) {\n      return nothing;\n    }\n    return this.selectedTagItems.map(\n      (item) => html`<li>\n        <cre8-remove-tag\n          text=\"${item}\"\n          color=\"neutral\"\n          shape=\"square\"\n          ?disabled=\"${this.disabled}\"\n          @remove-tag-click=\"${() => this._handleRemoveTagClick(item)}\"\n        ></cre8-remove-tag>\n      </li>`\n    );\n  }\n\n  /* Helper Functions */\n\n  private setPreselectedItemsinDropdown() {\n    this.preselectedItems.forEach((item) => {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    });\n  }\n\n  private clearAllTags() {\n    if (!this.disabled) {\n      if (this.dropdownOpen) {\n        this.selectedTagItems.forEach((item) => {\n          this.shadowRoot\n            ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n            .shadowRoot?.querySelector('input')\n            .click();\n        });\n      }\n      this.selectedTagItems = [];\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private emitSelectedItems(): void {\n    const customEvent = new CustomEvent('multi-select-change', {\n      detail: {\n        selectedItems: this.selectedTagItems,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchWithLegacyAlias(customEvent);\n  }\n\n  private toggleDropDown(): void {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  /* Click Event Functions */\n\n  private _handleOnClick(event?: MouseEvent) {\n    if (!this.shadowRoot?.host) {\n      throw Error(\n        'Could not determine navigation context during click handler'\n      );\n    }\n\n    const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n    const label = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__label'\n    );\n    const buttonsWrapper = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__icons-wrapper'\n    );\n    const removeTagWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__tag-wrapper'\n    );\n    const dropdownWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__dropdown'\n    );\n\n    if (!didClickInside) {\n      this.dropdownOpen = false;\n    } else if (\n      !event.composedPath().includes(label)\n      && !event.composedPath().includes(removeTagWrapper)\n      && !event.composedPath().includes(buttonsWrapper)\n      && !event.composedPath().includes(dropdownWrapper)\n      && !this.disabled\n    ) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleListItemClick(e: MouseEvent, index: number) {\n    if (\n      e.target\n      !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n    ) {\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n    }\n  }\n\n  private _handleDropdownItemInput(item: string, e: InputEvent) {\n    const targetCheckbox = e.target as Cre8CheckboxFieldItem;\n\n    if (targetCheckbox.checked) {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    } else {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n    }\n\n    this.emitSelectedItems();\n  }\n\n  private async _handleRemoveTagClick(item: string) {\n    if (!this.disabled) {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n      await this.updateComplete;\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private dropdownArrowClick() {\n    if (!this.disabled) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleButtonToListKeydown(e: KeyboardEvent): void {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n\n  private _handleListKeydown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n    }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-success\"\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames(\n      'cre8-c-multi-select',\n      {\n        'cre8-is-error': this.isError,\n        'cre8-is-success': this.isSuccess,\n        'cre8-is-disabled': this.disabled,\n        'cre8-c-multi-select--no-clear-icon': !this.selectedTagItems.length,\n      }\n    );\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-multi-select__label\" id=\"${this.fieldId}\"\n          >${this.label}</label\n        >\n        <div class=\"cre8-c-multi-select__body\" ?disabled=${this.disabled}>\n          <div\n            class=\"cre8-c-multi-select__content\"\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n          >\n            <ul\n              class=\"cre8-c-multi-select__tag-wrapper\"\n              aria-label=\"selected items\"\n            >\n              ${this._renderSelectedTags()}\n            </ul>\n          </div>\n          <div class=\"cre8-c-multi-select__icons-wrapper\">\n            <cre8-button\n              ?hideText=${true}\n              svg=\"${svgClear}\"\n              text=\"Clear All\"\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__clear_icon\"\n              @click=\"${this.clearAllTags}\"\n            >\n            </cre8-button>\n            <cre8-button\n              hideText\n              svg=${svgCaretDown}\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__down_icon\"\n              @click=\"${this.dropdownArrowClick}\"\n              @keydown=\"${this._handleButtonToListKeydown}\"\n              text=\"Open Dropdown\"\n              aria-expanded=\"${this.dropdownOpen}\"\n            >\n            </cre8-button>\n          </div>\n        </div>\n        ${this.dropdownOpen\n        ? html`\n            <fieldset class=\"cre8-c-multi-select__dropdown\" aria-describedby=\"${this.fieldId}\">\n              <ul\n                aria-label=\"available items\"\n                @keydown=\"${this._handleListKeydown}\"\n              >\n                ${this._renderDropdownItems()}\n              </ul>\n            </fieldset>`\n        : nothing}\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-multi-select__field-note\"\n          >\n            <slot name=\"fieldNote\">${this.fieldNote}</slot>\n          </cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-multi-select') === undefined) {\n  customElements.define('cre8-multi-select', Cre8MultiSelect);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-multi-select': Cre8MultiSelect;\n  }\n}\n\nexport default Cre8MultiSelect;\n"]}

package/lib/components/pagination/pagination.d.ts

@@ -54,7 +54,7 @@ import './page-counter/page-counter';
  *
  * @slot - Optional content rendered alongside the pagination controls
  *
- * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
+ * @fires pagination-change - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
  */
 export declare class Cre8Pagination extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/pagination/pagination.js

@@ -71,7 +71,7 @@ import styles from './pagination.styles.js';
  *
  * @slot - Optional content rendered alongside the pagination controls
  *
- * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
+ * @fires pagination-change - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
  */
 export class Cre8Pagination extends Cre8Element {
     constructor() {
@@ -104,7 +104,7 @@ export class Cre8Pagination extends Cre8Element {
             this._currentPage = page;
             this.currentPage = this._currentPage;
             this.requestUpdate('currentPage', old);
-            this.dispatchEvent(new CustomEvent('pagination.click', { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }));
+            this.dispatchWithLegacyAlias(new CustomEvent('pagination-change', { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }));
         };
     }
     /**