@scania/tegel 0.0.8 → 0.0.9

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

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { appendChildElement, appendHiddenInput, findNextFocusableItem, findPreviousFocusableItem, } from '../../utils/utils';
-export class SddsDropdownV2 {
+export class TdsDropdownV2 {
   constructor() {
     this.connectedCallback = () => {
       if (!this.options) {
@@ -49,7 +49,7 @@ export class SddsDropdownV2 {
       return (_b = this.selection) === null || _b === void 0 ? void 0 : _b.map((item) => item.label).join(', ');
     };
     this.handleFilter = (event) => {
-      this.sddsInput.emit(event);
+      this.tdsInput.emit(event);
       const query = event.target.value.toLowerCase();
       /* Check if the query is empty, and if so show all options */
       if (query === '') {
@@ -73,14 +73,14 @@ export class SddsDropdownV2 {
       }
     };
     this.handleFocus = (event) => {
-      this.sddsFocus.emit(event);
+      this.tdsFocus.emit(event);
     };
     this.handleBlur = (event) => {
-      this.sddsBlur.emit(event);
+      this.tdsBlur.emit(event);
     };
     this.handleChange = () => {
       var _a, _b;
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         name: this.name,
         value: (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((item) => item.value).toString()) !== null && _b !== void 0 ? _b : null,
       });
@@ -105,13 +105,13 @@ export class SddsDropdownV2 {
     this.filterResult = undefined;
     this.filterFocus = undefined;
   }
-  /** Method that resets the dropdown. */
+  /** Method that resets the Dropdown. */
   async reset() {
     this.children.forEach((element) => element.setSelected(false));
     this.selection = null;
     this.handleChange();
   }
-  /** Method for setting the value of the dropdown. */
+  /** Method for setting the value of the Dropdown. */
   async setValue(newValue, newValueLabel) {
     if (this.multiselect) {
       this.selection = this.selection
@@ -130,7 +130,7 @@ export class SddsDropdownV2 {
     this.handleChange();
     return this.selection;
   }
-  /** Method for removing a selected value in the dropdown. */
+  /** Method for removing a selected value in the Dropdown. */
   async removeValue(oldValue) {
     if (this.multiselect) {
       this.children.forEach((element) => {
@@ -146,7 +146,7 @@ export class SddsDropdownV2 {
     this.handleChange();
     return this.selection;
   }
-  /** Method for closing the dropdown. */
+  /** Method for closing the Dropdown. */
   async close() {
     this.open = false;
   }
@@ -167,7 +167,7 @@ export class SddsDropdownV2 {
     }
     if (event.key === 'ArrowDown') {
       /* Get the index of the currently focus index, if there is no
-      nextElementSibling return the index for the first child in our dropdown.  */
+      nextElementSibling return the index for the first child in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.nextElementSibling)
         : 0;
@@ -176,7 +176,7 @@ export class SddsDropdownV2 {
     }
     else if (event.key === 'ArrowUp') {
       /* Get the index of the currently focus index, if there is no
-      previousElementSibling return the index for the first last in our dropdown.  */
+      previousElementSibling return the index for the first last in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.previousElementSibling)
         : 0;
@@ -187,7 +187,7 @@ export class SddsDropdownV2 {
       this.open = false;
     }
   }
-  // If the dropdown gets closed this sets the value of the drodpown to the current selection labels or null if no selection is made.
+  // If the Dropdown gets closed this sets the value of the drodpown to the current selection labels or null if no selection is made.
   handleOpenState() {
     var _a, _b;
     if (this.filter && this.multiselect) {
@@ -209,15 +209,15 @@ export class SddsDropdownV2 {
     if (this.options) {
       let id = 0;
       this.options.forEach((option) => {
-        appendChildElement(this.host, 'sdds-dropdown-option-v2', [
+        appendChildElement(this.host, 'tds-dropdown-option-v2', [
           { key: 'value', value: option.value },
           { key: 'disabled', value: option.disabled.toString() },
         ], option.label, `id${id++}`);
       });
-      this.children = Array.from(this.host.children).filter((element) => element.tagName === 'SDDS-DROPDOWN-OPTION-V2');
+      this.children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION-V2');
     }
     appendHiddenInput(this.host, this.name, (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((item) => item.value).toString(), this.disabled);
-    return (h(Host, { role: "select", class: `${this.modeVariant ? `sdds-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' : ''}
+    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: `
                     label-inside-as-placeholder
                     ${this.size}
@@ -236,7 +236,7 @@ export class SddsDropdownV2 {
           this.open = false;
         }
       }
-    })), h("sdds-icon", { onClick: () => {
+    })), h("tds-icon", { onClick: () => {
         this.open = !this.open;
       }, class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => {
         this.open = !this.open;
@@ -251,13 +251,13 @@ export class SddsDropdownV2 {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.selection) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("sdds-icon", { class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.selection) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.openDirection}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", null), this.filterResult === 0 && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("sdds-icon", { name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", null), this.filterResult === 0 && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
   }
-  static get is() { return "sdds-dropdown-v2"; }
+  static get is() { return "tds-dropdown-v2"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -283,7 +283,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Name for the dropdowns input element."
+          "text": "Name for the Dropdowns input element."
         },
         "attribute": "name",
         "reflect": false
@@ -300,7 +300,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the dropdown in a disabled state"
+          "text": "Sets the Dropdown in a disabled state"
         },
         "attribute": "disabled",
         "reflect": false,
@@ -318,7 +318,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Helper text for the dropdown."
+          "text": "Helper text for the Dropdown."
         },
         "attribute": "helper",
         "reflect": false
@@ -335,7 +335,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label text for the dropdown."
+          "text": "Label text for the Dropdown."
         },
         "attribute": "label",
         "reflect": false
@@ -387,7 +387,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The direction the dropdown should open, auto if not specified."
+          "text": "The direction the Dropdown should open, auto if not specified."
         },
         "attribute": "open-direction",
         "reflect": false,
@@ -405,7 +405,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placeholder text for the dropdown."
+          "text": "Placeholder text for the Dropdown."
         },
         "attribute": "placeholder",
         "reflect": false
@@ -422,7 +422,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The size of the dropdown."
+          "text": "The size of the Dropdown."
         },
         "attribute": "size",
         "reflect": false,
@@ -440,7 +440,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the dropdown in an error state"
+          "text": "Sets the Dropdown in an error state"
         },
         "attribute": "error",
         "reflect": false,
@@ -458,7 +458,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Enables multiselect in the dropdown."
+          "text": "Enables multiselect in the Dropdown."
         },
         "attribute": "multiselect",
         "reflect": false,
@@ -476,7 +476,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Enables filtration in the dropdown."
+          "text": "Enables filtration in the Dropdown."
         },
         "attribute": "filter",
         "reflect": false,
@@ -512,7 +512,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Default value selected in the dropdown."
+          "text": "Default value selected in the Dropdown."
         },
         "attribute": "default-value",
         "reflect": false
@@ -533,7 +533,7 @@ export class SddsDropdownV2 {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Populate the dropdown via a JSON array"
+          "text": "Populate the Dropdown via a JSON array"
         }
       }
     };
@@ -548,14 +548,14 @@ export class SddsDropdownV2 {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Change event for the dropdown."
+          "text": "Change event for the Dropdown."
         },
         "complexType": {
           "original": "{\n    name: string;\n    value: string;\n  }",
@@ -563,14 +563,14 @@ export class SddsDropdownV2 {
           "references": {}
         }
       }, {
-        "method": "sddsFocus",
-        "name": "sddsFocus",
+        "method": "tdsFocus",
+        "name": "tdsFocus",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Focus event for the dropdown."
+          "text": "Focus event for the Dropdown."
         },
         "complexType": {
           "original": "FocusEvent",
@@ -582,14 +582,14 @@ export class SddsDropdownV2 {
           }
         }
       }, {
-        "method": "sddsBlur",
-        "name": "sddsBlur",
+        "method": "tdsBlur",
+        "name": "tdsBlur",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Blur event for the dropdown."
+          "text": "Blur event for the Dropdown."
         },
         "complexType": {
           "original": "FocusEvent",
@@ -601,14 +601,14 @@ export class SddsDropdownV2 {
           }
         }
       }, {
-        "method": "sddsInput",
-        "name": "sddsInput",
+        "method": "tdsInput",
+        "name": "tdsInput",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Input event for the dropdown."
+          "text": "Input event for the Dropdown."
         },
         "complexType": {
           "original": "InputEvent",
@@ -635,7 +635,7 @@ export class SddsDropdownV2 {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Method that resets the dropdown.",
+          "text": "Method that resets the Dropdown.",
           "tags": []
         }
       },
@@ -653,14 +653,14 @@ export class SddsDropdownV2 {
             "Promise": {
               "location": "global"
             },
-            "HTMLSddsDropdownOptionV2Element": {
+            "HTMLTdsDropdownOptionV2Element": {
               "location": "global"
             }
           },
           "return": "Promise<{ value: string; label: string; }[]>"
         },
         "docs": {
-          "text": "Method for setting the value of the dropdown.",
+          "text": "Method for setting the value of the Dropdown.",
           "tags": []
         }
       },
@@ -679,7 +679,7 @@ export class SddsDropdownV2 {
           "return": "Promise<{ value: string; label: string; }[]>"
         },
         "docs": {
-          "text": "Method for removing a selected value in the dropdown.",
+          "text": "Method for removing a selected value in the Dropdown.",
           "tags": []
         }
       },
@@ -695,7 +695,7 @@ export class SddsDropdownV2 {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Method for closing the dropdown.",
+          "text": "Method for closing the Dropdown.",
           "tags": []
         }
       }

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

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+}
+:host .footer-top-title {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  opacity: var(--tds-footer-top-title-opacity);
+  color: var(--tds-footer-top-links);
+  padding-bottom: 8px;
+}
+:host button.footer-top-title-button {
+  display: none;
+  border: none;
+  width: 100%;
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-footer-top-links);
+  background-color: transparent;
+  text-align: left;
+  padding: 19px 24px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--tds-footer-top-divider);
+}
+:host button.footer-top-title-button.expanded {
+  border-bottom: none;
+}
+:host button.footer-top-title-button.expanded tds-icon {
+  transform: rotateZ(180deg);
+}
+:host button.footer-top-title-button:hover {
+  cursor: pointer;
+}
+:host button.footer-top-title-button:active {
+  background-color: var(--tds-footer-top-button-active);
+}
+:host button.footer-top-title-button:focus-visible {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host button.footer-top-title-button tds-icon {
+  transition: transform 0.2s ease-in-out;
+}
+:host [role=list] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 8px;
+}
+:host [role=list].left, :host [role=list].right {
+  gap: 24px;
+}
+:host [role=list].top-part-child {
+  flex-direction: column;
+}
+@media all and (max-width: 992px) {
+  :host [role=list].left:not(.top-part-child) {
+    flex-direction: column;
+  }
+  :host [role=list].left:not(.top-part-child).left, :host [role=list].left:not(.top-part-child).right {
+    gap: 8px;
+  }
+  :host [role=list].top-part-child.closed {
+    display: none;
+  }
+  :host [role=list].top-part-child {
+    gap: 0;
+  }
+  :host .footer-top-title {
+    display: none;
+  }
+  :host button.footer-top-title-button {
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/collection/components/footer/footer-group/footer-group.js

@@ -0,0 +1,64 @@
+import { Host, h } from '@stencil/core';
+export class TdsFooterGroup {
+  constructor() {
+    /** If the group is placed in the main part of the Footer,
+     * it can have either left or right as a slot position otherwise undefined. */
+    this.slotPosition = null;
+    /** Indicates if a group is part of the top part of the Footer. */
+    this.topPartGroup = false;
+    this.titleText = undefined;
+    this.open = false;
+  }
+  connectedCallback() {
+    this.topPartGroup = this.host.parentElement.slot === 'top';
+    if (!this.topPartGroup) {
+      this.slotPosition = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';
+    }
+  }
+  render() {
+    return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
+        this.open = !this.open;
+      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+            ${this.topPartGroup ? 'top-part-child' : ''}
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
+  }
+  static get is() { return "tds-footer-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["footer-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["footer-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titleText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title text for the link group, only valid on top part of Footer."
+        },
+        "attribute": "title-text",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,45 @@
+[role=listitem] ::slotted(*) {
+  font: var(--tds-headline-06);
+  letter-spacing: var(--tds-headline-06-ls);
+  color: var(--tds-footer-main-links);
+  opacity: var(--tds-footer-main-links-opacity);
+  text-decoration: none;
+}
+[role=listitem] ::slotted(*:focus-visible) {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+[role=listitem] ::slotted(*:hover) {
+  text-decoration: underline;
+}
+[role=listitem].top-part-child ::slotted(*) {
+  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(*:focus-visible) {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+
+@media all and (max-width: 992px) {
+  [role=listitem].top-part-child {
+    border-bottom: 1px solid var(--tds-footer-top-divider);
+  }
+  [role=listitem].top-part-child ::slotted(*) {
+    display: block;
+    height: 100%;
+    padding: 19px 40px;
+    font-weight: normal;
+  }
+  [role=listitem].top-part-child ::slotted(*:hover) {
+    text-decoration: underline;
+    background-color: var(--tds-footer-top-links-background-hover);
+  }
+  [role=listitem].top-part-child ::slotted(*:focus-visible) {
+    outline: 2px solid var(--tds-blue-400);
+    outline-offset: -2px;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core';
+export class TdsFooterItem {
+  constructor() {
+    this.parentIsTopPart = false;
+  }
+  connectedCallback() {
+    this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
+  }
+  static get is() { return "tds-footer-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["footer-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["footer-item.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+}
+:host .footer-top {
+  background-color: var(--tds-footer-top-background);
+  padding: 40px;
+}
+:host .footer-top ::slotted(*) {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  row-gap: 40px;
+  width: 100%;
+}
+:host .footer-main {
+  background-color: var(--tds-footer-main-background);
+  padding: 0 40px;
+}
+:host .footer-main-top {
+  padding: 40px 0;
+  display: flex;
+  justify-content: space-between;
+}
+:host .footer-bottom-right ::slotted(*),
+:host .footer-bottom-left ::slotted(*) {
+  display: flex;
+  column-gap: 24px;
+}
+:host .footer-main-bottom {
+  padding: 40px 0;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--tds-footer-main-divider);
+}
+:host .footer-main-bottom small.copyright {
+  margin: 0;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-footer-main-copyright);
+}
+:host .footer-main-bottom .brand {
+  background-image: var(--tds-background-image-scania-wordmark-white-svg);
+  background-repeat: no-repeat;
+  background-size: 117px;
+  background-position: right;
+  width: 117px;
+  height: 20px;
+}
+:host .footer-main-bottom .brand p {
+  color: transparent;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  visibility: hidden;
+}
+@media all and (max-width: 992px) {
+  :host .footer-top {
+    padding: 0;
+  }
+  :host .footer-top ::slotted(*) {
+    display: block;
+    width: 100%;
+  }
+  :host .footer-main {
+    padding: 0 24px;
+  }
+  :host .footer-main-top {
+    flex-direction: column;
+    row-gap: 48px;
+    padding: 24px 0;
+  }
+  :host .footer-bottom-left ::slotted(*) {
+    flex-direction: column;
+    gap: 8px;
+  }
+  :host .footer-main-bottom {
+    flex-direction: column;
+    padding-bottom: 32px;
+  }
+  :host .footer-main-bottom p.copyright {
+    padding-bottom: 96px;
+  }
+  :host .footer-main-bottom .brand {
+    width: 100%;
+  }
+}