@swisspost/design-system-components 1.5.0 → 1.5.1

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

@@ -1,193 +1,4 @@
-/**
- * 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
- */
-/**
- * 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
- */
-/**
- * Override the necessary bootstrap
- * colors and maps using colors from
- * the post style guide only.
- *
- * Other bootstrap colors
- * will be available as sass-variables
- * but should not be used.
-*/
-/**
- * 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
- */
-.accordion-item {
-  border-block-start: 2px solid hsl(0, 0%, 90%);
-}
-
-.accordion-header {
-  font-size: 1.0625rem;
-  font-weight: 700;
-  line-height: 1.5;
-  margin: 0;
-}
-@media (min-width: 1024px) {
-  .accordion-header {
-    font-size: 1.25rem;
-  }
-}
-
-.accordion-button {
-  padding: 0;
-  overflow: visible;
-  border: 0;
-  background: none;
-  color: inherit;
-  font: inherit;
-  user-select: none;
-  appearance: button;
-  width: 100%;
-  position: relative;
-  padding-block: 1rem;
-  padding-inline-start: 1rem;
-  padding-inline-end: 2.5rem;
-  text-align: start;
-}
-.accordion-button:not(:disabled) {
-  cursor: pointer;
-}
-.accordion-button:disabled {
-  opacity: 0.4;
-}
-.accordion-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem rgba(51, 51, 51, 0.25);
-}
-.accordion-button::after {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E");
-  background-color: currentColor;
-  content: "";
-  display: block;
-  height: 1.5rem;
-  width: 1.5rem;
-  position: absolute;
-  inset-inline-end: 1rem;
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid rgb(var(--post-bg-rgb, 255, 255, 255));
-}
-.accordion-button.collapsed::after {
-  transform: translateY(-50%) rotate(-180deg);
-}
-.accordion-button > .text-truncate {
-  display: block;
-}
-@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
-  .accordion-button:hover:not(:disabled), .accordion-button:focus-visible:not(:disabled) {
-    outline: 2px solid Highlight;
-  }
-  .accordion-button:disabled {
-    opacity: 1 !important;
-  }
-}
-
-.accordion-body {
-  padding: 0.75rem 1rem 2.5rem;
-  border-block-start: 2px solid hsl(0, 0%, 90%);
-}
-.accordion-body h1,
-.accordion-body .h1 {
-  font-size: 1.0625rem;
-  margin: 2.5rem 0 0;
-  font-weight: 700;
-}
-@media (min-width: 1024px) {
-  .accordion-body h1,
-  .accordion-body .h1 {
-    font-size: 1.25rem;
-  }
-}
-.accordion-body h2,
-.accordion-body .h2 {
-  font-size: 1.0625rem;
-  margin: 2.5rem 0 0;
-  font-weight: 700;
-}
-@media (min-width: 1024px) {
-  .accordion-body h2,
-  .accordion-body .h2 {
-    font-size: 1.25rem;
-  }
-}
-.accordion-body h3,
-.accordion-body .h3 {
-  font-size: 1.0625rem;
-  margin: 2.5rem 0 0;
-  font-weight: 700;
-}
-@media (min-width: 1024px) {
-  .accordion-body h3,
-  .accordion-body .h3 {
-    font-size: 1.25rem;
-  }
-}
-.accordion-body h4,
-.accordion-body .h4 {
-  font-size: 1.0625rem;
-  margin: 2.5rem 0 0;
-  font-weight: 700;
-}
-@media (min-width: 1024px) {
-  .accordion-body h4,
-  .accordion-body .h4 {
-    font-size: 1.25rem;
-  }
-}
-.accordion-body h5,
-.accordion-body .h5 {
-  font-size: 1.0625rem;
-  margin: 2.5rem 0 0;
-  font-weight: 700;
-}
-@media (min-width: 1024px) {
-  .accordion-body h5,
-  .accordion-body .h5 {
-    font-size: 1.25rem;
-  }
-}
-.accordion-body h6,
-.accordion-body .h6 {
-  font-size: 1.0625rem;
-  margin: 2.5rem 0 0;
-  font-weight: 700;
-}
-@media (min-width: 1024px) {
-  .accordion-body h6,
-  .accordion-body .h6 {
-    font-size: 1.25rem;
-  }
-}
-
-.accordion-button > :first-child,
-.accordion-body > :first-child {
-  margin-block-start: 0 !important;
-}
-.accordion-button > :last-child,
-.accordion-body > :last-child {
-  margin-block-end: 0 !important;
-}
-
-/*!
+.accordion-item{border-block-start:2px solid #e6e6e6}.accordion-header{font-size:1.0625rem;font-weight:700;line-height:1.5;margin:0}@media(min-width: 1024px){.accordion-header{font-size:1.25rem}}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;user-select:none;appearance:button;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:2.5rem;text-align:start}.accordion-button:not(:disabled){cursor:pointer}.accordion-button:disabled{opacity:.4}.accordion-button:focus{outline:none;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.accordion-button::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;content:"";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);border:1px solid rgb(var(--post-bg-rgb, 255, 255, 255))}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.75rem 1rem 2.5rem;border-block-start:2px solid #e6e6e6}.accordion-body h1,.accordion-body .h1{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media(min-width: 1024px){.accordion-body h1,.accordion-body .h1{font-size:1.25rem}}.accordion-body h2,.accordion-body .h2{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media(min-width: 1024px){.accordion-body h2,.accordion-body .h2{font-size:1.25rem}}.accordion-body h3,.accordion-body .h3{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media(min-width: 1024px){.accordion-body h3,.accordion-body .h3{font-size:1.25rem}}.accordion-body h4,.accordion-body .h4{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media(min-width: 1024px){.accordion-body h4,.accordion-body .h4{font-size:1.25rem}}.accordion-body h5,.accordion-body .h5{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media(min-width: 1024px){.accordion-body h5,.accordion-body .h5{font-size:1.25rem}}.accordion-body h6,.accordion-body .h6{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media(min-width: 1024px){.accordion-body h6,.accordion-body .h6{font-size:1.25rem}}.accordion-button>:first-child,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>:last-child,.accordion-body>:last-child{margin-block-end:0 !important}/*!
  * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
@@ -215,47 +26,4 @@
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
- */
-.fade {
-  transition: opacity 200ms linear;
-}
-@media (prefers-reduced-motion: reduce) {
-  .fade {
-    transition: none;
-  }
-}
-.fade:not(.show) {
-  opacity: 0;
-}
-
-.collapse:not(.show) {
-  display: none;
-}
-
-.collapsing {
-  height: 0;
-  overflow: hidden;
-  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-@media (prefers-reduced-motion: reduce) {
-  .collapsing {
-    transition: none;
-  }
-}
-.collapsing.collapse-horizontal {
-  width: 0;
-  height: auto;
-  transition: width 0.35s ease;
-}
-@media (prefers-reduced-motion: reduce) {
-  .collapsing.collapse-horizontal {
-    transition: none;
-  }
-}
-
-:host {
-  display: block;
-}
-:host .accordion-button > ::slotted(.text-truncate) {
-  display: block;
-}
+ */.fade{transition:opacity 200ms linear}@media(prefers-reduced-motion: reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height 250ms cubic-bezier(0.4, 0, 0.2, 1),padding 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media(prefers-reduced-motion: reduce){.collapsing.collapse-horizontal{transition:none}}:host{display:block}:host .accordion-button>::slotted(.text-truncate){display:block}

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"; }