@tmorrow/cre8-wc 2.0.7 → 2.0.8

package/lib/components/tabs/tabs.js

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tag-list.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;GAMG;AACH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB,YAAY;IAIZ,OAAO,CAAC,eAAe;IAIvB,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"tag-list.d.ts","sourceRoot":"","sources":["../../../components/tag-list/tag-list.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,yCAAyC;AACzC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC;IACnD,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB,YAAY;IAIZ,OAAO,CAAC,eAAe;IAGvB;;;;OAIG;IAEC,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IAEzB,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAexB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF;AAED,eAAe,WAAW,CAAC"}

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

@@ -8,6 +8,7 @@ import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import styles from './tag-list.styles.js';
 /**
  * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.
@@ -23,6 +24,27 @@ export class Cre8TagList extends Cre8Element {
     _initializeAria() {
         this.fieldId = this.fieldId || nanoid();
     }
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.tags)
+            return null;
+        return this.tags.map((tag) => ({
+            tag: 'cre8-tag',
+            props: {
+                text: tag.text,
+                variant: tag.variant,
+                shape: tag.shape,
+                type: tag.type,
+                disabled: tag.disabled,
+                name: this.fieldId,
+            },
+        }));
+    }
+    updated(changed) {
+        if (['tags', 'fieldId'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-tag-list', {});
         return html `
@@ -42,6 +64,9 @@ __decorate([
 __decorate([
     property()
 ], Cre8TagList.prototype, "fieldId", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8TagList.prototype, "tags", void 0);
 if (customElements.get('cre8-tag-list') === undefined) {
     customElements.define('cre8-tag-list', Cre8TagList);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tag-list.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.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,sBAAsB,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAgB1C,YAAY;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,EAAG,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;yBACQ,mBAAmB;kDACM,IAAI,CAAC,KAAK;;;;;OAKrD,CAAC;IACN,CAAC;;AAlCQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACQ;AAOf;IADH,QAAQ,EAAE;4CACU;AAwBvB,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tag-list.styles.js';\n\n/**\n * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.\n * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.\n * Tag List has a label that should be used to describe the purpose of the list.\n *\n * @slot - The `cre8-tag` children of the list\n */\nexport class Cre8TagList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tag list legend label\n   */\n  @property()\n      label?: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  firstUpdated() {\n      this._initializeAria();\n  }\n\n  private _initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag-list', { });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend class=\"cre8-c-tag-list__legend\">${this.label}</legend>\n        <div class=\"cre8-c-tag-list__list\" role=\"list\">   \n          <slot></slot>\n        </div>\n      </fieldset>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tag-list') === undefined) {\n    customElements.define('cre8-tag-list', Cre8TagList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag-list': Cre8TagList;\n  }\n}\n\nexport default Cre8TagList;\n"]}
+{"version":3,"file":"tag-list.js","sourceRoot":"","sources":["../../../components/tag-list/tag-list.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,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAW1C;;;;;;GAMG;AAEH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAgB1C,YAAY;QACR,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IASD,oDAAoD;IAC5C,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAC5B,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC3B,GAAG,EAAE,UAAU;YACf,KAAK,EAAE;gBACH,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,OAAO,EAAE,GAAG,CAAC,OAAO;gBACpB,KAAK,EAAE,GAAG,CAAC,KAAK;gBAChB,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,QAAQ,EAAE,GAAG,CAAC,QAAQ;gBACtB,IAAI,EAAE,IAAI,CAAC,OAAO;aACrB;SACJ,CAAC,CAAC,CAAC;IACR,CAAC;IAES,OAAO,CAAC,OAA6B;QAC3C,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YACtD,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAGD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,EAAG,CAAC,CAAC;QAE7E,OAAO,IAAI,CAAA;yBACQ,mBAAmB;kDACM,IAAI,CAAC,KAAK;;;;;OAKrD,CAAC;IACN,CAAC;;AAhEQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;0CACQ;AAOf;IADH,QAAQ,EAAE;4CACU;AAejB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCACD;AAuC3B,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport styles from './tag-list.styles.js';\n\n/** One tag in a data-driven tag list. */\nexport interface Cre8TagData {\n  text: string;\n  variant?: 'neutral' | 'branded' | 'neutral-hybrid';\n  shape?: 'square' | 'round';\n  type?: 'checkbox' | 'radio';\n  disabled?: boolean;\n}\n\n/**\n * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.\n * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.\n * Tag List has a label that should be used to describe the purpose of the list.\n *\n * @slot - The `cre8-tag` children of the list\n */\n\nexport class Cre8TagList extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tag list legend label\n   */\n  @property()\n      label?: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  firstUpdated() {\n      this._initializeAria();\n  }\n\n  private _initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n  }\n  /**\n   * Tags for a data-driven tag list. Set this and the list builds its own\n   * `cre8-tag` children in the light DOM. Leave it unset to compose them\n   * yourself.\n   */\n  @property({ type: Array })\n      tags?: Cre8TagData[];\n\n  /** The composition the data property stands for. */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.tags) return null;\n      return this.tags.map((tag) => ({\n          tag: 'cre8-tag',\n          props: {\n              text: tag.text,\n              variant: tag.variant,\n              shape: tag.shape,\n              type: tag.type,\n              disabled: tag.disabled,\n              name: this.fieldId,\n          },\n      }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['tags', 'fieldId'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag-list', { });\n\n      return html`\n      <fieldset class=\"${componentClassNames}\">\n        <legend class=\"cre8-c-tag-list__legend\">${this.label}</legend>\n        <div class=\"cre8-c-tag-list__list\" role=\"list\">   \n          <slot></slot>\n        </div>\n      </fieldset>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tag-list') === undefined) {\n    customElements.define('cre8-tag-list', Cre8TagList);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag-list': Cre8TagList;\n  }\n}\n\nexport default Cre8TagList;\n"]}

package/lib/components/tooltip/tooltip.d.ts

@@ -33,8 +33,8 @@ import { Cre8Element } from '../cre8-element';
  * @slot default - Default, unnamed slot container for Tooltip text
  * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
  *
- * @fires open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
- * @fires close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
+ * @fires tooltip-open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
+ * @fires tooltip-close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
  */
 export declare class Cre8Tooltip extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/tooltip/tooltip.js

@@ -44,8 +44,8 @@ import styles from './tooltip.styles.js';
  * @slot default - Default, unnamed slot container for Tooltip text
  * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
  *
- * @fires open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
- * @fires close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
+ * @fires tooltip-open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.
+ * @fires tooltip-close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.
  */
 export class Cre8Tooltip extends Cre8Element {
     constructor() {
@@ -201,13 +201,13 @@ export class Cre8Tooltip extends Cre8Element {
             setTimeout(() => {
                 this.dynamicPosition();
             }, 1);
-            this.dispatchEvent(new CustomEvent('open', {
+            this.dispatchWithLegacyAlias(new CustomEvent('tooltip-open', {
                 detail: { isActive: this.isActive }, bubbles: true, composed: true,
             }));
         }
         else {
             /* 3 */
-            this.dispatchEvent(new CustomEvent('close', {
+            this.dispatchWithLegacyAlias(new CustomEvent('tooltip-close', {
                 detail: { isActive: this.isActive }, bubbles: true, composed: true,
             }));
         }

package/lib/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tooltip.styles.js';\n\n/**\n * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.\n * If you need to present a call to action with perhaps a button for the user to click, then use\n * [Popover](/docs/cre8-components-popover--docs) instead.\n *\n * ##Tooltip Styles\n * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the\n * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that\n * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.\n *\n * **With icon**\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct dirrection for icons, for example,\n * arrows, caret up or caret down.\n *\n * ##Usability Considerations\n * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on\n * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot\n * intuitively understand the interface without Tooltips, the interface should be redesigned.\n *\n * ##How to use\n * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.\n * Also, do not simply restate content on the page, for example, the title of the field.\n * - Tooltips should be short and to the point. Example: \"Click X to do X\" or \"Icon Description.\" If a succinct\n * description is not possible, the interaction element should be redesigned.\n * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)\n * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping\n * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.\n * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.\n * A novice user may never discover tap and hold for Tooltips.\n *\n * @slot default - Default, unnamed slot container for Tooltip text\n * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text\n *\n * @fires open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.\n * @fires close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.\n */\n\nexport class Cre8Tooltip extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.\n   * @type {\"default\"|\"top\"|\"left\"|\"right\"}\n   * @attr {string}\n   * - **default** positions the tooltip panel below the trigger element\n   * - **top** positions the tooltip panel above the trigger element\n   * - **left** positions the tooltip panel left of the trigger element\n   * - **right** positions the tooltip panel right of the trigger element\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * The knockout variant for the tooltip\n   * @attr {boolean}\n   * 1. If is true, the tooltip background is white\n   * 2. If is false, the tooltip background is gray\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /**\n   * The dynamic state for the tooltip. Position overrides isDynamic.\n   * @attr {boolean}\n   * - If true, the tooltip panel placement is determined by its position in the viewport\n   * - If false, the tooltip panel placement will be placed according to the position value\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * @attr {boolean}\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the tooltip\n   * @attr {boolean}\n   * - If true, the tooltip panel is visible\n   * - If false, the tooltip panel is hidden\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   *  Accepts the ID string of the item the tooltip is referencing\n   *  @attr {string}\n   *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element\n   */\n  @property({ type: String })\n      ariaDescribes?: string;\n\n  /**\n   * Internal unique id used to associate the trigger with the tooltip text. Generated automatically.\n   */\n  @property({ type: String })\n      _uniqueId?: string;\n\n  /**\n   * svg as a raw string\n   * - The icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip')\n      _Cre8Tooltip: HTMLElement;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip__panel')\n      _Cre8TooltipPanel: 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   * updated Callback Lifecycle\n   * 1. Find the second slot\n   * 2. Create a string from joining the textContent of the textnodes\n   * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback\n   * */\n  updated() {\n    /* 1 & 2 */\n      const tipContent = this.shadowRoot.querySelectorAll('slot')[1]\n          .assignedNodes()\n          .reduce(\n              ((str, item) => `${str}${item.textContent.replace(/\\n/g, '').trim()}`),\n              ''\n          );\n    /* 3 */\n      if (document.getElementById(this._uniqueId)) {\n          document.getElementById(this._uniqueId).textContent = tipContent;\n      }\n  }\n\n  /**\n   * firstUpdated Callback Lifecycle\n   * 1. If ariaDescribes is set\n      * a. create an ID and assign it to the property _uniqueId\n      * b. Generate an empty div, assign it the  _uniqueId and the tooltip role\n  * 2. Set the aria-describedby on the ariaDescribes target\n  */\n  firstUpdated() {\n      if (this.ariaDescribes) { /* 1 */\n          this._uniqueId = this._uniqueId || nanoid(); /* 1.a */\n          const idMatcher = new RegExp(`\\\\b${this._uniqueId}\\\\b`); // prevents dupes from reconnects below\n      /* 1.b */\n          const a11yProxy = document.createElement('div');\n          a11yProxy.setAttribute('role', 'tooltip');\n          a11yProxy.setAttribute('style', 'position:fixed; left: -1000px; top: -1000px;');\n          a11yProxy.id = this._uniqueId;\n          const describedEl = document.getElementById(this.ariaDescribes);\n          describedEl.parentNode.insertBefore(a11yProxy, describedEl);\n          const idList = describedEl?.getAttribute('aria-describedBy');\n      /* 2 */\n          describedEl?.setAttribute(\n              'aria-describedby',\n              `${idList ? `${idList.replace(idMatcher, '')} ` : ''}${this._uniqueId}`.trim()\n          );\n      }\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window mouseover event listener\n   * 2. Add window mouseout event listener\n   * 3. Add mousedown event listener\n   * 4. Set the id and aria-describedby\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      this.addEventListener('mouseover', this.toggleActive); /* 1 */\n      this.addEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window mouseover event listener\n   * 2. Remove window mouseout event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      this.removeEventListener('mouseover', this.toggleActive); /* 1 */\n      this.removeEventListener('mouseout', this.removeActive); /* 2 */\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._Cre8TooltipPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const tooltipPanel = this._Cre8TooltipPanel.getBoundingClientRect();\n          const tooltipHeight = this._Cre8Tooltip.clientHeight + tooltipPanel.height + tooltipPanel.top;\n\n      /**\n       * If tooltip panel breaks out the left side of the window, position it to the right\n       */\n          if (tooltipPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If tooltip panel breaks out the right side of the window, position it to the left\n       */\n          if (tooltipPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If tooltip panel breaks out the top side of the window only, position it to the bottom center\n       */\n          if (tooltipPanel.top < 0 && tooltipPanel.left > 0 && tooltipPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If tooltip panel breaks out the bottom side of the window only, position it to the top center\n       */\n          if (\n              tooltipHeight >= window.innerHeight\n        && tooltipPanel.bottom >= window.innerHeight\n        && tooltipPanel.left >= 0\n        && tooltipPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If escape or tab key is struck when the tooltip is active, close it\n   * 2. If enter or escape is keyed, toggle the tooltip open or close.\n   *    We need these since the click event is on a div so that accessibility reads this aloud to a user\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (this.isActive) {\n          if (e.code === 'Escape' || e.code === 'Tab') {\n              this.toggleActive(); /* 1 */\n          }\n      }\n      if (e.code === 'Enter' || e.code === 'Space') {\n          this.toggleActive(); /* 2 */\n      }\n  }\n\n  /**\n   * Set Tooltip Active State\n   * 1. Toggle the active state between true and false\n   * 2. If is active, set the dynamic position and custom event.\n   * 3. If is not active, remove fire the close custom event.\n   * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.\n   */\n  toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n\n      if (this.isActive) {\n      /* 2 */\n          setTimeout(() => {\n              this.dynamicPosition();\n          }, 1);\n          this.dispatchEvent(new CustomEvent('open', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      } else {\n      /* 3 */\n          this.dispatchEvent(new CustomEvent('close', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      }\n\n    /* 4 */\n      setTimeout(() => {\n          if (this.isActive && this.isDynamic) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\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-tooltip', {\n          'cre8-c-tooltip--top': this.position === 'top',\n          'cre8-c-tooltip--left': this.position === 'left',\n          'cre8-c-tooltip--right': this.position === 'right',\n          'cre8-c-tooltip--knockout': this.knockout,\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            <div \n                class=\"cre8-c-tooltip__trigger\"\n                tabindex=\"0\"\n                @focus=${this.toggleActive}\n                @keydown=${this._handleKeydown}\n            >\n                ${this.svg\n        ? html`\n            <slot name=\"trigger\">\n                <cre8-icon svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" \n                flip=\"${this.iconFlipDirection}\" aria-hidden=\"true\"></cre8-icon>\n            </slot>`\n        : html`<slot name=\"trigger\"></slot>`\n}\n            </div>\n            <dialog\n                id=${ifDefined(this._uniqueId)}\n                aria-labelledby=${this.ariaDescribes}\n                class=\"cre8-c-tooltip__panel\"\n                role=\"tooltip\">\n                <slot></slot>\n            </dialog>\n        </div>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tooltip') === undefined) {\n    customElements.define('cre8-tooltip', Cre8Tooltip);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tooltip': Cre8Tooltip;\n  }\n}\n\nexport default Cre8Tooltip;\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tooltip.styles.js';\n\n/**\n * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.\n * If you need to present a call to action with perhaps a button for the user to click, then use\n * [Popover](/docs/cre8-components-popover--docs) instead.\n *\n * ##Tooltip Styles\n * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the\n * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that\n * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.\n *\n * **With icon**\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct dirrection for icons, for example,\n * arrows, caret up or caret down.\n *\n * ##Usability Considerations\n * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on\n * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot\n * intuitively understand the interface without Tooltips, the interface should be redesigned.\n *\n * ##How to use\n * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.\n * Also, do not simply restate content on the page, for example, the title of the field.\n * - Tooltips should be short and to the point. Example: \"Click X to do X\" or \"Icon Description.\" If a succinct\n * description is not possible, the interaction element should be redesigned.\n * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)\n * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping\n * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.\n * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.\n * A novice user may never discover tap and hold for Tooltips.\n *\n * @slot default - Default, unnamed slot container for Tooltip text\n * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text\n *\n * @fires tooltip-open - Fires when the tooltip is shown. `event.detail.isActive` is `true`.\n * @fires tooltip-close - Fires when the tooltip is hidden. `event.detail.isActive` is `false`.\n */\n\nexport class Cre8Tooltip extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.\n   * @type {\"default\"|\"top\"|\"left\"|\"right\"}\n   * @attr {string}\n   * - **default** positions the tooltip panel below the trigger element\n   * - **top** positions the tooltip panel above the trigger element\n   * - **left** positions the tooltip panel left of the trigger element\n   * - **right** positions the tooltip panel right of the trigger element\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * The knockout variant for the tooltip\n   * @attr {boolean}\n   * 1. If is true, the tooltip background is white\n   * 2. If is false, the tooltip background is gray\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /**\n   * The dynamic state for the tooltip. Position overrides isDynamic.\n   * @attr {boolean}\n   * - If true, the tooltip panel placement is determined by its position in the viewport\n   * - If false, the tooltip panel placement will be placed according to the position value\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * @attr {boolean}\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the tooltip\n   * @attr {boolean}\n   * - If true, the tooltip panel is visible\n   * - If false, the tooltip panel is hidden\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   *  Accepts the ID string of the item the tooltip is referencing\n   *  @attr {string}\n   *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element\n   */\n  @property({ type: String })\n      ariaDescribes?: string;\n\n  /**\n   * Internal unique id used to associate the trigger with the tooltip text. Generated automatically.\n   */\n  @property({ type: String })\n      _uniqueId?: string;\n\n  /**\n   * svg as a raw string\n   * - The icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip')\n      _Cre8Tooltip: HTMLElement;\n\n  /**\n   * Query the tooltip panel element\n   */\n  @query('.cre8-c-tooltip__panel')\n      _Cre8TooltipPanel: 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   * updated Callback Lifecycle\n   * 1. Find the second slot\n   * 2. Create a string from joining the textContent of the textnodes\n   * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback\n   * */\n  updated() {\n    /* 1 & 2 */\n      const tipContent = this.shadowRoot.querySelectorAll('slot')[1]\n          .assignedNodes()\n          .reduce(\n              ((str, item) => `${str}${item.textContent.replace(/\\n/g, '').trim()}`),\n              ''\n          );\n    /* 3 */\n      if (document.getElementById(this._uniqueId)) {\n          document.getElementById(this._uniqueId).textContent = tipContent;\n      }\n  }\n\n  /**\n   * firstUpdated Callback Lifecycle\n   * 1. If ariaDescribes is set\n      * a. create an ID and assign it to the property _uniqueId\n      * b. Generate an empty div, assign it the  _uniqueId and the tooltip role\n  * 2. Set the aria-describedby on the ariaDescribes target\n  */\n  firstUpdated() {\n      if (this.ariaDescribes) { /* 1 */\n          this._uniqueId = this._uniqueId || nanoid(); /* 1.a */\n          const idMatcher = new RegExp(`\\\\b${this._uniqueId}\\\\b`); // prevents dupes from reconnects below\n      /* 1.b */\n          const a11yProxy = document.createElement('div');\n          a11yProxy.setAttribute('role', 'tooltip');\n          a11yProxy.setAttribute('style', 'position:fixed; left: -1000px; top: -1000px;');\n          a11yProxy.id = this._uniqueId;\n          const describedEl = document.getElementById(this.ariaDescribes);\n          describedEl.parentNode.insertBefore(a11yProxy, describedEl);\n          const idList = describedEl?.getAttribute('aria-describedBy');\n      /* 2 */\n          describedEl?.setAttribute(\n              'aria-describedby',\n              `${idList ? `${idList.replace(idMatcher, '')} ` : ''}${this._uniqueId}`.trim()\n          );\n      }\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window mouseover event listener\n   * 2. Add window mouseout event listener\n   * 3. Add mousedown event listener\n   * 4. Set the id and aria-describedby\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      this.addEventListener('mouseover', this.toggleActive); /* 1 */\n      this.addEventListener('mouseout', this.removeActive); /* 2 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window mouseover event listener\n   * 2. Remove window mouseout event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      this.removeEventListener('mouseover', this.toggleActive); /* 1 */\n      this.removeEventListener('mouseout', this.removeActive); /* 2 */\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._Cre8TooltipPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const tooltipPanel = this._Cre8TooltipPanel.getBoundingClientRect();\n          const tooltipHeight = this._Cre8Tooltip.clientHeight + tooltipPanel.height + tooltipPanel.top;\n\n      /**\n       * If tooltip panel breaks out the left side of the window, position it to the right\n       */\n          if (tooltipPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If tooltip panel breaks out the right side of the window, position it to the left\n       */\n          if (tooltipPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If tooltip panel breaks out the top side of the window only, position it to the bottom center\n       */\n          if (tooltipPanel.top < 0 && tooltipPanel.left > 0 && tooltipPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If tooltip panel breaks out the bottom side of the window only, position it to the top center\n       */\n          if (\n              tooltipHeight >= window.innerHeight\n        && tooltipPanel.bottom >= window.innerHeight\n        && tooltipPanel.left >= 0\n        && tooltipPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If escape or tab key is struck when the tooltip is active, close it\n   * 2. If enter or escape is keyed, toggle the tooltip open or close.\n   *    We need these since the click event is on a div so that accessibility reads this aloud to a user\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (this.isActive) {\n          if (e.code === 'Escape' || e.code === 'Tab') {\n              this.toggleActive(); /* 1 */\n          }\n      }\n      if (e.code === 'Enter' || e.code === 'Space') {\n          this.toggleActive(); /* 2 */\n      }\n  }\n\n  /**\n   * Set Tooltip Active State\n   * 1. Toggle the active state between true and false\n   * 2. If is active, set the dynamic position and custom event.\n   * 3. If is not active, remove fire the close custom event.\n   * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.\n   */\n  toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n\n      if (this.isActive) {\n      /* 2 */\n          setTimeout(() => {\n              this.dynamicPosition();\n          }, 1);\n          this.dispatchWithLegacyAlias(new CustomEvent('tooltip-open', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      } else {\n      /* 3 */\n          this.dispatchWithLegacyAlias(new CustomEvent('tooltip-close', {\n              detail: { isActive: this.isActive }, bubbles: true, composed: true,\n          }));\n      }\n\n    /* 4 */\n      setTimeout(() => {\n          if (this.isActive && this.isDynamic) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\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-tooltip', {\n          'cre8-c-tooltip--top': this.position === 'top',\n          'cre8-c-tooltip--left': this.position === 'left',\n          'cre8-c-tooltip--right': this.position === 'right',\n          'cre8-c-tooltip--knockout': this.knockout,\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            <div \n                class=\"cre8-c-tooltip__trigger\"\n                tabindex=\"0\"\n                @focus=${this.toggleActive}\n                @keydown=${this._handleKeydown}\n            >\n                ${this.svg\n        ? html`\n            <slot name=\"trigger\">\n                <cre8-icon svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" \n                flip=\"${this.iconFlipDirection}\" aria-hidden=\"true\"></cre8-icon>\n            </slot>`\n        : html`<slot name=\"trigger\"></slot>`\n}\n            </div>\n            <dialog\n                id=${ifDefined(this._uniqueId)}\n                aria-labelledby=${this.ariaDescribes}\n                class=\"cre8-c-tooltip__panel\"\n                role=\"tooltip\">\n                <slot></slot>\n            </dialog>\n        </div>\n      `;\n  }\n}\n\nif (customElements.get('cre8-tooltip') === undefined) {\n    customElements.define('cre8-tooltip', Cre8Tooltip);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tooltip': Cre8Tooltip;\n  }\n}\n\nexport default Cre8Tooltip;\n"]}

package/lib/components/utils/light-children.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Build a component's light-DOM children from a data property.
+ *
+ * Compound families in this system are composed by hand: a table is a table
+ * wrapping a header wrapping a row wrapping cells, five levels deep, and
+ * `docs/kb/01-components.md` warns that skipping a level renders but is subtly
+ * wrong. That is a lot of ceremony for "here are my columns and rows", and it is
+ * the single most error-prone thing an agent generates.
+ *
+ * So the flattened props build that composition for you. They build it in the
+ * **light DOM**, not the shadow root, and that is the whole trick: the result is
+ * byte-for-byte the DOM you would have written by hand, so every existing
+ * `::slotted()` rule, every behaviour, and every consumer keeps working. The
+ * flattened API is sugar, never a second rendering path.
+ *
+ * Elements this creates are marked, and only marked elements are ever touched —
+ * hand-written children are left exactly where they are.
+ */
+/** Marks an element as owned by a data property rather than by the author. */
+export declare const GENERATED_ATTR = "data-cre8-generated";
+export interface ChildSpec {
+    tag: string;
+    /** Set as properties when the value is not a string, as attributes otherwise. */
+    props?: Record<string, unknown>;
+    /** Text content. Mutually exclusive with `children`. */
+    text?: string;
+    /** `slot` attribute to place this child in a named slot of its parent. */
+    slot?: string;
+    children?: ChildSpec[];
+}
+/**
+ * Make `host`'s generated light children match `specs`.
+ *
+ * Passing `null` removes them, which is how clearing a data property hands the
+ * component back to hand-written children.
+ */
+export declare function syncLightChildren(host: HTMLElement, specs: ChildSpec[] | null | undefined): void;
+/** True when the author has put their own children in — data props defer to none. */
+export declare function hasAuthoredChildren(host: HTMLElement): boolean;
+//# sourceMappingURL=light-children.d.ts.map

package/lib/components/utils/light-children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light-children.d.ts","sourceRoot":"","sources":["../../../components/utils/light-children.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,8EAA8E;AAC9E,eAAO,MAAM,cAAc,wBAAwB,CAAC;AAEpD,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;CACxB;AAgED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAIhG;AAED,qFAAqF;AACrF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAE9D"}

package/lib/components/utils/light-children.js

@@ -0,0 +1,100 @@
+/**
+ * Build a component's light-DOM children from a data property.
+ *
+ * Compound families in this system are composed by hand: a table is a table
+ * wrapping a header wrapping a row wrapping cells, five levels deep, and
+ * `docs/kb/01-components.md` warns that skipping a level renders but is subtly
+ * wrong. That is a lot of ceremony for "here are my columns and rows", and it is
+ * the single most error-prone thing an agent generates.
+ *
+ * So the flattened props build that composition for you. They build it in the
+ * **light DOM**, not the shadow root, and that is the whole trick: the result is
+ * byte-for-byte the DOM you would have written by hand, so every existing
+ * `::slotted()` rule, every behaviour, and every consumer keeps working. The
+ * flattened API is sugar, never a second rendering path.
+ *
+ * Elements this creates are marked, and only marked elements are ever touched —
+ * hand-written children are left exactly where they are.
+ */
+/** Marks an element as owned by a data property rather than by the author. */
+export const GENERATED_ATTR = 'data-cre8-generated';
+function applyProps(el, props = {}) {
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined || value === null || value === false) {
+            el.removeAttribute(key);
+            continue;
+        }
+        if (value === true) {
+            el.setAttribute(key, '');
+            continue;
+        }
+        if (typeof value === 'object') {
+            // Arrays and objects cannot survive an attribute; hand them over directly.
+            el[key] = value;
+            continue;
+        }
+        el.setAttribute(key, String(value));
+    }
+}
+/**
+ * Reconcile in place rather than rebuilding.
+ *
+ * Rebuilding would be three lines shorter and would throw away element identity
+ * on every data change — losing focus, scroll position, and any animation in
+ * flight, which is exactly what a live-updating table must not do. So an
+ * existing generated element whose tag still matches is reused and updated.
+ */
+function reconcile(parent, specs, doc) {
+    const generated = [...parent.children].filter((child) => child.hasAttribute(GENERATED_ATTR));
+    specs.forEach((spec, index) => {
+        let el = generated[index];
+        if (!el || el.tagName.toLowerCase() !== spec.tag.toLowerCase()) {
+            const created = doc.createElement(spec.tag);
+            created.setAttribute(GENERATED_ATTR, '');
+            if (el)
+                parent.replaceChild(created, el);
+            else
+                parent.appendChild(created);
+            el = created;
+        }
+        // Clear props this element no longer has, so a removed value does not stick.
+        for (const attr of [...el.attributes]) {
+            if (attr.name === GENERATED_ATTR || attr.name === 'slot')
+                continue;
+            if (!spec.props || !(attr.name in spec.props))
+                el.removeAttribute(attr.name);
+        }
+        applyProps(el, spec.props);
+        if (spec.slot)
+            el.setAttribute('slot', spec.slot);
+        else
+            el.removeAttribute('slot');
+        if (spec.children) {
+            reconcile(el, spec.children, doc);
+        }
+        else if (spec.text !== undefined) {
+            if (el.textContent !== spec.text)
+                el.textContent = spec.text;
+        }
+    });
+    // Anything generated beyond the new length is gone.
+    for (let i = specs.length; i < generated.length; i++)
+        generated[i].remove();
+}
+/**
+ * Make `host`'s generated light children match `specs`.
+ *
+ * Passing `null` removes them, which is how clearing a data property hands the
+ * component back to hand-written children.
+ */
+export function syncLightChildren(host, specs) {
+    const doc = host.ownerDocument;
+    if (!doc)
+        return;
+    reconcile(host, specs ?? [], doc);
+}
+/** True when the author has put their own children in — data props defer to none. */
+export function hasAuthoredChildren(host) {
+    return [...host.children].some((child) => !child.hasAttribute(GENERATED_ATTR));
+}
+//# sourceMappingURL=light-children.js.map