@scania/tegel 1.32.0 → 1.32.2-multibrand-beta.0

package/dist/esm/tds-block.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-51d04e39.js';
 
-const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);background-color:var(--tds-block-background);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{background-color:var(--tds-block-background-primary)}.tds-mode-variant-secondary{background-color:var(--tds-block-background-secondary)}.tds-block-even{background-color:var(--tds-block-background-even)}.tds-block-odd{background-color:var(--tds-block-background-odd)}";
+const blockCss = ".tds-block{box-sizing:border-box;font-family:var(--detail-01-font-family);font-size:var(--detail-01-font-size);line-height:var(--detail-01-line-height);font-weight:var(--detail-01-font-weight);letter-spacing:var(--detail-01-letter-spacing);text-transform:var(--detail-01-text-transform);background-color:var(--block-background);color:var(--block-text-color);border-radius:4px;padding:16px}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{background-color:var(--block-background-mode-primary)}.tds-mode-variant-secondary{background-color:var(--block-background-mode-secondary)}.tds-block-even{background-color:var(--block-background-even)}.tds-block-odd{background-color:var(--block-background-odd)}";
 const TdsBlockStyle0 = blockCss;
 
 const TdsBlock = class {
@@ -10,6 +10,7 @@ const TdsBlock = class {
         this.componentTag = 'div';
     }
     getNestingLevel() {
+        // Start at 0 for the outermost block
         let level = 0;
         let parent = this.host.parentElement;
         while (parent) {
@@ -24,7 +25,10 @@ const TdsBlock = class {
         const TagType = this.componentTag;
         const nestingLevel = this.getNestingLevel();
         let evenOddClass = '';
-        if (this.modeVariant === null) {
+        // Check if this block has any tds-block children
+        const hasNestedBlocks = Array.from(this.host.querySelectorAll('tds-block')).length > 0;
+        // Only apply even/odd classes if this block has nested blocks or is itself nested
+        if (this.modeVariant === null && (nestingLevel > 0 || hasNestedBlocks)) {
             if (nestingLevel % 2 === 0) {
                 evenOddClass = 'tds-block-even';
             }
@@ -32,7 +36,7 @@ const TdsBlock = class {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: '34385f3ac01d173e6bb568432418304186d261c7', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '569b04916fb165fb460711ec659ed2dc3e9ebd12' })));
+        return (h(TagType, { key: '3f595ff59e8957fdc7bbb3680545d293e4c9628a', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '13cf4ac7582e31558780e39e0ef1610edf79331b' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-body-cell.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableBodyCellCss = ":host(.tds-table__body-cell){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.tds-table__body-cell) *{box-sizing:border-box}:host(.tds-table__body-cell--hover){background-color:var(--tds-table-body-cell-background-hover)}:host(.tds-table__compact){padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}";
+const tableBodyCellCss = ":host(.tds-table__body-cell){box-sizing:border-box;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:table-cell;box-sizing:border-box;color:var(--table-text);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.tds-table__body-cell) *{box-sizing:border-box}:host(.tds-table__body-cell--hover){background-color:var(--table-body-cell-hover)}:host(.tds-table__compact){padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider){border-right:1px solid var(--table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}";
 const TdsBodyCellStyle0 = tableBodyCellCss;
 
 const relevantTableProps = [

package/dist/esm/tds-breadcrumb.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
 
-const breadcrumbCss = "@charset \"UTF-8\";:host([role=listitem]) div ::slotted(*){color:var(--tds-breadcrumb-color);text-decoration:none}:host([role=listitem]) div:hover ::slotted(*){color:var(--tds-breadcrumb-color-hover);text-decoration:underline}:host([role=listitem]) div ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px;outline-offset:0}:host([role=listitem]) div.current ::slotted(*),:host([role=listitem]) div [aria-current=page] ::slotted(*){pointer-events:none;cursor:default;color:var(--tds-breadcrumb-color-current)}:host([role=listitem]) div.current:hover ::slotted(*),:host([role=listitem]) div [aria-current=page]:hover ::slotted(*){text-decoration:none;cursor:not-allowed}:host([role=listitem]) div::after{content:\"›\";color:var(--tds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host([role=listitem]) .current::after{display:none}";
+const breadcrumbCss = "@charset \"UTF-8\";:host([role=listitem]) div ::slotted(*){color:var(--tds-breadcrumb-color);text-decoration:none}:host([role=listitem]) div:hover ::slotted(*){color:var(--tds-breadcrumb-color-hover);text-decoration:underline}:host([role=listitem]) div ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;outline-offset:0}:host([role=listitem]) div.current ::slotted(*),:host([role=listitem]) div [aria-current=page] ::slotted(*){pointer-events:none;cursor:default;color:var(--tds-breadcrumb-color-current)}:host([role=listitem]) div.current:hover ::slotted(*),:host([role=listitem]) div [aria-current=page]:hover ::slotted(*){text-decoration:none;cursor:not-allowed}:host([role=listitem]) div::after{content:\"›\";color:var(--tds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host([role=listitem]) .current::after{display:none}";
 const TdsBreadcrumbStyle0 = breadcrumbCss;
 
 const TdsBreadcrumb = class {

package/dist/esm/tds-button.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 import { h as hasSlot } from './hasSlot-d52114d0.js';
 
-const buttonCss = ".sc-tds-button:root,.tds-mode-light.sc-tds-button{--tds-btn-primary-background:var(--background-clickable-primary-primary);--tds-btn-primary-background-hover:var(--background-clickable-primary-primary-hover);--tds-btn-primary-background-active:var(--background-clickable-primary-pressed);--tds-btn-primary-background-focus:var(--background-clickable-primary-focus);--tds-btn-primary-background-disabled-primary:var(--background-clickable-primary-disabled);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color:transparent;--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:var(--tds-black-48);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:var(--tds-black-87);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-black-38);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:var(--tds-black-38);--tds-btn-secondary-border-color-disabled:var(--tds-black-38);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-grey-958);--tds-btn-icon-secondary-fill:var(--tds-grey-958);--tds-btn-icon-secondary-color:var(--tds-grey-958);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-active:var(--tds-grey-958);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:var(--tds-black-48);--tds-btn-ghost-outline-color-hover:var(--tds-black-48);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:var(--tds-black-87);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-400);--tds-btn-ghost-outline-color-focus:var(--tds-blue-400);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:var(--tds-black-38);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-958);--tds-btn-icon-ghost-color:var(--tds-grey-958);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:var(--tds-black-38);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-grey-50);--tds-btn-icon-danger-color:var(--tds-grey-50)}.sc-tds-button:root .tds-mode-variant-primary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.sc-tds-button:root .tds-mode-variant-secondary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-white-38);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white-48);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white-87);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:var(--tds-white-38);--tds-btn-secondary-border-color-disabled:var(--tds-white-38);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:var(--tds-white-48);--tds-btn-ghost-outline-color-hover:var(--tds-white-48);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:var(--tds-white-87);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:var(--tds-white-38);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:var(--tds-white-38);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button.sc-tds-button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:focus{outline:none}button.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.fullbleed.sc-tds-button{width:100%;display:flex;justify-content:center}button.animation-fade.sc-tds-button{transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}button.primary.sc-tds-button{background:var(--tds-btn-primary-background);border-color:var(--tds-btn-primary-border-color);color:var(--tds-btn-primary-color);outline-color:var(--tds-btn-primary-outline-color)}button.primary.icon.sc-tds-button{fill:var(--tds-btn-icon-primary-fill);color:var(--tds-btn-icon-primary-fill);fill:var(--tds-btn-icon-primary-color);color:var(--tds-btn-icon-primary-color)}button.primary.sc-tds-button:hover{background:var(--tds-btn-primary-background-hover);border-color:var(--tds-btn-primary-border-color-hover);color:var(--tds-btn-primary-color-hover);outline-color:var(--tds-btn-primary-outline-color-hover)}button.primary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-hover);color:var(--tds-btn-icon-primary-fill-hover);fill:var(--tds-btn-icon-primary-color-hover);color:var(--tds-btn-icon-primary-color-hover)}button.primary.sc-tds-button:focus-visible{background:var(--tds-btn-primary-background-focus);border-color:var(--tds-btn-primary-border-color-focus);color:var(--tds-btn-primary-color-focus);outline-color:var(--tds-btn-primary-outline-color-focus)}button.primary:focus-visible.sc-tds-button-s>[slot=icon],button.primary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-focus);color:var(--tds-btn-icon-primary-fill-focus);fill:var(--tds-btn-icon-primary-color-focus);color:var(--tds-btn-icon-primary-color-focus)}button.primary.sc-tds-button:active,button.primary.active.sc-tds-button{background:var(--tds-btn-primary-background-active);border-color:var(--tds-btn-primary-border-color-active);color:var(--tds-btn-primary-color-active);outline-color:var(--tds-btn-primary-outline-color-active)}button.primary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-active);color:var(--tds-btn-icon-primary-fill-active);fill:var(--tds-btn-icon-primary-color-active);color:var(--tds-btn-icon-primary-color-active)}button.primary.disabled.sc-tds-button,button.primary.sc-tds-button:disabled{background:var(--tds-btn-primary-background-disabled);border-color:var(--tds-btn-primary-border-color-disabled);color:var(--tds-btn-primary-color-disabled);outline-color:var(--tds-btn-primary-outline-color-disabled)}button.secondary.sc-tds-button{background:var(--tds-btn-secondary-background);border-color:var(--tds-btn-secondary-border-color);color:var(--tds-btn-secondary-color);outline-color:var(--tds-btn-secondary-outline-color)}button.secondary.icon.sc-tds-button{fill:var(--tds-btn-icon-secondary-fill);color:var(--tds-btn-icon-secondary-fill);fill:var(--tds-btn-icon-secondary-color);color:var(--tds-btn-icon-secondary-color)}button.secondary.sc-tds-button:hover{background:var(--tds-btn-secondary-background-hover);border-color:var(--tds-btn-secondary-border-color-hover);color:var(--tds-btn-secondary-color-hover);outline-color:var(--tds-btn-secondary-outline-color-hover)}button.secondary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-hover);color:var(--tds-btn-icon-secondary-fill-hover);fill:var(--tds-btn-icon-secondary-color-hover);color:var(--tds-btn-icon-secondary-color-hover)}button.secondary.sc-tds-button:focus-visible{background:var(--tds-btn-secondary-background-focus);border-color:var(--tds-btn-secondary-border-color-focus);color:var(--tds-btn-secondary-color-focus);outline-color:var(--tds-btn-secondary-outline-color-focus)}button.secondary:focus-visible.sc-tds-button-s>[slot=icon],button.secondary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-focus);color:var(--tds-btn-icon-secondary-fill-focus);fill:var(--tds-btn-icon-secondary-color-focus);color:var(--tds-btn-icon-secondary-color-focus)}button.secondary.sc-tds-button:active,button.secondary.active.sc-tds-button{background:var(--tds-btn-secondary-background-active);border-color:var(--tds-btn-secondary-border-color-active);color:var(--tds-btn-secondary-color-active);outline-color:var(--tds-btn-secondary-outline-color-active)}button.secondary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-active);color:var(--tds-btn-icon-secondary-fill-active);fill:var(--tds-btn-icon-secondary-color-active);color:var(--tds-btn-icon-secondary-color-active)}button.secondary.disabled.sc-tds-button,button.secondary.sc-tds-button:disabled{background:var(--tds-btn-secondary-background-disabled);border-color:var(--tds-btn-secondary-border-color-disabled);color:var(--tds-btn-secondary-color-disabled);outline-color:var(--tds-btn-secondary-outline-color-disabled)}button.ghost.sc-tds-button{background:var(--tds-btn-ghost-background);border-color:var(--tds-btn-ghost-border-color);color:var(--tds-btn-ghost-color);outline-color:var(--tds-btn-ghost-outline-color)}button.ghost.icon.sc-tds-button{fill:var(--tds-btn-icon-ghost-fill);color:var(--tds-btn-icon-ghost-fill);fill:var(--tds-btn-icon-ghost-color);color:var(--tds-btn-icon-ghost-color)}button.ghost.sc-tds-button:hover{background:var(--tds-btn-ghost-background-hover);border-color:var(--tds-btn-ghost-border-color-hover);color:var(--tds-btn-ghost-color-hover);outline-color:var(--tds-btn-ghost-outline-color-hover)}button.ghost:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-hover);color:var(--tds-btn-icon-ghost-fill-hover);fill:var(--tds-btn-icon-ghost-color-hover);color:var(--tds-btn-icon-ghost-color-hover)}button.ghost.sc-tds-button:focus-visible{background:var(--tds-btn-ghost-background-focus);border-color:var(--tds-btn-ghost-border-color-focus);color:var(--tds-btn-ghost-color-focus);outline-color:var(--tds-btn-ghost-outline-color-focus)}button.ghost:focus-visible.sc-tds-button-s>[slot=icon],button.ghost:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-focus);color:var(--tds-btn-icon-ghost-fill-focus);fill:var(--tds-btn-icon-ghost-color-focus);color:var(--tds-btn-icon-ghost-color-focus)}button.ghost.sc-tds-button:active,button.ghost.active.sc-tds-button{background:var(--tds-btn-ghost-background-active);border-color:var(--tds-btn-ghost-border-color-active);color:var(--tds-btn-ghost-color-active);outline-color:var(--tds-btn-ghost-outline-color-active)}button.ghost:active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-active);color:var(--tds-btn-icon-ghost-fill-active);fill:var(--tds-btn-icon-ghost-color-active);color:var(--tds-btn-icon-ghost-color-active)}button.ghost.disabled.sc-tds-button,button.ghost.sc-tds-button:disabled{background:var(--tds-btn-ghost-background-disabled);border-color:var(--tds-btn-ghost-border-color-disabled);color:var(--tds-btn-ghost-color-disabled);outline-color:var(--tds-btn-ghost-outline-color-disabled)}button.danger.sc-tds-button{background:var(--tds-btn-danger-background);border-color:var(--tds-btn-danger-border-color);color:var(--tds-btn-danger-color);outline-color:var(--tds-btn-danger-outline-color)}button.danger.icon.sc-tds-button{fill:var(--tds-btn-icon-danger-fill);color:var(--tds-btn-icon-danger-fill);fill:var(--tds-btn-icon-danger-color);color:var(--tds-btn-icon-danger-color)}button.danger.sc-tds-button:hover{background:var(--tds-btn-danger-background-hover);border-color:var(--tds-btn-danger-border-color-hover);color:var(--tds-btn-danger-color-hover);outline-color:var(--tds-btn-danger-outline-color-hover)}button.danger:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-hover);color:var(--tds-btn-icon-danger-fill-hover);fill:var(--tds-btn-icon-danger-color-hover);color:var(--tds-btn-icon-danger-color-hover)}button.danger.sc-tds-button:focus-visible{background:var(--tds-btn-danger-background-focus);border-color:var(--tds-btn-danger-border-color-focus);color:var(--tds-btn-danger-color-focus);outline-color:var(--tds-btn-danger-outline-color-focus)}button.danger:focus-visible.sc-tds-button-s>[slot=icon],button.danger:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-focus);color:var(--tds-btn-icon-danger-fill-focus);fill:var(--tds-btn-icon-danger-color-focus);color:var(--tds-btn-icon-danger-color-focus)}button.danger.sc-tds-button:active,button.danger.active.sc-tds-button{background:var(--tds-btn-danger-background-active);border-color:var(--tds-btn-danger-border-color-active);color:var(--tds-btn-danger-color-active);outline-color:var(--tds-btn-danger-outline-color-active)}button.danger:active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-active);color:var(--tds-btn-icon-danger-fill-active);fill:var(--tds-btn-icon-danger-color-active);color:var(--tds-btn-icon-danger-color-active)}button.danger.disabled.sc-tds-button,button.danger.sc-tds-button:disabled{background:var(--tds-btn-danger-background-disabled);border-color:var(--tds-btn-danger-border-color-disabled);color:var(--tds-btn-danger-color-disabled);outline-color:var(--tds-btn-danger-outline-color-disabled)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.sc-tds-button-htds-button.sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}.sc-tds-button-htds-button .sm.sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button .sm .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}.disabled.sc-tds-button-h:active{pointer-events:none}.disabled.sc-tds-button-h button.sc-tds-button{cursor:not-allowed}.fullbleed.sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button button.sc-tds-button{display:inline-flex;align-items:center}tds-button button.sm.sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button button.md.sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button button.lg.sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button button.only-icon.sc-tds-button-s>[slot=icon]{margin-left:0}";
+const buttonCss = "button.sc-tds-button{box-sizing:border-box;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:inline-flex;align-items:center;border-radius:var(--button-radius);border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid transparent}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:focus{outline:1px solid var(--scania-blue-400)}button.primary.sc-tds-button{background:var(--button-primary-background);border-color:var(--button-primary-border-color);color:var(--button-primary-color);outline-color:var(--button-primary-outline-color)}button.primary.icon.sc-tds-button{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.primary.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button.primary:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.secondary.sc-tds-button{background:var(--button-secondary-background);border-color:var(--button-secondary-border-color);color:var(--button-secondary-color);outline-color:var(--button-secondary-outline-color)}button.secondary.icon.sc-tds-button{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.secondary.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button.secondary:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.ghost.sc-tds-button{background:var(--button-ghost-background);border-color:var(--button-ghost-border-color);color:var(--button-ghost-color);outline-color:var(--button-ghost-outline-color)}button.ghost.icon.sc-tds-button{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.ghost.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button.ghost:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.danger.sc-tds-button{background:var(--button-danger-background);border-color:var(--button-danger-border-color);color:var(--button-danger-color);outline-color:var(--button-danger-outline-color)}button.danger.icon.sc-tds-button{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.danger.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button.danger:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.sc-tds-button:hover.primary{background:var(--button-primary-background-hover);border-color:var(--button-primary-border-color-hover);color:var(--button-primary-color-hover);outline-color:var(--button-primary-outline-color-hover)}button.sc-tds-button:hover.primary.icon{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.sc-tds-button:hover.primary.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:hover.primary:not(.disabled).sc-tds-button-s>[slot=icon],button:hover.primary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.sc-tds-button:hover.secondary{background:var(--button-secondary-background-hover);border-color:var(--button-secondary-border-color-hover);color:var(--button-secondary-color-hover);outline-color:var(--button-secondary-outline-color-hover)}button.sc-tds-button:hover.secondary.icon{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.sc-tds-button:hover.secondary.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:hover.secondary:not(.disabled).sc-tds-button-s>[slot=icon],button:hover.secondary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.sc-tds-button:hover.ghost{background:var(--button-ghost-background-hover);border-color:var(--button-ghost-border-color-hover);color:var(--button-ghost-color-hover);outline-color:var(--button-ghost-outline-color-hover)}button.sc-tds-button:hover.ghost.icon{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.sc-tds-button:hover.ghost.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:hover.ghost:not(.disabled).sc-tds-button-s>[slot=icon],button:hover.ghost:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.sc-tds-button:hover.danger{background:var(--button-danger-background-hover);border-color:var(--button-danger-border-color-hover);color:var(--button-danger-color-hover);outline-color:var(--button-danger-outline-color-hover)}button.sc-tds-button:hover.danger.icon{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.sc-tds-button:hover.danger.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:hover.danger:not(.disabled).sc-tds-button-s>[slot=icon],button:hover.danger:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.sc-tds-button:focus-visible{outline:var(--button-outline-width) solid var(--color-foreground-border-accent-focus);outline-offset:calc(var(--button-outline-width) * -1)}button.sc-tds-button:focus-visible.primary{background:var(--button-primary-background-focus);border-color:var(--button-primary-border-color-focus);color:var(--button-primary-color-focus);outline-color:var(--button-primary-outline-color-focus)}button.sc-tds-button:focus-visible.primary.icon{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.sc-tds-button:focus-visible.primary.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:focus-visible.primary:not(.disabled).sc-tds-button-s>[slot=icon],button:focus-visible.primary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.sc-tds-button:focus-visible.secondary{background:var(--button-secondary-background-focus);border-color:var(--button-secondary-border-color-focus);color:var(--button-secondary-color-focus);outline-color:var(--button-secondary-outline-color-focus)}button.sc-tds-button:focus-visible.secondary.icon{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.sc-tds-button:focus-visible.secondary.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:focus-visible.secondary:not(.disabled).sc-tds-button-s>[slot=icon],button:focus-visible.secondary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.sc-tds-button:focus-visible.ghost{background:var(--button-ghost-background-focus);border-color:var(--button-ghost-border-color-focus);color:var(--button-ghost-color-focus);outline-color:var(--button-ghost-outline-color-focus)}button.sc-tds-button:focus-visible.ghost.icon{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.sc-tds-button:focus-visible.ghost.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:focus-visible.ghost:not(.disabled).sc-tds-button-s>[slot=icon],button:focus-visible.ghost:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.sc-tds-button:focus-visible.danger{background:var(--button-danger-background-focus);border-color:var(--button-danger-border-color-focus);color:var(--button-danger-color-focus);outline-color:var(--button-danger-outline-color-focus)}button.sc-tds-button:focus-visible.danger.icon{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.sc-tds-button:focus-visible.danger.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button:focus-visible.danger:not(.disabled).sc-tds-button-s>[slot=icon],button:focus-visible.danger:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.sc-tds-button:focus-visible.primary{background:var(--button-primary-background-focus);border-color:var(--button-primary-border-color-focus);color:var(--button-primary-color-focus);outline-color:var(--button-primary-outline-color-focus)}button:focus-visible.primary.sc-tds-button-s>[slot=icon],button:focus-visible.primary .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-primary-fill-focus);color:var(--button-icon-primary-fill-focus);fill:var(--button-icon-primary-color-focus);color:var(--button-icon-primary-color-focus)}button.sc-tds-button:focus-visible.secondary{background:var(--button-secondary-background-focus);border-color:var(--button-secondary-border-color-focus);color:var(--button-secondary-color-focus);outline-color:var(--button-secondary-outline-color-focus)}button:focus-visible.secondary.sc-tds-button-s>[slot=icon],button:focus-visible.secondary .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-secondary-fill-focus);color:var(--button-icon-secondary-fill-focus);fill:var(--button-icon-secondary-color-focus);color:var(--button-icon-secondary-color-focus)}button.sc-tds-button:focus-visible.ghost{background:var(--button-ghost-background-focus);border-color:var(--button-ghost-border-color-focus);color:var(--button-ghost-color-focus);outline-color:var(--button-ghost-outline-color-focus)}button:focus-visible.ghost.sc-tds-button-s>[slot=icon],button:focus-visible.ghost .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-ghost-fill-focus);color:var(--button-icon-ghost-fill-focus);fill:var(--button-icon-ghost-color-focus);color:var(--button-icon-ghost-color-focus)}button.sc-tds-button:focus-visible.danger{background:var(--button-danger-background-focus);border-color:var(--button-danger-border-color-focus);color:var(--button-danger-color-focus);outline-color:var(--button-danger-outline-color-focus)}button:focus-visible.danger.sc-tds-button-s>[slot=icon],button:focus-visible.danger .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-danger-fill-focus);color:var(--button-icon-danger-fill-focus);fill:var(--button-icon-danger-color-focus);color:var(--button-icon-danger-color-focus)}button.sc-tds-button:active.primary,button.active.primary.sc-tds-button{background:var(--button-primary-background-active);border-color:var(--button-primary-border-color-active);color:var(--button-primary-color-active);outline-color:var(--button-primary-outline-color-active)}button.sc-tds-button:active.primary.icon,button.active.primary.icon.sc-tds-button{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.sc-tds-button:active.primary.icon.disabled,button.active.primary.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button:active.primary:not(.disabled).sc-tds-button-s>[slot=icon],button:active.primary:not(.disabled) .sc-tds-button-s>[slot=icon],button.active.primary:not(.disabled).sc-tds-button-s>[slot=icon],button.active.primary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.sc-tds-button:active.secondary,button.active.secondary.sc-tds-button{background:var(--button-secondary-background-active);border-color:var(--button-secondary-border-color-active);color:var(--button-secondary-color-active);outline-color:var(--button-secondary-outline-color-active)}button.sc-tds-button:active.secondary.icon,button.active.secondary.icon.sc-tds-button{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.sc-tds-button:active.secondary.icon.disabled,button.active.secondary.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button:active.secondary:not(.disabled).sc-tds-button-s>[slot=icon],button:active.secondary:not(.disabled) .sc-tds-button-s>[slot=icon],button.active.secondary:not(.disabled).sc-tds-button-s>[slot=icon],button.active.secondary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.sc-tds-button:active.ghost,button.active.ghost.sc-tds-button{background:var(--button-ghost-background-active);border-color:var(--button-ghost-border-color-active);color:var(--button-ghost-color-active);outline-color:var(--button-ghost-outline-color-active)}button.sc-tds-button:active.ghost.icon,button.active.ghost.icon.sc-tds-button{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.sc-tds-button:active.ghost.icon.disabled,button.active.ghost.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button:active.ghost:not(.disabled).sc-tds-button-s>[slot=icon],button:active.ghost:not(.disabled) .sc-tds-button-s>[slot=icon],button.active.ghost:not(.disabled).sc-tds-button-s>[slot=icon],button.active.ghost:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.sc-tds-button:active.danger,button.active.danger.sc-tds-button{background:var(--button-danger-background-active);border-color:var(--button-danger-border-color-active);color:var(--button-danger-color-active);outline-color:var(--button-danger-outline-color-active)}button.sc-tds-button:active.danger.icon,button.active.danger.icon.sc-tds-button{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.sc-tds-button:active.danger.icon.disabled,button.active.danger.icon.disabled.sc-tds-button{color:var(--button-icon-secondary-color-disabled)}button:active.danger:not(.disabled).sc-tds-button-s>[slot=icon],button:active.danger:not(.disabled) .sc-tds-button-s>[slot=icon],button.active.danger:not(.disabled).sc-tds-button-s>[slot=icon],button.active.danger:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.disabled.primary.sc-tds-button,button.sc-tds-button:disabled.primary{background:var(--button-primary-background-disabled);border-color:var(--button-primary-border-color-disabled);color:var(--button-primary-color-disabled);outline-color:var(--button-primary-outline-color-disabled)}button.disabled.primary.icon.sc-tds-button,button.sc-tds-button:disabled.primary.icon{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.disabled.primary.icon.disabled.sc-tds-button,button.sc-tds-button:disabled.primary.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button.disabled.primary:not(.disabled).sc-tds-button-s>[slot=icon],button.disabled.primary:not(.disabled) .sc-tds-button-s>[slot=icon],button:disabled.primary:not(.disabled).sc-tds-button-s>[slot=icon],button:disabled.primary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-primary-fill);color:var(--button-icon-primary-fill);fill:var(--button-icon-primary-color);color:var(--button-icon-primary-color)}button.disabled.secondary.sc-tds-button,button.sc-tds-button:disabled.secondary{background:var(--button-secondary-background-disabled);border-color:var(--button-secondary-border-color-disabled);color:var(--button-secondary-color-disabled);outline-color:var(--button-secondary-outline-color-disabled)}button.disabled.secondary.icon.sc-tds-button,button.sc-tds-button:disabled.secondary.icon{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.disabled.secondary.icon.disabled.sc-tds-button,button.sc-tds-button:disabled.secondary.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button.disabled.secondary:not(.disabled).sc-tds-button-s>[slot=icon],button.disabled.secondary:not(.disabled) .sc-tds-button-s>[slot=icon],button:disabled.secondary:not(.disabled).sc-tds-button-s>[slot=icon],button:disabled.secondary:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-secondary-fill);color:var(--button-icon-secondary-fill);fill:var(--button-icon-secondary-color);color:var(--button-icon-secondary-color)}button.disabled.ghost.sc-tds-button,button.sc-tds-button:disabled.ghost{background:var(--button-ghost-background-disabled);border-color:var(--button-ghost-border-color-disabled);color:var(--button-ghost-color-disabled);outline-color:var(--button-ghost-outline-color-disabled)}button.disabled.ghost.icon.sc-tds-button,button.sc-tds-button:disabled.ghost.icon{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.disabled.ghost.icon.disabled.sc-tds-button,button.sc-tds-button:disabled.ghost.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button.disabled.ghost:not(.disabled).sc-tds-button-s>[slot=icon],button.disabled.ghost:not(.disabled) .sc-tds-button-s>[slot=icon],button:disabled.ghost:not(.disabled).sc-tds-button-s>[slot=icon],button:disabled.ghost:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-ghost-fill);color:var(--button-icon-ghost-fill);fill:var(--button-icon-ghost-color);color:var(--button-icon-ghost-color)}button.disabled.danger.sc-tds-button,button.sc-tds-button:disabled.danger{background:var(--button-danger-background-disabled);border-color:var(--button-danger-border-color-disabled);color:var(--button-danger-color-disabled);outline-color:var(--button-danger-outline-color-disabled)}button.disabled.danger.icon.sc-tds-button,button.sc-tds-button:disabled.danger.icon{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.disabled.danger.icon.disabled.sc-tds-button,button.sc-tds-button:disabled.danger.icon.disabled{color:var(--button-icon-secondary-color-disabled)}button.disabled.danger:not(.disabled).sc-tds-button-s>[slot=icon],button.disabled.danger:not(.disabled) .sc-tds-button-s>[slot=icon],button:disabled.danger:not(.disabled).sc-tds-button-s>[slot=icon],button:disabled.danger:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--button-icon-danger-fill);color:var(--button-icon-danger-fill);fill:var(--button-icon-danger-color);color:var(--button-icon-danger-color)}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.fullbleed.sc-tds-button{width:100%;display:flex;justify-content:center}button.animation-fade.sc-tds-button{transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.disabled.sc-tds-button-h:active{pointer-events:none}.disabled.sc-tds-button-h button.sc-tds-button{cursor:not-allowed}.fullbleed.sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button button.sc-tds-button{display:inline-flex;align-items:center}tds-button button.sm.sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button button.md.sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button button.lg.sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button button.only-icon.sc-tds-button-s>[slot=icon]{margin-left:0}";
 const TdsButtonStyle0 = buttonCss;
 
 const TdsButton = class {
@@ -16,6 +16,8 @@ const TdsButton = class {
         this.modeVariant = null;
         this.animation = 'none';
         this.tdsAriaLabel = undefined;
+        this.name = undefined;
+        this.value = undefined;
         this.onlyIcon = false;
     }
     connectedCallback() {
@@ -29,11 +31,11 @@ const TdsButton = class {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '08f21c291b0202663c640ce8faf8a01b9b915ba6', class: {
+        return (h(Host, { key: 'd6f3f193c3050d8eab6220cadd05847cbb528f3e', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
                 disabled: Boolean(this.disabled),
                 fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", Object.assign({ key: 'c1c3d9e6769c925ded8e95ebce64773f7ea3dfa4', type: this.type, disabled: this.disabled, class: {
+            }, disabled: this.disabled }, h("button", Object.assign({ key: '4b548051c9eeaf43d63a5173e08f0263896626b9', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -47,7 +49,7 @@ const TdsButton = class {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '2ce8c3b56e8134f789b22a3db464516273d167d1', name: "label" }), hasIconSlot && h("slot", { key: 'b560a4308159ade1fd0dae0af99805a151cb8b5a', name: "icon" }))));
+            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '0f85ffc90d0328c14ffd4696a3b305a1ff144253', name: "label" }), hasIconSlot && h("slot", { key: 'a0434202a202f7996174233b18eff6e4361df146', name: "icon" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-checkbox.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-51d04e39.js';
 import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
-const checkboxCss = ".sc-tds-checkbox-h{align-items:center;position:relative;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox::before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate::after{background-image:var(--tds-checkbox-background-img-indeterminate);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::after{background-image:var(--tds-checkbox-background-img-indeterminate-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
+const checkboxCss = ".sc-tds-checkbox-h{align-items:center;position:relative;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox{box-sizing:border-box;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(--checkbox-label);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(--checkbox-label);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(--checkbox-border);background-color:var(--checkbox-fill);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(--checkbox-border-hover);opacity:var(--checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--checkbox-border-focus);opacity:var(--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(--checkbox-border-disabled)}.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(--checkbox-label-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(--checkbox-background-img);background-color:var(--checkbox-border);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--checkbox-border-hover);opacity:var(--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(--checkbox-background-img-disabled);background-color:var(--checkbox-fill-disabled);color:var(--checkbox-border-disabled)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate::after{background-image:var(--checkbox-background-img-indeterminate);background-color:var(--checkbox-border);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(--checkbox-background-img-indeterminate-disabled);background-color:var(--checkbox-fill-disabled);color:var(--checkbox-border-disabled)}";
 const TdsCheckboxStyle0 = checkboxCss;
 
 const TdsCheckbox = class {
@@ -39,6 +39,12 @@ const TdsCheckbox = class {
             checked: this.checked,
         };
     }
+    /** Method to programmatically focus the checkbox element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     handleIndeterminateState() {
         this.inputElement.indeterminate = this.indeterminate;
     }
@@ -63,11 +69,11 @@ const TdsCheckbox = class {
         }
     }
     render() {
-        return (h("div", { key: '8f5104073f1be9323bc0125feab7515759ac7679', class: "tds-checkbox" }, h("input", { key: '8536a1eaefb5b7bdf258a4ddca67660becc797a5',
+        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: 'e6e065ce109371607c5412ab38ece22d3ac1d626', htmlFor: this.checkboxId }, h("slot", { key: '4698f97ac58203e3f478321da53cc364157ded78', name: "label" }))));
+            } }), h("label", { key: '51d15b0eea1fd0f7517ca8d0f669bc02ac59781c', htmlFor: this.checkboxId }, h("slot", { key: 'bb10126c57b177f825ef8cd75da505465b2d6ae3', name: "label" }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/tds-chip.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 import { h as hasSlot } from './hasSlot-d52114d0.js';
 
-const chipCss = ".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip{display:inline-flex}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background);color:var(--tds-chips-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:16px;cursor:pointer;white-space:nowrap}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background-disabled);color:var(--tds-chips-text-disabled);cursor:default;pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input.sc-tds-chip{pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=radio].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-text-checked-disabled)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=checkbox].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-text-checked-disabled)}.component.sc-tds-chip .tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:32px;padding:0 16px;gap:8px}.component.sc-tds-chip .tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:24px;padding:0 12px;gap:6px}.component.sc-tds-chip .tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:0 12px 0 6px}.component.sc-tds-chip .tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px 0 12px}.component.sc-tds-chip .tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:0 16px 0 8px}.component.sc-tds-chip .tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px 0 16px}.component.sc-tds-chip .tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px}.component.sc-tds-chip .tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:focus-visible+label.sc-tds-chip{outline:2px solid var(--tds-blue-400);outline-offset:-2px;background-color:var(--tds-chips-background-focus)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-color-active)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover)}";
+const chipCss = ".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip{display:inline-flex}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background);color:var(--tds-chips-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:16px;cursor:pointer;white-space:nowrap}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background-disabled);color:var(--tds-chips-text-disabled);cursor:default;pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input.sc-tds-chip{pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=radio].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=checkbox].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled)}.component.sc-tds-chip .tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:32px;padding:0 16px;gap:8px}.component.sc-tds-chip .tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:24px;padding:0 12px;gap:6px}.component.sc-tds-chip .tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:0 12px 0 6px}.component.sc-tds-chip .tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px 0 12px}.component.sc-tds-chip .tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:0 16px 0 8px}.component.sc-tds-chip .tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px 0 16px}.component.sc-tds-chip .tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px}.component.sc-tds-chip .tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:focus-visible+label.sc-tds-chip{outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;background-color:var(--tds-chips-background-focus)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-color-active)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover)}";
 const TdsChipStyle0 = chipCss;
 
 const TdsChip = class {

package/dist/esm/tds-core-header-item_2.entry.js

@@ -14,7 +14,7 @@ const TdsCoreHeaderItem = class {
 };
 TdsCoreHeaderItem.style = TdsCoreHeaderItemStyle0;
 
-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);outline-offset:-2px}: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-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 TdsHeaderItemStyle0 = headerItemCss;
 
 const TdsHeaderItem = class {

package/dist/esm/tds-datetime.entry.js

@@ -65,6 +65,13 @@ const TdsDatetime = class {
     async setValue(newValue) {
         this.value = newValue;
     }
+    /** Method to programmatically focus the datetime element */
+    async focusElement() {
+        if (this.textInput) {
+            this.textInput.focus();
+            this.focusInput = true;
+        }
+    }
     componentWillLoad() {
         if (this.defaultValue !== 'none') {
             this.value = this.getDefaultValue();
@@ -130,7 +137,7 @@ const TdsDatetime = class {
             'tds-datetime-container-label-inside': this.label && this.labelPosition === 'inside' && this.size !== 'sm',
         };
         const iphone = navigator.userAgent.toLowerCase().includes('iphone');
-        return (h("div", { key: '1a55db8de53a69917a0f498ce4e9877136b21766', class: classNames, onKeyDown: (e) => {
+        return (h("div", { key: '28c414fb800bb7e1411feb93b03b4ec4732e60fb', class: classNames, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
                     if (browserIsChrome) {
@@ -138,9 +145,9 @@ const TdsDatetime = class {
                         this.textInput.showPicker();
                     }
                 }
-            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '83a178f48b465978da70749d5a0a6b06c7a46423', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'd3b8cbc704aee3863a428f6bbc9b89a8894241df', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'b398e66d353aeb568024686b591dcf5d9d2288e6', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: '1d31da2daaa048b46fe9a3023f4342e0daa4cfde', ref: (inputEl) => {
+            } }, this.labelPosition === 'outside' && this.label && (h("label", { key: '8498489db26eeffef963d57dd8aaaa27903e3e98', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'e62f09d543d12a3d9578bee5249171c85c7e3f03', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '0d083993b8f447918d0110ba78f18586d5afac1c', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: 'cdec8e9e1c8f355858031f34799fac7dd8d03c4b', ref: (inputEl) => {
                 this.textInput = inputEl;
-            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: 'f16d4c77abdc6b1cabb03b8e4beba58704796648', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '168c3c719094c8b39dcc4fa16b4d13b588b9429b', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6e0794302a5e1792b198c7d1208aa8e59bfb3d5c', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '1a954f5386c136d2cdb88408c9729a68adcd5e58', class: "datetime-icon icon-time" }, h("tds-icon", { key: '67b56f956fc439a71870fdd3ede387d007a69f08', size: "20px", name: "clock", svgTitle: "Clock" }))), h("div", { key: 'c1373d3f3413cdba67911cfc1884f201a326df97', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'c3d22a5de88ba11154b227ad0d8930cc0768bc99', class: "tds-datetime-helper" }, h("div", { key: '0c5123613944fc44184ab7d489712982b70c183e', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'a351a589cacb618dbf890e247e98efe14970062b', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
+            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: 'f5ab00bd2a3dca4a46981da7e54ff6dcacfb6529', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: 'ce7799142c01703e7d3add1bc3d0fb474dec25e3', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '189b60ff034d2e0bc49e9461fc9970846a7e10a2', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '192c46c706e8d8ca8613e832df2f77e981b64e2a', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'e0cb4c98ccd40cb6d5b82d313aa48da8e4564b57', size: "20px", name: "clock", svgTitle: "Clock" }))), h("div", { key: '5a677ae45553060d459e1002741c0bed7ae1cefa', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '0b132b2f580c3dffcfceff2ba8b4c2315ca8cd50', class: "tds-datetime-helper" }, h("div", { key: 'b17e1f96757072c8092e4cbe6e66b45b209a16ae', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '8afde58643e719da112bad1dcdc47f363c85490c', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
     }
 };
 TdsDatetime.style = TdsDatetimeStyle0;

package/dist/esm/tds-divider.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
 
-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 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 TdsDividerStyle0 = dividerCss;
 
 const Divider = class {

package/dist/esm/tds-dropdown_2.entry.js

@@ -74,7 +74,7 @@ const convertArrayToStrings = (values) => {
     return values.map((value) => convertToString(value));
 };
 
-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-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}: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 .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-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}: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{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:focus{border-bottom-color:var(--tds-dropdown-border-bottom)}: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-negative)}: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-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;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;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;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 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 TdsDropdownStyle0 = dropdownCss;
 
 const TdsDropdown = class {
@@ -147,7 +147,15 @@ const TdsDropdown = class {
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
-                    this.focusInputElement();
+                    if (this.filter) {
+                        this.focusInputElement();
+                    }
+                    else {
+                        const button = this.host.shadowRoot.querySelector('button');
+                        if (button) {
+                            button.focus();
+                        }
+                    }
                 }
             }
         };
@@ -193,11 +201,13 @@ const TdsDropdown = class {
         this.handleFocus = (event) => {
             this.open = true;
             this.filterFocus = true;
-            if (this.multiselect) {
+            if (this.multiselect && this.inputElement) {
                 this.inputElement.value = '';
             }
             this.tdsFocus.emit(event);
-            this.handleFilter({ target: { value: '' } });
+            if (this.filter) {
+                this.handleFilter({ target: { value: '' } });
+            }
         };
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
@@ -352,7 +362,18 @@ const TdsDropdown = class {
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
-        this.focusInputElement();
+        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.handleFocus({});
     }
     /** Method for setting the value of the Dropdown.
@@ -505,9 +526,9 @@ const TdsDropdown = class {
         // 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: '5c5314d4994b1ca9c09729df6c9b30d9fb6b33d3', class: {
+        return (h(Host, { key: 'aed0a485fc4634cdba2599fa9792fb6289a7459c', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '25133dd0a665315edfad6f93a846db0ac82cc16f', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d2a17d8f7bcf7f8aaa8d2ea5397044396b691e1', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '39d11ac06547b133540f037a0c09ddc40b972cb5', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8ab624d380289699887b660d30512b2e892f71c0', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -541,11 +562,12 @@ const TdsDropdown = class {
             }, 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'}`, 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'} ${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) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -557,7 +579,7 @@ const TdsDropdown = class {
                     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: '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.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.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -568,11 +590,11 @@ const TdsDropdown = class {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, 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: {
+            } }, 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: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '90eea26d0166a4acaa066211fa996e2b74ccd575', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '10b4059f6f5149c0bb10b4c209c69859bdc28296', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -583,7 +605,7 @@ const TdsDropdown = class {
 };
 TdsDropdown.style = TdsDropdownStyle0;
 
-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}";
+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 TdsDropdownOptionStyle0 = dropdownOptionCss;
 
 const TdsDropdownOption = class {

package/dist/esm/tds-folder-tab.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-left:1px solid;border-left-color:transparent}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host div:not(.selected){background-color:var(--tds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--tds-folder-tab-divider-color);border-top:2px solid var(--tds-folder-tab-background);color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top-color:var(--tds-folder-tab-background-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-background-selected);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
+const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-left:1px solid;border-left-color:transparent}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px}:host div:not(.selected){background-color:var(--tds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--tds-folder-tab-divider-color);border-top:2px solid var(--tds-folder-tab-background);color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top-color:var(--tds-folder-tab-background-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-background-selected);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
 const TdsFolderTabStyle0 = folderTabCss;
 
 const TdsFolderTab = class {
@@ -37,10 +37,10 @@ const TdsFolderTab = class {
         }
     }
     render() {
-        return (h(Host, { key: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
+        return (h(Host, { key: '584a1fcf43299d27e3fb2150214830c7964e3895', "aria-selected": this.selected }, h("div", { key: 'ed0f0d8acafaf35c36a22d34ef4c9ac240ba5311', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'ac2fb5ed4062e9e83297e9a6c2f3ea6b9f514b06' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-folder-tabs.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
+const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
 const TdsFolderTabsStyle0 = folderTabsCss;
 
 const TdsFolderTabs = class {
@@ -165,9 +165,9 @@ const TdsFolderTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'c56bf987e23ade8b30cd2470ab1ed0f4273bd191', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'afab8a86427918d5ac4bbc17dd2a436a986df577', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'f97a75dc1b7bf12757a7e96e4075387c27459e7e', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '92299f0dc356d448d901569d314fa6afaa21fdb1', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '0b82a953932e888d05478d82944c90768f97bb36', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '50cd22c5be43ae452e0896b449570774c3ab0151', name: "chevron_left", size: "20px" })), h("slot", { key: '3cb17dddc8592241c467167b3a0028355f2b7d5e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '23c289b70d723b2d0705692835a510b8a650fcfa', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'fff2bfcbcf916d1b391aa25ee5f6fda3c8e63d23', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'f00e92acb5a9071173c25d2c8334fa32cc32cca8', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'eb113eeecf5c89a9b6e3e3c4306f3557c574b3e7', name: "chevron_left", size: "20px" })), h("slot", { key: '4136a2b52af81b9406cffc74a6ad84f428d18273', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '0d5177b9eff827616a3252992a6dc7e79e58f5e1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'a575af766f02d2427760aa1f5911e63f32c28d1d', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {