npm - @tmorrow/cre8-wc - Versions diffs - 2.0.6 → 2.0.8 - Mend

@tmorrow/cre8-wc 2.0.6 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (326) hide show

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

	@@ -1 +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"]}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;;;;;;;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;;;;;;;;;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"]}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,9 @@ import { Cre8Element } from '../cre8-element';
 import '../button/button';
 /**
  * @slot - The component content , this will consist of the dropdown when the user clicks the caret
+ *
+ * @fires split-button-text-click - Fires when the main text button is clicked.
+ * @fires split-button-dropdown-click - Fires when the dropdown toggle is clicked.
  */
 export declare class Cre8SplitButton extends Cre8Element {
     static styles: import("lit").CSSResult[];

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

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