npm - @swisspost/internet-header - Versions diffs - 1.7.1 → 1.7.3-beta.0 - Mend

@swisspost/internet-header 1.7.1 → 1.7.3-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (315) hide show

package/dist/collection/components/post-search/post-search.css CHANGED Viewed

@@ -138,7 +138,13 @@
   box-shadow: 0 0 0 0.125rem rgba(51, 51, 51, 0.25);
 }
 .form-control::-webkit-date-and-time-value {
+  min-width: 85px;
   height: 1.5em;
+  margin: 0;
+}
+.form-control::-webkit-datetime-edit {
+  display: block;
+  padding: 0;
 }
 .form-control::placeholder {
   color: hsl(0, 0%, 40%);
@@ -155,7 +161,7 @@
   margin: -0.875rem -1.125rem;
   margin-inline-end: 1.125rem;
   color: #000;
-  background-color: rgba(var(--post-contrast-color-inverted-rgb), 0.6);
+  background-color: var(--bs-tertiary-bg);
   pointer-events: none;
   border-color: inherit;
   border-style: solid;
@@ -239,6 +245,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   border-radius: 0;
 }
 .form-control-color::-webkit-color-swatch {
+  border: 0 !important;
   border-radius: 0;
 }
 .form-control-color.form-control-sm {
@@ -249,16 +256,16 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .form-select {
+  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M27.6 10.667l-11.6 11.6-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'%3E%3C/path%3E%3C/svg%3E");
   display: block;
   width: 100%;
   padding: 0.875rem 3.375rem 0.875rem 1.125rem;
-  -moz-padding-start: calc(1.125rem - 3px);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #000;
   background-color: #fff;
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M27.6 10.667l-11.6 11.6-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'%3E%3C/path%3E%3C/svg%3E");
+  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: right 1.125rem center;
   background-size: 14px 14px;
@@ -307,6 +314,10 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   border-radius: 0;
 }
+[data-bs-theme=dark] .form-select {
+  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+}
 .form-check {
   display: block;
   min-height: 1.5rem;
@@ -330,11 +341,13 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .form-check-input {
+  --bs-form-check-bg: transparent;
   width: 1.5rem;
   height: 1.5rem;
   margin-top: 0rem;
   vertical-align: top;
-  background-color: transparent;
+  background-color: var(--bs-form-check-bg);
+  background-image: var(--bs-form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -361,15 +374,15 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   border-color: #000;
 }
 .form-check-input:checked[type=checkbox] {
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M12.667 23.6l-7.2-7.067 1.067-1.067 6.133 6.267 12.8-12.933 1.067 1.067z'%3E%3C/path%3E%3C/svg%3E");
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M12.667 23.6l-7.2-7.067 1.067-1.067 6.133 6.267 12.8-12.933 1.067 1.067z'%3E%3C/path%3E%3C/svg%3E");
 }
 .form-check-input:checked[type=radio] {
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 6 6'%3E%3Ccircle opacity='1' fill='%23000000' r='2'%3E%3C/circle%3E%3C/svg%3E");
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 6 6'%3E%3Ccircle opacity='1' fill='%23000000' r='2'%3E%3C/circle%3E%3C/svg%3E");
 }
 .form-check-input[type=checkbox]:indeterminate {
   background-color: transparent;
   border-color: #000;
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M5.333 16.010l20-0.021 0.001 1.333-20 0.021-0.001-1.333z'%3E%3C/path%3E%3C/svg%3E");
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M5.333 16.010l20-0.021 0.001 1.333-20 0.021-0.001-1.333z'%3E%3C/path%3E%3C/svg%3E");
 }
 .form-check-input:disabled {
   pointer-events: none;
@@ -390,9 +403,10 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   padding-left: 0;
 }
 .form-switch .form-check-input {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3e%3ccircle r='15' stroke='hsl%280, 0%, 40%%29' stroke-width='2' fill='%23fff'/%3e%3c/svg%3e");
   width: 4rem;
   margin-left: 0;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3e%3ccircle r='15' stroke='hsl%280, 0%, 40%%29' stroke-width='2' fill='%23fff'/%3e%3c/svg%3e");
+  background-image: var(--bs-form-switch-bg);
   background-position: left center;
   border-radius: 4rem;
   transition: background-position 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms;
@@ -403,11 +417,11 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   }
 }
 .form-switch .form-check-input:focus {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3e%3ccircle r='15' stroke='%23000' stroke-width='2' fill='%23fff'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3e%3ccircle r='15' stroke='%23000' stroke-width='2' fill='%23fff'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3e%3ccircle r='15' stroke='%23000' stroke-width='2' fill='%23fff'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3e%3ccircle r='15' stroke='%23000' stroke-width='2' fill='%23fff'/%3e%3c/svg%3e");
 }
 .form-switch.form-check-reverse {
   padding-right: 0;
@@ -434,6 +448,10 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   opacity: 0.4;
 }
+[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
+}
 .form-range {
   width: 100%;
   height: 2.4rem;
@@ -523,13 +541,14 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 .form-floating > .form-control-plaintext,
 .form-floating > .form-select {
   height: calc(4.375rem + 4px);
+  min-height: calc(4.375rem + 4px);
   line-height: 1.5;
 }
 .form-floating > label {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  z-index: 2;
   height: 100%;
   padding: 1.25rem 1.375rem;
   overflow: hidden;
@@ -573,16 +592,34 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 .form-floating > .form-control:not(:placeholder-shown) ~ label,
 .form-floating > .form-control-plaintext ~ label,
 .form-floating > .form-select ~ label {
-  opacity: 1;
+  color: rgba(var(--bs-body-color-rgb), 1);
   transform: scale(0.7647058824);
 }
+.form-floating > .form-control:focus ~ label::after,
+.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
+.form-floating > .form-control-plaintext ~ label::after,
+.form-floating > .form-select ~ label::after {
+  position: absolute;
+  inset: 1.25rem 0.6875rem;
+  z-index: -1;
+  height: 4.375rem;
+  content: "";
+  background-color: #fff;
+  border-radius: 0;
+}
 .form-floating > .form-control:-webkit-autofill ~ label {
-  opacity: 1;
+  color: rgba(var(--bs-body-color-rgb), 1);
   transform: scale(0.7647058824);
 }
 .form-floating > .form-control-plaintext ~ label {
   border-width: 2px 0;
 }
+.form-floating > :disabled ~ label {
+  color: #6c757d;
+}
+.form-floating > :disabled ~ label::after {
+  background-color: rgba(var(--post-contrast-color-inverted-rgb), 0.6);
+}
 .input-group {
   position: relative;
@@ -665,7 +702,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   border-bottom-right-radius: 0;
 }
 .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
-  margin-left: -2px;
+  margin-left: calc(2px * -1);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -680,7 +717,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   width: 100%;
   margin-top: 0;
   font-size: 1rem;
-  color: hsl(0, 0%, 40%);
+  color: var(--bs-form-valid-color);
 }
 .valid-tooltip {
@@ -693,7 +730,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   margin-top: 0.1rem;
   font-size: 1rem;
   color: #fff;
-  background-color: #666666;
+  background-color: var(--bs-success);
   border-radius: 0;
 }
@@ -705,7 +742,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .was-validated .form-control:valid, .form-control.is-valid {
-  border-color: hsl(0, 0%, 40%);
+  border-color: var(--bs-form-valid-border-color);
   padding-right: 3.25rem;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%280%25,50.588235%25,22.745098%25%29;fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -713,8 +750,8 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   background-size: calc(0.75em + 0.875rem) calc(0.75em + 0.875rem);
 }
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
-  border-color: hsl(0, 0%, 40%);
-  box-shadow: 0 0 0 0.125rem rgba(102, 102, 102, 0.25);
+  border-color: var(--bs-form-valid-border-color);
+  box-shadow: 0 0 0 0.125rem rgba(var(--bs-success-rgb), 0.25);
 }
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
@@ -723,17 +760,17 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .was-validated .form-select:valid, .form-select.is-valid {
-  border-color: hsl(0, 0%, 40%);
+  border-color: var(--bs-form-valid-border-color);
 }
 .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%280%25,50.588235%25,22.745098%25%29;fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A");
   padding-right: 6.1875rem;
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M27.6 10.667l-11.6 11.6-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%280%25,50.588235%25,22.745098%25%29;fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A");
   background-position: right 1.125rem center, center right 3.375rem;
   background-size: 14px 14px, calc(0.75em + 0.875rem) calc(0.75em + 0.875rem);
 }
 .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
-  border-color: hsl(0, 0%, 40%);
-  box-shadow: 0 0 0 0.125rem rgba(102, 102, 102, 0.25);
+  border-color: var(--bs-form-valid-border-color);
+  box-shadow: 0 0 0 0.125rem rgba(var(--bs-success-rgb), 0.25);
 }
 .was-validated .form-control-color:valid, .form-control-color.is-valid {
@@ -741,16 +778,16 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .was-validated .form-check-input:valid, .form-check-input.is-valid {
-  border-color: hsl(0, 0%, 40%);
+  border-color: var(--bs-form-valid-border-color);
 }
 .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
-  background-color: hsl(0, 0%, 40%);
+  background-color: var(--bs-form-valid-color);
 }
 .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
-  box-shadow: 0 0 0 0.125rem rgba(102, 102, 102, 0.25);
+  box-shadow: 0 0 0 0.125rem rgba(var(--bs-success-rgb), 0.25);
 }
 .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
-  color: hsl(0, 0%, 40%);
+  color: var(--bs-form-valid-color);
 }
 .form-check-inline .form-check-input ~ .valid-feedback {
@@ -770,7 +807,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   width: 100%;
   margin-top: 0;
   font-size: 1rem;
-  color: #a51728;
+  color: var(--bs-form-invalid-color);
 }
 .invalid-tooltip {
@@ -783,7 +820,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   margin-top: 0.1rem;
   font-size: 1rem;
   color: #fff;
-  background-color: #a51728;
+  background-color: var(--bs-danger);
   border-radius: 0;
 }
@@ -795,7 +832,7 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .was-validated .form-control:invalid, .form-control.is-invalid {
-  border-color: #a51728;
+  border-color: var(--bs-form-invalid-border-color);
   padding-right: 3.25rem;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%2864.705882%25,9.019608%25,15.686275%25%29;fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%2864.705882%25,9.019608%25,15.686275%25%29;fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -803,8 +840,8 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
   background-size: calc(0.75em + 0.875rem) calc(0.75em + 0.875rem);
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
-  border-color: #a51728;
-  box-shadow: 0 0 0 0.125rem rgba(165, 23, 40, 0.25);
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.125rem rgba(var(--bs-danger-rgb), 0.25);
 }
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
@@ -813,17 +850,17 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .was-validated .form-select:invalid, .form-select.is-invalid {
-  border-color: #a51728;
+  border-color: var(--bs-form-invalid-border-color);
 }
 .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%2864.705882%25,9.019608%25,15.686275%25%29;fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%2864.705882%25,9.019608%25,15.686275%25%29;fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A");
   padding-right: 6.1875rem;
-  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M27.6 10.667l-11.6 11.6-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%2864.705882%25,9.019608%25,15.686275%25%29;fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb%2864.705882%25,9.019608%25,15.686275%25%29;fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A");
   background-position: right 1.125rem center, center right 3.375rem;
   background-size: 14px 14px, calc(0.75em + 0.875rem) calc(0.75em + 0.875rem);
 }
 .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
-  border-color: #a51728;
-  box-shadow: 0 0 0 0.125rem rgba(165, 23, 40, 0.25);
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.125rem rgba(var(--bs-danger-rgb), 0.25);
 }
 .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
@@ -831,16 +868,16 @@ textarea.form-control-lg, .form-floating > textarea.form-control, .form-floating
 }
 .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
-  border-color: #a51728;
+  border-color: var(--bs-form-invalid-border-color);
 }
 .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
-  background-color: #a51728;
+  background-color: var(--bs-form-invalid-color);
 }
 .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
-  box-shadow: 0 0 0 0.125rem rgba(165, 23, 40, 0.25);
+  box-shadow: 0 0 0 0.125rem rgba(var(--bs-danger-rgb), 0.25);
 }
 .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
-  color: #a51728;
+  color: var(--bs-form-invalid-color);
 }
 .form-check-inline .form-check-input ~ .invalid-feedback {
@@ -916,14 +953,15 @@ select.form-control-rg:not([size]):not([multiple]) {
   left: 2px;
   margin: 0;
   padding-inline: 1.375rem;
-  padding-block: calc(
+  padding-top: calc(
       2px + 2.1875rem - 0.796875rem
     );
-  height: 4.375rem;
+  padding-bottom: 0;
   border: 0;
   color: hsl(0, 0%, 40%);
   font-size: 1.0625rem;
   width: auto;
+  height: auto;
   max-width: calc(100% - 4px);
   white-space: nowrap;
   overflow: hidden;
@@ -1026,6 +1064,16 @@ select.form-control-rg:not([size]):not([multiple]) {
   }
 }
+:root {
+  --bs-breakpoint-xs: 0;
+  --bs-breakpoint-sm: 400px;
+  --bs-breakpoint-rg: 600px;
+  --bs-breakpoint-md: 780px;
+  --bs-breakpoint-lg: 1024px;
+  --bs-breakpoint-xl: 1280px;
+  --bs-breakpoint-xxl: 1441px;
+}
 .row {
   --bs-gutter-x: 30px;
   --bs-gutter-y: 0;
@@ -2491,39 +2539,15 @@ select.form-control-rg:not([size]):not([multiple]) {
   font-weight: 300;
   src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-.no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 .btn-blank {
@@ -2533,12 +2557,14 @@ svg {
   padding: 0;
 }
-.search-button, .nav-link {
+.nav-link, .search-button {
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
   text-decoration: none;
   color: rgba(0, 0, 0, 0.8);
   transition: color 200ms;
   background-color: transparent;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -2546,18 +2572,75 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
-.search-button:hover, .nav-link:hover, .search-button:focus, .nav-link:focus {
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus), .search-button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
+.nav-link:hover, .search-button:hover, .nav-link:focus, .search-button:focus {
   color: black;
 }
-.search-button > svg, .nav-link > svg {
+.nav-link:focus-visible, .search-button:focus-visible {
+  z-index: 1;
+  position: relative;
+}
+.nav-link > svg, .search-button > svg {
   width: 1.4em;
   height: 1.4em;
   flex-shrink: 0;
 }
-.search-button > span, .nav-link > span {
+.nav-link > span, .search-button > span {
   flex-shrink: 1;
 }
+.no-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+button {
+  font: inherit;
+  padding: 0;
+}
+a,
+button {
+  border-radius: 3px;
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
+}
+a:is(:focus-visible, :focus-within, .pretend-focus),
+button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+  border-radius: 3px;
+  position: relative;
+  z-index: 1;
+}
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
 .box > *:first-child {
   margin-top: 0;
 }
@@ -2619,17 +2702,6 @@ svg {
   }
 }
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;

package/dist/collection/components/post-search/post-search.js CHANGED Viewed

@@ -246,9 +246,9 @@ export class PostSearch {
     }
     const { translations, search } = state.localizedConfig.header;
     const showPortalRecommendations = ((_b = this.searchBox) === null || _b === void 0 ? void 0 : _b.value) === '' && ((_c = search.searchRecommendations) === null || _c === void 0 ? void 0 : _c.links.length) > 0;
-    return (h(Host, null, h(SvgSprite, null), h("div", { class: "search" }, h("button", { id: "post-internet-header-search-button", class: "search-button", type: "button", "aria-expanded": `${this.searchDropdownOpen}`, onClick: e => this.toggleDropdown(e) }, h("span", { class: "visually-hidden" }, this.searchDropdownOpen
+    return (h(Host, { role: "search" }, h(SvgSprite, null), h("div", { class: "search" }, h("button", { id: "post-internet-header-search-button", class: "search-button", type: "button", "aria-expanded": `${this.searchDropdownOpen}`, onClick: e => this.toggleDropdown(e) }, h("span", { class: "visually-hidden" }, this.searchDropdownOpen
       ? translations.searchToggleExpanded
-      : translations.searchToggle), h(SvgIcon, { name: this.searchDropdownOpen ? 'pi-close' : 'pi-search' })), h(If, { condition: this.searchDropdownOpen }, h("div", { class: "flyout", ref: e => (this.searchFlyout = e) }, h("div", { class: "container box" }, h("div", { class: "row" }, h("div", { class: "col-xs-12 col-md-10 col-lg-8" }, h("div", { class: "form-group form-floating" }, h("input", { type: "text", id: "searchBox", class: "form-control form-control-lg", placeholder: translations.flyoutSearchBoxFloatingLabel, autocomplete: "off", ref: el => (this.searchBox = el), onInput: () => this.handleSearchInput(), onKeyDown: e => this.handleKeyDown(e) }), h("label", { htmlFor: "searchBox" }, translations.flyoutSearchBoxFloatingLabel), h("button", { onClick: () => this.startSearch(), class: "nav-link start-search-button" }, h("span", { class: "visually-hidden" }, translations.searchSubmit), h(SvgIcon, { name: "pi-search" }))), showPortalRecommendations && (h("h2", { id: "post-internet-header-search-recommendations-title", class: "bold" }, search.searchRecommendations.title)), h("ul", { class: "suggestions no-list", onMouseLeave: () => this.handleMouseLeaveSuggestions(), "aria-labelledby": showPortalRecommendations
+      : translations.searchToggle), h(SvgIcon, { name: this.searchDropdownOpen ? 'pi-close' : 'pi-search' })), h(If, { condition: this.searchDropdownOpen }, h("div", { class: "flyout", ref: e => (this.searchFlyout = e) }, h("div", { class: "container box" }, h("div", { class: "row" }, h("div", { class: "col-xs-12 col-md-10 col-lg-8" }, h("div", { class: "form-group form-floating" }, h("input", { type: "text", role: "searchbox", id: "searchBox", class: "form-control form-control-lg", placeholder: translations.flyoutSearchBoxFloatingLabel, autocomplete: "off", ref: el => (this.searchBox = el), onInput: () => this.handleSearchInput(), onKeyDown: e => this.handleKeyDown(e) }), h("label", { htmlFor: "searchBox" }, translations.flyoutSearchBoxFloatingLabel), h("button", { onClick: () => this.startSearch(), class: "nav-link start-search-button" }, h("span", { class: "visually-hidden" }, translations.searchSubmit), h(SvgIcon, { name: "pi-search" }))), showPortalRecommendations && (h("h2", { id: "post-internet-header-search-recommendations-title", class: "bold" }, search.searchRecommendations.title)), h("ul", { class: "suggestions no-list", onMouseLeave: () => this.handleMouseLeaveSuggestions(), "aria-labelledby": showPortalRecommendations
         ? 'post-internet-header-search-recommendations-title'
         : undefined }, showPortalRecommendations &&
       search.searchRecommendations.links.map(recommendation => (h("li", { key: recommendation.href }, h("a", { class: "nav-link search-recommendation", href: new URL(recommendation.href, 'https://post.ch').href, "data-suggestion-text": recommendation.label, onMouseEnter: e => this.handleMouseEnterSuggestion(e) }, h("span", { class: "search-recommendation__icon", innerHTML: recommendation.inlineSvg }), h("span", null, recommendation.label))))), this.parcelSuggestion && this.parcelSuggestion.ok && (h("li", null, h("a", { class: "nav-link parcel-suggestion", href: this.parcelSuggestion.url, "data-suggestion-text": (_d = this.searchBox) === null || _d === void 0 ? void 0 : _d.value, onMouseEnter: e => this.handleMouseEnterSuggestion(e) }, h(SvgIcon, { name: "pi-letter-parcel" }), h("span", { class: "bold" }, (_f = (_e = this.parcelSuggestion) === null || _e === void 0 ? void 0 : _e.sending) === null || _f === void 0 ? void 0 :