q2-tecton-elements 1.65.0 → 1.66.1

package/dist/esm/q2-context.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-context.entry.js","sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n\n* {\n    box-sizing: border-box;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host {\n    display: block;\n    background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n    box-shadow: var-list(--tct-context-box-shadow, none);\n    backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n    border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n    padding: var(--tct-context-padding, 10px);\n    width: var(--tct-context-width);\n    border-width: var-list(--tct-context-border-width, 0px);\n    border-style: var-list(--tct-context-border-style, solid);\n    border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n    --tct-item-bullet-padding-top: 0;\n    --tct-item-action-align-items: start;\n    --tct-item-action-icon-height: 24px;\n    --tct-item-action-icon-width: 24px;\n    --tct-item-action-icon-size: 24px;\n    --tct-item-avatar-height: 44px;\n    --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n    slot:not(:first-child)::before {\n        content: ' ';\n    }\n\n    ::slotted(*) {\n        display: inline;\n    }\n}\n\n.separator {\n    margin: var(--tct-context-separator-margin, 0);\n    border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n    --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n    // slotted affordance dropdown\n    --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n    // slotted action-group links\n    --tct-link-border-radius: var(--app-border-radius-1, 4px);\n    --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n    --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/**\n * @name Context\n * @category Display\n * @summary Use for displaying supplementary information or hints alongside content.\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n *\n * @slot header - A **required** slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n *\n * @slot description - A **required** slot. Use this to provide the bulk of the context you wish to convey to the user.\n *\n * @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n *\n * @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n *\n * @slot footer - An optional slot to display additional HTML content.\n */\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Renders a horizontal line between the description and the action-group/footer slots. */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidRender(): void {\n        this.handleActionGroupElements();\n        this.handleAffordanceElement();\n        this.handleDecoratorElement();\n        this.handleHeaderElement();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasActionGroupSlotContent() {\n        return hasSlotContent(this.hostElement, 'action-group');\n    }\n\n    get hasAffordanceSlotContent() {\n        return hasSlotContent(this.hostElement, 'affordance');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    handleActionGroupElements() {\n        if (!('HTMLSlotElement' in window)) return;\n        const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n        const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) || [];\n        actionGroupElements.forEach((el: HTMLElement, index) => {\n            if (index > 1) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (el.getAttribute('size') !== 'small') {\n                    el.setAttribute('size', 'small');\n                    console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n                }\n                if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n                    el.setAttribute('intent', 'neutral');\n                    console.warn(\n                        'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n                    );\n                }\n            }\n        });\n    }\n\n    handleAffordanceElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n        const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) || [];\n        affordanceElements.forEach((el: HTMLElement, index) => {\n            if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) || index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n                if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n            }\n\n            if (el.tagName === 'Q2-DROPDOWN') {\n                if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n                if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n                if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n            }\n        });\n    }\n\n    handleDecoratorElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) || [];\n        decoratorElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n                return;\n            }\n\n            if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n                return;\n            }\n        });\n    }\n\n    handleHeaderElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n        const headerElements = headerSlot?.assignedElements({ flatten: true }) || [];\n        headerElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n            }\n\n            if (el.tagName !== 'H4') {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"context-wrapper\">\n                <q2-item class=\"context-item\">\n                    {this.hasDecoratorSlotContent && (\n                        <slot\n                            name=\"decorator\"\n                            slot=\"bullet\"\n                        />\n                    )}\n                    <div\n                        class=\"context-body\"\n                        slot=\"body\"\n                    >\n                        <slot name=\"header\" />\n                        <slot name=\"description\" />\n                    </div>\n                    {this.hasAffordanceSlotContent && (\n                        <slot\n                            name=\"affordance\"\n                            slot=\"action\"\n                        />\n                    )}\n                </q2-item>\n                {this.separator && (\n                    <div\n                        class=\"separator\"\n                        role=\"separator\"\n                    />\n                )}\n                {this.hasActionGroupSlotContent && (\n                    <q2-action-group\n                        class=\"action-group\"\n                        orientation=\"horizontal\"\n                    >\n                        <slot name=\"action-group\" />\n                    </q2-action-group>\n                )}\n                {this.hasFooterSlotContent && <slot name=\"footer\" />}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-context.entry.js","sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n\n* {\n    box-sizing: border-box;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host {\n    display: block;\n    background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n    box-shadow: var-list(--tct-context-box-shadow, none);\n    backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n    border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n    padding: var(--tct-context-padding, 10px);\n    width: var(--tct-context-width);\n    border-width: var-list(--tct-context-border-width, 0px);\n    border-style: var-list(--tct-context-border-style, solid);\n    border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n    --tct-item-bullet-padding-top: 0;\n    --tct-item-action-align-items: start;\n    --tct-item-action-icon-height: 24px;\n    --tct-item-action-icon-width: 24px;\n    --tct-item-action-icon-size: 24px;\n    --tct-item-avatar-height: 44px;\n    --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n    slot:not(:first-child)::before {\n        content: ' ';\n    }\n\n    ::slotted(*) {\n        display: inline;\n    }\n}\n\n.separator {\n    margin: var(--tct-context-separator-margin, 0);\n    border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n    --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n    // slotted affordance dropdown\n    --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n    // slotted action-group links\n    --tct-link-border-radius: var(--app-border-radius-1, 4px);\n    --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n    --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/**\n * @name Context\n * @category Display\n * @summary Use for displaying supplementary information or hints alongside content.\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n *\n * @slot header - A **required** slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n *\n * @slot description - A **required** slot. Use this to provide the bulk of the context you wish to convey to the user.\n *\n * @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n *\n * @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n *\n * @slot footer - An optional slot to display additional HTML content.\n */\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Renders a horizontal line between the description and the action-group/footer slots. */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidRender(): void {\n        this.handleActionGroupElements();\n        this.handleAffordanceElement();\n        this.handleDecoratorElement();\n        this.handleHeaderElement();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasActionGroupSlotContent() {\n        return hasSlotContent(this.hostElement, 'action-group');\n    }\n\n    get hasAffordanceSlotContent() {\n        return hasSlotContent(this.hostElement, 'affordance');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    handleActionGroupElements() {\n        if (!('HTMLSlotElement' in window)) return;\n        const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n        const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) || [];\n        actionGroupElements.forEach((el: HTMLElement, index) => {\n            if (index > 1) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (el.getAttribute('size') !== 'small') {\n                    el.setAttribute('size', 'small');\n                    console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n                }\n                if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n                    el.setAttribute('intent', 'neutral');\n                    console.warn(\n                        'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n                    );\n                }\n            }\n        });\n    }\n\n    handleAffordanceElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n        const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) || [];\n        affordanceElements.forEach((el: HTMLElement, index) => {\n            if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) || index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n                if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n            }\n\n            if (el.tagName === 'Q2-DROPDOWN') {\n                if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n                if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n                if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n            }\n        });\n    }\n\n    handleDecoratorElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) || [];\n        decoratorElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n                return;\n            }\n\n            if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n                return;\n            }\n        });\n    }\n\n    handleHeaderElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n        const headerElements = headerSlot?.assignedElements({ flatten: true }) || [];\n        headerElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n            }\n\n            if (el.tagName !== 'H4') {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"context-wrapper\">\n                <q2-item class=\"context-item\">\n                    {this.hasDecoratorSlotContent && (\n                        <slot\n                            name=\"decorator\"\n                            slot=\"decorator\"\n                        />\n                    )}\n                    <div\n                        class=\"context-body\"\n                        slot=\"body\"\n                    >\n                        <slot name=\"header\" />\n                        <slot name=\"description\" />\n                    </div>\n                    {this.hasAffordanceSlotContent && (\n                        <slot\n                            name=\"affordance\"\n                            slot=\"action\"\n                        />\n                    )}\n                </q2-item>\n                {this.separator && (\n                    <div\n                        class=\"separator\"\n                        role=\"separator\"\n                    />\n                )}\n                {this.hasActionGroupSlotContent && (\n                    <q2-action-group\n                        class=\"action-group\"\n                        orientation=\"horizontal\"\n                    >\n                        <slot name=\"action-group\" />\n                    </q2-action-group>\n                )}\n                {this.hasFooterSlotContent && <slot name=\"footer\" />}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-currency.entry.js

@@ -140,7 +140,7 @@ const Q2Currency = class {
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (h("div", { key: 'c806b78b35360c02dbaa1ae7fe643fa897485ada', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '7a02707d30c028532f04a9d974c4fa98fabdb3fc' }, '('), hasPlusMinusSign && h("span", { key: '5c28408c73f1fa8eceda0c4e6b312b1497b17a01' }, plusMinusSign), currencyIsFront && h("span", { key: 'd44ab2fbec5d0f7361d67350d1739100d1a8c0e3', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '626bec16b41bf98f7dad9338a60fe5589c9d468f' }, amountCore), h("span", { key: '79d4172c757ee455120702f8582ab49c172ee01d', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: 'c2b9b8bd2d5f8690b0ccb39b177f42e449a02760', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '7a51cca84552f24c372c85c7e58a9980d27d3122' }, ')')));
+        return (h("div", { key: '494d9bb9173565657072ea28f85ac06b96af688c', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'e6e9e0022045d72b0d9bc769a6a4a7ae07c43b98' }, '('), hasPlusMinusSign && h("span", { key: '510068ff9c4a32d9654fdb4244daca8bd7112e9c' }, plusMinusSign), currencyIsFront && h("span", { key: '13a8d738c41ca025a8f9e2a870de09aef1557489', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '19a55f61b827ac4c2c1d78a18fb38b151fe4ffde' }, amountCore), h("span", { key: '42ed5a37619f6da94c7064d5cd4fdb6a96b207cc', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '651626123c67240295e4305559200ffcff898b7c', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '679b45cb9523de513fd332f4a9ee93c49508ff4a' }, ')')));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-data-table.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElem
 import { a as resizeIframe, l as loc } from './index-B4WYBDS9.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 
-const q2DataTableCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}:host([sticky]:not([sticky=false])) .container{overflow:unset}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));backdrop-filter:var(--tct-data-table-backdrop-filter, none);caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}:host([sticky]:not([sticky=false])) thead{position:sticky;top:var(--tct-data-table-sticky-header-top, 0px);background:var(--tct-data-table-sticky-header-background, var(--tct-table-background, var(--t-base, #ffffff)))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable{--tct-btn-icon-hover-background:transparent}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2))}tr.striped-even{background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped-even.expanded{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.striped-even.expandable:hover{background:var(--tct-data-table-expandable-row-even-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.striped-odd{background:var(--tct-data-table-row-odd-background, transparent)}tr.striped-odd.expanded{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}tr.striped-odd.expandable:hover{background:var(--tct-data-table-expandable-row-odd-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}.striped-odd+tr.expandable-row{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}.striped-even+tr.expandable-row{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
+const q2DataTableCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}:host([sticky]:not([sticky=false])) .container{overflow:unset}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));backdrop-filter:var(--tct-data-table-backdrop-filter, none);caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}:host([sticky]:not([sticky=false])) thead{position:sticky;top:var(--tct-data-table-sticky-header-top, 0px);background:var(--tct-data-table-sticky-header-background, var(--tct-table-background, var(--t-base, #ffffff)))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable{--tct-btn-icon-hover-background:transparent}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2))}tr.striped-even{background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped-even.expanded{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.striped-even.expandable:hover{background:var(--tct-data-table-expandable-row-even-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.striped-odd{background:var(--tct-data-table-row-odd-background, transparent)}tr.striped-odd.expanded{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}tr.striped-odd.expandable:hover{background:var(--tct-data-table-expandable-row-odd-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}.striped-odd+tr.expandable-row{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}.striped-even+tr.expandable-row{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}td{font-size:var(--tct-data-table-cell-font-size, inherit)}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
 
 const Q2DataTable = class {
     constructor(hostRef) {
@@ -33,6 +33,14 @@ const Q2DataTable = class {
          * @localizable
          */
         this.emptyMessage = 'tecton.element.dataTable.emptyMessage';
+        /**
+         * Controls the position of the checkbox column when `selectable` is true.
+         * When set to 'right', the checkbox column will appear on the right side of the table.
+         *
+         * @warning
+         * Use of this property requires `selectable` to be set to `true`.
+         */
+        this.selectAlign = 'left';
         /**
          * Determines if the selectable checkboxes allow for multi-select or not. If set to "single", once a row is selected, all other rows will be disabled.
          * See the documentation on the `select` event for how to handle selections.
@@ -385,7 +393,7 @@ const Q2DataTable = class {
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: 'd611b92badc2143d2651731ebc7c3a2629516746', class: "container" }, h("table", { key: '7902b15c90bfea8eb1c031a766a12d6c35096979' }, caption && h("caption", { key: '564475f7388863f6e9f341f279fe8a1586e83207', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: '4f39656dd19756a2ba09e91762b75502ff62a8a7', class: "container" }, h("table", { key: '3e2f1c473c9b3c99e26dd7a503ee5a01186fb984' }, caption && h("caption", { key: 'da35701d9e034c6538d47d89177958144893ddfe', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)
@@ -426,18 +434,19 @@ const Q2DataTable = class {
         return (h("tbody", null, h("tr", { class: "empty-state" }, h("td", { colSpan: numberOfColumns }, h("slot", { name: "empty-table" }, h("div", { class: "empty-state-content" }, h("q2-icon", { type: emptyIcon }), h("p", null, loc(emptyMessage))))))));
     }
     renderTableColGroup() {
-        const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;
+        const { serializedHeaders: headers, selectable, selectAlign, clickable, hasExpandableRows, hasDropdowns, } = this;
         if (!headers.length)
             return null;
-        return (h("colgroup", null, selectable && h("col", { class: "select-column" }), headers.map(({ width, backgroundColor }) => (h("col", { style: { width, backgroundColor } }))), clickable && h("col", { class: "click-column" }), hasExpandableRows && h("col", { class: "expandable-row-control-column" }), hasDropdowns && h("col", { class: "dropdown-column" })));
+        return (h("colgroup", null, selectable && selectAlign === 'left' && h("col", { class: "select-column" }), headers.map(({ width, backgroundColor }) => (h("col", { style: { width, backgroundColor } }))), clickable && h("col", { class: "click-column" }), hasExpandableRows && h("col", { class: "expandable-row-control-column" }), hasDropdowns && h("col", { class: "dropdown-column" }), selectable && selectAlign === 'right' && h("col", { class: "select-column" })));
     }
     renderTableHeader() {
         const { serializedHeaders: headers, selectable, clickable, hideClickable, selectMode, hasExpandableRows, hasDropdowns, allRowsSelected, someRowsSelected, hasRowData, loading, } = this;
         if (!headers.length)
             return null;
-        return (h("thead", null, h("tr", null, selectable && (h("th", null, selectMode === 'multiple' ? (h("q2-checkbox", { label: loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: () => mirrorEmit(this, ['selectAllRows', 'tctSelectAllRows'], {
+        const selectCheckboxColumn = selectable ? (h("th", { class: "select-column" }, selectMode === 'multiple' ? (h("q2-checkbox", { label: loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: () => mirrorEmit(this, ['selectAllRows', 'tctSelectAllRows'], {
                 checked: !allRowsSelected,
-            }), checked: hasRowData && allRowsSelected && !someRowsSelected, indeterminate: hasRowData && someRowsSelected && !allRowsSelected, disabled: loading || !hasRowData, "test-id": "select-all-rows-control" })) : (h("span", { class: "sr" }, loc('tecton.element.dataTable.selectRow'))))), headers.map(header => {
+            }), checked: hasRowData && allRowsSelected && !someRowsSelected, indeterminate: hasRowData && someRowsSelected && !allRowsSelected, disabled: loading || !hasRowData, "test-id": "select-all-rows-control" })) : (h("span", { class: "sr" }, loc('tecton.element.dataTable.selectRow'))))) : null;
+        return (h("thead", null, h("tr", null, selectable && this.selectAlign === 'left' && selectCheckboxColumn, headers.map(header => {
             const { align, sorted, verticalAlign } = header;
             const headerClasses = [];
             if (align)
@@ -449,7 +458,7 @@ const Q2DataTable = class {
             return (h("th", { class: headerClasses.join(' '), id: `header-${header.key}` }, header.sortable ? (h("q2-btn", { onClick: () => this.onSort(header), "test-id": "sort-control", disabled: this.loading }, h("div", { class: "header-content", "aria-label": header.ariaLabel || undefined }, h("slot", { name: `header-cell-${header.key}` }, header.title), !!sorted ? (h("q2-icon", { class: `sorted-indicator direction-${sorted}`, type: "arrow-down", label: sorted === 'ASC'
                     ? loc('tecton.element.dataTable.sortedAscending')
                     : loc('tecton.element.dataTable.sortedDescending'), "test-id": "sorted-indicator" })) : (h("q2-icon", { class: `sorted-indicator`, type: "sort", label: loc('tecton.element.dataTable.clickToSort'), "test-id": "sorted-indicator" }))))) : (h("div", { class: "header-content", "aria-label": header.ariaLabel || undefined }, h("slot", { name: `header-cell-${header.key}` }, header.title)))));
-        }), clickable && (h("th", { id: "click", class: hideClickable ? 'sr' : undefined }, h("span", { class: "sr" }, loc('tecton.element.dataTable.clickRow')))), hasExpandableRows && (h("th", { id: "toggle" }, h("span", { class: "sr" }, loc('tecton.element.dataTable.toggleRow')))), hasDropdowns && (h("th", null, h("span", { class: "sr" }, loc('tecton.element.dataTable.dropdown')))))));
+        }), selectable && this.selectAlign === 'right' && selectCheckboxColumn, clickable && (h("th", { id: "click", class: hideClickable ? 'sr' : undefined }, h("span", { class: "sr" }, loc('tecton.element.dataTable.clickRow')))), hasExpandableRows && (h("th", { id: "toggle" }, h("span", { class: "sr" }, loc('tecton.element.dataTable.toggleRow')))), hasDropdowns && (h("th", null, h("span", { class: "sr" }, loc('tecton.element.dataTable.dropdown')))))));
     }
     renderTableRows() {
         const { serializedHeaders: headers, serializedRows: rows, selectable, clickable, striped, hideClickable, selectMode, hasExpandableRows, hasDropdowns, numberOfColumns, loading, } = this;
@@ -486,7 +495,8 @@ const Q2DataTable = class {
             if (row.selected)
                 rowClasses.push('selected');
             const rowIsClickable = clickable || rowHasExpandableSlot;
-            return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label: this.getSelectRowLabel(row), "hide-label": true, checked: row.selected, disabled: (isSelectDisabled && row !== selectedRow) || row.disabled, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
+            const selectCheckboxCell = selectable ? (h("td", { class: "select-column", onClick: this.onControlContainerClick }, h("q2-checkbox", { label: this.getSelectRowLabel(row), "hide-label": true, checked: row.selected, disabled: (isSelectDisabled && row !== selectedRow) || row.disabled, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))) : null;
+            return (h(Fragment, null, h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && this.selectAlign === 'left' && selectCheckboxCell, headers.map(({ key }) => {
                 const cell = row.cells[key];
                 const lineClamp = cell === null || cell === void 0 ? void 0 : cell.lineClamp;
                 const cellAlign = cell === null || cell === void 0 ? void 0 : cell.align;
@@ -502,7 +512,7 @@ const Q2DataTable = class {
                     ? { '--comp-line-clamp-count': `${lineClamp}` }
                     : undefined;
                 return (h("td", { class: cellClasses.join(' '), style: cellStyles }, h("slot", { name: `${cellSlotPrefix}-${key}` }, this.renderCellContent(cell))));
-            }), clickable && (h("td", { class: clickableClassString }, h("q2-btn", { intent: "neutral", size: "small", onClick: e => this.onClickRow(e, row), "test-id": "clickable-row-control" }, loc('tecton.element.dataTable.clickRow')))), hasExpandableRows && (h("td", { class: "expandable-row-control-column", onClick: this.onControlContainerClick }, rowHasExpandableSlot && (h("q2-btn", { onClick: e => this.onToggleRow(e, row), ariaExpanded: `${row.expanded}`, ariaControls: expandableRowName, ariaLabel: loc('tecton.element.dataTable.toggleRow'), "test-id": "expandable-row-control" }, h("q2-icon", { type: "chevron-down", class: "toggle-expandable-row" }))))), hasDropdowns && (h("td", { class: "dropdown-column", onClick: this.onControlContainerClick }, rowHasDropdownSlot && h("slot", { name: dropdownCellName })))), rowHasExpandableSlot && (h("tr", { id: expandableRowName, class: "expandable-row", hidden: !row.expanded, "aria-hidden": !row.expanded }, h("td", { colSpan: numberOfColumns, headers: "toggle" }, h("div", { class: "expandable-content" }, h("slot", { name: expandableRowName })))))));
+            }), selectable && this.selectAlign === 'right' && selectCheckboxCell, clickable && (h("td", { class: clickableClassString }, h("q2-btn", { intent: "neutral", size: "small", onClick: e => this.onClickRow(e, row), "test-id": "clickable-row-control" }, loc('tecton.element.dataTable.clickRow')))), hasExpandableRows && (h("td", { class: "expandable-row-control-column", onClick: this.onControlContainerClick }, rowHasExpandableSlot && (h("q2-btn", { onClick: e => this.onToggleRow(e, row), ariaExpanded: `${row.expanded}`, ariaControls: expandableRowName, ariaLabel: loc('tecton.element.dataTable.toggleRow'), "test-id": "expandable-row-control" }, h("q2-icon", { type: "chevron-down", class: "toggle-expandable-row" }))))), hasDropdowns && (h("td", { class: "dropdown-column", onClick: this.onControlContainerClick }, rowHasDropdownSlot && h("slot", { name: dropdownCellName })))), rowHasExpandableSlot && (h("tr", { id: expandableRowName, class: "expandable-row", hidden: !row.expanded, "aria-hidden": !row.expanded }, h("td", { colSpan: numberOfColumns, headers: "toggle" }, h("div", { class: "expandable-content" }, h("slot", { name: expandableRowName })))))));
         })));
     }
     get hostElement() { return getElement(this); }