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

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   align-items: center;
   position: relative;
@@ -6,9 +9,13 @@
 
 .tds-checkbox {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-checkbox-text);
+  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;
@@ -30,7 +37,7 @@
   align-self: flex-start;
 }
 .tds-checkbox input[type=checkbox] + label {
-  color: var(--tds-checkbox-color);
+  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);
@@ -52,15 +59,15 @@
   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 {
-  border: 1px solid var(--tds-checkbox-interaction-01);
-  background-color: var(--tds-checkbox-interaction-02);
+  border: 1px solid var(--checkbox-border);
+  background-color: var(--checkbox-fill);
   width: 16px;
   height: 16px;
   left: 4px;
@@ -68,36 +75,36 @@
   border-radius: 2px;
 }
 .tds-checkbox input[type=checkbox]:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  background-color: var(--checkbox-border-hover);
+  opacity: var(--checkbox-background-opacity-hover);
 }
 .tds-checkbox input[type=checkbox]:focus::before {
-  background-color: var(--tds-checkbox-background-focus);
-  opacity: var(--tds-checkbox-background-opacity-focus);
+  background-color: var(--checkbox-border-focus);
+  opacity: var(--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(--tds-checkbox-border-color-disabled-after);
+  border-color: var(--checkbox-border-disabled);
 }
 .tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
-  color: var(--tds-grey-600);
+  color: var(--checkbox-label-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(--tds-checkbox-background-img);
-  background-color: var(--tds-checkbox-interaction-01);
+  background-image: var(--checkbox-background-img);
+  background-color: var(--checkbox-border);
   background-repeat: no-repeat;
   background-position: center;
 }
 .tds-checkbox input[type=checkbox]:checked:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  background-color: var(--checkbox-border-hover);
+  opacity: var(--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;
@@ -108,13 +115,13 @@
   border: 1px solid #b0b7c4;
 }
 .tds-checkbox input[type=checkbox]:checked:disabled::after, .tds-checkbox input[type=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);
+  background-image: var(--checkbox-background-img-disabled);
+  background-color: var(--checkbox-fill-disabled);
+  color: var(--checkbox-border-disabled);
 }
 .tds-checkbox input[type=checkbox]:indeterminate::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate);
-  background-color: var(--tds-checkbox-interaction-01);
+  background-image: var(--checkbox-background-img-indeterminate);
+  background-color: var(--checkbox-border);
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -127,7 +134,7 @@
   border: 1px solid #b0b7c4;
 }
 .tds-checkbox input[type=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);
+  background-image: var(--checkbox-background-img-indeterminate-disabled);
+  background-color: var(--checkbox-fill-disabled);
+  color: var(--checkbox-border-disabled);
 }

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 {
@@ -78,7 +78,8 @@
 }
 .component .tds-chip-component input:focus-visible + label {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  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/divider/divider.css

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

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

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