@scania/tegel 1.32.2-multibrand-beta.5 → 1.33.0-beta.6

package/dist/collection/components/toggle/toggle.css

@@ -1,31 +1,14 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
-:host {
-  --toggle-switch: var(--color-brand-neutral-white);
-  --toggle-text: var(--color-foreground-text-strong);
-  --toggle-disabled: var(--color-foreground-icon-disabled);
-  --toggle-background-on: var(--color-system-success-default);
-  --toggle-background-off: var(--color-foreground-icon-subtle);
-  --toggle-border-focus: var(--color-foreground-border-accent-focus);
-}
-
 .tds-toggle .disabled {
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .tds-toggle .toggle-headline {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  color: var(--toggle-text);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-toggle-headline);
   margin-bottom: 12px;
 }
 .tds-toggle .toggle-headline.disabled {
-  user-select: none;
-  color: var(--toggle-disabled);
+  color: var(--tds-toggle-headline-disabled);
 }
 .tds-toggle input[type=checkbox] {
   appearance: initial;
@@ -49,14 +32,14 @@
   width: 44px;
   height: 24px;
   border-radius: 16px;
-  background-color: var(--toggle-background-off);
+  background-color: var(--tds-toggle-off-slider);
   left: 0;
   border: 1px solid transparent;
 }
 .tds-toggle input[type=checkbox]::after {
   width: 16px;
   height: 16px;
-  background-color: var(--toggle-switch);
+  background-color: var(--tds-toggle-switch);
   border-radius: 50%;
   left: 4px;
   top: 4px;
@@ -68,36 +51,43 @@
   outline-offset: 0;
 }
 .tds-toggle input[type=checkbox]:focus::before {
-  background-color: var(--toggle-disabled);
-  border: 4px solid var(--toggle-border-focus);
+  background-color: var(--tds-toggle-off-slider-focus);
+  border: 1px solid var(--tds-toggle-off-border-focus);
 }
 .tds-toggle input[type=checkbox]:hover::before {
   background-color: var(--tds-toggle-off-slider-hover);
   border: 1px solid var(--tds-toggle-off-border-focus);
 }
 .tds-toggle input[type=checkbox]:checked::before {
-  background-color: var(--toggle-background-on);
+  background-color: var(--tds-toggle-on-slider);
+}
+.tds-toggle input[type=checkbox]:checked:focus::before {
+  background-color: var(--tds-toggle-on-slider-focus);
+  border: 1px solid var(--tds-toggle-off-border-focus);
 }
-.tds-toggle input[type=checkbox]:checked:focus::before, .tds-toggle input[type=checkbox]:checked:hover::before {
-  border: 4px solid var(--toggle-border-focus);
+.tds-toggle input[type=checkbox]:checked:hover::before {
+  background-color: var(--tds-toggle-on-slider-hover);
+  border: 1px solid var(--tds-toggle-off-border-focus);
 }
 .tds-toggle input[type=checkbox]:checked::after {
   left: 24px;
 }
 .tds-toggle input[type=checkbox]:disabled {
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .tds-toggle input[type=checkbox]:disabled::before {
-  background-color: var(--toggle-disabled);
+  background-color: var(--tds-toggle-slider-disabled);
+  border: 1px solid var(--tds-toggle-slider-disabled);
 }
 .tds-toggle input[type=checkbox]:disabled::after {
-  background-color: var(--toggle-switch);
+  background-color: var(--tds-toggle-switch-disabled);
 }
 .tds-toggle input[type=checkbox]:disabled:checked::before {
-  background-color: var(--toggle-disabled);
+  background-color: var(--tds-toggle-on-slider-disabled);
+  border: 1px solid var(--tds-toggle-on-slider-disabled);
 }
 .tds-toggle input[type=checkbox]:disabled:checked::after {
-  background-color: var(--toggle-switch);
+  background-color: var(--tds-toggle-switch-disabled);
 }
 .tds-toggle input[type=checkbox].sm {
   width: 28px;
@@ -112,32 +102,27 @@
   height: 8px;
 }
 .tds-toggle input[type=checkbox].sm:checked::before {
-  background-color: var(--toggle-background-on);
+  background-color: var(--tds-toggle-on-slider);
 }
 .tds-toggle input[type=checkbox].sm:checked::after {
   left: 16px;
 }
 .tds-toggle input[type=checkbox].sm:disabled::before {
-  background-color: var(--toggle-disabled);
+  background-color: var(--tds-toggle-slider-disabled);
+  border: 1px solid var(--tds-toggle-slider-disabled);
 }
 .tds-toggle input[type=checkbox].sm:disabled::after {
-  background-color: var(--toggle-switch);
+  background-color: var(--tds-toggle-switch-disabled);
 }
 .tds-toggle label {
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
-  cursor: pointer;
-  user-select: none;
   display: inline-block;
   vertical-align: middle;
-  color: var(--toggle-text);
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
+  color: var(--tds-toggle-label-color);
   padding-left: 8px;
+  cursor: pointer;
 }
 .tds-toggle label.disabled {
-  pointer-events: none;
-  color: var(--toggle-disabled);
+  color: var(--tds-toggle-label-color-disabled);
 }

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

@@ -44,10 +44,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '8d59dfac94fd97b568857af3f2c9b6976c692e6c', class: "tds-toggle" }, this.headline && (h("div", { key: 'af9b3285dffdb27cd1e23bd009ac39fb1c1e5373', class: {
+        return (h("div", { key: '212a541d06f0cc534855ac872cfb386dc1b2d4ff', class: "tds-toggle" }, this.headline && (h("div", { key: '076c51461d4898d2bfa3c86fadd94ac2ad63c7a8', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'f01b0cd051dd5aaed33ef2eb6ca4fd352d60ea14', 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: '239363d16e713e28d2309f5db8874a6db20ffede', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '6e34820e46f8b9197ad46c1e88a16b7b64821378', name: "label" })))));
+            } }, 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" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -58,7 +58,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '69ced518e10ea5d65da8266257d7f7bba5db3f63', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '9511b6fb5dcd5a270de5b6f9b50b40271b4f5030' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -71,7 +71,7 @@ export class TdsTooltip {
             // @ts-ignore
             onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '8fb6467b2d1fa2ce6a70a171966ff245f8205b55' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/{p-858c1df0.js → p-1cd6b2c6.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { c as convertToString, a as convertArrayToStrings } from './p-a1181b1f.js';
 import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$1 } from './p-8ffea123.js';
+import { d as defineCustomElement$1 } from './p-c715ab56.js';
 
 /**
  * Find the next focusable element index in a list of focusable elements.
@@ -61,9 +61,14 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
     input.value = value || '';
 };
 
-const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;box-shadow:var(--dropdown-border);background-color:var(--dropdown-background);border-radius:var(--dropdown-border-radius);transition:box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host button:hover{box-shadow:var(--dropdown-border-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--dropdown-placeholder);line-height:1.3}:host button.value{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);color:var(--dropdown-text);line-height:1.3}:host button:focus{box-shadow:var(--dropdown-border-focus)}:host button:active{box-shadow:var(--dropdown-border-active)}:host button.error{box-shadow:var(--dropdown-border-error)}:host button.error:hover{box-shadow:var(--dropdown-border-error-hover)}:host button.error:focus{box-shadow:var(--dropdown-border-error-focus)}:host button:disabled{box-shadow:var(--dropdown-border-disabled);color:var(--dropdown-disabled)}:host button .menu-icon{margin-right:0}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--dropdown-background);box-shadow:var(--dropdown-border);padding-left:16px;border-radius:var(--dropdown-border-radius);transition:box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .filter:hover{box-shadow:var(--dropdown-border-hover)}:host .filter.disabled{color:var(--dropdown-disabled);box-shadow:var(--dropdown-border-disabled)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--dropdown-text)}:host .filter .label-inside-as-placeholder{position:absolute;font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);line-height:1.3;color:var(--dropdown-placeholder)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font-family:var(--detail-07-font-family);font-size:var(--detail-07-font-size);line-height:var(--detail-07-line-height);font-weight:var(--detail-07-font-weight);letter-spacing:var(--detail-07-letter-spacing);text-transform:var(--detail-07-text-transform);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{box-shadow:var(--dropdown-border-focus)}:host .filter.error{box-shadow:var(--dropdown-border-error)}:host .filter.error.focus{box-shadow:var(--dropdown-border-error-focus)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--dropdown-placeholder)}:host .filter input:disabled::placeholder{color:var(--dropdown-disabled)}:host .filter tds-icon{cursor:pointer}:host .filter tds-icon.disabled{color:var(--dropdown-disabled)}:host .filter .menu-icon{margin-right:16px}:host .filter .menu-icon.disabled{color:var(--dropdown-disabled)}:host .filter .clear-icon{margin:0 8px;padding-right:8px;border-right:1px solid var(--dropdown-icon);color:var(--dropdown-clear-icon)}:host .filter .clear-icon:hover{color:var(--dropdown-icon)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host .filter .clear-icon.disabled{color:var(--dropdown-disabled)}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .label-outside{font-family:var(--detail-05-font-family);font-size:var(--detail-05-font-size);line-height:var(--detail-05-line-height);font-weight:var(--detail-05-font-weight);letter-spacing:var(--detail-05-letter-spacing);text-transform:var(--detail-05-text-transform);color:var(--dropdown-text);margin-bottom:8px}:host .label-outside.disabled{color:var(--dropdown-disabled)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--dropdown-disabled)}:host .dropdown-select .label-inside{position:absolute;font-family:var(--detail-07-font-family);font-size:var(--detail-07-font-size);line-height:var(--detail-07-line-height);font-weight:var(--detail-07-font-weight);letter-spacing:var(--detail-07-letter-spacing);text-transform:var(--detail-07-text-transform);color:var(--dropdown-text)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--dropdown-placeholder)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font-family:var(--detail-07-font-family);font-size:var(--detail-07-font-size);line-height:var(--detail-07-line-height);font-weight:var(--detail-07-font-weight);letter-spacing:var(--detail-07-letter-spacing);text-transform:var(--detail-07-text-transform);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--dropdown-helper-text);font-family:var(--detail-05-font-family);font-size:var(--detail-05-font-size);line-height:var(--detail-05-line-height);font-weight:var(--detail-05-font-weight);letter-spacing:var(--detail-05-letter-spacing);text-transform:var(--detail-05-text-transform);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--dropdown-error)}:host .helper.disabled{color:var(--dropdown-disabled)}:host .dropdown-list{z-index:100;position:absolute;margin-top:2px;width:100%;transform-origin:top;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:var(--dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--color-foreground-icon-discrete);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--color-background-layer-01)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--color-foreground-icon-discrete);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:var(--dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);display:flex;align-items:center;padding:0 16px;background-color:var(--dropdown-background)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--dropdown-icon)}:host .menu-icon.disabled{color:var(--dropdown-disabled)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
+const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
 const TdsDropdownStyle0 = dropdownCss;
 
+function hasValueChanged(newValue, currentValue) {
+    if (newValue.length !== currentValue.length)
+        return true;
+    return newValue.some((val) => !currentValue.includes(val));
+}
 const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H {
     constructor() {
         super();
@@ -236,7 +241,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         // Normalize to array
         const normalizedValue = this.normalizeValue(newValue);
         // Only update if actually changed
-        if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
+        if (hasValueChanged(normalizedValue, this.selectedOptions)) {
             this.updateDropdownStateFromUser(normalizedValue);
         }
     }
@@ -261,11 +266,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             .split(',')
             .filter((v) => v !== '');
     }
-    hasValueChanged(newValue, currentValue) {
-        if (newValue.length !== currentValue.length)
-            return true;
-        return newValue.some((val) => !currentValue.includes(val));
-    }
     updateDropdownStateInternal(values) {
         this.updateDropdownState(values, false);
     }
@@ -328,7 +328,23 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             value: value !== null && value !== void 0 ? value : null,
         });
     }
-    async setValue(value) {
+    /** Method for setting the selected value of the Dropdown.
+     *
+     * Single selection example:
+     *
+     * <code>
+     *  dropdown.setValue('option-1', 'Option 1');
+     * </code>
+     *
+     * Multiselect example:
+     *
+     * <code>
+     *  dropdown.setValue(['option-1', 'option-2']);
+     * </code>
+     */
+    // @ts-expect-error for label: the label is optional here ONLY to not break the API. Should be removed for 2.0.
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    async setValue(value, label) {
         let normalizedValue;
         if (Array.isArray(value)) {
             normalizedValue = convertArrayToStrings(value);
@@ -365,23 +381,17 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         // Always trigger the focus event to open the dropdown
         this.handleFocus({});
     }
-    /** Method for setting the value of the Dropdown.
-     *
-     * Single selection example:
-     *
-     * <code>
-     *  dropdown.setValue('option-1', 'Option 1');
-     * </code>
-     *
-     * Multiselect example:
-     *
-     * <code>
-     *  dropdown.setValue(['option-1', 'option-2']);
-     * </code>
-     */
+    /** Method for closing the Dropdown. */
     async close() {
         this.open = false;
     }
+    /** Method to force update the dropdown display value.
+     * Use this method when you programmatically change the text content of dropdown options
+     * to ensure the selected value display updates immediately.
+     */
+    async updateDisplay() {
+        this.updateDisplayValue();
+    }
     onAnyClick(event) {
         if (this.open) {
             // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -515,9 +525,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: '676f9d61c5fd8488cedbc949757e992be13e49eb', 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: 'ac4f3c9ca2719acc72f06ae977bf032d05913c6d', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c9d4142f63e315c73daef5038f266a32b05559a1', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -551,12 +561,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.open && this.inputElement.value !== ''),
-                'disabled': this.disabled
             }, name: "cross", size: "16px" }), h("tds-icon", { tdsAriaHidden: true, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -568,7 +577,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'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '38fa965b0721f4f30217e20b17488a2133edf3f6', 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: '6de931198040eec79815f83e2617d2646507b6a1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -579,11 +588,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: 'f325bf93f1888e95c5f2bd8b90d7639d1c8786e4', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4a5949d7fd632308ac7b2a0ae3e9105feeab1d1e', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '340a871c5c43192dd4e5d130adf10116d2406825', id: helperId, class: {
+            } }, h("slot", { key: '61ab9737181371073b25b95c34dad3311c2995c0', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'aca39f881a57a6a23de03da78b5062e5dff55af7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1e4221e58bc16608bfb0f780b7bc8040935eab37', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '10b4059f6f5149c0bb10b4c209c69859bdc28296', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'ec946e77add75e7eaf194e2b38e5dd1c548ab32f', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -622,6 +631,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         "removeValue": [64],
         "focusElement": [64],
         "close": [64],
+        "updateDisplay": [64],
         "appendValue": [64]
     }, [[9, "mousedown", "onAnyClick"], [0, "keydown", "onKeyDown"]], {
         "value": ["handleValueChange"],

package/dist/components/{p-865b81b9.js → p-4b0c6ab5.js}

@@ -1,9 +1,9 @@
 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-ab1f729e.js';
-import { d as defineCustomElement$1 } from './p-8ffea123.js';
+import { d as defineCustomElement$2 } from './p-58b92113.js';
+import { d as defineCustomElement$1 } from './p-c715ab56.js';
 
-const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--dropdown-text);border-bottom:1px solid var(--dropdown-option-border);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--dropdown-option-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px}: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(--dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
+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-dropdown-option-focus);box-shadow:inset 0 0 0 3px var(--tds-white);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{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:pointer}:host .dropdown-option:hover.disabled{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:not-allowed}:host([hidden]){display:none}";
 const TdsDropdownOptionStyle0 = dropdownOptionCss;
 
 const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOption extends H {
@@ -15,7 +15,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.parentElement = null;
-        // @ts-ignore
+        // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
         this.componentWillRender = () => {
@@ -74,6 +74,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.value = undefined;
         this.internalValue = undefined;
         this.disabled = false;
+        this.tdsAriaLabel = undefined;
         this.selected = false;
         this.multiselect = false;
         this.size = 'lg';
@@ -88,8 +89,13 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
     componentWillLoad() {
         this.internalValue = convertToString(this.value);
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel && !this.multiselect) {
+            console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h(Host, { key: '0964b9a046c2894b96480c133538337a56d048a2' }, h("div", { key: '1f28fde6080ad6c489c1ed4a7c449bb45ab85b99', class: `dropdown-option 
+        return (h(Host, { key: 'dd7f679d0a2c4970af173966e43109192eddbf66' }, h("div", { key: '97c7da4773c735874a9c338adc88cc2500a0c800', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -99,9 +105,9 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
-            }, disabled: this.disabled, checked: this.selected, class: {
+            }, disabled: this.disabled, checked: this.selected, tdsAriaLabel: this.tdsAriaLabel, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, "aria-label": this.tdsAriaLabel, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }
@@ -114,6 +120,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
 }, [17, "tds-dropdown-option", {
         "value": [8],
         "disabled": [4],
+        "tdsAriaLabel": [1, "tds-aria-label"],
         "internalValue": [32],
         "selected": [32],
         "multiselect": [32],

package/dist/components/p-58b92113.js

@@ -0,0 +1,114 @@
+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:22px;height:22px;left:1px;top:1px;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-checkbox-disabled);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 = /*@__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;
+        this.tdsAriaLabel = undefined;
+        this.tdsAriaDescribedby = undefined;
+    }
+    /** Toggles the checked value of the component. */
+    async toggleCheckbox() {
+        this.checked = !this.checked;
+        this.indeterminate = false;
+        return {
+            checkboxId: this.checkboxId,
+            checked: this.checked,
+        };
+    }
+    /** Method to programmatically focus the checkbox element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
+    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);
+    }
+    /** Listens for a reset event inside a form */
+    handleFormReset(event) {
+        if (this.host.closest('form') === event.target) {
+            this.checked = false;
+            this.indeterminate = false;
+        }
+    }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
+        }
+    }
+    render() {
+        return (h("div", { key: '97afce57b6f6ce0d66dabd227f7271b5dc8fe707', class: "tds-checkbox" }, h("input", { key: '18b283a21ff649b9a4935a7b3e6f489cde16073d',
+            // 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" }))));
+    }
+    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],
+        "tdsAriaLabel": [1, "tds-aria-label"],
+        "tdsAriaDescribedby": [1, "tds-aria-describedby"],
+        "toggleCheckbox": [64],
+        "focusElement": [64]
+    }, [[4, "reset", "handleFormReset"]], {
+        "indeterminate": ["handleIndeterminateState"]
+    }]);
+function defineCustomElement() {
+    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);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { TdsCheckbox as T, defineCustomElement as d };

package/dist/components/{p-76dc921a.js → p-6adb1ce3.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as dfs } from './p-52bf0fdf.js';
 import { d as defineCustomElement$1 } from './p-9ad61cb5.js';
 
-const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
+const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
 const TdsHeaderItemStyle0 = headerItemCss;
 
 const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem extends H {

package/dist/components/{p-c46ecd24.js → p-71c3dfe9.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 
-const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
+const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
 const TdsHeaderDropdownListItemStyle0 = headerDropdownListItemCss;
 
 const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownListItem extends H {

package/dist/components/{p-c2ae5e79.js → p-877931c5.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 
-const dividerCss = ".divider{box-sizing:border-box}.divider *{box-sizing:border-box}.divider.horizontal{background-color:var(--divider-color);width:100%;height:1px}.divider.vertical{background-color:var(--divider-color);height:100%;width:1px}";
+const dividerCss = ".divider{box-sizing:border-box}.divider *{box-sizing:border-box}.divider.horizontal{background-color:var(--tds-divider-background);width:100%;height:1px}.divider.vertical{background-color:var(--tds-divider-background);height:100%;width:1px}";
 const TdsDividerStyle0 = dividerCss;
 
 const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends H {