@scania/tegel 0.0.34 → 0.0.52

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.css

@@ -0,0 +1,73 @@
+:host {
+  box-sizing: border-box;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host button {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-navigation-tabs-tab-color);
+  padding: 18px 0;
+  margin-right: 32px;
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+:host button.selected {
+  color: var(--sdds-navigation-tabs-tab-color-selected);
+}
+:host button.selected::after {
+  width: 100%;
+  background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);
+}
+:host button .label {
+  padding: 8px 4px;
+}
+:host button:focus-visible {
+  outline: none;
+}
+:host button:focus-visible .label {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host button:hover {
+  color: var(--sdds-navigation-tabs-tab-color-hover);
+  opacity: 1;
+}
+:host button:hover::after {
+  width: 100%;
+}
+:host button.disabled {
+  color: var(--sdds-navigation-tabs-tab-color-disabled);
+  pointer-events: none;
+}
+:host button.disabled .label {
+  opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);
+}
+:host button::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0;
+  margin-right: auto;
+  height: 2px;
+  background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);
+  transition: width 0.15s ease-in-out;
+  z-index: 1;
+}
+
+:host(.first) {
+  margin-left: 32px;
+}
+
+:host(.last) {
+  margin-right: 32px;
+}

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js

@@ -0,0 +1,64 @@
+import { Host, h } from '@stencil/core';
+export class SddsNavigationTabsButton {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
+         ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
+  }
+  static get is() { return "sdds-navigation-tabs-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-navigation-tabs-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-navigation-tabs-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the tab."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Marks the tab as the selected one."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-navigation-tabs-button.js.map

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-navigation-tabs-button.js","sourceRoot":"","sources":["../../../../../src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,wBAAwB;;oBAEP,KAAK;oBAGL,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;WACxC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ;QAEvB,WAAK,KAAK,EAAC,OAAO;UAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs-button',\n  styleUrl: 'sdds-navigation-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsNavigationTabsButton {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class={`${this.selected ? 'selected' : ''}\n         ${this.disabled ? 'disabled' : ''}`}\n          disabled={this.disabled}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.css

@@ -0,0 +1,73 @@
+:host {
+  box-sizing: border-box;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host a {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-navigation-tabs-tab-color);
+  padding: 18px 0;
+  margin-right: 32px;
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+:host a.selected {
+  color: var(--sdds-navigation-tabs-tab-color-selected);
+}
+:host a.selected::after {
+  width: 100%;
+  background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);
+}
+:host a .label {
+  padding: 8px 4px;
+}
+:host a:focus-visible {
+  outline: none;
+}
+:host a:focus-visible .label {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host a:hover {
+  color: var(--sdds-navigation-tabs-tab-color-hover);
+  opacity: 1;
+}
+:host a:hover::after {
+  width: 100%;
+}
+:host a.disabled {
+  color: var(--sdds-navigation-tabs-tab-color-disabled);
+  pointer-events: none;
+}
+:host a.disabled .label {
+  opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);
+}
+:host a::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0;
+  margin-right: auto;
+  height: 2px;
+  background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);
+  transition: width 0.15s ease-in-out;
+  z-index: 1;
+}
+
+:host(.first) {
+  margin-left: 32px;
+}
+
+:host(.last) {
+  margin-right: 32px;
+}

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.js

@@ -0,0 +1,122 @@
+import { Host, h } from '@stencil/core';
+export class SddsNavigationTabsLink {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("a", { class: `
+        ${this.selected ? 'selected' : ''}
+        ${this.disabled ? 'disabled' : ''}
+        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
+  }
+  static get is() { return "sdds-navigation-tabs-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-navigation-tabs-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-navigation-tabs-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the tab."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Marks the tab as the selected one."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href for the link"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where to open the linked URL"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "'noopener'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-navigation-tabs-link.js.map

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-navigation-tabs-link.js","sourceRoot":"","sources":["../../../../../src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,sBAAsB;;oBAEL,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG;QAEb,WAAK,KAAK,EAAC,OAAO;UAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs-link',\n  styleUrl: 'sdds-navigation-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsNavigationTabsLink {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -1,157 +1,76 @@
-.sdds-navigation-tabs {
+:host {
   box-sizing: border-box;
-  background-color: var(--sdds-navigation-tabs-background);
-  position: relative;
   display: flex;
-  /* tab */
-  /* tab states */
+  background-color: var(--sdds-inline-tabs-background);
+  position: relative;
 }
-.sdds-navigation-tabs * {
+:host * {
   box-sizing: border-box;
 }
-.sdds-navigation-tabs::after {
+:host::after {
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);
-  opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);
+  border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);
+  opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);
   left: 0;
   right: 0;
   bottom: 0;
   position: absolute;
 }
-.sdds-navigation-tabs-wrapper {
+:host .wrapper {
   display: flex;
   flex-wrap: nowrap;
+  white-space: nowrap;
   width: 100%;
   overflow-x: scroll;
   scrollbar-width: none;
 }
-.sdds-navigation-tabs-wrapper::-webkit-scrollbar {
+:host .wrapper::-webkit-scrollbar {
   display: none;
 }
-.sdds-navigation-tabs-forward {
-  cursor: pointer;
-  width: 48px;
-  height: 100%;
-  border: 0;
-  position: absolute;
+:host .scroll-right-button {
   right: 0;
-  top: 0;
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-.sdds-navigation-tabs-forward__show {
-  opacity: 1;
-  pointer-events: all;
+  z-index: 201;
 }
-.sdds-navigation-tabs-forward:hover {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
-  text-decoration: none;
-}
-.sdds-navigation-tabs-forward:active {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
-}
-.sdds-navigation-tabs-forward:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
+:host .scroll-left-button {
+  left: 0;
+  z-index: 201;
 }
-.sdds-navigation-tabs-back {
+:host .scroll-right-button,
+:host .scroll-left-button {
+  color: var(--sdds-folder-tabs-scroll-btn-color);
   cursor: pointer;
-  width: 48px;
-  height: 100%;
   border: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
-  display: flex;
+  width: 0;
+  background-color: var(--sdds-inline-tabs-scroll-btn-background);
+  display: none;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
+  position: sticky;
 }
-.sdds-navigation-tabs-back__show {
+:host .scroll-right-button.show,
+:host .scroll-left-button.show {
+  min-width: 48px;
+  display: block;
   opacity: 1;
   pointer-events: all;
 }
-.sdds-navigation-tabs-back:hover {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
-}
-.sdds-navigation-tabs-back:active {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
-}
-.sdds-navigation-tabs-back:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-::slotted(.sdds-navigation-tabs-tab) {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-navigation-tabs-tab-color);
-  opacity: 0.6;
-  padding: 26px 0;
-  margin-right: 32px;
-  text-decoration: none;
-  display: block;
-  position: relative;
-  transition: color 0.15s ease-in-out;
-  white-space: nowrap;
-  background-color: transparent;
-  border: 0;
-}
-::slotted(.sdds-navigation-tabs-tab)::after {
-  content: " ";
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  width: 0;
-  margin-right: auto;
-  height: 2px;
-  background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);
-  transition: width 0.15s ease-in-out;
-  z-index: 1;
-}
-::slotted(.sdds-navigation-tabs-tab:first-child) {
-  margin-left: 32px;
+:host .scroll-right-button:hover,
+:host .scroll-left-button:hover {
+  background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);
 }
-::slotted(.sdds-navigation-tabs-tab:last-child) {
-  margin-right: 32px;
+:host .scroll-right-button:active,
+:host .scroll-left-button:active {
+  background-color: var(--sdds-folder-tabs-scroll-btn-background-active);
 }
-::slotted(.sdds-navigation-tabs-tab:hover) {
-  color: var(--sdds-navigation-tabs-tab-color-hover);
-  opacity: 1;
-}
-::slotted(.sdds-navigation-tabs-tab:hover)::after {
-  width: 100%;
-}
-::slotted(.sdds-navigation-tabs-tab:focus) {
+:host .scroll-right-button:focus,
+:host .scroll-left-button:focus {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
-  color: var(--sdds-navigation-tabs-tab-color-focus);
-  opacity: 1;
-}
-::slotted(.sdds-navigation-tabs-tab:focus)::after {
-  width: 0;
 }
-::slotted(.sdds-navigation-tabs-tab-active) {
-  color: var(--sdds-navigation-tabs-tab-color-active);
-  opacity: 1;
-}
-::slotted(.sdds-navigation-tabs-tab-active)::after {
-  width: 100%;
-  background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);
-}
-::slotted(.sdds-navigation-tabs-tab-active:focus)::after {
-  width: 100%;
-}
-::slotted(.sdds-navigation-tabs-tab-disabled) {
-  color: var(--sdds-navigation-tabs-tab-color-disabled);
-  opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);
-  pointer-events: none;
+:host .scroll-right-button svg,
+:host .scroll-left-button svg {
+  fill: var(--sdds-folder-tabs-scroll-btn-color);
 }