@swisspost/design-system-components 1.4.0 → 1.5.1

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

@@ -1,102 +1 @@
-:host {
-  display: inline-block;
-  width: 1em;
-  vertical-align: -0.15em;
-}
-
-svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-  background-color: currentColor;
-  -webkit-mask-position: center center;
-  mask-position: center center;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-}
-
-:host([flip-h]:not([flip-h=false])) {
-  scale: -1 1;
-}
-
-:host([flip-v]:not([flip-v=false])) {
-  scale: 1 -1;
-}
-
-:host([flip-h][flip-v]:not([flip-h=false], [flip-v=false])) {
-  scale: -1;
-}
-
-:host([animation]) {
-  transform-origin: center;
-}
-
-:host([animation=cylon]) {
-  animation: icon-animation-cylon 0.75s ease-in-out infinite alternate;
-}
-
-:host([animation=cylon-vertical]) {
-  animation: icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate;
-}
-
-:host([animation=spin]) {
-  animation: icon-animation-spin 2s linear infinite normal;
-}
-
-:host([animation=spin-reverse]) {
-  animation: icon-animation-spin 2s linear infinite reverse;
-}
-
-:host([animation=fade]) {
-  animation: icon-animation-fade 0.75s ease-in-out infinite alternate;
-}
-
-:host([animation=throb]) {
-  animation: icon-animation-throb 0.75s ease-in-out infinite alternate;
-}
-
-@keyframes icon-animation-cylon {
-  from {
-    transform: translateX(-25%);
-  }
-  to {
-    transform: translateX(25%);
-  }
-}
-@keyframes icon-animation-cylon-vertical {
-  from {
-    transform: translateY(25%);
-  }
-  to {
-    transform: translateY(-25%);
-  }
-}
-@keyframes icon-animation-fade {
-  from {
-    opacity: 0.1;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes icon-animation-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-@keyframes icon-animation-throb {
-  from {
-    opacity: 0.5;
-    transform: scale(0.5);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+:host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}

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

@@ -1,337 +1,3 @@
-/**
- * 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;
-}
+.tab-title[role=tab]{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:#fff;color:var(--post-contrast-color)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:#fff;color:var(--post-contrast-color);box-shadow:none}.tab-title[role=tab]: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 #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.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[role=tab]:hover{background-color:rgba(255,255,255,.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[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].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:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.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,.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,.2)}}/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;user-select:none;appearance:button}

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

@@ -13,7 +13,7 @@ export class PostTabHeader {
     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)))));
+    return (h(Host, { "data-version": version }, h("button", { "aria-selected": "false", class: "tab-title", id: this.tabId, role: "tab", tabindex: "-1", type: "button" }, h("slot", null))));
   }
   static get is() { return "post-tab-header"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +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"]}
+{"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,+BAAsB,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ;QACpG,eAAQ,CACD,CACJ,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        <button aria-selected=\"false\" class=\"tab-title\" id={this.tabId} role=\"tab\" tabindex=\"-1\" type=\"button\">\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -1,148 +1 @@
-/**
- * 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;
-}
+.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:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !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;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:#333}.bg-primary .tabs-wrapper{background-color:#333}.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}

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { version } from '../../../package.json';
 import { fadeIn, fadeOut } from '../../animations';
 export class PostTabs {
@@ -13,7 +13,7 @@ export class PostTabs {
     this.moveMisplacedTabs();
     this.enableTabs();
     const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
-    this.show(initiallyActivePanel);
+    void this.show(initiallyActivePanel);
     this.isLoaded = true;
   }
   /**
@@ -70,24 +70,29 @@ export class PostTabs {
       const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');
       tabTitle.setAttribute('aria-controls', tabPanel.id);
       tabPanel.setAttribute('aria-labelledby', tabTitle.id);
-      tab.addEventListener('click', e => {
-        e.preventDefault();
-        this.show(tab.panel);
+      tab.addEventListener('click', () => {
+        void this.show(tab.panel);
+      });
+      tab.addEventListener('keydown', ({ key }) => {
+        if (key === 'ArrowRight' || key === 'ArrowLeft')
+          this.navigateTabs(tab, key);
       });
     });
     // if the currently active tab was removed from the DOM then select the first one
     if (this.activeTab && !this.activeTab.isConnected) {
-      this.show(this.tabs.item(0).panel);
+      void this.show(this.tabs.item(0).panel);
     }
   }
   activateTab(tab) {
     if (this.activeTab) {
       const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');
       tabTitle.setAttribute('aria-selected', 'false');
+      tabTitle.setAttribute('tabindex', '-1');
       tabTitle.classList.remove('active');
     }
     const tabTitle = tab.shadowRoot.querySelector('.tab-title');
     tabTitle.setAttribute('aria-selected', 'true');
+    tabTitle.removeAttribute('tabindex');
     tabTitle.classList.add('active');
     this.activeTab = tab;
   }
@@ -115,8 +120,22 @@ export class PostTabs {
   getPanel(name) {
     return this.host.querySelector(`post-tab-panel[name=${name}]`);
   }
+  navigateTabs(tab, key) {
+    const activeTabIndex = Array.from(this.tabs).indexOf(tab);
+    let nextTab;
+    if (key === 'ArrowRight') {
+      nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];
+    }
+    else {
+      nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];
+    }
+    if (!nextTab)
+      return;
+    const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title');
+    nextTabTitle.focus();
+  }
   render() {
-    return (h(Host, { "data-version": version }, h("div", { class: "tabs-wrapper" }, h("ul", { class: "tabs nav", role: "tablist" }, h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
+    return (h(Host, { "data-version": version }, h("div", { class: "tabs-wrapper" }, h("div", { class: "tabs", role: "tablist" }, h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
   }
   static get is() { return "post-tabs"; }
   static get encapsulation() { return "shadow"; }