@swisspost/design-system-components 1.3.10 → 1.4.0

package/dist/collection/components/post-tab-header/post-tab-header.css

@@ -0,0 +1,337 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+.tab-title {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 1rem;
+  transition: background-color 100ms;
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  outline-color: currentColor;
+  opacity: 0.7;
+  color: var(--post-contrast-color);
+  text-decoration: none;
+}
+.tab-title:focus {
+  background-color: unset;
+  color: var(--post-contrast-color);
+}
+.tab-title:hover {
+  opacity: 1;
+  background-color: #fff;
+  color: var(--post-contrast-color);
+}
+.tab-title:focus-visible {
+  outline: transparent;
+  opacity: 1;
+  background-color: #fff;
+  color: var(--post-contrast-color);
+  box-shadow: none;
+}
+.tab-title:focus-visible::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 2px;
+  right: 1px;
+  bottom: 0;
+  left: 1px;
+  box-shadow: 0 0 0 1px #fff, 0 0 0 2px hsl(0, 0%, 20%);
+}
+.tab-title.active {
+  z-index: 1;
+  border-right-color: hsl(0, 0%, 80%);
+  border-left-color: hsl(0, 0%, 80%);
+  opacity: 1;
+  background-color: #fff;
+  color: var(--post-contrast-color);
+  font-weight: 700;
+}
+.tab-title.active::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: -1px;
+  left: -1px;
+  height: 0.25rem;
+  background-color: #fc0;
+}
+:is(.bg-dark, .bg-primary, .bg-black, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-coral, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright) .tab-title:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+:is(.bg-dark, .bg-primary, .bg-black, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-coral, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright) .tab-title:focus-visible {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+  .tab-title {
+    opacity: 1;
+    border-left-color: Canvas;
+    border-right-color: Canvas;
+    color: LinkText;
+  }
+  .tab-title:hover, .tab-title:focus, .tab-title:focus-within, .tab-title:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -0.25rem;
+  }
+  .tab-title.active {
+    border-left-color: ButtonText;
+    border-right-color: ButtonText;
+    color: Highlight;
+  }
+  .tab-title.active::before {
+    background-color: Highlight;
+  }
+}
+
+.bg-yellow .tab-title {
+  background-color: #fc0;
+}
+.bg-yellow .tab-title.active {
+  background-color: #fc0;
+}
+.bg-yellow .nav-item {
+  background-color: #fc0;
+}
+
+.bg-light .tab-title {
+  background-color: #faf9f8;
+}
+.bg-light .tab-title.active {
+  background-color: #faf9f8;
+}
+.bg-light .nav-item {
+  background-color: #faf9f8;
+}
+
+.bg-gray .tab-title {
+  background-color: #f4f3f1;
+}
+.bg-gray .tab-title.active {
+  background-color: #f4f3f1;
+}
+.bg-gray .nav-item {
+  background-color: #f4f3f1;
+}
+
+.bg-dark .tab-title {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-dark .tab-title.active {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-dark .nav-item {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-primary .tab-title {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-primary .tab-title.active {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-primary .nav-item {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-white .tab-title {
+  background-color: #fff;
+}
+.bg-white .tab-title.active {
+  background-color: #fff;
+}
+.bg-white .nav-item {
+  background-color: #fff;
+}
+
+.bg-black .tab-title {
+  background-color: #000;
+}
+.bg-black .tab-title.active {
+  background-color: #000;
+}
+.bg-black .nav-item {
+  background-color: #000;
+}
+
+.bg-success .tab-title {
+  background-color: #2c911c;
+}
+.bg-success .tab-title.active {
+  background-color: #2c911c;
+}
+.bg-success .nav-item {
+  background-color: #2c911c;
+}
+
+.bg-info .tab-title {
+  background-color: #cce4ee;
+}
+.bg-info .tab-title.active {
+  background-color: #cce4ee;
+}
+.bg-info .nav-item {
+  background-color: #cce4ee;
+}
+
+.bg-warning .tab-title {
+  background-color: #f49e00;
+}
+.bg-warning .tab-title.active {
+  background-color: #f49e00;
+}
+.bg-warning .nav-item {
+  background-color: #f49e00;
+}
+
+.bg-danger .tab-title {
+  background-color: #a51728;
+}
+.bg-danger .tab-title.active {
+  background-color: #a51728;
+}
+.bg-danger .nav-item {
+  background-color: #a51728;
+}
+
+.bg-nightblue .tab-title {
+  background-color: #004976;
+}
+.bg-nightblue .tab-title.active {
+  background-color: #004976;
+}
+.bg-nightblue .nav-item {
+  background-color: #004976;
+}
+
+.bg-nightblue-bright .tab-title {
+  background-color: #0076a8;
+}
+.bg-nightblue-bright .tab-title.active {
+  background-color: #0076a8;
+}
+.bg-nightblue-bright .nav-item {
+  background-color: #0076a8;
+}
+
+.bg-petrol .tab-title {
+  background-color: #006d68;
+}
+.bg-petrol .tab-title.active {
+  background-color: #006d68;
+}
+.bg-petrol .nav-item {
+  background-color: #006d68;
+}
+
+.bg-petrol-bright .tab-title {
+  background-color: #00968f;
+}
+.bg-petrol-bright .tab-title.active {
+  background-color: #00968f;
+}
+.bg-petrol-bright .nav-item {
+  background-color: #00968f;
+}
+
+.bg-coral .tab-title {
+  background-color: #9e2a2f;
+}
+.bg-coral .tab-title.active {
+  background-color: #9e2a2f;
+}
+.bg-coral .nav-item {
+  background-color: #9e2a2f;
+}
+
+.bg-coral-bright .tab-title {
+  background-color: #e03c31;
+}
+.bg-coral-bright .tab-title.active {
+  background-color: #e03c31;
+}
+.bg-coral-bright .nav-item {
+  background-color: #e03c31;
+}
+
+.bg-olive .tab-title {
+  background-color: #716135;
+}
+.bg-olive .tab-title.active {
+  background-color: #716135;
+}
+.bg-olive .nav-item {
+  background-color: #716135;
+}
+
+.bg-olive-bright .tab-title {
+  background-color: #aa9d2e;
+}
+.bg-olive-bright .tab-title.active {
+  background-color: #aa9d2e;
+}
+.bg-olive-bright .nav-item {
+  background-color: #aa9d2e;
+}
+
+.bg-purple .tab-title {
+  background-color: #80276c;
+}
+.bg-purple .tab-title.active {
+  background-color: #80276c;
+}
+.bg-purple .nav-item {
+  background-color: #80276c;
+}
+
+.bg-purple-bright .tab-title {
+  background-color: #c5299b;
+}
+.bg-purple-bright .tab-title.active {
+  background-color: #c5299b;
+}
+.bg-purple-bright .nav-item {
+  background-color: #c5299b;
+}
+
+.bg-aubergine .tab-title {
+  background-color: #523178;
+}
+.bg-aubergine .tab-title.active {
+  background-color: #523178;
+}
+.bg-aubergine .nav-item {
+  background-color: #523178;
+}
+
+.bg-aubergine-bright .tab-title {
+  background-color: #7566a0;
+}
+.bg-aubergine-bright .tab-title.active {
+  background-color: #7566a0;
+}
+.bg-aubergine-bright .nav-item {
+  background-color: #7566a0;
+}
+
+[class*=bg-] .tab-title.active:focus::after {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+@supports selector(*:focus-visible) {
+  [class*=bg-] .tab-title.active:focus::after {
+    background-color: unset;
+  }
+  [class*=bg-] .tab-title.active:focus-visible::after {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -0,0 +1,68 @@
+import { h, Host } from '@stencil/core';
+import { version } from '../../../package.json';
+import { checkNonEmpty } from '../../utils';
+export class PostTabHeader {
+  constructor() {
+    this.tabId = undefined;
+    this.panel = undefined;
+  }
+  validateFor(newValue) {
+    checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
+  }
+  componentWillLoad() {
+    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("li", { class: "nav-item" }, h("a", { "aria-selected": "false", class: "tab-title nav-link", href: "#", id: this.tabId, role: "tab" }, h("slot", null)))));
+  }
+  static get is() { return "post-tab-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-tab-header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-tab-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "panel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLPostTabPanelElement['name']",
+          "resolved": "string",
+          "references": {
+            "HTMLPostTabPanelElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the panel controlled by the tab header."
+        },
+        "attribute": "panel",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabId": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "panel",
+        "methodName": "validateFor"
+      }];
+  }
+}
+//# sourceMappingURL=post-tab-header.js.map

package/dist/collection/components/post-tab-header/post-tab-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-tab-header.js","sourceRoot":"","sources":["../../../../src/components/post-tab-header/post-tab-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAO5C,MAAM,OAAO,aAAa;;;;;EAWxB,WAAW,CAAC,QAAyC;IACnD,aAAa,CAAC,QAAQ,EAAE,uDAAuD,CAAC,CAAC;EACnF,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;EAC5D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,oBAAe,OAAO;MACzB,UAAI,KAAK,EAAC,UAAU;QAClB,0BACgB,OAAO,EACrB,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,GAAG,EACR,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,KAAK;UAEV,eAAO,CACL,CACD,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { checkNonEmpty } from '../../utils';\n\n@Component({\n  tag: 'post-tab-header',\n  styleUrl: 'post-tab-header.scss',\n  shadow: true,\n})\nexport class PostTabHeader {\n  @Element() host: HTMLPostTabHeaderElement;\n\n  @State() tabId: string;\n\n  /**\n   * The name of the panel controlled by the tab header.\n   */\n  @Prop() readonly panel: HTMLPostTabPanelElement['name'];\n\n  @Watch('panel')\n  validateFor(newValue: HTMLPostTabPanelElement['name']) {\n    checkNonEmpty(newValue, 'The \"panel\" prop is required for the post-tab-header.');\n  }\n\n  componentWillLoad() {\n    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <li class=\"nav-item\">\n          <a\n            aria-selected=\"false\"\n            class=\"tab-title nav-link\"\n            href=\"#\"\n            id={this.tabId}\n            role=\"tab\"\n          >\n            <slot/>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-tab-panel/post-tab-panel.css

@@ -0,0 +1,3 @@
+:host {
+  display: none;
+}

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -0,0 +1,55 @@
+import { h, Host } from '@stencil/core';
+import { version } from '../../../package.json';
+export class PostTabPanel {
+  constructor() {
+    this.panelId = undefined;
+    this.name = undefined;
+  }
+  componentWillLoad() {
+    // get the id set on the host element or use a random id by default
+    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("div", { class: "tab-pane", id: this.panelId, role: "tabpanel" }, h("slot", null))));
+  }
+  static get is() { return "post-tab-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-tab-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the panel, used to associate it with a tab header."
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "panelId": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-tab-panel.js.map

package/dist/collection/components/post-tab-panel/post-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-tab-panel.js","sourceRoot":"","sources":["../../../../src/components/post-tab-panel/post-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAOhD,MAAM,OAAO,YAAY;;;;;EAUvB,iBAAiB;IACf,mEAAmE;IACnE,IAAI,CAAC,OAAO,GAAG,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;EAChE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,oBAAe,OAAO;MACzB,WACE,KAAK,EAAC,UAAU,EAChB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU;QAEf,eAAO,CACH,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { version } from '../../../package.json';\n\n@Component({\n  tag: 'post-tab-panel',\n  styleUrl: 'post-tab-panel.scss',\n  shadow: true,\n})\nexport class PostTabPanel {\n  @Element() host: HTMLPostTabPanelElement;\n\n  @State() panelId: string;\n\n  /**\n   * The name of the panel, used to associate it with a tab header.\n   */\n  @Prop() readonly name: string;\n\n  componentWillLoad() {\n    // get the id set on the host element or use a random id by default\n    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          class=\"tab-pane\"\n          id={this.panelId}\n          role=\"tabpanel\"\n        >\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,148 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+.tabs-wrapper {
+  position: relative;
+  padding-top: 1rem;
+  border: 0;
+  background-color: #faf9f8;
+}
+.tabs-wrapper::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: hsl(0, 0%, 80%);
+}
+.tabs-wrapper .tabs {
+  background-color: transparent !important;
+}
+@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+  .tabs-wrapper::after {
+    background-color: ButtonBorder;
+  }
+}
+
+.tabs {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  white-space: nowrap;
+}
+.tabs::after {
+  content: "";
+  display: block;
+  flex: 1 0 auto;
+  width: 1rem;
+}
+
+.tab-content {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.bg-yellow .tabs-wrapper {
+  background-color: #fc0;
+}
+
+.bg-light .tabs-wrapper {
+  background-color: #faf9f8;
+}
+
+.bg-gray .tabs-wrapper {
+  background-color: #f4f3f1;
+}
+
+.bg-dark .tabs-wrapper {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-primary .tabs-wrapper {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-white .tabs-wrapper {
+  background-color: #fff;
+}
+
+.bg-black .tabs-wrapper {
+  background-color: #000;
+}
+
+.bg-success .tabs-wrapper {
+  background-color: #2c911c;
+}
+
+.bg-info .tabs-wrapper {
+  background-color: #cce4ee;
+}
+
+.bg-warning .tabs-wrapper {
+  background-color: #f49e00;
+}
+
+.bg-danger .tabs-wrapper {
+  background-color: #a51728;
+}
+
+.bg-nightblue .tabs-wrapper {
+  background-color: #004976;
+}
+
+.bg-nightblue-bright .tabs-wrapper {
+  background-color: #0076a8;
+}
+
+.bg-petrol .tabs-wrapper {
+  background-color: #006d68;
+}
+
+.bg-petrol-bright .tabs-wrapper {
+  background-color: #00968f;
+}
+
+.bg-coral .tabs-wrapper {
+  background-color: #9e2a2f;
+}
+
+.bg-coral-bright .tabs-wrapper {
+  background-color: #e03c31;
+}
+
+.bg-olive .tabs-wrapper {
+  background-color: #716135;
+}
+
+.bg-olive-bright .tabs-wrapper {
+  background-color: #aa9d2e;
+}
+
+.bg-purple .tabs-wrapper {
+  background-color: #80276c;
+}
+
+.bg-purple-bright .tabs-wrapper {
+  background-color: #c5299b;
+}
+
+.bg-aubergine .tabs-wrapper {
+  background-color: #523178;
+}
+
+.bg-aubergine-bright .tabs-wrapper {
+  background-color: #7566a0;
+}
+
+:host {
+  display: block;
+}