@scania/tegel 1.3.3 → 1.5.0

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

@@ -3,22 +3,22 @@ import { h } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For the breadcrumb elements.
  */
 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"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["breadcrumbs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["breadcrumbs.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
+    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"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumbs.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -23,25 +23,24 @@
   --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: rgb(0 0 0 / 48%);
+  --tds-btn-secondary-border-color: var(--tds-black-48);
   --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-color-active: var(--tds-black);
-  --tds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
+  --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-outline-color: rgb(0 0 0 / 38%);
+  --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: rgb(0 0 0 / 38%);
-  --tds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-secondary-color-disabled: var(--tds-black-38);
+  --tds-btn-secondary-border-color-disabled: var(--tds-black-38);
   --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-black);
-  --tds-btn-icon-secondary-fill-active: var(--tds-black);
+  --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
   /* ICON */
   --tds-btn-icon-secondary-fill: var(--tds-grey-958);
   --tds-btn-icon-secondary-color: var(--tds-grey-958);
@@ -49,24 +48,23 @@
   --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
   --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
   /* ICON HOVER */
-  --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
   --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-border-color: transparent;
   --tds-btn-ghost-background-hover: transparent;
   --tds-btn-ghost-color-hover: var(--tds-black);
-  --tds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
-  --tds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
+  --tds-btn-ghost-border-color-hover: var(--tds-black-48);
+  --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: rgb(0 0 0 / 87%);
+  --tds-btn-ghost-border-color-active: var(--tds-black-87);
   --tds-btn-ghost-background-focus: transparent;
   --tds-btn-ghost-color-focus: var(--tds-black);
-  --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
-  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-border-color-focus: var(--tds-blue-400);
+  --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
   --tds-btn-ghost-background-disabled: transparent;
-  --tds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-ghost-color-disabled: var(--tds-black-38);
   --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-ghost-fill: var(--tds-grey-958);
@@ -87,7 +85,7 @@
   --tds-btn-danger-background-disabled-primary: var(--tds-grey-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: rgb(0 0 0 / 38%);
+  --tds-btn-danger-color-disabled: var(--tds-black-38);
   --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-danger-fill: var(--tds-grey-50);
@@ -114,27 +112,27 @@
   --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: var(--tds-btn-primary-background-disabled-primary);
-  --tds-btn-primary-color-disabled: var(--tds-grey-600);
+  --tds-btn-primary-color-disabled: var(--tds-white-38);
   /* 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);
+  --tds-btn-secondary-border-color: var(--tds-white-48);
   --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-color-active: var(--tds-white);
-  --tds-btn-secondary-border-color-active: var(--tds-white);
+  --tds-btn-secondary-border-color-active: var(--tds-white-87);
   --tds-btn-secondary-background-focus: transparent;
   --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-outline-color: var(--tds-white);
   --tds-btn-secondary-background-disabled: transparent;
-  --tds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
-  --tds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-secondary-color-disabled: var(--tds-white-38);
+  --tds-btn-secondary-border-color-disabled: var(--tds-white-38);
   --tds-btn-icon-secondary-color-focus: var(--tds-white);
   --tds-btn-icon-secondary-fill-focus: var(--tds-white);
   /* ICON */
@@ -145,17 +143,17 @@
   --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: rgb(255 255 255 / 41%);
-  --tds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
+  --tds-btn-ghost-border-color-hover: var(--tds-white-48);
+  --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: rgb(255 255 255 / 87%);
+  --tds-btn-ghost-border-color-active: var(--tds-white-87);
   --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-outline-color-focus: var(--tds-blue-300);
   --tds-btn-ghost-background-disabled: transparent;
-  --tds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
+  --tds-btn-ghost-color-disabled: var(--tds-white-38);
   --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-ghost-fill: var(--tds-grey-50);
@@ -176,7 +174,7 @@
   --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: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-danger-color-disabled: var(--tds-white-38);
   --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-danger-fill: var(--tds-white);

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

@@ -5,182 +5,182 @@ import hasSlot from "../../utils/hasSlot";
  * @slot icon - Slot used to display an Icon in the Button.
  */
 export class TdsButton {
-  constructor() {
-    this.text = undefined;
-    this.type = 'button';
-    this.variant = 'primary';
-    this.size = 'lg';
-    this.disabled = false;
-    this.fullbleed = false;
-    this.modeVariant = null;
-    this.onlyIcon = false;
-  }
-  render() {
-    const hasLabelSlot = hasSlot('label', this.host);
-    const hasIconSlot = hasSlot('icon', this.host);
-    if (!this.text && !hasLabelSlot) {
-      this.onlyIcon = true;
+    constructor() {
+        this.text = undefined;
+        this.type = 'button';
+        this.variant = 'primary';
+        this.size = 'lg';
+        this.disabled = false;
+        this.fullbleed = false;
+        this.modeVariant = null;
+        this.onlyIcon = false;
     }
-    return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { type: this.type, disabled: this.disabled, class: {
-        'primary': this.variant === 'primary',
-        'secondary': this.variant === 'secondary',
-        'ghost': this.variant === 'ghost',
-        'danger': this.variant === 'danger',
-        'lg': this.size === 'lg',
-        'md': this.size === 'md',
-        'sm': this.size === 'sm',
-        'xs': this.size === 'xs',
-        'disabled': this.disabled,
-        'fullbleed': this.fullbleed,
-        'icon': hasIconSlot,
-        'only-icon': this.onlyIcon,
-      } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { name: "label" }), hasIconSlot && h("slot", { name: "icon" }))));
-  }
-  static get is() { return "tds-button"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text displayed inside the Button"
-        },
-        "attribute": "text",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'button' | 'submit' | 'reset'",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Button's type"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'button'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary' | 'ghost' | 'danger'",
-          "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variation of Button's design"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of a Button"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Control for disabled state of a component"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "fullbleed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When enabled, the Button takes 100% width"
-        },
-        "attribute": "fullbleed",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the mode variant of the Button."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "onlyIcon": {}
-    };
-  }
-  static get elementRef() { return "host"; }
+    render() {
+        const hasLabelSlot = hasSlot('label', this.host);
+        const hasIconSlot = hasSlot('icon', this.host);
+        if (!this.text && !hasLabelSlot) {
+            this.onlyIcon = true;
+        }
+        return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { type: this.type, disabled: this.disabled, class: {
+                'primary': this.variant === 'primary',
+                'secondary': this.variant === 'secondary',
+                'ghost': this.variant === 'ghost',
+                'danger': this.variant === 'danger',
+                'lg': this.size === 'lg',
+                'md': this.size === 'md',
+                'sm': this.size === 'sm',
+                'xs': this.size === 'xs',
+                'disabled': this.disabled,
+                'fullbleed': this.fullbleed,
+                'icon': hasIconSlot,
+                'only-icon': this.onlyIcon,
+            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { name: "label" }), hasIconSlot && h("slot", { name: "icon" }))));
+    }
+    static get is() { return "tds-button"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed inside the Button"
+                },
+                "attribute": "text",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button's type"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'ghost' | 'danger'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variation of Button's design"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of a Button"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'lg'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control for disabled state of a component"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fullbleed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, the Button takes 100% width"
+                },
+                "attribute": "fullbleed",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "modeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the mode variant of the Button."
+                },
+                "attribute": "mode-variant",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "onlyIcon": {}
+        };
+    }
+    static get elementRef() { return "host"; }
 }