@scania/tegel 1.1.0 → 1.3.0

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

@@ -7,9 +7,10 @@
   color: var(--tds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-[role=listitem]:focus-visible {
+[role=listitem] ::slotted(*:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
+  outline-offset: 0;
 }
 [role=listitem].current ::slotted(*),
 [role=listitem] [aria-current=page] ::slotted(*) {
@@ -22,7 +23,7 @@
   text-decoration: none;
   cursor: not-allowed;
 }
-[role=listitem] ::slotted(*)::after {
+[role=listitem]::after {
   content: "›";
   color: var(--tds-breadcrumb-separator-color);
   margin-right: 4px;
@@ -32,6 +33,6 @@
   height: 8px;
 }
 
-:host(:last-of-type) ::slotted(*)::after {
+:host(.last) [role=listitem]::after {
   display: none;
 }

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -4,6 +4,8 @@ import { h } from "@stencil/core";
  */
 export class TdsBreadcrumbs {
   render() {
+    var _a;
+    (_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
     return (h("nav", null, h("div", { role: "list", class: 'tds-breadcrumb' }, h("slot", null))));
   }
   static get is() { return "tds-breadcrumbs"; }
@@ -18,5 +20,5 @@ export class TdsBreadcrumbs {
       "$": ["breadcrumbs.css"]
     };
   }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "host"; }
 }

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

@@ -288,7 +288,6 @@ button.primary.icon {
   color: var(--tds-btn-icon-primary-fill);
   fill: var(--tds-btn-icon-primary-color);
   color: var(--tds-btn-icon-primary-color);
-  font-size: 16px;
 }
 button.primary:hover {
   background: var(--tds-btn-primary-background-hover);
@@ -347,7 +346,6 @@ button.secondary.icon {
   color: var(--tds-btn-icon-secondary-fill);
   fill: var(--tds-btn-icon-secondary-color);
   color: var(--tds-btn-icon-secondary-color);
-  font-size: 16px;
 }
 button.secondary:hover {
   background: var(--tds-btn-secondary-background-hover);
@@ -406,7 +404,6 @@ button.ghost.icon {
   color: var(--tds-btn-icon-ghost-fill);
   fill: var(--tds-btn-icon-ghost-color);
   color: var(--tds-btn-icon-ghost-color);
-  font-size: 16px;
 }
 button.ghost:hover {
   background: var(--tds-btn-ghost-background-hover);
@@ -465,7 +462,6 @@ button.danger.icon {
   color: var(--tds-btn-icon-danger-fill);
   fill: var(--tds-btn-icon-danger-color);
   color: var(--tds-btn-icon-danger-color);
-  font-size: 16px;
 }
 button.danger:hover {
   background: var(--tds-btn-danger-background-hover);

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

@@ -111,4 +111,23 @@
   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(--tds-checkbox-background-img-indeterminate);
+  background-color: var(--tds-checkbox-interaction-01);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.tds-checkbox input[type=checkbox]:indeterminate:disabled:hover::before, .tds-checkbox input[type=checkbox]:indeterminate:disabled::before {
+  display: block;
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  top: 4px;
+  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);
 }

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

@@ -7,9 +7,11 @@ export class TdsCheckbox {
   constructor() {
     this.handleChange = () => {
       this.checked = !this.checked;
+      this.indeterminate = false;
       this.tdsChange.emit({
         checkboxId: this.checkboxId,
         checked: this.checked,
+        indeterminate: this.indeterminate,
         value: this.value,
       });
     };
@@ -18,16 +20,21 @@ export class TdsCheckbox {
     this.disabled = false;
     this.required = false;
     this.checked = false;
+    this.indeterminate = false;
     this.value = undefined;
   }
   /** Toggles the checked value of the component. */
   async toggleCheckbox() {
     this.checked = !this.checked;
+    this.indeterminate = false;
     return {
       checkboxId: this.checkboxId,
       checked: this.checked,
     };
   }
+  handleIndeterminateState() {
+    this.inputElement.indeterminate = this.indeterminate;
+  }
   /** Set the input as focus when clicking the component */
   handleFocus(event) {
     this.tdsFocus.emit(event);
@@ -37,9 +44,12 @@ export class TdsCheckbox {
     this.tdsBlur.emit(event);
   }
   render() {
-    return (h("div", { class: "tds-checkbox" }, h("input", { "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), 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: () => {
+    return (h("div", { class: "tds-checkbox" }, h("input", {
+      // eslint-disable-next-line no-return-assign
+      ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), 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", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
+      }
+    }), h("label", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
   }
   static get is() { return "tds-checkbox"; }
   static get encapsulation() { return "scoped"; }
@@ -128,7 +138,7 @@ export class TdsCheckbox {
       },
       "checked": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -144,6 +154,24 @@ export class TdsCheckbox {
         "reflect": true,
         "defaultValue": "false"
       },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Checkbox as indeterminate"
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "value": {
         "type": "string",
         "mutable": false,
@@ -175,8 +203,8 @@ export class TdsCheckbox {
           "text": "Sends unique Checkbox identifier and checked status when it is checked/unchecked."
         },
         "complexType": {
-          "original": "{\n    checkboxId: string;\n    checked: boolean;\n    value?: string;\n  }",
-          "resolved": "{ checkboxId: string; checked: boolean; value?: string; }",
+          "original": "{\n    checkboxId: string;\n    checked: boolean;\n    indeterminate: boolean;\n    value?: string;\n  }",
+          "resolved": "{ checkboxId: string; checked: boolean; indeterminate: boolean; value?: string; }",
           "references": {}
         }
       }, {
@@ -243,4 +271,10 @@ export class TdsCheckbox {
     };
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "indeterminate",
+        "methodName": "handleIndeterminateState"
+      }];
+  }
 }

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

@@ -37,6 +37,16 @@ export default {
         defaultValue: { summary: false },
       },
     },
+    indeterminate: {
+      name: 'Indeterminate',
+      description: 'Sets the checkbox in a intederminte state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
     disabled: {
       name: 'Disabled',
       description: 'Disables the Checkbox.',
@@ -52,29 +62,32 @@ export default {
     label: 'Label',
     checked: false,
     disabled: false,
+    indeterminate: false,
   },
 };
-const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
+const Template = ({ label, checked, disabled, indeterminate }) => formatHtmlPreview(`
     <tds-checkbox
         ${checked ? 'checked' : ''}
         ${disabled ? 'disabled' : ''}
-        value="checkbox-value"
+        ${indeterminate ? 'indeterminate' : ''}
+        value="checkbox-1"
+        checkbox-id="first-checkbox"
         >
         <div slot="label">${label}</div>
     </tds-checkbox>
     
     <!-- Script tag with event listener for demo purposes. -->
     <script>
-        checkboxElement = document.querySelector('tds-checkbox')
-        checkboxElement.addEventListener('tdsChange', (event) => {
-            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)
-        })
-        checkboxElement.addEventListener('tdsFocus',(event) => {
-          console.log(event)
-        })
-        checkboxElement.addEventListener('tdsBlur',(event) => {
-          console.log(event)
-        })
+      checkboxElement = document.querySelector("tds-checkbox");
+      checkboxElement.addEventListener("tdsChange", (event) => {
+        console.log("Checkbox with id: ", event.detail.checkboxId, " is ", event.detail.checked);
+      });
+      checkboxElement.addEventListener("tdsFocus", (event) => {
+        console.log(event);
+      });
+      checkboxElement.addEventListener("tdsBlur", (event) => {
+        console.log(event);
+      });
     </script>
   `);
 export const Default = Template.bind({});

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

@@ -64,7 +64,7 @@ export default {
     },
     defaultValue: {
       name: 'Default value',
-      description: 'Sets max value. Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
+      description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
       control: {
         type: 'radio',
       },
@@ -84,7 +84,7 @@ export default {
       },
     },
     maxValue: {
-      description: 'Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
+      description: 'Sets max value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
       name: 'Max value',
       control: {
         type: 'text',
@@ -183,14 +183,14 @@ const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, minVal
     </style>
 
   <div class="demo-wrapper">
-
+        
     <tds-datetime
       id="datetime"
       ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
       type="${typeLookup[type]}"      
       ${minValue ? `min=${minValue}` : ''}
-      ${maxValue ? `min=${maxValue}` : ''}
+      ${maxValue ? `max=${maxValue}` : ''}
       size="${sizeLookup[size]}"
       state="${stateLookup[state]}"
       ${disabled ? 'disabled' : ''}

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

@@ -1,14 +1,17 @@
 :host {
+  box-sizing: border-box;
   display: block;
   background-color: var(--tds-dropdown-option-background);
 }
+:host * {
+  box-sizing: border-box;
+}
 :host .dropdown-option {
-  display: flex;
-  align-items: center;
   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;
 }
 :host .dropdown-option.selected {
   background-color: var(--tds-dropdown-option-background-selected);
@@ -16,19 +19,22 @@
 :host .dropdown-option.disabled {
   color: var(--tds-dropdown-option-color-disabled);
 }
-:host .dropdown-option.lg {
-  height: 47px;
-}
-:host .dropdown-option.md {
-  height: 47px;
-}
-:host .dropdown-option.sm {
-  height: 39px;
+:host .dropdown-option button:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
 }
 :host .dropdown-option button {
   all: unset;
   width: 100%;
-  height: 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 .single-select {
   display: flex;
@@ -36,10 +42,6 @@
   justify-content: space-between;
   padding: 0 16px;
 }
-:host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
-}
 :host .dropdown-option .multiselect {
   width: 100%;
   height: 100%;
@@ -48,7 +50,15 @@
   display: flex;
   height: 100%;
   width: 100%;
-  padding: 0 16px;
+}
+: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:hover {
   background-color: var(--tds-dropdown-option-background-hover);

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

@@ -72,9 +72,11 @@ export class TdsDropdownOption {
         }
       } }, h("tds-checkbox", { onTdsChange: (event) => {
         this.handleMultiselect(event);
-      }, disabled: this.disabled, checked: this.selected }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+      }, disabled: this.disabled, checked: this.selected, class: {
+        [this.size]: true,
+      } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
         this.handleSingleSelect();
-      }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
+      }, 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" })))))));
   }
   static get is() { return "tds-dropdown-option"; }
   static get encapsulation() { return "shadow"; }

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

@@ -17,6 +17,7 @@
 }
 :host button.placeholder {
   color: var(--tds-dropdown-placeholder-color);
+  line-height: 1.3;
 }
 :host button.value {
   color: var(--tds-dropdown-value-color);
@@ -41,6 +42,18 @@
 :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;
@@ -111,6 +124,21 @@
   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;

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

@@ -60,6 +60,9 @@ export class TdsDropdown {
     };
     this.getValue = () => {
       const labels = this.getSelectedChildrenLabels();
+      if (!labels) {
+        return '';
+      }
       return this.filter ? labels === null || labels === void 0 ? void 0 : labels.join(', ') : labels === null || labels === void 0 ? void 0 : labels.toString();
     };
     this.setValueAttribute = () => {
@@ -294,8 +297,12 @@ export class TdsDropdown {
   render() {
     var _a, _b, _c, _d;
     appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-    return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: `filter ${this.filterFocus ? 'focus' : ''}
-            ${this.disabled ? 'disabled' : ''}` }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+    return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        filter: true,
+        focus: this.filterFocus,
+        disabled: this.disabled,
+        error: this.error,
+      } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
@@ -315,6 +322,9 @@ export class TdsDropdown {
       }
     })), h("tds-icon", { onClick: () => {
         this.open = !this.open;
+        if (this.open) {
+          this.inputElement.focus();
+        }
       }, class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => {
         this.open = !this.open;
       }, onKeyDown: (event) => {

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

@@ -1,7 +1,7 @@
 [role=listitem] ::slotted(a),
 [role=listitem] ::slotted(button) {
-  font: var(--tds-headline-06);
-  letter-spacing: var(--tds-headline-06-ls);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-footer-main-links);
   opacity: var(--tds-footer-main-links-opacity);
   text-decoration: none;
@@ -17,11 +17,9 @@
 }
 [role=listitem].top-part-child ::slotted(a),
 [role=listitem].top-part-child ::slotted(button) {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-footer-top-links);
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 18px;
 }
 [role=listitem].top-part-child ::slotted(a:focus-visible),
 [role=listitem].top-part-child ::slotted(button:focus-visible) {