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

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

@@ -1,6 +1,3 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   align-items: center;
   position: relative;
@@ -9,13 +6,9 @@
 
 .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);
+  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;
@@ -37,7 +30,7 @@
   align-self: flex-start;
 }
 .tds-checkbox input[type=checkbox] + label {
-  color: var(--checkbox-label);
+  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);
@@ -66,8 +59,8 @@
   border-radius: 4px;
 }
 .tds-checkbox input[type=checkbox]::after {
-  border: 1px solid var(--checkbox-border);
-  background-color: var(--checkbox-fill);
+  border: 1px solid var(--tds-checkbox-interaction-01);
+  background-color: var(--tds-checkbox-interaction-02);
   width: 16px;
   height: 16px;
   left: 4px;
@@ -75,36 +68,36 @@
   border-radius: 2px;
 }
 .tds-checkbox input[type=checkbox]:hover::before {
-  background-color: var(--checkbox-border-hover);
-  opacity: var(--checkbox-background-opacity-hover);
+  background-color: var(--tds-checkbox-background-hover);
+  opacity: var(--tds-checkbox-background-opacity-hover);
 }
 .tds-checkbox input[type=checkbox]:focus::before {
-  background-color: var(--checkbox-border-focus);
-  opacity: var(--checkbox-background-opacity-focus);
+  background-color: var(--tds-checkbox-background-focus);
+  opacity: var(--tds-checkbox-background-opacity-focus);
   transition: opacity 0.2s ease-in-out;
 }
 .tds-checkbox input[type=checkbox]:disabled, .tds-checkbox input[type=checkbox].disabled {
   cursor: not-allowed;
 }
 .tds-checkbox input[type=checkbox]:disabled::after, .tds-checkbox input[type=checkbox].disabled::after {
-  border-color: var(--checkbox-border-disabled);
+  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(--checkbox-label-disabled);
+  color: var(--tds-checkbox-disabled);
   cursor: not-allowed;
 }
 .tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {
   display: none;
 }
 .tds-checkbox input[type=checkbox]:checked::after {
-  background-image: var(--checkbox-background-img);
-  background-color: var(--checkbox-border);
+  background-image: var(--tds-checkbox-background-img);
+  background-color: var(--tds-checkbox-interaction-01);
   background-repeat: no-repeat;
   background-position: center;
 }
 .tds-checkbox input[type=checkbox]:checked:hover::before {
-  background-color: var(--checkbox-border-hover);
-  opacity: var(--checkbox-background-opacity-hover);
+  background-color: var(--tds-checkbox-background-hover);
+  opacity: var(--tds-checkbox-background-opacity-hover);
 }
 .tds-checkbox input[type=checkbox]:checked:disabled:hover::before, .tds-checkbox input[type=checkbox]:checked:disabled::before, .tds-checkbox input[type=checkbox]:checked.disabled:hover::before, .tds-checkbox input[type=checkbox]:checked.disabled::before {
   display: block;
@@ -115,13 +108,13 @@
   border: 1px solid #b0b7c4;
 }
 .tds-checkbox input[type=checkbox]:checked:disabled::after, .tds-checkbox input[type=checkbox]:checked.disabled::after {
-  background-image: var(--checkbox-background-img-disabled);
-  background-color: var(--checkbox-fill-disabled);
-  color: var(--checkbox-border-disabled);
+  background-image: var(--tds-checkbox-background-img-disabled);
+  background-color: var(--tds-checkbox-interaction-02);
+  color: var(--tds-checkbox-color-disabled-after);
 }
 .tds-checkbox input[type=checkbox]:indeterminate::after {
-  background-image: var(--checkbox-background-img-indeterminate);
-  background-color: var(--checkbox-border);
+  background-image: var(--tds-checkbox-background-img-indeterminate);
+  background-color: var(--tds-checkbox-interaction-01);
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -134,7 +127,7 @@
   border: 1px solid #b0b7c4;
 }
 .tds-checkbox input[type=checkbox]:indeterminate:disabled::after {
-  background-image: var(--checkbox-background-img-indeterminate-disabled);
-  background-color: var(--checkbox-fill-disabled);
-  color: var(--checkbox-border-disabled);
+  background-image: var(--tds-checkbox-background-img-indeterminate-disabled);
+  background-color: var(--tds-checkbox-interaction-02);
+  color: var(--tds-checkbox-color-disabled-after);
 }

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

@@ -77,9 +77,10 @@
   z-index: -1;
 }
 .component .tds-chip-component input:focus-visible + label {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
   background-color: var(--tds-chips-background-focus);
 }
 .component .tds-chip-component input:checked + label {

package/dist/collection/components/divider/divider.css

@@ -5,12 +5,12 @@
   box-sizing: border-box;
 }
 .divider.horizontal {
-  background-color: var(--divider-color);
+  background-color: var(--tds-divider-background);
   width: 100%;
   height: 1px;
 }
 .divider.vertical {
-  background-color: var(--divider-color);
+  background-color: var(--tds-divider-background);
   height: 100%;
   width: 1px;
 }

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

@@ -1,36 +1,29 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
-  background-color: var(--dropdown-option-background);
+  background-color: var(--tds-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);
+  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(--dropdown-option-background-selected);
+  background-color: var(--tds-dropdown-option-background-selected);
 }
 :host .dropdown-option.disabled {
-  color: var(--dropdown-option-disabled);
+  color: var(--tds-dropdown-option-color-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;
+  outline: 2px solid var(--tds-dropdown-option-focus);
+  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline-offset: -2px;
 }
 :host .dropdown-option button {
   all: unset;
@@ -76,11 +69,11 @@
   padding: 7px 16px 8px;
 }
 :host .dropdown-option:hover {
-  background-color: var(--dropdown-option-background-hover);
+  border-bottom-color: var(--tds-dropdown-option-border-hover);
   cursor: pointer;
 }
 :host .dropdown-option:hover.disabled {
-  background-color: var(--dropdown-option-background);
+  border-bottom-color: var(--tds-dropdown-option-border-hover);
   cursor: not-allowed;
 }
 

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

@@ -6,7 +6,7 @@ import { convertToString } from "../../../utils/convertToString";
 export class TdsDropdownOption {
     constructor() {
         this.parentElement = null;
-        // @ts-ignore
+        // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
         this.componentWillRender = () => {
@@ -65,6 +65,7 @@ export class TdsDropdownOption {
         this.value = undefined;
         this.internalValue = undefined;
         this.disabled = false;
+        this.tdsAriaLabel = undefined;
         this.selected = false;
         this.multiselect = false;
         this.size = 'lg';
@@ -79,8 +80,13 @@ export class TdsDropdownOption {
     componentWillLoad() {
         this.internalValue = convertToString(this.value);
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel && !this.multiselect) {
+            console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h(Host, { key: '0964b9a046c2894b96480c133538337a56d048a2' }, h("div", { key: '1f28fde6080ad6c489c1ed4a7c449bb45ab85b99', class: `dropdown-option 
+        return (h(Host, { key: 'dd7f679d0a2c4970af173966e43109192eddbf66' }, h("div", { key: '97c7da4773c735874a9c338adc88cc2500a0c800', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -90,9 +96,9 @@ export class TdsDropdownOption {
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
-            }, disabled: this.disabled, checked: this.selected, class: {
+            }, disabled: this.disabled, checked: this.selected, tdsAriaLabel: this.tdsAriaLabel, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, "aria-label": this.tdsAriaLabel, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }
@@ -145,6 +151,23 @@ export class TdsDropdownOption {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label attribute for the option"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }