@scania/tegel 1.14.0 → 1.15.0-component-versioning-beta.0

package/dist/collection/components/text-field/text-field.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot prefix - Slot for the prefix in the component.
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
@@ -46,9 +47,10 @@ export class TdsTextField {
     }
     render() {
         var _a;
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '1b4348574e1a9e7e315c61a2d555b487b619f22e', class: {
+        return (h("div", { key: '9709711a5feb7c8c3e26997f0ad91753295bc89a', class: {
                 'form-text-field-nomin': this.noMinWidth,
                 'form-text-field': !this.focusInput || this.disabled,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -62,12 +64,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '7f604df386ece3c8c01e5b60e75ef80de4500e81', class: "text-field-label-outside" }, h("div", { key: 'c13f468f76d9484c016a8218d9cc73b18724458f' }, this.label))), h("div", { key: '992c9076d7b1f9c6bec1847851bcfd989b6b0497', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'dfb616b9083ce42d90c180b5217e2e60ee3784af', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '8d1d75050b1c40a5b5e4fe0180805890d5958402', class: "text-field-label-outside" }, h("div", { key: '35160ceab326f5e86d0a98cc3ae6ee5c7e711a00' }, this.label))), h("div", { key: 'ab0021d9ce5b829c3613ab89c70abe8e7b270682', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '56be7515ef267d299b478c822dd3a986909c75b9', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: '98ed143615ad68a3cd51aca034999bfc279fce6b', name: "prefix" }))), h("div", { key: '8079b57a7e047255ed45f3f1ba9e28655a16ebed', class: "text-field-input-container" }, h("input", { key: '11782cd5c55f092a02ec741ecd9b20f2b8bfae91', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: '812acfb75ff513c35e2a48ccfb3dcf671d636ead', name: "prefix" }))), h("div", { key: '28b17720edb473137f0de48ef5561975fbabedc7', class: "text-field-input-container" }, h("input", { key: '4d047fcef2d46e91e40d29a35f46edcb42ffd1eb', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -80,13 +82,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'f72126827829ec26bafee0b5d0eb29a9b96e8628', class: "text-field-label-inside" }, this.label))), h("div", { key: 'c21c6a8cd0d5c8a4814efa1a8f93a5e99b3e092e', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '9029f584ea0ef6cc081985a087692e066394a01b', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '6865add321d3975917ac7881c96d8dff6f2b603a', class: "text-field-label-inside" }, this.label))), h("div", { key: 'e559d4a3038b1ea26aed03d97a8e9cbbf52c9f99', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '455610e90198eb2f5030ae81f1d695d092388a8b', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: 'f50d3a85bfd324529516a2b8180129e194202465', name: "suffix" }))), h("span", { key: '6f7f160b3a1b425a7ace18b748b64e50cfd8389f', class: "text-field-icon__readonly" }, h("tds-icon", { key: '82b1d06cfb8a3b08543a77c839ccfcba2e9fae13', name: "edit_inactive", size: "20px" })), h("span", { key: '0c9c2ab0b8f620db172050e1db1dd4324b3ab094', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '84c9baa2bce9159f5ea084ed35051a878cfac1f9', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '888d0185686e5ba16bf7b4a064ea1926e17d5c96', class: "text-field-helper-error-state" }, h("tds-icon", { key: '752d5c6c9dee5a7eff5abae9d60e2eb353ee2e60', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'ead6aba2e4f11010dc4d6c17977abaac0b242e76', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '27e1880b203314c781260116b99fd1474a6a8041', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
+            } }, h("slot", { key: '66f0d0b9bd70aab9f4ec1265523e464075925e29', name: "suffix" }))), h("span", { key: '050f98dc78cac90bcd02252d6c3fdbcfc18f41b6', class: "text-field-icon__readonly" }, h(prefixedTagNames.tdsIcon, { key: '6c975efb06829a46398ca2a2f05efd666410ebba', name: "edit_inactive", size: "20px" })), h("span", { key: 'b69ded042d9633d6d87527c1b5feba0d680f0299', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '1dba1e27b3435eddcc27f1fecd7d260d8ba0f04f', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: 'a5a2fa8f25edb7ed3626f6857446c56baed0f2d7', class: "text-field-helper-error-state" }, h(prefixedTagNames.tdsIcon, { key: '9eed79df72810969d0d88394437b60a8ee8be71d', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '0353ce2aa058c39479389517029e7fd4a6de04e7', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '18f9e96da7b473dbbb0043beeeca1fa7bcf667de', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/textarea/textarea.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { getPrefixedTagNames } from "../../utils/tagName";
 export class TdsTextarea {
     constructor() {
         this.label = '';
@@ -38,7 +39,8 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: 'f110536792da6122221dc6941b6da71900ea2111', class: `
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h("div", { key: '9840c9e02270672985277c10a85dedc9e3e404d2', class: `
         textarea-container
         ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
         ${this.focusInput ? 'textarea-focus' : ''}
@@ -48,7 +50,7 @@ export class TdsTextarea {
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
-        ` }, this.labelPosition !== 'no-label' && h("span", { key: '67784499bde176257853f1f4c7a8757ce98b07ee', class: 'textarea-label' }, this.label), h("div", { key: '7ad9c6b9c897995a98af2b9e9babefc3e2ae8831', class: "textarea-wrapper" }, h("textarea", { key: '94d944bb5e9722d89f7b0c98d18199c52f81b458', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+        ` }, this.labelPosition !== 'no-label' && h("span", { key: 'b57721fd5d28ad58616ab4eafd58f639e693c884', class: 'textarea-label' }, this.label), h("div", { key: 'b8437213f9371ffbc287845f860a0c50fcb62daa', class: "textarea-wrapper" }, h("textarea", { key: '3edf4ab92c935510bbd04c395e7e2e5a0518f0bc', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -56,7 +58,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '719da60a6975556fa37b2104d435bf99fb99efa5', class: "textarea-resizer-icon" }, h("svg", { key: '6b6969d6e49824fb8791343ac62bd1a9f5c4e0fa', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1e4d31007fef3c520cfa32686cf9b888919b314a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '144143c8af4351e0d2370ebeb0c50a0124ab8f9b', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'e2c0ab89e72258d46bc6479b663f4d62466fa8b0', name: "edit_inactive" })), h("span", { key: 'c07af4893c1fd32de8988c1ef6ef3b77c4a63768', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'dd8ae6cbd2cdde4a08392c6905faae07bd7d58e7', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: 'c282dcee39da4e70d207e41221c557852a06fb43', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '7f05bc68e67825742fe9c8c49853a39fabf1199e', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '32dd0095c4500558fbe9c9d46ba6db3eb67d9034', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '6925c727f844de3efa787389dc488452f05de107', class: "textarea-resizer-icon" }, h("svg", { key: 'd8e9b2c949243b9d88f072492a2da56f34b7ee7d', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2821c5af0b5f0678d1e301703069f2acf0c2d83e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '3358037162afca7d4351de3b4790076802c2135d', class: "textarea-icon__readonly" }, h(prefixedTagNames.tdsIcon, { key: '52ea3ac12dfbc02e29e13f1483a014655ec44f9f', name: "edit_inactive" })), h("span", { key: '759328f7b4a40a769229ee25c28c1dfe85162e27', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'c45a121e2c3510c94d69c712a6fb2afb2c6427b9', class: 'textarea-helper' }, this.state === 'error' && (h(prefixedTagNames.tdsIcon, { key: 'e056a500dde09d407a3edb53e9a2628eeed23249', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '4bcd5edd214ffb2aa022193d6093fa7e6631be59', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '28795db6231ee330eaffeb879756423ffd49b367', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -423,4 +425,5 @@ export class TdsTextarea {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/toast/toast.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 import hasSlot from "../../utils/hasSlot";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot header - Slot for the Toast header.
  * @slot subheader - Slot for the Toast subheader.
@@ -55,15 +56,16 @@ export class TdsToast {
         this.hidden = false;
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'f0ddc729628a45f868868f2b265f31d7df9a0411', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '9c4ed33784151bd2ff0719cf229d8c4563be245c', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '73e3f624e617544d84ec2c7306ace9fb990070b9', class: `
+            } }, h("div", { key: 'b0338778796674cc19ef3c0873a61c1255b0a76b', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: 'bbeab9085851de6cc3d870421d8ea18c7e15471a', name: this.getIconName(), size: "20px" }), h("div", { key: '45b568761c09added6f0c3815d518fb541ba077a', class: `content` }, h("div", { key: '65aaac22e0b6439b3975e465493bc59e01ac7131', class: "header-subheader" }, this.header && h("div", { key: 'cd856ec5c2c118c52d942010f40cd90499f735b7', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '96157619f2e4fc59cd197bffb948cd4844d997b1', name: "header" }), this.subheader && h("div", { key: '3ba6782ba25b311d1c57b76791c0055db3f92ec2', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'e820491ceaa28771acd2b7661c5ddf7d9574a492', name: "subheader" })), usesActionsSlot && (h("div", { key: '72b25af2d7efbbb54b4f349c038c7efb684086f6', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '8c534d3b51d9f8c30148c0f601613d3395b8930e', name: "actions" })))), this.closable && (h("button", { key: 'a81bc7b2836bbec456260e80a1eb6e9d345ccdcf', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '7988501b679a147d62f6879db443bbfc64211871', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h(prefixedTagNames.tdsIcon, { key: 'a07575723bba27caf6d38f1f6a1620cca698287a', name: this.getIconName(), size: "20px" }), h("div", { key: 'bffbd9afd81b4ef129e2b7e902eb38bdc23b6668', class: `content` }, h("div", { key: '8537a6b634c3d864d0e78b7816eb61f577855d74', class: "header-subheader" }, this.header && h("div", { key: 'ec629a586101403b8c598491b189617547b2c9b4', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'b1f2edad8674a25cfde8295955f6c2c192e70813', name: "header" }), this.subheader && h("div", { key: 'e884bd8aa6ffdfe5c2bd72e139f661dd7fb85ccc', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'c866f0a4dc4197fcec92e921f774d0c0858e69ea', name: "subheader" })), usesActionsSlot && (h("div", { key: '9c3105649defb45a571e18d5233bc6826e635754', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'd2ca9276229fb8ccf252f0fd8fc2faa45b350ac0', name: "actions" })))), this.closable && (h("button", { key: '7670a6fc75adfe4875e82abad04cc19a708cdcba', onClick: this.handleClose, class: "close" }, h(prefixedTagNames.tdsIcon, { key: 'a30deec263d631c6188033fbb10cfa0707fe4ecc', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import inheritAttributes from "../../utils/inheritAttributes";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
  */
@@ -51,7 +52,8 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '93961300d93daf9eb0fa1f15e59c6bdfbea5f77b' }, h("tds-popover-core", Object.assign({ key: '1d2c6b17012d5040632df84b221eac247e890696' }, this.inheritedAttributes, { class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '1b316c3ecf119863127ca9f6ec369c6beb29b60e' }, h(prefixedTagNames.tdsPopoverCore, Object.assign({ key: '7c1b59991aa1e23b1deadd044a7aa16ea853c69c' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -60,7 +62,7 @@ export class TdsTooltip {
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            } }), this.text, h("slot", { key: 'd5a4357f2875a0f5f9b958b26adb8cc6f794e900' }))));
+            } }), this.text, h("slot", { key: '8c585483121574a449eae789dc81f6fe77602905' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/tagName.js

@@ -0,0 +1,33 @@
+// eslint-disable-next-line import/no-relative-packages
+import { TAG_NAMES } from "../../../../src/utils/tagNames";
+// Utils to handle tag names for 'tds-' prefixed components
+export const getTagName = (el) => {
+    if (!el || !(el instanceof HTMLElement)) {
+        console.error('Invalid element provided:', el);
+        return ''; // Return a default or throw an error
+    }
+    return el.tagName.toLowerCase();
+};
+export const paramCaseToCamelCase = (str) => str.replace(/-(\w)/g, (_, group) => group.toUpperCase());
+export const getTagNameWithoutPrefix = (host) => {
+    const tagName = getTagName(host);
+    const maxLength = 100; // Maximum length of the input string
+    // Ensure the regex correctly captures the tag name after the prefix
+    const match = /^((?:[a-z0-9]+-){0,maxLength})([a-z0-9-]+)$/.exec(tagName.slice(0, maxLength)) || [];
+    const [, , tagNameWithoutPrefix = ''] = match;
+    return tagNameWithoutPrefix;
+};
+class PrefixedTagNamesCache extends Map {
+}
+const PREFIXED_TAG_NAMES_CACHE = new PrefixedTagNamesCache();
+export const getPrefixedTagNames = (host) => {
+    const tagName = getTagName(host);
+    // Generate a unique cache key based on the tag name
+    const cacheKey = tagName;
+    // Check if the cache needs to be updated
+    if (!PREFIXED_TAG_NAMES_CACHE.has(cacheKey)) {
+        const prefixedTagNames = TAG_NAMES.reduce((result, tag) => (Object.assign(Object.assign({}, result), { [paramCaseToCamelCase(tag)]: tag })), {});
+        PREFIXED_TAG_NAMES_CACHE.set(cacheKey, prefixedTagNames);
+    }
+    return PREFIXED_TAG_NAMES_CACHE.get(cacheKey) || {};
+};

package/dist/components/p-a74b6809.js

@@ -0,0 +1,117 @@
+const TAG_NAMES = [
+    'tds-accordion',
+    'tds-badge',
+    'tds-block',
+    'tds-breadcrumbs',
+    'tds-button',
+    'tds-banner',
+    'tds-card',
+    'tds-checkbox',
+    'tds-chip',
+    'tds-datetime',
+    'tds-divider',
+    'tds-dropdown',
+    'tds-footer',
+    'tds-header',
+    'tds-icon',
+    'tds-link',
+    'tds-message',
+    'tds-modal',
+    'tds-popover-canvas',
+    'tds-popover-core',
+    'tds-popover-menu',
+    'tds-radio-button',
+    'tds-side-menu',
+    'tds-slider',
+    'tds-spinner',
+    'tds-stepper',
+    'tds-text-field',
+    'tds-textarea',
+    'tds-toast',
+    'tds-toggle',
+    'tds-tooltip',
+    'tds-accordion-item',
+    'tds-breadcrumb',
+    'tds-dropdown-option',
+    'tds-footer-group',
+    'tds-footer-item',
+    'tds-core-header-item',
+    'tds-header-dropdown',
+    'tds-header-brand-symbol',
+    'tds-header-dropdown-list',
+    'tds-header-dropdown-list-item',
+    'tds-header-hamburger',
+    'tds-header-dropdown-list-user',
+    'tds-header-item',
+    'tds-header-launcher',
+    'tds-header-launcher-button',
+    'tds-header-launcher-grid',
+    'tds-header-launcher-grid-item',
+    'tds-header-launcher-grid-title',
+    'tds-header-launcher-list',
+    'tds-header-launcher-list-item',
+    'tds-header-launcher-list-title',
+    'tds-header-title',
+    'tds-popover-menu-item',
+    'tds-side-menu-dropdown',
+    'tds-side-menu-collapse-button',
+    'tds-side-menu-close-button',
+    'tds-side-menu-dropdown-list',
+    'tds-side-menu-item',
+    'tds-side-menu-dropdown-list-item',
+    'tds-side-menu-overlay',
+    'tds-side-menu-user',
+    'tds-side-menu-user-image',
+    'tds-side-menu-user-label',
+    'tds-step',
+    'tds-table',
+    'tds-table-body',
+    'tds-body-cell',
+    'tds-table-body-input-wrapper',
+    'tds-table-body-row',
+    'tds-table-body-row-expandable',
+    'tds-table-footer',
+    'tds-table-header',
+    'tds-header-cell',
+    'tds-table-header-input-wrapper',
+    'tds-table-toolbar',
+    'tds-folder-tabs',
+    'tds-inline-tabs',
+    'tds-navigation-tabs',
+    'tds-date-picker',
+    'tds-date-range-picker',
+    'tds-folder-tab',
+    'tds-inline-tab',
+    'tds-navigation-tab',
+    'date-picker-day',
+    'date-picker-month',
+    'date-picker-year',
+    'date-range-picker-day',
+];
+
+// eslint-disable-next-line import/no-relative-packages
+// Utils to handle tag names for 'tds-' prefixed components
+const getTagName = (el) => {
+    if (!el || !(el instanceof HTMLElement)) {
+        console.error('Invalid element provided:', el);
+        return ''; // Return a default or throw an error
+    }
+    return el.tagName.toLowerCase();
+};
+const paramCaseToCamelCase = (str) => str.replace(/-(\w)/g, (_, group) => group.toUpperCase());
+class PrefixedTagNamesCache extends Map {
+}
+const PREFIXED_TAG_NAMES_CACHE = new PrefixedTagNamesCache();
+const getPrefixedTagNames = (host) => {
+    const tagName = getTagName(host);
+    // Generate a unique cache key based on the tag name
+    const cacheKey = tagName;
+    // Check if the cache needs to be updated
+    if (!PREFIXED_TAG_NAMES_CACHE.has(cacheKey)) {
+        const prefixedTagNames = TAG_NAMES.reduce((result, tag) => (Object.assign(Object.assign({}, result), { [paramCaseToCamelCase(tag)]: tag })), {});
+        PREFIXED_TAG_NAMES_CACHE.set(cacheKey, prefixedTagNames);
+    }
+    return PREFIXED_TAG_NAMES_CACHE.get(cacheKey) || {};
+};
+
+export { getPrefixedTagNames as g };

package/dist/components/tds-accordion-item.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-a74b6809.js';
 
 const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:focus,.tds-accordion-item.disabled:focus *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:focus{border-top:1px solid var(--tds-accordion-border-focus)}.tds-accordion-item[disabled=true]:focus{border-color:var(--tds-accordion-border)}:host(:focus) .tds-accordion-item{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}:host(:active) .tds-accordion-header-icon-start,:host(:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}";
 const TdsAccordionItemStyle0 = accordionItemCss;
@@ -27,13 +27,15 @@ const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionIt
         }
     }
     render() {
-        return (h(Host, { key: '628336db584f9488762b6073af5fc05b18a064bd' }, h("div", { key: '15807da09f006149732d53a7f9aab2f86be788cd', class: `tds-accordion-item
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '28a9b6813c1cd7ce9df1528cefe381efe4a817e5' }, h("div", { key: 'b4f8d10531ec73f8090da847febc291638938eba', class: `tds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("button", { key: 'f2f5941332be588effc795862d4136077b51122e', type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: '3cfa2d6066875270211f75879effd48b88932ce8', class: "tds-accordion-title" }, this.header, h("slot", { key: '3c5cb389c8df24b1cb0cd20bfcb3c0b1154d3e38', name: "header" })), h("div", { key: 'a6a8189fc018d2629989165b3bb49ab111318628', class: "tds-accordion-icon" }, h("tds-icon", { key: 'a7cf540846b381a4925a754ea7b915c7df5d1208', name: "chevron_down", size: "16px" }))), h("div", { key: 'd3eb2219f67e69c54f55428950b976ba282845dc', class: `tds-accordion-panel
+        ` }, h("button", { key: 'b1b7db7fc8522f1092c6fff48e2a78bca6868bcf', type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: 'cef4676f3219664ead89806ad0450fd9593e7b43', class: "tds-accordion-title" }, this.header, h("slot", { key: '4ab9fef8b30367f2f205b30d972217a9e62b4e78', name: "header" })), h("div", { key: 'c9a988d0c37316139332611f6c695bfd946c3a2d', class: "tds-accordion-icon" }, h(prefixedTagNames.tdsIcon, { key: 'ff1b6046a611269cf8883eea74aa5cbfa89b1f47', name: "chevron_down", size: "16px" }))), h("div", { key: '851378e8581ca06d6d0ad285a00bc68bcf006afb', class: `tds-accordion-panel
             ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
-            ` }, h("slot", { key: '21625afeae6b8342aaa7d56c05ed965c29cc709d' })))));
+            ` }, h("slot", { key: '4925780d0f3f521d9e49546ff7bb4ed387b6d2f7' })))));
     }
+    get host() { return this; }
     static get style() { return TdsAccordionItemStyle0; }
 }, [1, "tds-accordion-item", {
         "header": [1],
@@ -47,18 +49,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-accordion-item", "tds-icon"];
+    const components = ["tds-accordion-item"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-accordion-item":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsAccordionItem$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-banner.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 import { h as hasSlot } from './p-ae110fc2.js';
-import { d as defineCustomElement$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-a74b6809.js';
 
 const bannerCss = ":host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400;padding-left:16px}:host .banner-icon{padding-left:4px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 const TdsBannerStyle0 = bannerCss;
@@ -44,12 +44,13 @@ const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends H {
         }
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const usesHeaderSlot = hasSlot('subheader', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'cce608e8685f68d432cb3e2dd847a1919d7fac17', role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.variant} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { key: '45c455342ea61eadf0090a98a67e4137499cc9db', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: 'c503d90c8abdf3d794c5ea4744acf4bf726d9b68', name: this.icon, size: "20px" }))), h("div", { key: '0b625094274021007e5ebb2a13ad74037e2bcce9', class: "content" }, h("div", { key: '957b3928258ad7640cedec4c5882b7db5d5c5362', class: "header-subheader" }, this.header && h("div", { key: 'b4c2221163bd72d05300766cecad13081c631f3f', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '70329f3c96268ccac2a82ff5f2a35619abaea25e', name: "header" }), this.subheader && h("div", { key: '922b918a9fb308dbe367e2409db1807ff2fcb736', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '8ce26997a04b5d8a7607b06980c556a69a400740', name: "subheader" })), usesActionsSlot && h("slot", { key: '6e7e450a48e1c3aa4765b6049789b273a740c3ba', name: "actions" })), h("div", { key: 'e644385a339db3f121be9ae2c23eb4875194291a', class: `banner-close` }, h("button", { key: 'a172a6f4fb35a64c5f0002b9c73740c413c39c12', onClick: () => {
+        return (h(Host, { key: '9ec1ab85196402e45ea5c468cf95b407b2549418', role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.variant} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { key: '7259e5da3faa63568c0785dbe2dee5e7ff200bcd', class: `banner-icon ${this.variant}` }, h(prefixedTagNames.tdsIcon, { key: '9635c16cb6366911ea5735575b20da714967e849', name: this.icon, size: "20px" }))), h("div", { key: 'eb60b4459baeb7ecb93b6f53f516b9673fa7f9a1', class: "content" }, h("div", { key: 'ad854c6e80e5e31ff20e157254b99786910e20ee', class: "header-subheader" }, this.header && h("div", { key: 'ca6a57c698a19043c8b9c119cbb86ea7219560ab', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'd56d8f1febe8311082e7b1b73724cc164dd21798', name: "header" }), this.subheader && h("div", { key: 'e0cb3b154bcb963656137d24da83ada7d72ad856', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '1e581ad28d2071ae94440f8fe2bd8e4785dc1a04', name: "subheader" })), usesActionsSlot && h("slot", { key: '83f9968a1157eae21b24649187dfcc0ea37f8856', name: "actions" })), h("div", { key: '111bfbe1e428650164b6f6c5649b660f9e421d34', class: `banner-close` }, h("button", { key: '5634816a14ad675ece295197412010e240f71017', onClick: () => {
                 this.handleClose();
-            } }, h("tds-icon", { key: 'da9b83b7c7538b431f919c7e13265d28fde1e39f', name: "cross", size: "20px" })))));
+            } }, h(prefixedTagNames.tdsIcon, { key: '706119bd821786f38c4c6c206fcbe78f3bb8201f', name: "cross", size: "20px" })))));
     }
     get host() { return this; }
     static get style() { return TdsBannerStyle0; }
@@ -67,18 +68,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-banner", "tds-icon"];
+    const components = ["tds-banner"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-banner":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsBanner$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-card.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 import { h as hasSlot } from './p-ae110fc2.js';
-import { d as defineCustomElement$2 } from './p-e46088d9.js';
+import { g as getPrefixedTagNames } from './p-a74b6809.js';
 
-const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .header-subheader{display:flex;flex-direction:column;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03) !important;letter-spacing:var(--tds-detail-03-ls) !important;color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=actions]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{width:100%;border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}";
+const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .header-subheader{display:flex;flex-direction:column;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03) !important;letter-spacing:var(--tds-detail-03-ls) !important;color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=actions]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{width:100%;border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}.below-header-stretch,.above-header-stretch{display:flex;flex-direction:column}.below-header-stretch .stretch,.above-header-stretch .stretch{display:flex;flex-direction:column;flex-grow:1;width:100%}.below-header-stretch .card-body,.above-header-stretch .card-body{display:flex;flex-direction:column;flex-grow:1}.below-header-stretch .card-body slot[name=body]::slotted(*),.above-header-stretch .card-body slot[name=body]::slotted(*){max-width:unset;flex-grow:1}";
 const TdsCardStyle0 = cardCss;
 
 const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
@@ -23,11 +23,11 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
             const usesThumbnailSlot = hasSlot('thumbnail', this.host);
             return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader" }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
         };
-        this.getCardContent = () => {
+        this.getCardContent = (prefixedTagNames) => {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h(prefixedTagNames.tdsDivider, null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -37,14 +37,16 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
         this.bodyImgAlt = undefined;
         this.bodyDivider = false;
         this.clickable = false;
+        this.stretch = false;
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '485eb954899e2f559dfa9c231d275c1cecd7791f', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'e80744e65ac066b5c6a13f79cdaf9ed645f8a8fb', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
                 if (this.clickable) {
                     this.handleClick();
                 }
-            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}` }, this.getCardContent()))));
+            } }, this.getCardContent(prefixedTagNames))) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}` }, this.getCardContent(prefixedTagNames)))));
     }
     get host() { return this; }
     static get style() { return TdsCardStyle0; }
@@ -57,24 +59,20 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
         "bodyImgAlt": [1, "body-img-alt"],
         "bodyDivider": [4, "body-divider"],
         "clickable": [4],
+        "stretch": [4],
         "cardId": [1, "card-id"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-card", "tds-divider"];
+    const components = ["tds-card"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-card":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsCard$1);
             }
             break;
-        case "tds-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-checkbox.js

@@ -1,4 +1,92 @@
-import { T as TdsCheckbox$1, d as defineCustomElement$1 } from './p-e4d7c655.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
+import { g as generateUniqueId } from './p-11648030.js';
+
+const checkboxCss = ".sc-tds-checkbox-h{align-items:center;position:relative;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox::before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate::after{background-image:var(--tds-checkbox-background-img-indeterminate);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::after{background-image:var(--tds-checkbox-background-img-indeterminate-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
+const TdsCheckboxStyle0 = checkboxCss;
+
+const TdsCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.tdsChange = createEvent(this, "tdsChange", 6);
+        this.tdsFocus = createEvent(this, "tdsFocus", 6);
+        this.tdsBlur = createEvent(this, "tdsBlur", 6);
+        this.handleChange = () => {
+            this.checked = !this.checked;
+            this.indeterminate = false;
+            this.tdsChange.emit({
+                checkboxId: this.checkboxId,
+                checked: this.checked,
+                indeterminate: this.indeterminate,
+                value: this.value,
+            });
+        };
+        this.name = undefined;
+        this.checkboxId = generateUniqueId();
+        this.disabled = false;
+        this.required = false;
+        this.checked = false;
+        this.indeterminate = false;
+        this.value = undefined;
+    }
+    /** Toggles the checked value of the component. */
+    async toggleCheckbox() {
+        this.checked = !this.checked;
+        this.indeterminate = false;
+        return {
+            checkboxId: this.checkboxId,
+            checked: this.checked,
+        };
+    }
+    handleIndeterminateState() {
+        this.inputElement.indeterminate = this.indeterminate;
+    }
+    /** Set the input as focus when clicking the component */
+    handleFocus(event) {
+        this.tdsFocus.emit(event);
+    }
+    /** Set the input as blur when clicking outside the component */
+    handleBlur(event) {
+        this.tdsBlur.emit(event);
+    }
+    render() {
+        return (h("div", { key: '0efb982ab13c1d75681614675b649e010707b701', class: "tds-checkbox" }, h("input", { key: '834b29962978ea1cf7249018e6b7eea2417da5f4',
+            // eslint-disable-next-line no-return-assign
+            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+                this.handleChange();
+            } }), h("label", { key: '2150346b336440768beac655de035bf470f9e492', htmlFor: this.checkboxId }, h("slot", { key: 'df61654810e46b8707709d86bae7bdfd627724ee', name: "label" }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "indeterminate": ["handleIndeterminateState"]
+    }; }
+    static get style() { return TdsCheckboxStyle0; }
+}, [6, "tds-checkbox", {
+        "name": [1],
+        "checkboxId": [1, "checkbox-id"],
+        "disabled": [4],
+        "required": [4],
+        "checked": [1540],
+        "indeterminate": [1028],
+        "value": [1],
+        "toggleCheckbox": [64]
+    }, undefined, {
+        "indeterminate": ["handleIndeterminateState"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsCheckbox$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const TdsCheckbox = TdsCheckbox$1;
 const defineCustomElement = defineCustomElement$1;