@scania/tegel 1.32.0 → 1.32.2-dropdown-dynamic-updates-beta.0

package/dist/collection/assets/logos/scania-wordmark.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="566.93px" height="93.754px" viewBox="0 0 566.93 93.754" enable-background="new 0 0 566.93 93.754" xml:space="preserve">
+<path fill="#041E42" d="M264.588,54.663h-23.774l11.885-31.01L264.588,54.663z M375.749,89.829h37.5V3.804h-32.236v45.34
+	l-33.946-45.34h-40.81V73.95l-27.08-70.146h-52.333l-19.629,50.859h-31.967c-1.593,10.166-7.477,15.557-17.77,15.557
+	c-11.89,0-18.511-9.188-18.511-23.403c0-14.213,6.748-23.286,18.511-23.286c9.684,0,15.929,5.151,17.28,13.486h35.419v-2.334
+	C210.179,15.688,193.749,0,157.846,0c-38.729,0-53.437,19.365-53.437,46.816c0,0.629,0.02,1.25,0.033,1.875
+	c-4.857-5.908-14.18-9.351-29.564-11.558l-22.426-3.188c-8.457-1.221-13.727-2.197-13.727-6.367c0-3.555,3.307-7.358,12.505-7.358
+	c10.171,0,15.812,3.926,15.812,10.298h36.024v-1.836c0-17.163-17.157-28.438-50.863-28.438c-34.674,0-49.878,12.627-49.878,30.396
+	c0,13.848,9.066,21.938,30.391,24.882l25.371,3.545c9.066,1.229,12.012,3.065,12.012,6.865c0,4.901-4.658,7.606-15.078,7.606
+	c-11.763,0-17.147-5.029-17.147-12.013H0v1.964c0,19.11,18.013,30.137,53.433,30.137c32.729,0,51.704-7.228,54.814-25.487
+	c6.548,15.674,21.947,25.614,49.599,25.614c20.972,0,32.739-5.713,39.804-14.325l-4.013,10.399h33.696l4.779-12.373h41.177
+	l4.779,12.373h28.188h6.123h26.113V40.317L375.749,89.829z M519.127,54.663h-23.771l11.885-31.01L519.127,54.663z M566.93,89.829
+	L533.717,3.804h-52.334L454.304,73.95V3.794h-32.969v86.035h26.836h6.133h27.566l4.775-12.373h41.182l4.785,12.373H566.93z"/>
+</svg>

package/dist/collection/components/accordion/accordion-item/accordion-item.css

@@ -132,8 +132,9 @@
 }
 
 :host(:focus) .tds-accordion-item {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {

package/dist/collection/components/accordion/accordion.css

@@ -11,8 +11,9 @@
 }
 
 :host(:focus) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {

package/dist/collection/components/badge/badge.css

@@ -1,5 +1,5 @@
 :host {
-  --tds-badge-background-color: var(--tds-negative);
+  --tds-badge-background-color: var(--tds-red-400);
   --tds-badge-color-text: var(--tds-white);
   box-sizing: border-box;
   display: block;

package/dist/collection/components/banner/banner.css

@@ -77,6 +77,7 @@
   outline: none;
 }
 :host .banner-close button:focus-visible tds-icon {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css

@@ -8,8 +8,9 @@
   text-decoration: underline;
 }
 :host([role=listitem]) div ::slotted(*:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
   outline-offset: 0;
 }
 :host([role=listitem]) div.current ::slotted(*),

package/dist/collection/components/button/button.css

@@ -11,33 +11,33 @@
   --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-color-disabled: var(--tds-grey-250);
   --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-focus: var(--tds-blue-700);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
   --tds-btn-primary-border-color-disabled: transparent;
   /* ICON */
   --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-border-color: var(--tds-grey-350);
+  --tds-btn-secondary-background-hover: var(--tds-blue-700);
   --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-border-color-active: var(--tds-grey-650);
+  --tds-btn-secondary-background-focus: var(--tds-blue-700);
+  --tds-btn-secondary-color-focus: var(--tds-white);
+  --tds-btn-secondary-border-color-focus: var(--tds-white);
   --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-secondary-color-disabled: var(--tds-grey-250);
+  --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
   --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);
@@ -50,18 +50,18 @@
   /* ICON HOVER */
   --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-color: var(--tds-grey-950);
   --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-color-hover: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
   --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-color-active: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-active: var(--tds-grey-650);
   --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-color-focus: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
   --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);
@@ -69,20 +69,20 @@
   /* ICON */
   --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-background: var(--scania-extended-red-400);
   --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-background-hover: var(--scania-extended-red-500);
   --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-background-active: var(--scania-extended-red-600);
   --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-background-focus: var(--scania-extended-red-500);
   --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-border-color-focus: var(--tds-red-500);
+  --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-danger-background-disabled-primary: var(--scania-neutral-solid-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);
@@ -103,36 +103,38 @@
 }
 
 .tds-mode-dark {
-  --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: var(--scania-blue-400);
+  --tds-btn-primary-background-hover: var(--scania-blue-500);
+  --tds-btn-primary-background-active: var(--scania-blue-600);
+  --tds-btn-primary-background-focus: var(--scania-blue-500);
+  --tds-btn-primary-border-color-focus: var(--tds-white);
+  --tds-btn-primary-border-color: transparent;
+  --tds-btn-primary-border-color-hover: var(--tds-white);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-300);
   --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-secondary: var(--tds-grey-850);
   --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
-  --tds-btn-primary-color-disabled: var(--tds-white-38);
+  --tds-btn-primary-color-disabled: var(--scania-neutral-transparent-inverse-500);
   /* ICON */
   --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-border-color: var(--scania-neutral-transparent-inverse-400);
   --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-border-color-hover: var(--tds-white);
+  --tds-btn-secondary-background-active: var(--scania-blue-600);
   --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-border-color-active: var(--tds-grey-200);
+  --tds-btn-secondary-background-focus: var(--scania-blue-500);
   --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-border-color-focus: var(--tds-white);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-300);
   --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-secondary-color-disabled: var(--tds-grey-500);
+  --tds-btn-secondary-border-color-disabled: var(--tds-grey-500);
   --tds-btn-icon-secondary-color-focus: var(--tds-white);
   --tds-btn-icon-secondary-fill-focus: var(--tds-white);
   /* ICON */
@@ -143,38 +145,38 @@
   --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-border-color-hover: var(--tds-white);
   --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-border-color-active: var(--tds-grey-200);
   --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-border-color-focus: var(--tds-white);
   --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-color-disabled: var(--tds-grey-500);
   --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
   --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-background: var(--scania-extended-red-400);
   --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-background-hover: var(--scania-extended-red-500);
   --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-background-active: var(--scania-extended-red-600);
   --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-background-focus: var(--scania-extended-red-500);
   --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-border-color-focus: var(--tds-white);
+  --tds-btn-danger-outline-color-focus: var(--tds-blue-300);
   --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-secondary: var(--tds-grey-850);
   --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-danger-color-disabled: var(--tds-white-38);
+  --tds-btn-danger-color-disabled: var(--tds-grey-500);
   --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-danger-fill: var(--tds-white);
@@ -203,17 +205,18 @@ button {
   cursor: pointer;
   height: 56px;
   padding: var(--tds-spacing-element-20);
-  border: 1px solid;
+  border: 1px solid transparent;
 }
 button * {
   box-sizing: border-box;
 }
 button:focus {
-  outline: none;
+  outline: 1px solid var(--scania-blue-400);
 }
 button:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 button.xs {
   padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);

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

@@ -15,6 +15,8 @@ export class TdsButton {
         this.modeVariant = null;
         this.animation = 'none';
         this.tdsAriaLabel = undefined;
+        this.name = undefined;
+        this.value = undefined;
         this.onlyIcon = false;
     }
     connectedCallback() {
@@ -28,11 +30,11 @@ export class TdsButton {
         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',
@@ -46,7 +48,7 @@ export class TdsButton {
                 '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" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -221,6 +223,40 @@ export class TdsButton {
                 },
                 "attribute": "tds-aria-label",
                 "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name attribute allows for different ways of accessing the button element"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value attribute can be used when handling a form submission"
+                },
+                "attribute": "value",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/checkbox/checkbox.css

@@ -52,10 +52,10 @@
   box-sizing: border-box;
 }
 .tds-checkbox input[type=checkbox]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
+  width: 22px;
+  height: 22px;
+  left: 1px;
+  top: 1px;
   border-radius: 4px;
 }
 .tds-checkbox input[type=checkbox]::after {
@@ -83,7 +83,7 @@
   border-color: var(--tds-checkbox-border-color-disabled-after);
 }
 .tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
-  color: var(--tds-grey-600);
+  color: var(--tds-checkbox-disabled);
   cursor: not-allowed;
 }
 .tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {

package/dist/collection/components/checkbox/checkbox.js

@@ -34,6 +34,12 @@ export class TdsCheckbox {
             checked: this.checked,
         };
     }
+    /** Method to programmatically focus the checkbox element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     handleIndeterminateState() {
         this.inputElement.indeterminate = this.indeterminate;
     }
@@ -58,11 +64,11 @@ export class TdsCheckbox {
         }
     }
     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" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -314,6 +320,23 @@ export class TdsCheckbox {
                     "text": "Toggles the checked value of the component.",
                     "tags": []
                 }
+            },
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the checkbox element",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/chip/chip.css

@@ -36,11 +36,11 @@
   pointer-events: none;
 }
 .component .tds-chip-component.disabled input[type=radio]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active);
+  background-color: var(--tds-chips-background-active-disabled);
   color: var(--tds-chips-text-checked-disabled);
 }
 .component .tds-chip-component.disabled input[type=checkbox]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active);
+  background-color: var(--tds-chips-background-active-disabled);
   color: var(--tds-chips-text-checked-disabled);
 }
 .component .tds-chip-component.lg label {
@@ -77,8 +77,9 @@
   z-index: -1;
 }
 .component .tds-chip-component input:focus-visible + label {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
   background-color: var(--tds-chips-background-focus);
 }
 .component .tds-chip-component input:checked + label {

package/dist/collection/components/datetime/datetime.js

@@ -56,6 +56,13 @@ export class TdsDatetime {
     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();
@@ -121,7 +128,7 @@ export class TdsDatetime {
             '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) {
@@ -129,9 +136,9 @@ export class TdsDatetime {
                         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)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -555,6 +562,23 @@ export class TdsDatetime {
                     "text": "Method that sets the value of the datetime element",
                     "tags": []
                 }
+            },
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the datetime element",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -21,8 +21,9 @@
   color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .dropdown-option button {
   all: unset;

package/dist/collection/components/dropdown/dropdown.css

@@ -80,6 +80,9 @@
   color: var(--tds-dropdown-disabled-color);
   border-bottom: 1px solid transparent;
 }
+:host .filter.disabled .value-wrapper input {
+  color: var(--tds-dropdown-disabled-color);
+}
 :host .filter .value-wrapper {
   display: flex;
   width: 100%;
@@ -223,7 +226,7 @@ body {
   border-bottom-color: var(--tds-dropdown-border-bottom);
 }
 :host .dropdown-select button.error {
-  border-bottom-color: var(--tds-negative);
+  border-bottom-color: var(--tds-dropdown-error);
 }
 :host .dropdown-select button.error:focus {
   border-bottom-color: transparent;
@@ -313,7 +316,7 @@ body {
   gap: 8px;
 }
 :host .helper.error {
-  color: var(--tds-negative);
+  color: var(--tds-dropdown-error);
 }
 :host .helper.disabled {
   color: var(--tds-dropdown-disabled-color);