@tmorrow/cre8-wc 2.0.7 → 2.0.8

package/lib/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '@tmorrow/cre8-wc/icons/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8Button } from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n *\n * @slot - Optional content rendered alongside the pagination controls\n *\n * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n    @state()\n    _currentPage: number = 99;\n\n    /**\n     * Input the total number of elements are returned from consuming app e.g. search results\n     * @attr number\n     * @required\n     */\n    @property({ reflect: true, type: Number })\n    totalResults!: number;\n\n\n    /**\n     * how many elements will displayVariant per page, indicated by business to typically be 20\n     * @attr number\n     */\n    @property({ type: Number, reflect: true })\n    get pageSize() {\n        return this._pageSize;\n    }\n\n    set pageSize(newSize: number) {\n        const oldSize = this._pageSize;\n        this._pageSize = newSize;\n        this.requestUpdate('pageSize', oldSize);\n    }\n\n    @state()\n    _pageSize = 10;\n\n\n    /**\n     * Controls how many page buttons are displayVarianted on the page\n     * at once, if container size permits. recommended max = 5 pages\n     *\n     * @attr number\n     */\n    @property({ reflect: true, type: Number })\n    visiblePages?: number = 5;\n\n    /**\n     * (optional) prop that allows for a compact and icon-only variant both\n     * for mobile screen-sizes and for use in certain contexts as guided by design,\n     * the component size will show 'default' in the absence of a value on desktop and\n     * 'compact' on smaller views.\n     *\n     * @attr 'compact' | 'icon-only' | 'default'\n     * @optional\n     */\n    @property({ type: String, reflect: true })\n    display?: 'compact' | 'icon-only' | 'default';\n\n    /**\n     *\n     *@state watches the width of the window and responds to show the accessibility approved variant.\n     */\n    @state()\n    windowWidth!: number;\n\n    @queryAll('cre8-button')\n    buttons: typeof Cre8Button[];\n\n    /**\n    *\n    * @optional\n    */\n    @property({ type: Boolean, reflect: true })\n    hideLastAndFirstButtons?: boolean;\n\n    /**\n     * The currently active page (1-based). Setting it programmatically navigates the pagination.\n     */\n    @property({ reflect: true, type: Number })\n    get currentPage() {\n        return this._currentPage;\n    }\n\n    set currentPage(newPage: number) {\n        const oldPage = this._currentPage;\n        this._currentPage = newPage;\n        this.requestUpdate('currentPage', oldPage);\n    }\n\n    connectedCallBack() {\n        super.connectedCallback();\n    }\n\n    get maxVisiblePages() {\n        const allowedVisiblePages = {\n            md: 5,\n        };\n\n        // lg and up\n\n        if (!isMobile(screenSizes.lg.toString())) {\n            return this.visiblePages;\n        }\n\n        if (!isMobile(screenSizes.md.toString())) {\n            return Math.min(allowedVisiblePages.md, this.visiblePages);\n        }\n        return 0;\n    }\n\n\n    private get totalPages(): number {\n        return Math.ceil(this.totalResults / this.pageSize);\n    }\n\n    private get hasNoPreviousPage() {\n        return this._currentPage <= 1;\n    }\n\n    private get hasNoNextPage() {\n        return this._currentPage >= this.totalPages;\n    }\n\n    private _onHandleResize() {\n        this.requestUpdate();\n    }\n\n    handleResize() {\n        this._onHandleResize.bind(this);\n    }\n\n    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n    protected get pageRange(): number[] {\n        const left = Math.floor(this.maxVisiblePages / 2);\n        let startPage = this.currentPage - left;\n        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n        startPage = Math.max(startPage, 1);\n        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n    }\n\n    protected async firstUpdated() {\n        await this.updateComplete;\n        if (this._pageSize !== this.pageSize) {\n            const old = this._pageSize;\n            this._pageSize = this.pageSize;\n            this.requestUpdate('pageSize', old);\n        }\n        this.windowWidth = window.innerWidth;\n        window.addEventListener('resize', () => {\n            if (this.windowWidth !== window.innerWidth) {\n                const oldWidth = this.windowWidth;\n                this.windowWidth = window.innerWidth;\n                this.handleResize();\n                this.requestUpdate('isResponsive', oldWidth);\n            }\n        });\n        if (this._currentPage !== this.currentPage) {\n            const old = this._currentPage;\n            this._currentPage = this.currentPage;\n            this.requestUpdate('currentPage', old);\n        }\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('resize', this.handleResize);\n        super.disconnectedCallback();\n    }\n\n    displayTypes(): HTMLTemplateResult {\n        return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n    }\n\n    private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n        if (e.code === 'Enter') {\n            this._goToPage(page, _buttonName); /* 2 */\n        }\n    };\n\n    private _goToPage = (page: number, _buttonName?: string) => () => {\n        const old = this._currentPage;\n        let focusButton: Cre8Button;\n        this.buttons.forEach((_: typeof Cre8Button) => {\n            const b = new Cre8Button();\n            if (b.hideText && (b.text === _buttonName)) {\n                focusButton = b;\n                (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n            }\n            return null;\n        });\n        this._currentPage = page;\n        this.currentPage = this._currentPage;\n        this.requestUpdate('currentPage', old);\n        this.dispatchEvent(new CustomEvent(\n            'pagination.click',\n            { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n        ));\n    };\n\n    public goToPage(page: number, buttonName?: string) {\n        return this._goToPage(page, buttonName).bind(this);\n    }\n\n    public handleKeydown(page: number, buttonName?: string) {\n        return this._handleKeydown(page, buttonName);\n    }\n\n    render() {\n        const classNames = this.componentClassNames('cre8-c-pagination', {\n            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n        });\n\n\n        return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n                ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n                    ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                    : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n                        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n                        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n                    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n                        ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                        : nothing}`\n                : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n                ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n                : nothing}\n\n      </nav>`;\n    }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-pagination': Cre8Pagination;\n    }\n}\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '@tmorrow/cre8-wc/icons/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8Button } from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n *\n * @slot - Optional content rendered alongside the pagination controls\n *\n * @fires pagination-change - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n    @state()\n    _currentPage: number = 99;\n\n    /**\n     * Input the total number of elements are returned from consuming app e.g. search results\n     * @attr number\n     * @required\n     */\n    @property({ reflect: true, type: Number })\n    totalResults!: number;\n\n\n    /**\n     * how many elements will displayVariant per page, indicated by business to typically be 20\n     * @attr number\n     */\n    @property({ type: Number, reflect: true })\n    get pageSize() {\n        return this._pageSize;\n    }\n\n    set pageSize(newSize: number) {\n        const oldSize = this._pageSize;\n        this._pageSize = newSize;\n        this.requestUpdate('pageSize', oldSize);\n    }\n\n    @state()\n    _pageSize = 10;\n\n\n    /**\n     * Controls how many page buttons are displayVarianted on the page\n     * at once, if container size permits. recommended max = 5 pages\n     *\n     * @attr number\n     */\n    @property({ reflect: true, type: Number })\n    visiblePages?: number = 5;\n\n    /**\n     * (optional) prop that allows for a compact and icon-only variant both\n     * for mobile screen-sizes and for use in certain contexts as guided by design,\n     * the component size will show 'default' in the absence of a value on desktop and\n     * 'compact' on smaller views.\n     *\n     * @attr 'compact' | 'icon-only' | 'default'\n     * @optional\n     */\n    @property({ type: String, reflect: true })\n    display?: 'compact' | 'icon-only' | 'default';\n\n    /**\n     *\n     *@state watches the width of the window and responds to show the accessibility approved variant.\n     */\n    @state()\n    windowWidth!: number;\n\n    @queryAll('cre8-button')\n    buttons: typeof Cre8Button[];\n\n    /**\n    *\n    * @optional\n    */\n    @property({ type: Boolean, reflect: true })\n    hideLastAndFirstButtons?: boolean;\n\n    /**\n     * The currently active page (1-based). Setting it programmatically navigates the pagination.\n     */\n    @property({ reflect: true, type: Number })\n    get currentPage() {\n        return this._currentPage;\n    }\n\n    set currentPage(newPage: number) {\n        const oldPage = this._currentPage;\n        this._currentPage = newPage;\n        this.requestUpdate('currentPage', oldPage);\n    }\n\n    connectedCallBack() {\n        super.connectedCallback();\n    }\n\n    get maxVisiblePages() {\n        const allowedVisiblePages = {\n            md: 5,\n        };\n\n        // lg and up\n\n        if (!isMobile(screenSizes.lg.toString())) {\n            return this.visiblePages;\n        }\n\n        if (!isMobile(screenSizes.md.toString())) {\n            return Math.min(allowedVisiblePages.md, this.visiblePages);\n        }\n        return 0;\n    }\n\n\n    private get totalPages(): number {\n        return Math.ceil(this.totalResults / this.pageSize);\n    }\n\n    private get hasNoPreviousPage() {\n        return this._currentPage <= 1;\n    }\n\n    private get hasNoNextPage() {\n        return this._currentPage >= this.totalPages;\n    }\n\n    private _onHandleResize() {\n        this.requestUpdate();\n    }\n\n    handleResize() {\n        this._onHandleResize.bind(this);\n    }\n\n    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n    protected get pageRange(): number[] {\n        const left = Math.floor(this.maxVisiblePages / 2);\n        let startPage = this.currentPage - left;\n        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n        startPage = Math.max(startPage, 1);\n        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n    }\n\n    protected async firstUpdated() {\n        await this.updateComplete;\n        if (this._pageSize !== this.pageSize) {\n            const old = this._pageSize;\n            this._pageSize = this.pageSize;\n            this.requestUpdate('pageSize', old);\n        }\n        this.windowWidth = window.innerWidth;\n        window.addEventListener('resize', () => {\n            if (this.windowWidth !== window.innerWidth) {\n                const oldWidth = this.windowWidth;\n                this.windowWidth = window.innerWidth;\n                this.handleResize();\n                this.requestUpdate('isResponsive', oldWidth);\n            }\n        });\n        if (this._currentPage !== this.currentPage) {\n            const old = this._currentPage;\n            this._currentPage = this.currentPage;\n            this.requestUpdate('currentPage', old);\n        }\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('resize', this.handleResize);\n        super.disconnectedCallback();\n    }\n\n    displayTypes(): HTMLTemplateResult {\n        return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n    }\n\n    private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n        if (e.code === 'Enter') {\n            this._goToPage(page, _buttonName); /* 2 */\n        }\n    };\n\n    private _goToPage = (page: number, _buttonName?: string) => () => {\n        const old = this._currentPage;\n        let focusButton: Cre8Button;\n        this.buttons.forEach((_: typeof Cre8Button) => {\n            const b = new Cre8Button();\n            if (b.hideText && (b.text === _buttonName)) {\n                focusButton = b;\n                (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n            }\n            return null;\n        });\n        this._currentPage = page;\n        this.currentPage = this._currentPage;\n        this.requestUpdate('currentPage', old);\n        this.dispatchWithLegacyAlias(new CustomEvent(\n            'pagination-change',\n            { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n        ));\n    };\n\n    public goToPage(page: number, buttonName?: string) {\n        return this._goToPage(page, buttonName).bind(this);\n    }\n\n    public handleKeydown(page: number, buttonName?: string) {\n        return this._handleKeydown(page, buttonName);\n    }\n\n    render() {\n        const classNames = this.componentClassNames('cre8-c-pagination', {\n            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n        });\n\n\n        return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n                ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n                    ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                    : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n                        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n                        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n                    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n                        ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                        : nothing}`\n                : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n                ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n                : nothing}\n\n      </nav>`;\n    }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-pagination': Cre8Pagination;\n    }\n}\n"]}

package/lib/components/percent-bar/percent-bar.d.ts

@@ -6,6 +6,8 @@ import '../progress-meter/progress-meter';
  * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
  * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
  * allows a user save their progress before exiting.
+ *
+ * @fires percent-bar-left-action-click - Fires when the left action button is clicked.
  */
 export declare class Cre8PercentBar extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/percent-bar/percent-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar.d.ts","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAG1C;;;;GAIG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;IAOzB,KAAK,EAAE,MAAM,CAAC;IAMd,GAAG,EAAE,MAAM,CAAC;IAMZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAInB,MAAM;CAoCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"percent-bar.d.ts","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAG1C;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;IAOzB,KAAK,EAAE,MAAM,CAAC;IAMd,GAAG,EAAE,MAAM,CAAC;IAMZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAInB,MAAM;CAoCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}

package/lib/components/percent-bar/percent-bar.js

@@ -17,10 +17,12 @@ import styles from './percent-bar.styles.js';
  * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
  * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
  * allows a user save their progress before exiting.
+ *
+ * @fires percent-bar-left-action-click - Fires when the left action button is clicked.
  */
 export class Cre8PercentBar extends Cre8Element {
     _handleClick(e) {
-        this.dispatchEvent(new Event('leftActionButtonClick', e));
+        this.dispatchWithLegacyAlias(new Event('percent-bar-left-action-click', e));
     }
     fractionAsPercent() {
         return Math.round((this.value / this.max) * 100);

package/lib/components/percent-bar/percent-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":";;;;;;AAAA,2BAA2B;AAC3B,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAsBrC,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;oBACK,mBAAmB;;;kBAGrB,IAAI,CAAC,WAAW,EAAE;YAClB,CAAC,CAAC,IAAI,CAAA;kCACU,IAAI;;6BAET,UAAU;;;kCAGL,IAAI,CAAC,iBAAiB;gCACxB,IAAI,CAAC,YAAY;;mCAEd;YACjB,CAAC,CAAC,OAAO;;;;;;;oBAOP,IAAI,CAAC,iBAAiB,EAAE;;;;;mBAKzB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;;;KAGpB,CAAC;IACJ,CAAC;;AApEM,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;6CACG;AAMd;IADC,QAAQ,EAAE;2CACC;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACf;AAoD9B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["/* eslint-disable indent */\nimport { html, nothing,  } from 'lit';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport '../text-passage/text-passage';\nimport '../progress-meter/progress-meter';\nimport styles from './percent-bar.styles.js';\n\n/**\n * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with\n * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that\n * allows a user save their progress before exiting.\n */\nexport class Cre8PercentBar extends Cre8Element {\n  static styles = [styles];\n\n\n  /*\n   * The current step the user is on.\n   */\n  @property()\n  value: number;\n\n  /*\n   * The total number of steps in the multistep process.\n   */\n  @property()\n  max: number;\n\n  /*\n   * The action-left icon-only tertiary button in the percent bar controls can be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disableActionLeft?: boolean;\n\n  private _handleClick(e: MouseEvent) {\n    this.dispatchEvent(new Event('leftActionButtonClick', e));\n  }\n\n  private fractionAsPercent(): number {\n    return Math.round((this.value / this.max) * 100);\n  }\n\n  private isFirstStep(): boolean {\n    return this.value > 1;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});\n\n    return html`\n      <div class=\"${componentClassNames}\">\n          <div class=\"cre8-c-percent-bar__controls\">\n              <div lass=\"cre8-c-percent-bar__left-controls\">\n                ${this.isFirstStep()\n                  ? html` <cre8-button\n                      ?hideText=${true}\n                      text=\"Previous step\"\n                      svg=\"${svgCaretUp}\"\n                      iconRotateDegree=\"-90\"\n                      variant=\"tertiary\"\n                      ?disabled=${this.disableActionLeft}\n                      @click=\"${this._handleClick}\"\n                    >\n                    </cre8-button>`\n                  : nothing}\n              </div>\n              <div class=\"cre8-c-percent-bar__right-controls\">\n                <cre8-text-passage\n                  size=\"small\"\n                  class=\"cre8-c-percent-bar__text-passage\"\n                >\n                  ${this.fractionAsPercent()}%\n                </cre8-text-passage>\n              </div>\n            </div>\n        <cre8-progress-meter\n          value=\"${this.value}\"\n          max=\"${this.max}\"\n        ></cre8-progress-meter>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-percent-bar') === undefined) {\n  customElements.define('cre8-percent-bar', Cre8PercentBar);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-percent-bar': Cre8PercentBar;\n  }\n}\n\nexport default Cre8PercentBar;\n"]}
+{"version":3,"file":"percent-bar.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":";;;;;;AAAA,2BAA2B;AAC3B,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAsBrC,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,uBAAuB,CAAC,IAAI,KAAK,CAAC,+BAA+B,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;oBACK,mBAAmB;;;kBAGrB,IAAI,CAAC,WAAW,EAAE;YAClB,CAAC,CAAC,IAAI,CAAA;kCACU,IAAI;;6BAET,UAAU;;;kCAGL,IAAI,CAAC,iBAAiB;gCACxB,IAAI,CAAC,YAAY;;mCAEd;YACjB,CAAC,CAAC,OAAO;;;;;;;oBAOP,IAAI,CAAC,iBAAiB,EAAE;;;;;mBAKzB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;;;KAGpB,CAAC;IACJ,CAAC;;AApEM,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;6CACG;AAMd;IADC,QAAQ,EAAE;2CACC;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACf;AAoD9B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["/* eslint-disable indent */\nimport { html, nothing,  } from 'lit';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport '../text-passage/text-passage';\nimport '../progress-meter/progress-meter';\nimport styles from './percent-bar.styles.js';\n\n/**\n * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with\n * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that\n * allows a user save their progress before exiting.\n *\n * @fires percent-bar-left-action-click - Fires when the left action button is clicked.\n */\nexport class Cre8PercentBar extends Cre8Element {\n  static styles = [styles];\n\n\n  /*\n   * The current step the user is on.\n   */\n  @property()\n  value: number;\n\n  /*\n   * The total number of steps in the multistep process.\n   */\n  @property()\n  max: number;\n\n  /*\n   * The action-left icon-only tertiary button in the percent bar controls can be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disableActionLeft?: boolean;\n\n  private _handleClick(e: MouseEvent) {\n    this.dispatchWithLegacyAlias(new Event('percent-bar-left-action-click', e));\n  }\n\n  private fractionAsPercent(): number {\n    return Math.round((this.value / this.max) * 100);\n  }\n\n  private isFirstStep(): boolean {\n    return this.value > 1;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});\n\n    return html`\n      <div class=\"${componentClassNames}\">\n          <div class=\"cre8-c-percent-bar__controls\">\n              <div lass=\"cre8-c-percent-bar__left-controls\">\n                ${this.isFirstStep()\n                  ? html` <cre8-button\n                      ?hideText=${true}\n                      text=\"Previous step\"\n                      svg=\"${svgCaretUp}\"\n                      iconRotateDegree=\"-90\"\n                      variant=\"tertiary\"\n                      ?disabled=${this.disableActionLeft}\n                      @click=\"${this._handleClick}\"\n                    >\n                    </cre8-button>`\n                  : nothing}\n              </div>\n              <div class=\"cre8-c-percent-bar__right-controls\">\n                <cre8-text-passage\n                  size=\"small\"\n                  class=\"cre8-c-percent-bar__text-passage\"\n                >\n                  ${this.fractionAsPercent()}%\n                </cre8-text-passage>\n              </div>\n            </div>\n        <cre8-progress-meter\n          value=\"${this.value}\"\n          max=\"${this.max}\"\n        ></cre8-progress-meter>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-percent-bar') === undefined) {\n  customElements.define('cre8-percent-bar', Cre8PercentBar);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-percent-bar': Cre8PercentBar;\n  }\n}\n\nexport default Cre8PercentBar;\n"]}

package/lib/components/popover/popover.d.ts

@@ -8,8 +8,8 @@ import '../heading/heading';
  * @slot header - Custom header content for the popover panel
  * @slot footer - Custom footer content for the popover panel
  *
- * @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.
- * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.
+ * @fires popover-open - Fires when the popover opens. `event.detail.isActive` is `true`.
+ * @fires popover-close - Fires when the popover closes. `event.detail.isActive` is `false`.
  */
 export declare class Cre8Popover extends Cre8Element {
     static styles: import("lit").CSSResult[];
@@ -20,11 +20,10 @@ export declare class Cre8Popover extends Cre8Element {
     heading?: string;
     /**
      * Positions the popover panel absolutely to the trigger
-     * - **default** positions the popover panel below the trigger
-     * - **top** positions the popover panel below the trigger
-     * - **left** positions the popover panel below the trigger
-     * - **right** positions the popover panel below the trigger
-     *  @attr {string | undefined}
+     * - Omitting this prop positions the popover panel below the trigger
+     * - **top** positions the popover panel above the trigger
+     * - **left** positions the popover panel to the left of the trigger
+     * - **right** positions the popover panel to the right of the trigger
      */
     position?: 'top' | 'left' | 'right';
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;GAUG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGvB;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;OAEG;IAEC,mBAAmB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IAEC,kBAAkB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3C;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;;OAMG;IACH,iBAAiB;IAQjB;;;;;;OAMG;IACH,oBAAoB;IAQpB;;;OAGG;IACH,YAAY;IAIZ;;;;;OAKG;IACH,OAAO;IAaP;;OAEG;IACH,eAAe;IAyCf;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IA8BrB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,4BAA4B;IAKpC;;;;;;;;;;;OAWG;IACH,oBAAoB,GAAI,GAAG,UAAU,UAoBnC;IAEF;;;;OAIG;IACH,oBAAoB,aAYlB;IAEF;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;GAUG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGvB;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;OAEG;IAEC,mBAAmB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IAEC,kBAAkB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3C;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;;OAMG;IACH,iBAAiB;IAQjB;;;;;;OAMG;IACH,oBAAoB;IAQpB;;;OAGG;IACH,YAAY;IAIZ;;;;;OAKG;IACH,OAAO;IAaP;;OAEG;IACH,eAAe;IAyCf;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IA8BrB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,4BAA4B;IAKpC;;;;;;;;;;;OAWG;IACH,oBAAoB,GAAI,GAAG,UAAU,UAoBnC;IAEF;;;;OAIG;IACH,oBAAoB,aAYlB;IAEF;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}

package/lib/components/popover/popover.js

@@ -17,8 +17,8 @@ import styles from './popover.styles.js';
  * @slot header - Custom header content for the popover panel
  * @slot footer - Custom footer content for the popover panel
  *
- * @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.
- * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.
+ * @fires popover-open - Fires when the popover opens. `event.detail.isActive` is `true`.
+ * @fires popover-close - Fires when the popover closes. `event.detail.isActive` is `false`.
  */
 export class Cre8Popover extends Cre8Element {
     constructor() {
@@ -192,11 +192,11 @@ export class Cre8Popover extends Cre8Element {
             requestAnimationFrame(() => {
                 this.dynamicPosition();
             });
-            this.dispatchEvent(new CustomEvent('open', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
+            this.dispatchWithLegacyAlias(new CustomEvent('popover-open', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
         }
         else {
             /* 3 */
-            this.dispatchEvent(new CustomEvent('close', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
+            this.dispatchWithLegacyAlias(new CustomEvent('popover-close', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
         }
         /**
          * Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position

package/lib/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../heading/heading';\nimport styles from './popover.styles.js';\nimport { Cre8Button } from '../button/button';\n\n/**\n * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.\n * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.\n * @slot - The component content\n * @slot trigger - The element that toggles the popover open and closed\n * @slot header - Custom header content for the popover panel\n * @slot footer - Custom footer content for the popover panel\n *\n * @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.\n * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.\n */\n\nexport class Cre8Popover extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The heading text that appears at the top of the popover panel. Should only be 2-3 lines max.\n   *  @attr {string | undefined}\n   */\n  @property()\n      heading?: string;\n\n  /**\n   * Positions the popover panel absolutely to the trigger\n   * - **default** positions the popover panel below the trigger\n   * - **top** positions the popover panel below the trigger\n   * - **left** positions the popover panel below the trigger\n   * - **right** positions the popover panel below the trigger\n   *  @attr {string | undefined}\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * Set to prevent the popover panel from hiding on scroll\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isVisibleOnScroll?: boolean;\n\n  /**\n   * The dynamic state for the popover\n   * - If true, the popover panel placement is determined by its position in the viewport\n   * - If false, the popover panel placement will be placed according to the position value\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the popover\n   * - If true, the popover panel is visible\n   * - If false, the popover panel is hidden\n   *\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover')\n      _Cre8Popover: HTMLElement;\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover__panel')\n      _Cre8PopoverPanel: HTMLElement;\n\n  /**\n   * Query the assigned elements in the trigger slot\n   */\n  @queryAssignedElements({ slot: 'trigger' })\n      _Cre8PopoverTrigger: Array<HTMLElement>;\n\n  /**\n   * Query the assigned elements in the footer slot\n   */\n  @queryAssignedElements({ slot: 'footer' })\n      _Cre8PopoverFooter: Array<HTMLElement>;\n\n  /**\n   * Query the document direction value\n   * <br/><br/> _*This property is dynamically set_\n   */\n  get isRTL() {\n      return document.dir === 'rtl';\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window resize event listener\n   * 2. Add window scroll event listener\n   * 3. Add window orientation change event listener\n   * 4. Add mousedown event listener\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      globalThis.window.addEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.addEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.addEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.addEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window resize event listener\n   * 2. Remove window scroll event listener\n   * 3. Remove window orientation change event listener\n   * 4. Remove mousedown event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      globalThis.window.removeEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.removeEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.removeEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.removeEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * First Updated Lifecycle\n   * 1. Set attribute since aria expanded can't be passed down through the slot\n   */\n  firstUpdated() {\n      this.addAria(); /* 1 */\n  }\n\n  /**\n   * Add aria attributes on the trigger button\n   * 1. Select the element within the trigger slot\n   * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.\n   * 3 Set the type to button.\n   */\n  addAria() {\n    /* 1 */\n      let popoverTrigger;\n      if (this._Cre8PopoverTrigger[0].tagName === 'CRE8-BUTTON') {\n          popoverTrigger = this._Cre8PopoverTrigger[0] as Cre8Button;\n          popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;\n      } else {\n          popoverTrigger = this._Cre8PopoverTrigger[0];\n          popoverTrigger.setAttribute('aria-expanded', `${this.isActive ? this.isActive : false}`); /* 2 */\n          popoverTrigger.setAttribute('type', 'button'); /* 3 */\n      }\n  }\n\n  /**\n   * Handle all dynamic placement\n   */\n  dynamicPosition() {\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n      if (this.isDynamic && this._Cre8PopoverPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n\n      /**\n       * If popover panel breaks out the left side of the window, position it to the right\n       */\n          if (popoverPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If popover panel breaks out the right side of the window, position it to the left\n       */\n          if (popoverPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If popover panel breaks out the top side of the window only, position it to the bottom\n       */\n          if (popoverPanel.top < 0 && popoverPanel.left > 0 && popoverPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If popover panel breaks out the bottom side of the window only, position it to the top\n       */\n          if (\n              popoverPanel.bottom >= window.innerHeight\n        && popoverPanel.left >= 0\n        && popoverPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Set Popover Active State\n   * 1. Toggle the active state between true and false\n   * 2. Set attribute since aria expanded can't be passed down through the slot\n   * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.\n   * This accounts for both design system buttons and native HTML buttons\n   */\n  private _toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n      this.addAria(); /* 2 */\n\n      if (this.isActive) {\n          requestAnimationFrame(() => {\n              this.dynamicPosition();\n          });\n          this.dispatchEvent(\n              new CustomEvent('open', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      } else {\n      /* 3 */\n          this.dispatchEvent(\n              new CustomEvent('close', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      }\n\n    /**\n     * Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position\n     */\n      setTimeout(() => {\n          if (this.isActive) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button\n   * 2. If the panel is opened, tab away closes the popover panel\n   * 3. The panel can be opened and closed by Enter or Space keys.\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape' && this.isActive === true) {\n          this._toggleActive();\n      } else if (e.key === 'Tab') {\n          this._handleTabNavigation(e);\n      }\n  }\n\n  private _handleTabNavigation(e: KeyboardEvent) {\n      if (this.isActive) {\n          this._navigateInsidePopover(e);\n      }\n  }\n\n  private _navigateInsidePopover(e: KeyboardEvent) {\n      const focusableElements = this._getFocusableElements();\n      if (focusableElements.length === 0) {\n          this._closePopoverAndFocusTrigger(e);\n          return;\n      }\n\n      const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n      if (document.activeElement === lastFocusableElement) {\n          this._closePopoverAndFocusTrigger(e);\n          e.preventDefault();\n      }\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n      const panelFocusableElements = Array.from(this._Cre8PopoverFooter);\n      return [...panelFocusableElements];\n  }\n\n  private _closePopoverAndFocusTrigger(e: KeyboardEvent) {\n      this._toggleActive();\n      e.preventDefault();\n  }\n\n  /**\n   * Handle click outside the component\n   * 1. Close the show/hide popover panel on click outside\n   * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early\n   * 3. By the time a user clicks on the page the shadowRoot will almost certainly be\n   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n   * undefined. To work around that we'll check that we have a shadowRoot (and a\n   * rendered .host) element here to appease the TypeScript compiler. This should never\n   * actually be shown or run for a human end user.\n   * 4. Check to see if we clicked inside the active panel\n   * 5. If the panel is active and we've clicked outside of the panel then it should be closed.\n   */\n  handleOnClickOutside = (e: MouseEvent) => {\n    /* 2 */\n      if (!this.isActive) {\n          return;\n      }\n\n    /* 3 */\n      if (!this.shadowRoot?.host) {\n          throw Error('Could not determine panel context during click handler');\n      }\n\n    /* 4 */\n      const didClickInside = e.composedPath().includes(this.shadowRoot.host);\n\n    /* 5 */\n      if (!(e.target === document.querySelector('html') && e.clientX >= document.documentElement.offsetWidth)) {\n          if (this.isActive && !didClickInside) {\n              this._toggleActive();\n          }\n      }\n  };\n\n  /**\n   * Remove Active State on Scroll\n   * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state\n   * 2. If the popover height is less than the window height, then allow the active to remove on scroll\n   */\n  removeActiveOnScroll = () => {\n    /* 1 */\n      if (this.isActive && !this.isVisibleOnScroll) {\n      /* 2 */\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n          const popoverTrigger = this._Cre8Popover;\n          const popoverHeight = popoverTrigger.clientHeight + popoverPanel.height + popoverPanel.top;\n\n          if (popoverHeight < window.innerHeight) {\n              this._toggleActive();\n          }\n      }\n  };\n\n  /**\n   * Remove Active State\n   * 1. If a specific event is fired, remove the active state.\n   */\n  removeActive = () => {\n      if (this.isActive) {\n          this._toggleActive();\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-popover', {\n          'cre8-c-popover--top': this.position === 'top',\n          'cre8-c-popover--left': this.position === 'left',\n          'cre8-c-popover--right': this.position === 'right',\n          'cre8-is-active': this.isActive,\n          'cre8-is-dynamic': this.isDynamic,\n          'cre8-is-dynamic-active': this.isActiveDynamic,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        ${this.slotNotEmpty('trigger')\n        && html` <slot name=\"trigger\" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}\n        ${this.isActive\n        ? html`\n              <div tabindex=\"0\" class=\"cre8-c-popover__panel\" @keydown=${this._handleKeydown}>\n                ${(this.slotNotEmpty('header') || this.heading)\n                && html`\n                  <div class=\"cre8-c-popover__header\">\n                    ${this.heading\n        ? html`<div class=\"cre8-c-popover__heading\">${this.heading}</div>`\n        : html`<slot name=\"header\"></slot>`}\n                  </div>\n                `}\n                <slot></slot>\n                ${this.slotNotEmpty('footer')\n                && html`\n                  <div class=\"cre8-c-popover__footer\">\n                    <slot name=\"footer\"></slot>\n                  </div>\n                `}\n              </div>\n            `\n        : nothing}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-popover') === undefined) {\n    customElements.define('cre8-popover', Cre8Popover);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-popover': Cre8Popover;\n  }\n}\n\nexport default Cre8Popover;\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../heading/heading';\nimport styles from './popover.styles.js';\nimport { Cre8Button } from '../button/button';\n\n/**\n * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.\n * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.\n * @slot - The component content\n * @slot trigger - The element that toggles the popover open and closed\n * @slot header - Custom header content for the popover panel\n * @slot footer - Custom footer content for the popover panel\n *\n * @fires popover-open - Fires when the popover opens. `event.detail.isActive` is `true`.\n * @fires popover-close - Fires when the popover closes. `event.detail.isActive` is `false`.\n */\n\nexport class Cre8Popover extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The heading text that appears at the top of the popover panel. Should only be 2-3 lines max.\n   *  @attr {string | undefined}\n   */\n  @property()\n      heading?: string;\n\n  /**\n   * Positions the popover panel absolutely to the trigger\n   * - Omitting this prop positions the popover panel below the trigger\n   * - **top** positions the popover panel above the trigger\n   * - **left** positions the popover panel to the left of the trigger\n   * - **right** positions the popover panel to the right of the trigger\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * Set to prevent the popover panel from hiding on scroll\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isVisibleOnScroll?: boolean;\n\n  /**\n   * The dynamic state for the popover\n   * - If true, the popover panel placement is determined by its position in the viewport\n   * - If false, the popover panel placement will be placed according to the position value\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the popover\n   * - If true, the popover panel is visible\n   * - If false, the popover panel is hidden\n   *\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover')\n      _Cre8Popover: HTMLElement;\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover__panel')\n      _Cre8PopoverPanel: HTMLElement;\n\n  /**\n   * Query the assigned elements in the trigger slot\n   */\n  @queryAssignedElements({ slot: 'trigger' })\n      _Cre8PopoverTrigger: Array<HTMLElement>;\n\n  /**\n   * Query the assigned elements in the footer slot\n   */\n  @queryAssignedElements({ slot: 'footer' })\n      _Cre8PopoverFooter: Array<HTMLElement>;\n\n  /**\n   * Query the document direction value\n   * <br/><br/> _*This property is dynamically set_\n   */\n  get isRTL() {\n      return document.dir === 'rtl';\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window resize event listener\n   * 2. Add window scroll event listener\n   * 3. Add window orientation change event listener\n   * 4. Add mousedown event listener\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      globalThis.window.addEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.addEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.addEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.addEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window resize event listener\n   * 2. Remove window scroll event listener\n   * 3. Remove window orientation change event listener\n   * 4. Remove mousedown event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      globalThis.window.removeEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.removeEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.removeEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.removeEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * First Updated Lifecycle\n   * 1. Set attribute since aria expanded can't be passed down through the slot\n   */\n  firstUpdated() {\n      this.addAria(); /* 1 */\n  }\n\n  /**\n   * Add aria attributes on the trigger button\n   * 1. Select the element within the trigger slot\n   * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.\n   * 3 Set the type to button.\n   */\n  addAria() {\n    /* 1 */\n      let popoverTrigger;\n      if (this._Cre8PopoverTrigger[0].tagName === 'CRE8-BUTTON') {\n          popoverTrigger = this._Cre8PopoverTrigger[0] as Cre8Button;\n          popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;\n      } else {\n          popoverTrigger = this._Cre8PopoverTrigger[0];\n          popoverTrigger.setAttribute('aria-expanded', `${this.isActive ? this.isActive : false}`); /* 2 */\n          popoverTrigger.setAttribute('type', 'button'); /* 3 */\n      }\n  }\n\n  /**\n   * Handle all dynamic placement\n   */\n  dynamicPosition() {\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n      if (this.isDynamic && this._Cre8PopoverPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n\n      /**\n       * If popover panel breaks out the left side of the window, position it to the right\n       */\n          if (popoverPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If popover panel breaks out the right side of the window, position it to the left\n       */\n          if (popoverPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If popover panel breaks out the top side of the window only, position it to the bottom\n       */\n          if (popoverPanel.top < 0 && popoverPanel.left > 0 && popoverPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If popover panel breaks out the bottom side of the window only, position it to the top\n       */\n          if (\n              popoverPanel.bottom >= window.innerHeight\n        && popoverPanel.left >= 0\n        && popoverPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Set Popover Active State\n   * 1. Toggle the active state between true and false\n   * 2. Set attribute since aria expanded can't be passed down through the slot\n   * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.\n   * This accounts for both design system buttons and native HTML buttons\n   */\n  private _toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n      this.addAria(); /* 2 */\n\n      if (this.isActive) {\n          requestAnimationFrame(() => {\n              this.dynamicPosition();\n          });\n          this.dispatchWithLegacyAlias(\n              new CustomEvent('popover-open', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      } else {\n      /* 3 */\n          this.dispatchWithLegacyAlias(\n              new CustomEvent('popover-close', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      }\n\n    /**\n     * Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position\n     */\n      setTimeout(() => {\n          if (this.isActive) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button\n   * 2. If the panel is opened, tab away closes the popover panel\n   * 3. The panel can be opened and closed by Enter or Space keys.\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape' && this.isActive === true) {\n          this._toggleActive();\n      } else if (e.key === 'Tab') {\n          this._handleTabNavigation(e);\n      }\n  }\n\n  private _handleTabNavigation(e: KeyboardEvent) {\n      if (this.isActive) {\n          this._navigateInsidePopover(e);\n      }\n  }\n\n  private _navigateInsidePopover(e: KeyboardEvent) {\n      const focusableElements = this._getFocusableElements();\n      if (focusableElements.length === 0) {\n          this._closePopoverAndFocusTrigger(e);\n          return;\n      }\n\n      const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n      if (document.activeElement === lastFocusableElement) {\n          this._closePopoverAndFocusTrigger(e);\n          e.preventDefault();\n      }\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n      const panelFocusableElements = Array.from(this._Cre8PopoverFooter);\n      return [...panelFocusableElements];\n  }\n\n  private _closePopoverAndFocusTrigger(e: KeyboardEvent) {\n      this._toggleActive();\n      e.preventDefault();\n  }\n\n  /**\n   * Handle click outside the component\n   * 1. Close the show/hide popover panel on click outside\n   * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early\n   * 3. By the time a user clicks on the page the shadowRoot will almost certainly be\n   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n   * undefined. To work around that we'll check that we have a shadowRoot (and a\n   * rendered .host) element here to appease the TypeScript compiler. This should never\n   * actually be shown or run for a human end user.\n   * 4. Check to see if we clicked inside the active panel\n   * 5. If the panel is active and we've clicked outside of the panel then it should be closed.\n   */\n  handleOnClickOutside = (e: MouseEvent) => {\n    /* 2 */\n      if (!this.isActive) {\n          return;\n      }\n\n    /* 3 */\n      if (!this.shadowRoot?.host) {\n          throw Error('Could not determine panel context during click handler');\n      }\n\n    /* 4 */\n      const didClickInside = e.composedPath().includes(this.shadowRoot.host);\n\n    /* 5 */\n      if (!(e.target === document.querySelector('html') && e.clientX >= document.documentElement.offsetWidth)) {\n          if (this.isActive && !didClickInside) {\n              this._toggleActive();\n          }\n      }\n  };\n\n  /**\n   * Remove Active State on Scroll\n   * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state\n   * 2. If the popover height is less than the window height, then allow the active to remove on scroll\n   */\n  removeActiveOnScroll = () => {\n    /* 1 */\n      if (this.isActive && !this.isVisibleOnScroll) {\n      /* 2 */\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n          const popoverTrigger = this._Cre8Popover;\n          const popoverHeight = popoverTrigger.clientHeight + popoverPanel.height + popoverPanel.top;\n\n          if (popoverHeight < window.innerHeight) {\n              this._toggleActive();\n          }\n      }\n  };\n\n  /**\n   * Remove Active State\n   * 1. If a specific event is fired, remove the active state.\n   */\n  removeActive = () => {\n      if (this.isActive) {\n          this._toggleActive();\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-popover', {\n          'cre8-c-popover--top': this.position === 'top',\n          'cre8-c-popover--left': this.position === 'left',\n          'cre8-c-popover--right': this.position === 'right',\n          'cre8-is-active': this.isActive,\n          'cre8-is-dynamic': this.isDynamic,\n          'cre8-is-dynamic-active': this.isActiveDynamic,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        ${this.slotNotEmpty('trigger')\n        && html` <slot name=\"trigger\" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}\n        ${this.isActive\n        ? html`\n              <div tabindex=\"0\" class=\"cre8-c-popover__panel\" @keydown=${this._handleKeydown}>\n                ${(this.slotNotEmpty('header') || this.heading)\n                && html`\n                  <div class=\"cre8-c-popover__header\">\n                    ${this.heading\n        ? html`<div class=\"cre8-c-popover__heading\">${this.heading}</div>`\n        : html`<slot name=\"header\"></slot>`}\n                  </div>\n                `}\n                <slot></slot>\n                ${this.slotNotEmpty('footer')\n                && html`\n                  <div class=\"cre8-c-popover__footer\">\n                    <slot name=\"footer\"></slot>\n                  </div>\n                `}\n              </div>\n            `\n        : nothing}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-popover') === undefined) {\n    customElements.define('cre8-popover', Cre8Popover);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-popover': Cre8Popover;\n  }\n}\n\nexport default Cre8Popover;\n"]}

package/lib/components/progress-meter/progress-meter.d.ts

@@ -1,10 +1,4 @@
 import { Cre8Element } from '../cre8-element';
-export declare enum status {
-    'error' = 0,
-    'warning' = 1,
-    'success' = 2,
-    undefined = 3
-}
 /**
  * A progress meter provides feedback that the system is working and gives
  * the user an indication of how much time they will wait.
@@ -18,8 +12,6 @@ export declare class Cre8ProgressMeter extends Cre8Element {
      * - **Error** renders a meter with an error status fill
      * - **Warning** renders a meter with a warning status
      * - **Success** renders a meter with a success status fill
-     *
-     * @attr {status}
      */
     status?: 'error' | 'warning' | 'success';
     knockout?: boolean;

package/lib/components/progress-meter/progress-meter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-meter.d.ts","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,oBAAY,MAAM;IAChB,OAAO,IAAA;IAAE,SAAS,IAAA;IAAE,SAAS,IAAA;IAAE,SAAS,IAAA;CACxC;AAEF;;;;GAIG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;;OAQG;IAEC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAOzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,GAAG,EAAE,MAAM,CAAO;IAQlB,KAAK,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEC,KAAK,EAAE,MAAM,CAAC;IAElB,iBAAiB;IAKjB,MAAM;CAuBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"progress-meter.d.ts","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C;;;;GAIG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;OAMG;IAEC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAOzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,GAAG,EAAE,MAAM,CAAO;IAQlB,KAAK,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEC,KAAK,EAAE,MAAM,CAAC;IAElB,iBAAiB;IAKjB,MAAM;CAuBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/lib/components/progress-meter/progress-meter.js

@@ -9,13 +9,6 @@ import { property } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';
 import { Cre8Element } from '../cre8-element';
 import styles from './progress-meter.styles.js';
-export var status;
-(function (status) {
-    status[status["error"] = 0] = "error";
-    status[status["warning"] = 1] = "warning";
-    status[status["success"] = 2] = "success";
-    status[status["undefined"] = 3] = "undefined";
-})(status || (status = {}));
 /**
  * A progress meter provides feedback that the system is working and gives
  * the user an indication of how much time they will wait.

package/lib/components/progress-meter/progress-meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-meter.js","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAGhD,MAAM,CAAN,IAAY,MAEV;AAFF,WAAY,MAAM;IAChB,qCAAO,CAAA;IAAE,yCAAS,CAAA;IAAE,yCAAS,CAAA;IAAE,6CAAS,CAAA;AACzC,CAAC,EAFU,MAAM,KAAN,MAAM,QAEhB;AAEF;;;;GAIG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAAlD;;QAsBE;;;WAGG;QAEC,QAAG,GAAW,GAAG,CAAC;IA2DxB,CAAC;IA5BC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE;YAC1E,8BAA8B,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YACvD,gCAAgC,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAC3D,gCAAgC,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAC3D,iCAAiC,EAAE,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,mBAAmB;yDACM,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;qDAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;;;;aAIjF,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,IAAI;eACT,IAAI,CAAC,GAAG;iBACN,IAAI,CAAC,KAAK;;UAEjB,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;;WAExC,CAAC;IACV,CAAC;;AApFQ,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAYvB;IADH,QAAQ,EAAE;iDACkC;AAOzC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACpB;AAOnB;IADH,QAAQ,EAAE;8CACW;AAQlB;IADH,QAAQ,EAAE;gDACO;AAOd;IADH,QAAQ,EAAE;kDACU;AAOjB;IADH,QAAQ,EAAE;+CACO;AAOd;IADH,QAAQ,EAAE;gDACO;AAgCpB,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC1D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AACpE,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './progress-meter.styles.js';\n\n\nexport enum status {\n  'error', 'warning', 'success', undefined\n }\n\n/**\n * A progress meter provides feedback that the system is working and gives\n * the user an indication of how much time they will wait.\n * This indicator should be used when the system response time is longer and determinable.\n */\nexport class Cre8ProgressMeter extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Progress Status\n   * - **Default** renders a meter with default status fill\n   * - **Error** renders a meter with an error status fill\n   * - **Warning** renders a meter with a warning status\n   * - **Success** renders a meter with a success status fill\n   *\n   * @attr {status}\n   */\n  @property()\n      status?: 'error' | 'warning' | 'success';\n\n  /*\n   * Determines if the progress meter is displayed on a dark background (uses knockout colors for contrast)\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /*\n   * The max number for the progress bar (defaulted to 100 to match percentages)\n   * @attr {number}\n   */\n  @property()\n      max: number = 100;\n\n  /*\n   * The the percentage of the bar that is filled in (defaulted to match percentages)\n   * I.E a value of 50 with a 100 max would result in half the meter being filled\n   * @attr {number}\n   */\n  @property()\n      value: number;\n\n  /**\n   * Progress Meter FieldId\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n   * Progress Meter name\n   * @attr {string}\n   */\n  @property()\n      name?: string;\n\n  /**\n   * Progress Meter label\n   * @attr {string}\n   */\n  @property()\n      label: string;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-progress-meter', {\n          'cre8-c-progress-meter--error': this.status === 'error',\n          'cre8-c-progress-meter--warning': this.status === 'warning',\n          'cre8-c-progress-meter--success': this.status === 'success',\n          'cre8-c-progress-meter--knockout': this.knockout,\n      });\n\n      return html`<div class=\"${componentClassNames}\">\n      <label class=\"cre8-c-progress-meter__label\" for=\"${this.fieldId}\">${this.label}</label>\n      <span class=\"cre8-c-progress-meter__sr-only\">${Math.round((this.value / this.max) * 100)}%</span>\n      <progress\n        class=\"cre8-c-progress-meter__progress\"\n        aria-hidden=\"true\"\n        id=${this.fieldId}\n        name=${this.name}\n        max=\"${this.max}\"\n        value=\"${this.value}\"\n      >\n        ${Math.round((this.value / this.max) * 100)}%\n      </progress>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-progress-meter') === undefined) {\n    customElements.define('cre8-progress-meter', Cre8ProgressMeter);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-progress-meter': Cre8ProgressMeter;\n  }\n}\n"]}
+{"version":3,"file":"progress-meter.js","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAGhD;;;;GAIG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAAlD;;QAoBE;;;WAGG;QAEC,QAAG,GAAW,GAAG,CAAC;IA2DxB,CAAC;IA5BC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE;YAC1E,8BAA8B,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YACvD,gCAAgC,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAC3D,gCAAgC,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAC3D,iCAAiC,EAAE,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,mBAAmB;yDACM,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;qDAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;;;;aAIjF,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,IAAI;eACT,IAAI,CAAC,GAAG;iBACN,IAAI,CAAC,KAAK;;UAEjB,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;;WAExC,CAAC;IACV,CAAC;;AAlFQ,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAUvB;IADH,QAAQ,EAAE;iDACkC;AAOzC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACpB;AAOnB;IADH,QAAQ,EAAE;8CACW;AAQlB;IADH,QAAQ,EAAE;gDACO;AAOd;IADH,QAAQ,EAAE;kDACU;AAOjB;IADH,QAAQ,EAAE;+CACO;AAOd;IADH,QAAQ,EAAE;gDACO;AAgCpB,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC1D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AACpE,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './progress-meter.styles.js';\n\n\n/**\n * A progress meter provides feedback that the system is working and gives\n * the user an indication of how much time they will wait.\n * This indicator should be used when the system response time is longer and determinable.\n */\nexport class Cre8ProgressMeter extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Progress Status\n   * - **Default** renders a meter with default status fill\n   * - **Error** renders a meter with an error status fill\n   * - **Warning** renders a meter with a warning status\n   * - **Success** renders a meter with a success status fill\n   */\n  @property()\n      status?: 'error' | 'warning' | 'success';\n\n  /*\n   * Determines if the progress meter is displayed on a dark background (uses knockout colors for contrast)\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /*\n   * The max number for the progress bar (defaulted to 100 to match percentages)\n   * @attr {number}\n   */\n  @property()\n      max: number = 100;\n\n  /*\n   * The the percentage of the bar that is filled in (defaulted to match percentages)\n   * I.E a value of 50 with a 100 max would result in half the meter being filled\n   * @attr {number}\n   */\n  @property()\n      value: number;\n\n  /**\n   * Progress Meter FieldId\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n   * Progress Meter name\n   * @attr {string}\n   */\n  @property()\n      name?: string;\n\n  /**\n   * Progress Meter label\n   * @attr {string}\n   */\n  @property()\n      label: string;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-progress-meter', {\n          'cre8-c-progress-meter--error': this.status === 'error',\n          'cre8-c-progress-meter--warning': this.status === 'warning',\n          'cre8-c-progress-meter--success': this.status === 'success',\n          'cre8-c-progress-meter--knockout': this.knockout,\n      });\n\n      return html`<div class=\"${componentClassNames}\">\n      <label class=\"cre8-c-progress-meter__label\" for=\"${this.fieldId}\">${this.label}</label>\n      <span class=\"cre8-c-progress-meter__sr-only\">${Math.round((this.value / this.max) * 100)}%</span>\n      <progress\n        class=\"cre8-c-progress-meter__progress\"\n        aria-hidden=\"true\"\n        id=${this.fieldId}\n        name=${this.name}\n        max=\"${this.max}\"\n        value=\"${this.value}\"\n      >\n        ${Math.round((this.value / this.max) * 100)}%\n      </progress>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-progress-meter') === undefined) {\n    customElements.define('cre8-progress-meter', Cre8ProgressMeter);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-progress-meter': Cre8ProgressMeter;\n  }\n}\n"]}

package/lib/components/progress-steps/progress-steps.d.ts

@@ -1,5 +1,12 @@
 import { Cre8Element } from '../cre8-element';
 import '../progress-steps-item/progress-steps-item.js';
+/** One step in a data-driven progress indicator. */
+export interface Cre8ProgressStepData {
+    /** The visible label. This is the `name` prop — the item does not render children. */
+    name: string;
+    message?: string;
+    state?: 'error' | 'warning' | 'complete' | 'current';
+}
 /**
  * The Progress Steps component is used to display where a user is in a multistep process.
  * It clearly indicates the total number of steps, which steps are complete and incomplete,
@@ -23,6 +30,15 @@ import '../progress-steps-item/progress-steps-item.js';
  */
 export declare class Cre8ProgressSteps extends Cre8Element {
     static get styles(): import("lit").CSSResult;
+    /**
+     * Steps for a data-driven progress indicator. Note that the visible label is
+     * each item's `name` prop rather than its content — `cre8-progress-steps-item`
+     * does not render children, which is easy to get wrong by hand.
+     */
+    steps?: Cre8ProgressStepData[];
+    /** 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/progress-steps/progress-steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-steps.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,+CAA+C,CAAC;AAGvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAOP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"progress-steps.d.ts","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,+CAA+C,CAAC;AAGvD,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACnC,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;CACtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,MAAM,KAAK,MAAM,4BAEhB;IACD;;;;OAIG;IAEC,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAEnC,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAQxB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,MAAM;CAOP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,eAAe,iBAAiB,CAAC"}

package/lib/components/progress-steps/progress-steps.js

@@ -1,5 +1,13 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import '../progress-steps-item/progress-steps-item.js';
 import styles from './progress-steps.styles.js';
 /**
@@ -27,6 +35,20 @@ export class Cre8ProgressSteps extends Cre8Element {
     static get styles() {
         return unsafeCSS(styles.toString());
     }
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.steps)
+            return null;
+        return this.steps.map((step) => ({
+            tag: 'cre8-progress-steps-item',
+            props: { name: step.name, message: step.message, state: step.state },
+        }));
+    }
+    updated(changed) {
+        if (['steps'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-progress-steps');
         return html `<div class='${componentClassNames}'>
@@ -34,6 +56,9 @@ export class Cre8ProgressSteps extends Cre8Element {
         </div>`;
     }
 }
+__decorate([
+    property({ type: Array })
+], Cre8ProgressSteps.prototype, "steps", void 0);
 if (customElements.get('cre8-progress-steps') === undefined) {
     customElements.define('cre8-progress-steps', Cre8ProgressSteps);
 }

package/lib/components/progress-steps/progress-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-steps.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,+CAA+C,CAAC;AACvD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAChD,MAAM,KAAK,MAAM;QACf,OAAO,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;QAE9E,OAAO,IAAI,CAAA,eAAe,mBAAmB;;eAElC,CAAC;IACd,CAAC;CACF;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC;AAQD,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, unsafeCSS } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport '../progress-steps-item/progress-steps-item.js';\nimport styles from './progress-steps.styles.js';\n\n/**\n * The Progress Steps component is used to display where a user is in a multistep process.\n * It clearly indicates the total number of steps, which steps are complete and incomplete,\n * and which step you’re currently on. They help users estimate how long a task will take and can be\n * used to track status on orders.\n *\n * The Progress Steps component should be used as a parent component for `cre8-progress-steps-item` components.\n * These Components serve a contextual purpose and don't provide any functionality.\n *\n * # How to Use\n *\n * Progress Steps is used when there is ample horizontal space and two to six steps. It displays each step by name\n * and number to help users understand exactly where they are in a process. It is the preferred option for desktop.\n * Progress Steps should change to Compact Steps on mobile web to conserve space.\n *\n * Progress Steps can also be used to track order status. It provides a quick visual of how an order is progressing\n * with options to alert users of any problems along the way. When used for order status, Progress Steps should\n * change to Vertical Steps on mobile web to conserve space while allowing alerts and messages to remain visible.\n *\n * @slot - The Progress Steps Item components that represent the steps in the multistep process.\n */\nexport class Cre8ProgressSteps extends Cre8Element {\n  static get styles() {\n    return unsafeCSS(styles.toString());\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-progress-steps');\n\n    return html`<div class='${componentClassNames}'>\n            <slot></slot>\n        </div>`;\n  }\n}\n\nif (customElements.get('cre8-progress-steps') === undefined) {\n  customElements.define('cre8-progress-steps', Cre8ProgressSteps);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-progress-steps': Cre8ProgressSteps;\n  }\n}\n\nexport default Cre8ProgressSteps;\n"]}
+{"version":3,"file":"progress-steps.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACtC,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,+CAA+C,CAAC;AACvD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAUhD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAChD,MAAM,KAAK,MAAM;QACf,OAAO,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC;IASD,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,0BAA0B;YAC/B,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;SACvE,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;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;QAE9E,OAAO,IAAI,CAAA,eAAe,mBAAmB;;eAElC,CAAC;IACd,CAAC;CACF;AAzBK;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACS;AA2BrC,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AAClE,CAAC;AAQD,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport '../progress-steps-item/progress-steps-item.js';\nimport styles from './progress-steps.styles.js';\n\n/** One step in a data-driven progress indicator. */\nexport interface Cre8ProgressStepData {\n  /** The visible label. This is the `name` prop — the item does not render children. */\n  name: string;\n  message?: string;\n  state?: 'error' | 'warning' | 'complete' | 'current';\n}\n\n/**\n * The Progress Steps component is used to display where a user is in a multistep process.\n * It clearly indicates the total number of steps, which steps are complete and incomplete,\n * and which step you’re currently on. They help users estimate how long a task will take and can be\n * used to track status on orders.\n *\n * The Progress Steps component should be used as a parent component for `cre8-progress-steps-item` components.\n * These Components serve a contextual purpose and don't provide any functionality.\n *\n * # How to Use\n *\n * Progress Steps is used when there is ample horizontal space and two to six steps. It displays each step by name\n * and number to help users understand exactly where they are in a process. It is the preferred option for desktop.\n * Progress Steps should change to Compact Steps on mobile web to conserve space.\n *\n * Progress Steps can also be used to track order status. It provides a quick visual of how an order is progressing\n * with options to alert users of any problems along the way. When used for order status, Progress Steps should\n * change to Vertical Steps on mobile web to conserve space while allowing alerts and messages to remain visible.\n *\n * @slot - The Progress Steps Item components that represent the steps in the multistep process.\n */\n\nexport class Cre8ProgressSteps extends Cre8Element {\n  static get styles() {\n    return unsafeCSS(styles.toString());\n  }\n  /**\n   * Steps for a data-driven progress indicator. Note that the visible label is\n   * each item's `name` prop rather than its content — `cre8-progress-steps-item`\n   * does not render children, which is easy to get wrong by hand.\n   */\n  @property({ type: Array })\n      steps?: Cre8ProgressStepData[];\n\n  /** The composition the data property stands for. */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.steps) return null;\n      return this.steps.map((step) => ({\n          tag: 'cre8-progress-steps-item',\n          props: { name: step.name, message: step.message, state: step.state },\n      }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['steps'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-progress-steps');\n\n    return html`<div class='${componentClassNames}'>\n            <slot></slot>\n        </div>`;\n  }\n}\n\nif (customElements.get('cre8-progress-steps') === undefined) {\n  customElements.define('cre8-progress-steps', Cre8ProgressSteps);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-progress-steps': Cre8ProgressSteps;\n  }\n}\n\nexport default Cre8ProgressSteps;\n"]}

package/lib/components/progress-steps-item/progress-steps-item.d.ts

@@ -6,7 +6,6 @@ import { Cre8Element } from '../cre8-element';
  *
  * @property {string} message - Optional message to display under the step name.
  * @property {string} name - The name of the step.
- * @property {string} state - The state of the step: 'incomplete', 'current', 'complete', 'error', 'warning';
  * @property {string} svg - An SVG string to use as the step icon.
  *
  * @slot - The component content
@@ -24,8 +23,7 @@ export declare class Cre8ProgressStepsItem extends Cre8Element {
      */
     name: string;
     /**
-     * The state of the step: 'complete', 'current', 'error',' incomplete', 'warning';
-     * @type {string}
+     * The state of the step.
      */
     state: 'complete' | 'current' | 'error' | 'incomplete' | 'warning';
     /**

package/lib/components/progress-steps-item/progress-steps-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-steps-item.d.ts","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;GAWG;AACH,qBAAa,qBAAsB,SAAQ,WAAW;IAClD,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,CAAC;IAEnE;;;OAGG;IAEH,GAAG,EAAE,MAAM,CAAC;IAEZ,MAAM;CAuBT;AAMD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,0BAA0B,EAAE,qBAAqB,CAAC;KAAE;CAAE;AAEzG,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"progress-steps-item.d.ts","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;GAUG;AACH,qBAAa,qBAAsB,SAAQ,WAAW;IAClD,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,CAAC;IAEnE;;;OAGG;IAEH,GAAG,EAAE,MAAM,CAAC;IAEZ,MAAM;CAuBT;AAMD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,0BAA0B,EAAE,qBAAqB,CAAC;KAAE;CAAE;AAEzG,eAAe,qBAAqB,CAAC"}

package/lib/components/progress-steps-item/progress-steps-item.js

@@ -15,7 +15,6 @@ import styles from './progress-steps-item.styles.js';
  *
  * @property {string} message - Optional message to display under the step name.
  * @property {string} name - The name of the step.
- * @property {string} state - The state of the step: 'incomplete', 'current', 'complete', 'error', 'warning';
  * @property {string} svg - An SVG string to use as the step icon.
  *
  * @slot - The component content

package/lib/components/progress-steps-item/progress-steps-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-steps-item.js","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,qBAAsB,SAAQ,WAAW;IA+BlD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,4BAA4B,EAAE;YAC/E,sCAAsC,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YACjE,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YAC/D,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC3D,wCAAwC,EAAE,IAAI,CAAC,KAAK,KAAK,YAAY;YACrE,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;SAClE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;sBACG,mBAAmB;;;;kCAIP,IAAI,CAAC,GAAG;;;;4DAIkB,IAAI,CAAC,IAAI;+DACN,IAAI,CAAC,OAAO;;SAElE,CAAC;IACN,CAAC;;AApDM,4BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;sDACM;AAOjB;IADC,QAAQ,EAAE;mDACE;AAOb;IADC,QAAQ,EAAE;oDACwD;AAOnE;IADC,QAAQ,EAAE;kDACC;AA2BhB,IAAI,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/D,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,CAAC;AAC7E,CAAC;AAID,eAAe,qBAAqB,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './progress-steps-item.styles.js';\n\n/**\n * The Progress Steps Item component is used to display a single step in a multi-step process.\n * It should be used as a child component of `cre8-progress-steps`.\n * These Components serve a contextual purpose and don't provide any functionality.\n *\n * @property {string} message - Optional message to display under the step name.\n * @property {string} name - The name of the step.\n * @property {string} state - The state of the step: 'incomplete', 'current', 'complete', 'error', 'warning';\n * @property {string} svg - An SVG string to use as the step icon.\n *\n * @slot - The component content\n */\nexport class Cre8ProgressStepsItem extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Optional message to display under the step name.\n     * @type {string}\n     */\n    @property()\n    message?: string;\n\n    /**\n     * The name of the step.\n     * @type {string}\n     */\n    @property()\n    name: string;\n\n    /**\n     * The state of the step: 'complete', 'current', 'error',' incomplete', 'warning';\n     * @type {string}\n     */\n    @property()\n    state: 'complete' | 'current' | 'error' | 'incomplete' | 'warning';\n\n    /**\n     * An SVG string to use as the step icon.\n     * @type {string}\n     */\n    @property()\n    svg: string;\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-progress-steps-item', {\n            'cre8-c-progress-steps-item--complete': this.state === 'complete',\n            'cre8-c-progress-steps-item--current': this.state === 'current',\n            'cre8-c-progress-steps-item--error': this.state === 'error',\n            'cre8-c-progress-steps-item--incomplete': this.state === 'incomplete',\n            'cre8-c-progress-steps-item--warning': this.state === 'warning',\n        });\n\n        return html`\n        <div class='${componentClassNames}'>\n            <div class='cre8-c-progress-steps-item__top-container'>\n              <div class='cre8-c-progress-steps-item__divider--left' part='left-divider'></div>\n              <span class='cre8-c-progress-steps-item__svg'>\n                <cre8-icon svg='${this.svg}' aria-hidden='true'></cre8-icon>\n              </span>\n              <div class='cre8-c-progress-steps-item__divider--right' part='right-divider'></div>\n            </div>\n            <div class='cre8-c-progress-steps-item__name'>${this.name}</div>\n            <div class='cre8-c-progress-steps-item__message'>${this.message}</div>\n        </div>\n        `;\n    }\n}\n\nif (customElements.get('cre8-progress-steps-item') === undefined) {\n    customElements.define('cre8-progress-steps-item', Cre8ProgressStepsItem);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-progress-steps-item': Cre8ProgressStepsItem; } }\n\nexport default Cre8ProgressStepsItem;\n"]}
+{"version":3,"file":"progress-steps-item.js","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAErD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,qBAAsB,SAAQ,WAAW;IA8BlD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,4BAA4B,EAAE;YAC/E,sCAAsC,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YACjE,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YAC/D,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC3D,wCAAwC,EAAE,IAAI,CAAC,KAAK,KAAK,YAAY;YACrE,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;SAClE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;sBACG,mBAAmB;;;;kCAIP,IAAI,CAAC,GAAG;;;;4DAIkB,IAAI,CAAC,IAAI;+DACN,IAAI,CAAC,OAAO;;SAElE,CAAC;IACN,CAAC;;AAnDM,4BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;sDACM;AAOjB;IADC,QAAQ,EAAE;mDACE;AAMb;IADC,QAAQ,EAAE;oDACwD;AAOnE;IADC,QAAQ,EAAE;kDACC;AA2BhB,IAAI,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/D,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,CAAC;AAC7E,CAAC;AAID,eAAe,qBAAqB,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './progress-steps-item.styles.js';\n\n/**\n * The Progress Steps Item component is used to display a single step in a multi-step process.\n * It should be used as a child component of `cre8-progress-steps`.\n * These Components serve a contextual purpose and don't provide any functionality.\n *\n * @property {string} message - Optional message to display under the step name.\n * @property {string} name - The name of the step.\n * @property {string} svg - An SVG string to use as the step icon.\n *\n * @slot - The component content\n */\nexport class Cre8ProgressStepsItem extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Optional message to display under the step name.\n     * @type {string}\n     */\n    @property()\n    message?: string;\n\n    /**\n     * The name of the step.\n     * @type {string}\n     */\n    @property()\n    name: string;\n\n    /**\n     * The state of the step.\n     */\n    @property()\n    state: 'complete' | 'current' | 'error' | 'incomplete' | 'warning';\n\n    /**\n     * An SVG string to use as the step icon.\n     * @type {string}\n     */\n    @property()\n    svg: string;\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-progress-steps-item', {\n            'cre8-c-progress-steps-item--complete': this.state === 'complete',\n            'cre8-c-progress-steps-item--current': this.state === 'current',\n            'cre8-c-progress-steps-item--error': this.state === 'error',\n            'cre8-c-progress-steps-item--incomplete': this.state === 'incomplete',\n            'cre8-c-progress-steps-item--warning': this.state === 'warning',\n        });\n\n        return html`\n        <div class='${componentClassNames}'>\n            <div class='cre8-c-progress-steps-item__top-container'>\n              <div class='cre8-c-progress-steps-item__divider--left' part='left-divider'></div>\n              <span class='cre8-c-progress-steps-item__svg'>\n                <cre8-icon svg='${this.svg}' aria-hidden='true'></cre8-icon>\n              </span>\n              <div class='cre8-c-progress-steps-item__divider--right' part='right-divider'></div>\n            </div>\n            <div class='cre8-c-progress-steps-item__name'>${this.name}</div>\n            <div class='cre8-c-progress-steps-item__message'>${this.message}</div>\n        </div>\n        `;\n    }\n}\n\nif (customElements.get('cre8-progress-steps-item') === undefined) {\n    customElements.define('cre8-progress-steps-item', Cre8ProgressStepsItem);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-progress-steps-item': Cre8ProgressStepsItem; } }\n\nexport default Cre8ProgressStepsItem;\n"]}