@scania/tegel 1.32.0-debugging-link-potential-breaking-change-beta.0 → 1.32.0-fix-modal-input-fields-background-color-beta.0

package/dist/collection/components/radio-button/radio-button.js

@@ -20,14 +20,8 @@ export class TdsRadioButton {
         this.tdsAriaLabel = undefined;
         this.tdsTabIndex = undefined;
     }
-    /** Method to programmatically focus the radio button element */
-    async focusElement() {
-        if (this.inputElement) {
-            this.inputElement.focus();
-        }
-    }
     render() {
-        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
+        return (h("div", { key: 'ca977bcef62ce81be1c0387bc1db7a5bb669f164', class: "tds-radio-button" }, h("input", { key: '939027d597b396cfdab2b47a11465b6e46040036', "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: 'f40293c0fcce1dac843087b71b5e34bdd8e911fa', htmlFor: this.radioId }, h("slot", { key: '4190d41d4e90cd4125c4f997f46cefa44682dae7', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -203,26 +197,5 @@ export class TdsRadioButton {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "focusElement": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Method to programmatically focus the radio button element",
-                    "tags": []
-                }
-            }
-        };
-    }
     static get elementRef() { return "host"; }
 }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getAdjustedModeVariant } from "../../utils/modeVariantOverride";
 /**
  * @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.
@@ -8,6 +9,7 @@ import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsTextField {
     constructor() {
         this.uuid = generateUniqueId();
+        this.insideModal = false;
         this.type = 'text';
         this.labelPosition = 'no-label';
         this.label = '';
@@ -28,6 +30,7 @@ export class TdsTextField {
         this.autofocus = false;
         this.tdsAriaLabel = undefined;
         this.focusInput = false;
+        this.swapModeVariant = false;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
@@ -72,11 +75,36 @@ export class TdsTextField {
             console.warn('Tegel Text Field component: prop tdsAriaLabel is missing');
         }
     }
+    checkIfDarkmode() {
+        const darkmode = document.body.classList.contains('tds-mode-dark');
+        this.swapModeVariant = this.insideModal && darkmode;
+    }
+    observeClassChanges() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.checkIfDarkmode();
+        });
+        this.mutationObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    componentDidLoad() {
+        this.insideModal = !!this.host.closest('tds-modal');
+        if (this.insideModal) {
+            this.observeClassChanges();
+            this.checkIfDarkmode();
+        }
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
     render() {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', class: {
+        return (h("div", { key: '3f334104a79f318559f312c5b0e6e29fc42f75ee', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -84,22 +112,17 @@ export class TdsTextField {
                 'text-field-container-label-inside': this.labelPosition === 'inside' && this.size !== 'sm',
                 'form-text-field-disabled': this.disabled,
                 'form-text-field-readonly': this.disabled ? false : this.readOnly,
-                'tds-mode-variant-primary': this.readOnly
-                    ? this.modeVariant === 'secondary'
-                    : this.modeVariant === 'primary',
-                'tds-mode-variant-secondary': this.readOnly
-                    ? this.modeVariant === 'primary'
-                    : this.modeVariant === 'secondary',
+                [getAdjustedModeVariant(this.modeVariant, this.swapModeVariant, this.readOnly)]: true,
                 'form-text-field-md': this.size === 'md',
                 '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: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'bceaded603552ec0845941f5ecdb790c1d1b3886', class: "text-field-label-outside" }, h("label", { key: 'a01149b1e584d0324298efb4fc2f0cfbdfe2d6d2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '7b3969dfdcc5bba6bd19e73fffb7fd7b06d2eaa1', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '62664099f52902ca01fe6f689e470d2b599fd3ca', 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: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', ref: (inputEl) => {
+            } }, h("slot", { key: '0c6f97b881053c1d4fa35c0f9497251cbd36909e', name: "prefix" }))), h("div", { key: 'e730d994ae00054954201672da3df3a2dea65cd8', class: "text-field-input-container" }, h("input", { key: '7f368363f18aa29c56e03cf428fadbe655b2888c', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -114,13 +137,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', class: {
+            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '41c427a5a0bf58c2a83f58a3b5a045370e5db4b3', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'a2f5f1a3eb8c1392ba4349d76e065dcbb4f8dde9', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'd6b13341d8f9ee83e5b6f748461e1fad0654dbbd', 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: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-icon", { key: '56b8b76a5771889f9f36ab683dcba6906bff42a6', name: "edit_inactive", size: "20px" }))), h("span", { key: '9e8fa95602a1ce5630f30947b59decc700c06c8b', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '9e8547e06a25e7da98ff977ac6be1b79d27e4151', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'daeea67a48a15d27785f31dfcb69fb75e31ab85b', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '974bad3f97b23d69a20130bf66b6c72ef47f68bc', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '687cad3cb0451a262f836089851e9a2e08f2c74e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '431709fb793dde8845b20698e722a7c140bb32b6', class: {
+            } }, h("slot", { key: '5de22b8fbd8d849f53ba3eeecb213e060f6fa0d7', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'f2b7bca0b50083547851f87925c81d326031639f', class: "text-field-icon__readonly" }, h("tds-icon", { key: '3b4eec23c95e66bbd0f4aa77daa1ea0122a5e2a9', name: "edit_inactive", size: "20px" }))), h("span", { key: '098d8775f3447537eb1a5d00e845d4222c302827', class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { key: '68caa17dcc66342922171f54e9b21daefbb9fad6', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '78262f7cbf45be4e25bc6ff2e95f69f8964ae308', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '4e2bf263ef6ba3127ae42bce9eada403825c28e9', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '85988daade29b03c7ffca789cfe984d6a9e65ed6', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '839bd557ac51f77defdca3a32666d0d452a9abca', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
@@ -480,7 +503,8 @@ export class TdsTextField {
     }
     static get states() {
         return {
-            "focusInput": {}
+            "focusInput": {},
+            "swapModeVariant": {}
         };
     }
     static get events() {

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

@@ -1,8 +1,10 @@
 import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getAdjustedModeVariant } from "../../utils/modeVariantOverride";
 export class TdsTextarea {
     constructor() {
         this.uuid = generateUniqueId();
+        this.insideModal = false;
         this.label = '';
         this.name = '';
         this.helper = undefined;
@@ -21,6 +23,7 @@ export class TdsTextarea {
         this.noMinWidth = false;
         this.tdsAriaLabel = undefined;
         this.focusInput = undefined;
+        this.swapModeVariant = false;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
@@ -42,40 +45,58 @@ export class TdsTextarea {
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
-    /** Method to programmatically focus the textarea element */
-    async focusElement() {
-        if (this.textEl) {
-            this.textEl.focus();
-            this.focusInput = true;
+    // setModeVariant(modeVariant: 'primary' | 'secondary'): string | null {
+    //   if (this.readOnly && modeVariant === 'primary') {
+    //     return 'secondary';
+    //   }
+    //   if (this.readOnly && modeVariant === 'secondary') {
+    //     return 'primary';
+    //   }
+    //   return modeVariant;
+    // }
+    connectedCallback() {
+        if (!this.tdsAriaLabel && !this.label) {
+            console.warn('Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility');
         }
     }
-    setModeVariant(modeVariant) {
-        if (this.readOnly && modeVariant === 'primary') {
-            return 'secondary';
-        }
-        if (this.readOnly && modeVariant === 'secondary') {
-            return 'primary';
+    checkIfDarkmode() {
+        const darkmode = document.body.classList.contains('tds-mode-dark');
+        this.swapModeVariant = this.insideModal && darkmode;
+    }
+    observeClassChanges() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.checkIfDarkmode();
+        });
+        this.mutationObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    componentDidLoad() {
+        this.insideModal = !!this.host.closest('tds-modal');
+        if (this.insideModal) {
+            this.observeClassChanges();
+            this.checkIfDarkmode();
         }
-        return modeVariant;
     }
-    connectedCallback() {
-        if (!this.tdsAriaLabel && !this.label) {
-            console.warn('Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility');
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
         }
     }
     render() {
         var _a;
-        return (h("div", { key: '06fd8ce87614410858a7d9253fac73a6f1cf20ec', class: {
+        return (h("div", { key: '1f0f9e42fb01b4ad16e4017fd5045510317c2633', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
                 'textarea-disabled': this.disabled,
                 'textarea-readonly': !this.disabled && this.readOnly,
-                [`tds-mode-variant-${this.setModeVariant(this.modeVariant)}`]: true,
+                [getAdjustedModeVariant(this.modeVariant, this.swapModeVariant, this.readOnly)]: true,
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '1a02a333e4164b39fd223c68cc3d27d7c53487fb', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '6d45e8c8427770accc82c7ad9e10fbed016437a4', class: "textarea-wrapper" }, h("textarea", { key: '614c30a5b5077060b1568744cf0800580e746819', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: '5a86f34c46a1388c00017fbf3306dedb9624ab15', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'a1731e87bda333a2fb517cba22b88537f9316eb7', class: "textarea-wrapper" }, h("textarea", { key: '538b4621bd98b804c8a9d7d686d86c88fb2a2769', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && 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) {
@@ -85,7 +106,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'e0574ae32d1ce9c69156dc2aa52d8d1881b6ff9b', class: "textarea-resizer-icon" }, h("svg", { key: '23e79729cc099b7e4f07192c05aa4a304b91788a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '54891720aa51af768f467be5bd8a72fc7adc8d47', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '72e3586f1be99460ced66d640392b4596e5b8c2f', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '9f84391a75b5ae428c71d3b713a9d281c4475a09', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '55e195bb50d8b707ec3a403c8c62cad74d738919', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'ff2043a19ebb129178ecfd36126b0d23eacde4d1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '84b0991ef5ddab7f960ba75db22c65762b0b5d20', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '963b3a3bdafeabec6ad2bd3663c07ed0d4a5b3fd', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8496a0ae44721cdcd9443e09ff6a709b6d3c704f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '11a0f48f5e8da2ad1a83145133cb42c058446926', class: "textarea-resizer-icon" }, h("svg", { key: '5e1b7c2acc0c0c8bc62d4d4e7605eeefea382075', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8b210ff6be5cb8e7a6eef276bc62b210e3d98aca', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '1b462603139c3ff096b18e61edb7629c804341a0', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '3c01c797be9021a5907c4a01906ab614f2943c23', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '8ceffefeba1632397e8f8e4c3b33eaabafb942fe', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'd21fac62b5709d6b4a9e79c7ba391a17aa9e3e1b', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'c9f959778bb295f786cb8578610150743b77626d', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'da11bfe7213be04e0c5699a0385be2c63a08a8b2', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '357b65219a5dfd4c27931d025e183b8bde012345', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -406,7 +427,8 @@ export class TdsTextarea {
     }
     static get states() {
         return {
-            "focusInput": {}
+            "focusInput": {},
+            "swapModeVariant": {}
         };
     }
     static get events() {
@@ -487,25 +509,5 @@ export class TdsTextarea {
                 }
             }];
     }
-    static get methods() {
-        return {
-            "focusElement": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Method to programmatically focus the textarea element",
-                    "tags": []
-                }
-            }
-        };
-    }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/toggle/toggle.js

@@ -29,12 +29,6 @@ export class TdsToggle {
             checked: this.checked,
         };
     }
-    /** Method to programmatically focus the toggle element */
-    async focusElement() {
-        if (this.inputElement) {
-            this.inputElement.focus();
-        }
-    }
     componentWillLoad() {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
@@ -44,10 +38,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '212a541d06f0cc534855ac872cfb386dc1b2d4ff', class: "tds-toggle" }, this.headline && (h("div", { key: '076c51461d4898d2bfa3c86fadd94ac2ad63c7a8', class: {
+        return (h("div", { key: '01d3faf866451cf2e09694d614b1cca9defa1f69', class: "tds-toggle" }, this.headline && (h("div", { key: '2809bf2c3653c20ca6b93280b3391255b2285d8c', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'e0e849d7b05b77612fc949894cac8befa5b89370', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '4d1dcc70f896695657ca7ca68fd832ee4d13417a', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '800ea4ee2760efee8cdfe1ac3aee4b3a6f95f199', name: "label" })))));
+            } }, this.headline)), h("input", { key: '52ab62b4d4c506ca74533ffafc68247accae612b', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '73f43d7134ff9a9ecded6b8b153b1590014e2a80', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'efe7c2a3f76f9990a00b1156d66b78c0e26e6411', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -242,23 +236,6 @@ export class TdsToggle {
                     "text": "Toggles the Toggle.",
                     "tags": []
                 }
-            },
-            "focusElement": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Method to programmatically focus the toggle element",
-                    "tags": []
-                }
             }
         };
     }

package/dist/collection/utils/modeVariantOverride.js

@@ -0,0 +1,30 @@
+/** Returns true if the component should be styled as primary mode variant */
+const styleAsPrimaryModeVariant = (modeVariant, swapModeVariant, readOnly = false) => {
+    if (swapModeVariant) {
+        return readOnly ? modeVariant === 'primary' : modeVariant === 'secondary';
+    }
+    return readOnly ? modeVariant === 'secondary' : modeVariant === 'primary';
+};
+/** Returns true if the component should be styled as secondary mode variant */
+const styleAsSecondaryModeVariant = (modeVariant, swapModeVariant, readOnly = false) => {
+    if (swapModeVariant) {
+        return readOnly ? modeVariant === 'secondary' : modeVariant === 'primary';
+    }
+    return readOnly ? modeVariant === 'primary' : modeVariant === 'secondary';
+};
+/** Returns the potentially adjusted class for the mode variant */
+export const getAdjustedModeVariant = (modeVariant, swapModeVariant, readOnly = false) => {
+    if (!modeVariant) {
+        return '';
+    }
+    if (!swapModeVariant) {
+        return `tds-mode-variant-${modeVariant}`;
+    }
+    if (styleAsPrimaryModeVariant(modeVariant, swapModeVariant, readOnly)) {
+        return 'tds-mode-variant-primary';
+    }
+    if (styleAsSecondaryModeVariant(modeVariant, swapModeVariant, readOnly)) {
+        return 'tds-mode-variant-secondary';
+    }
+    return `tds-mode-variant-${modeVariant}`;
+};

package/dist/components/{p-728ada7e.js → p-1ef7423a.js}

@@ -40,12 +40,6 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
             checked: this.checked,
         };
     }
-    /** Method to programmatically focus the checkbox element */
-    async focusElement() {
-        if (this.inputElement) {
-            this.inputElement.focus();
-        }
-    }
     handleIndeterminateState() {
         this.inputElement.indeterminate = this.indeterminate;
     }
@@ -70,11 +64,11 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         }
     }
     render() {
-        return (h("div", { key: '97afce57b6f6ce0d66dabd227f7271b5dc8fe707', class: "tds-checkbox" }, h("input", { key: '18b283a21ff649b9a4935a7b3e6f489cde16073d',
+        return (h("div", { key: '8f5104073f1be9323bc0125feab7515759ac7679', class: "tds-checkbox" }, h("input", { key: '8536a1eaefb5b7bdf258a4ddca67660becc797a5',
             // eslint-disable-next-line no-return-assign
             ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, 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: '51d15b0eea1fd0f7517ca8d0f669bc02ac59781c', htmlFor: this.checkboxId }, h("slot", { key: 'bb10126c57b177f825ef8cd75da505465b2d6ae3', name: "label" }))));
+            } }), h("label", { key: 'e6e065ce109371607c5412ab38ece22d3ac1d626', htmlFor: this.checkboxId }, h("slot", { key: '4698f97ac58203e3f478321da53cc364157ded78', name: "label" }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -91,8 +85,7 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         "value": [1],
         "tdsAriaLabel": [1, "tds-aria-label"],
         "tdsAriaDescribedby": [1, "tds-aria-describedby"],
-        "toggleCheckbox": [64],
-        "focusElement": [64]
+        "toggleCheckbox": [64]
     }, [[4, "reset", "handleFormReset"]], {
         "indeterminate": ["handleIndeterminateState"]
     }]);

package/dist/components/p-76cfa91a.js

@@ -0,0 +1,32 @@
+/** Returns true if the component should be styled as primary mode variant */
+const styleAsPrimaryModeVariant = (modeVariant, swapModeVariant, readOnly = false) => {
+    if (swapModeVariant) {
+        return readOnly ? modeVariant === 'primary' : modeVariant === 'secondary';
+    }
+    return readOnly ? modeVariant === 'secondary' : modeVariant === 'primary';
+};
+/** Returns true if the component should be styled as secondary mode variant */
+const styleAsSecondaryModeVariant = (modeVariant, swapModeVariant, readOnly = false) => {
+    if (swapModeVariant) {
+        return readOnly ? modeVariant === 'secondary' : modeVariant === 'primary';
+    }
+    return readOnly ? modeVariant === 'primary' : modeVariant === 'secondary';
+};
+/** Returns the potentially adjusted class for the mode variant */
+const getAdjustedModeVariant = (modeVariant, swapModeVariant, readOnly = false) => {
+    if (!modeVariant) {
+        return '';
+    }
+    if (!swapModeVariant) {
+        return `tds-mode-variant-${modeVariant}`;
+    }
+    if (styleAsPrimaryModeVariant(modeVariant, swapModeVariant, readOnly)) {
+        return 'tds-mode-variant-primary';
+    }
+    if (styleAsSecondaryModeVariant(modeVariant, swapModeVariant, readOnly)) {
+        return 'tds-mode-variant-secondary';
+    }
+    return `tds-mode-variant-${modeVariant}`;
+};
+
+export { getAdjustedModeVariant as g };

package/dist/components/{p-7ad1bc2c.js → p-7ee8b262.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { c as convertToString } from './p-a1181b1f.js';
-import { d as defineCustomElement$2 } from './p-728ada7e.js';
+import { d as defineCustomElement$2 } from './p-1ef7423a.js';
 import { d as defineCustomElement$1 } from './p-c715ab56.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";

package/dist/components/{p-0f58e26f.js → p-adbf32b9.js}

@@ -136,15 +136,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
-                    if (this.filter) {
-                        this.focusInputElement();
-                    }
-                    else {
-                        const button = this.host.shadowRoot.querySelector('button');
-                        if (button) {
-                            button.focus();
-                        }
-                    }
+                    this.focusInputElement();
                 }
             }
         };
@@ -190,13 +182,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.handleFocus = (event) => {
             this.open = true;
             this.filterFocus = true;
-            if (this.multiselect && this.inputElement) {
+            if (this.multiselect) {
                 this.inputElement.value = '';
             }
             this.tdsFocus.emit(event);
-            if (this.filter) {
-                this.handleFilter({ target: { value: '' } });
-            }
+            this.handleFilter({ target: { value: '' } });
         };
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
@@ -351,18 +341,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
-        if (this.filter) {
-            // For filter mode, focus the input element
-            this.focusInputElement();
-        }
-        else {
-            // For non-filter mode, focus the button element
-            const button = this.host.shadowRoot.querySelector('button');
-            if (button) {
-                button.focus();
-            }
-        }
-        // Always trigger the focus event to open the dropdown
+        this.focusInputElement();
         this.handleFocus({});
     }
     /** Method for setting the value of the Dropdown.
@@ -515,9 +494,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         // Generate unique IDs for associating labels and helpers with the input/button
         const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
         const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
-        return (h(Host, { key: 'aed0a485fc4634cdba2599fa9792fb6289a7459c', class: {
+        return (h(Host, { key: '5c5314d4994b1ca9c09729df6c9b30d9fb6b33d3', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '39d11ac06547b133540f037a0c09ddc40b972cb5', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8ab624d380289699887b660d30512b2e892f71c0', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '25133dd0a665315edfad6f93a846db0ac82cc16f', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d2a17d8f7bcf7f8aaa8d2ea5397044396b691e1', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -567,7 +546,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '989c425c5a608444533e33ad83313aa56569c225', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-hidden": this.open ? 'false' : 'true', inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '4e4a3036983d9f2c53119884f32482a14b16bbff', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-hidden": this.open ? 'false' : 'true', inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -578,11 +557,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '6e54bbb0eacf27cfdbf3b393f2c9e690adb394e8', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4bdaf935cd213f63e7a8665b5d6f69ee0589d7b9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '112c76fa88eef7798b9b0d435ae03e62880a9ff8', id: helperId, class: {
+            } }, h("slot", { key: 'ad34d1c72b7490505aee226e3e1478e68084309d', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '619071043ec5be2a17b24c9706aa20490f4c4339', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '4165cfc63988816e39a86a304acacd627aa24567', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '055e681faca85a461b07619c42fa0eb48a6ec028', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '90eea26d0166a4acaa066211fa996e2b74ccd575', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {