@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/components/teaser.scss

@@ -0,0 +1,83 @@
+@use '../tokens/components';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-teaser;
+
+.teaser-card {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  img {
+    height: tokens.get('teaser-card-sm-image-height');
+    min-height: tokens.get('teaser-card-sm-image-height');
+    width: 100%;
+    object-fit: cover;
+    border-top-left-radius: tokens.get('card-border-radius', components.$post-cards);
+    border-top-right-radius: tokens.get('card-border-radius', components.$post-cards);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+    word-break: break-word;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: tokens.get('teaser-card-sm-heading-font-size');
+  }
+
+  // Card content (text + button)
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: tokens.get('teaser-card-sm-section-content-padding');
+    gap: tokens.get('teaser-card-sm-section-content-gap');
+    height: 100%;
+    justify-content: space-between;
+
+    // Card text button
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: tokens.get('teaser-card-sm-content-gap');
+    }
+  }
+
+  &.teaser-card-lg {
+    img {
+      height: tokens.get('teaser-card-lg-image-height');
+      min-height: tokens.get('teaser-card-lg-image-height');
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: tokens.get('teaser-card-lg-heading-font-size');
+    }
+
+    > div {
+      padding: tokens.get('teaser-card-lg-section-content-padding');
+      gap: tokens.get('teaser-card-lg-section-content-gap');
+
+      > div {
+        gap: tokens.get('teaser-card-lg-content-gap');
+      }
+    }
+  }
+}

package/components/text-highlight.css

@@ -1 +1 @@
-.text-highlighted{background-color:var(--post-mode-color-signal-information-light);color:var(--post-mode-color-interactive-primary-enabled-fg1);padding:var(--post-device-spacing-padding-5);margin-block-start:var(--post-core-dimension-24);margin-block-end:var(--post-core-dimension-24);border-radius:var(--post-device-border-radius-1)}
+.text-highlighted{background-color:var(--post-scheme-color-signal-information-light);color:var(--post-scheme-color-interactive-primary-enabled-fg1);padding:var(--post-device-spacing-padding-5);margin-block-start:var(--post-core-dimension-24);margin-block-end:var(--post-core-dimension-24);border-radius:var(--post-device-border-radius-1)}

package/components/timepicker.css

@@ -1 +1 @@
-.ngb-tp .ngb-tp-input-container{width:auto}.ngb-tp .form-control{width:4.5rem}.ngb-tp .form-control-sm,.ngb-tp .form-control-rg{width:4rem}.ngb-tp .form-control-lg{width:6rem;padding:1rem 1.375rem}.ngb-tp .form-control-lg::placeholder{color:#666}.ngb-tp .form-control-lg::input-placeholder{color:#666}.ngb-tp .ngb-tp-chevron::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8.4 3.467 20.8l1.067 1.067 11.467-11.6 11.6 11.6.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8.4 3.467 20.8l1.067 1.067 11.467-11.6 11.6 11.6.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:1.25rem;height:1.25rem;transform:none}.ngb-tp .ngb-tp-chevron.bottom::before{transform:rotateZ(180deg)}.ngb-tp .btn-sm .ngb-tp-chevron::before{width:1rem;height:1rem}.ngb-tp .btn-lg .ngb-tp-chevron::before{width:1.375rem;height:1.375rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.ngb-tp .form-control:hover,.ngb-tp .form-control:focus-visible{border-color:Highlight}}.timepicker-rg .btn{min-height:2.5rem;font-size:.875rem;gap:.5rem}.timepicker-rg .btn:where(:not(.btn-link,.btn-tertiary)){padding:0 .875rem}.timepicker-rg .btn>.pi,.timepicker-rg .btn>post-icon{width:1.125rem;height:1.125rem}.timepicker-rg .btn .ngb-tp-chevron::before{width:1.125rem;height:1.125rem}.timepicker-rg .form-control{padding:.625rem .875rem;font-size:1rem;line-height:1.5}ngb-timepicker.ng-invalid .form-control{border-color:#a51728}ngb-timepicker.ng-invalid .form-control:focus{border-color:#a51728;box-shadow:0 0 0 .125rem rgba(165,23,40,.25)}ngb-timepicker.ng-invalid~.invalid-feedback,ngb-timepicker.ng-invalid~.invalid-tooltip{display:block}ngb-timepicker.ng-valid~.valid-feedback,ngb-timepicker.ng-valid~.valid-tooltip{display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){ngb-timepicker.ng-invalid .form-control:hover,ngb-timepicker.ng-invalid .form-control:focus-visible,ngb-timepicker.ng-valid .form-control:hover,ngb-timepicker.ng-valid .form-control:focus-visible{border-color:Highlight}}
+.ngb-tp .ngb-tp-input-container{width:auto}.ngb-tp .form-control{width:4.5rem}.ngb-tp .form-control-sm,.ngb-tp .form-control-rg{width:4rem}.ngb-tp .form-control-lg{width:6rem;padding:1rem 1.375rem}.ngb-tp .form-control-lg::placeholder{color:#666}.ngb-tp .form-control-lg::input-placeholder{color:#666}.ngb-tp .ngb-tp-chevron::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8.4 3.467 20.8l1.067 1.067 11.467-11.6 11.6 11.6.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:1.25rem;height:1.25rem;transform:none}.ngb-tp .ngb-tp-chevron.bottom::before{transform:rotateZ(180deg)}.ngb-tp .btn-sm .ngb-tp-chevron::before{width:var(--post-core-dimension-16);height:var(--post-core-dimension-16)}.ngb-tp .btn-lg .ngb-tp-chevron::before{width:1.375rem;height:1.375rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.ngb-tp .form-control:hover,.ngb-tp .form-control:focus-visible{border-color:Highlight}}.timepicker-rg .btn .ngb-tp-chevron::before{width:1.125rem;height:1.125rem}.timepicker-rg .form-control{padding:.625rem .875rem;font-size:1rem;line-height:1.5}ngb-timepicker.ng-invalid .form-control{border-color:#a51728}ngb-timepicker.ng-invalid .form-control:focus{border-color:#a51728;box-shadow:0 0 0 .125rem rgba(165,23,40,.25)}ngb-timepicker.ng-invalid~.invalid-feedback{display:block}ngb-timepicker.ng-valid~.valid-feedback{display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){ngb-timepicker.ng-invalid .form-control:hover,ngb-timepicker.ng-invalid .form-control:focus-visible,ngb-timepicker.ng-valid .form-control:hover,ngb-timepicker.ng-valid .form-control:focus-visible{border-color:Highlight}}

package/components/timepicker.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use 'sass:map';
 
 @use './../mixins/utilities';
@@ -7,6 +5,7 @@
 @use './../mixins/forms' as form-mixins;
 @use './../mixins/button' as button-mixins;
 
+@use './../variables/type';
 @use './../variables/color';
 @use './../variables/components/forms';
 @use './../variables/components/button';
@@ -30,15 +29,15 @@
     width: 6rem;
     padding: 1rem 1.375rem;
     @include form-mixins.placeholder {
-      color: forms.$input-placeholder-color;
+      color: color.$gray-60;
     }
   }
 
   .ngb-tp-chevron {
     &::before {
       @include icon-mixins.icon('2051');
-      width: map.get(button.$btn-icon-size-map, 'md');
-      height: map.get(button.$btn-icon-size-map, 'md');
+      width: map.get(button.$old-btn-icon-size-map, 'md');
+      height: map.get(button.$old-btn-icon-size-map, 'md');
       transform: none;
     }
 
@@ -49,8 +48,8 @@
 
   @each $size in sm, lg {
     .btn-#{$size} .ngb-tp-chevron::before {
-      width: map.get(button.$btn-icon-size-map, $size);
-      height: map.get(button.$btn-icon-size-map, $size);
+      width: map.get(button.$old-btn-icon-size-map, $size);
+      height: map.get(button.$old-btn-icon-size-map, $size);
     }
   }
 
@@ -67,16 +66,16 @@
 // Regular-sized timepicker
 .timepicker-rg {
   .btn {
-    @include button-mixins.button-size(rg);
-
     .ngb-tp-chevron::before {
-      width: map.get(button.$btn-icon-size-map, 'rg');
-      height: map.get(button.$btn-icon-size-map, 'rg');
+      width: map.get(button.$old-btn-icon-size-map, 'rg');
+      height: map.get(button.$old-btn-icon-size-map, 'rg');
     }
   }
 
   .form-control {
-    @include form-mixins.form-rg;
+    padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
+    font-size: type.$font-size-regular;
+    line-height: forms.$input-line-height-rg;
   }
 }
 
@@ -92,15 +91,13 @@ ngb-timepicker {
       }
     }
 
-    ~ .invalid-feedback,
-    ~ .invalid-tooltip {
+    ~ .invalid-feedback {
       display: block;
     }
   }
 
   &.ng-valid {
-    ~ .valid-feedback,
-    ~ .valid-tooltip {
+    ~ .valid-feedback {
       display: block;
     }
   }

package/components/toast.css

@@ -1 +1 @@
-.toast-primary,.toast-success,.toast-warning,.toast-danger,.toast-error,.toast-info,.toast-gray,.toast-notification{background-color:rgb(var(--post-bg-rgb)) !important;color:var(--post-contrast-color) !important}.toast-warning,.toast-info,.toast-gray{--post-contrast-color: #000;--post-focus-color: #1976c8;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-white: #fff;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-black: #000;--post-primary: hsl(0, 0%, 20%);--post-secondary: hsl(0, 0%, 40%);--post-success: #2c871d;--post-warning: #f49e00;--post-error: #a51728;--post-info: #cce4ee;--post-success-background: #c0debb;--post-warning-background: #fce2b2;--post-error-background: #ffdade;--post-nightblue: #004976;--post-nightblue-bright: #0076a8;--post-petrol: #006d68;--post-petrol-bright: #00968f;--post-coral: #9e2a2f;--post-coral-bright: #e03c31;--post-olive: #716135;--post-olive-bright: #aa9d2e;--post-purple: #80276c;--post-purple-bright: #c5299b;--post-aubergine: #523178;--post-aubergine-bright: #7566a0;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-black-alpha-10-rgba: rgba(0, 0, 0, 0.1);--post-black-alpha-20-rgba: rgba(0, 0, 0, 0.2);--post-black-alpha-40-rgba: rgba(0, 0, 0, 0.4);--post-black-alpha-60-rgba: rgba(0, 0, 0, 0.6);--post-black-alpha-80-rgba: rgba(0, 0, 0, 0.8);--post-white-alpha-10-rgba: rgba(255, 255, 255, 0.1);--post-white-alpha-20-rgba: rgba(255, 255, 255, 0.2);--post-white-alpha-40-rgba: rgba(255, 255, 255, 0.4);--post-white-alpha-60-rgba: rgba(255, 255, 255, 0.6);--post-white-alpha-80-rgba: rgba(255, 255, 255, 0.8);--post-yellow-rgb: 255, 204, 0;--post-white-rgb: 255, 255, 255;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-black-rgb: 0, 0, 0;--post-primary-rgb: 51, 51, 51;--post-secondary-rgb: 102, 102, 102;--post-success-rgb: 44, 135, 29;--post-warning-rgb: 244, 158, 0;--post-error-rgb: 165, 23, 40;--post-info-rgb: 204, 228, 238;--post-success-background-rgb: 192, 222, 187;--post-warning-background-rgb: 252, 226, 178;--post-error-background-rgb: 255, 218, 222;--post-nightblue-rgb: 0, 73, 118;--post-nightblue-bright-rgb: 0, 118, 168;--post-petrol-rgb: 0, 109, 104;--post-petrol-bright-rgb: 0, 150, 143;--post-coral-rgb: 158, 42, 47;--post-coral-bright-rgb: 224, 60, 49;--post-olive-rgb: 113, 97, 53;--post-olive-bright-rgb: 170, 157, 46;--post-purple-rgb: 128, 39, 108;--post-purple-bright-rgb: 197, 41, 155;--post-aubergine-rgb: 82, 49, 120;--post-aubergine-bright-rgb: 117, 102, 160}.toast-primary,.toast-success,.toast-danger,.toast-error,.toast-notification{--post-contrast-color: #fff;--post-focus-color: #fff;--post-contrast-color-inverted: #000;--post-dark: #faf9f8;--post-light: hsl(0, 0%, 20%);--post-gray-80: hsl(0, 0%, 90%);--post-gray-60: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-20: hsl(0, 0%, 40%);--post-gray-10: hsl(0, 0%, 20%);--post-contrast-color-rgb: 255, 255, 255;--post-contrast-color-inverted-rgb: 0, 0, 0;--post-dark-rgb: 250, 249, 248;--post-light-rgb: 51, 51, 51;--post-gray-80-rgb: 230, 230, 230;--post-gray-60-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-20-rgb: 102, 102, 102;--post-gray-10-rgb: 51, 51, 51}.toast-close-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.toast-close-button{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.toast-close-button::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .toast-close-button{color:var(--post-contrast-color)}.toast-close-button:focus,.toast-close-button:not(:disabled):hover,.pretend-hover.toast-close-button{color:var(--post-contrast-color)}.toast-close-button:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-close-button{color:CanvasText;forced-color-adjust:none}.toast-close-button:focus,.toast-close-button:not(:disabled):hover,.pretend-hover.toast-close-button{color:Highlight}}.toast{position:relative;box-sizing:border-box;min-height:3.5rem;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);border-radius:4px;padding:.75rem 1rem;padding-inline-start:4.25rem;margin-block-end:1rem;font-size:.8125rem;font-weight:400;display:flex;flex-direction:column;justify-content:center;gap:.25rem;pointer-events:auto;position:relative;padding-inline-end:3.75rem}.toast.no-icon{min-height:3rem;padding-inline-start:1rem}.toast[class^=pi-],.toast[class*=" pi-"]{background-size:2rem;background-position:1rem .75rem;background-repeat:no-repeat}.toast[class^=pi-].no-icon,.toast[class*=" pi-"].no-icon{background-image:none}.toast::before{content:"";display:block}.toast::before,.toast>post-icon{position:absolute;height:2rem;width:2rem;left:1rem;top:.75rem}.toast.no-icon::before,.toast[class^=pi-]::before,.toast[class*=" pi-"]::before{content:unset}.toast.no-icon>post-icon,.toast[class^=pi-]>post-icon,.toast[class*=" pi-"]>post-icon{display:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast{filter:none !important;border:2px solid CanvasText}}.toast a{font-weight:400}.toast hr{margin-block:.25rem .75rem !important}.toast>:only-child,.toast>post-icon:first-child+:last-child{font-size:.9375rem;font-weight:700}.toast>*{margin:0}.toast>.toast-close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.toast>.toast-close-button:first-child+:last-child{font-size:.9375rem;font-weight:700}.toast-close-button>span{display:none}.toast-title{font-size:.9375rem;font-weight:700}.toast-primary{--post-bg-rgb: 51, 51, 51}.toast-primary:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-primary:has(>post-icon)::before{content:none}.toast-primary>post-icon{background-color:#333}.toast-success{--post-bg-rgb: 44, 135, 29}.toast-success:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-success:has(>post-icon)::before{content:none}.toast-success>post-icon{background-color:#2c871d}.toast-warning{--post-bg-rgb: 244, 158, 0}.toast-warning:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-warning:has(>post-icon)::before{content:none}.toast-warning>post-icon{background-color:#f49e00}.toast-danger,.toast-error{--post-bg-rgb: 165, 23, 40}.toast-danger:not(.no-icon,[class^=pi-],[class*=" pi-"])::before,.toast-error:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-danger:has(>post-icon)::before,.toast-error:has(>post-icon)::before{content:none}.toast-danger>post-icon,.toast-error>post-icon{background-color:#a51728}.toast-info{--post-bg-rgb: 204, 228, 238}.toast-info:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-info:has(>post-icon)::before{content:none}.toast-info>post-icon{background-color:#cce4ee}.toast-gray{--post-bg-rgb: 244, 243, 241}.toast-gray:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-gray:has(>post-icon)::before{content:none}.toast-gray>post-icon{background-color:#f4f3f1}.toast-notification{--post-bg-rgb: 51, 51, 51}.toast-notification:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.533 26.933c-3.333-4.8-5.867-12.667-5.867-18.267 0-4.8-3.867-8.667-8.667-8.667S7.332 3.866 7.332 8.666c0 5.6-2.533 13.467-5.867 18.267L1.998 28h11.333v4h5.333v-4h11.333l.533-1.067zm-13.2 3.734h-2.667V28h2.667zm-14.133-4c3.2-5.067 5.467-12.533 5.467-18 0-4 3.333-7.333 7.333-7.333s7.333 3.333 7.333 7.333c0 5.467 2.267 12.933 5.467 18z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-notification:has(>post-icon)::before{content:none}.toast-notification>post-icon{background-color:#333}.toast-error{--post-bg-rgb: 165, 23, 40}.toast-error:not(.no-icon,[class^=pi-],[class*=" pi-"])::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.toast-error:has(>post-icon)::before{content:none}.toast-error>post-icon{background-color:#a51728}.toast-container{position:fixed;z-index:1080;display:flex;flex-direction:column;pointer-events:none}.toast-container .toast{width:25rem}@media(max-width: 779.98px){.toast-container .toast{max-width:25rem}}@media(max-width: 779.98px){.toast-container{right:1rem;left:1rem}.toast-container .toast{width:100%}}.toast-top-center,.toast-top-full-width,.toast-top-left,.toast-top-right{top:1rem}.toast-bottom-center,.toast-bottom-full-width,.toast-bottom-right,.toast-bottom-left{bottom:1rem}.toast-top-left,.toast-bottom-left,.toast-top-full-width,.toast-bottom-full-width,.toast-center-left{left:1rem}.toast-top-right,.toast-bottom-right,.toast-top-full-width,.toast-bottom-full-width,.toast-center-right{right:1rem}.toast-top-center,.toast-bottom-center{left:50%;transform:translateX(-50%)}.toast-center-left,.toast-center-right{top:50%;transform:translateY(-50%)}.toast-center-center{top:50%;left:50%;transform:translate(-50%, -50%)}.toast-top-full-width .toast,.toast-bottom-full-width .toast{width:100% !important}
+.toast-close-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-close-button{background-color:ButtonFace !important}.toast-close-button:hover{background-color:Highlight !important}}.toast-close-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-close-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-close-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.toast-close-button::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.toast-close-button:focus,.toast-close-button:not(:disabled):hover,.pretend-hover.toast-close-button{color:#000}.toast-close-button:disabled{color:#999}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-close-button{color:CanvasText;forced-color-adjust:none}.toast-close-button:focus,.toast-close-button:not(:disabled):hover,.pretend-hover.toast-close-button{color:Highlight}}.toast{min-height:calc(var(--post-device-sizing-notification-icon-3) + 2*var(--post-device-spacing-padding-3));box-sizing:border-box;box-shadow:var(--post-device-elevation-300);border-radius:var(--post-device-border-radius-2);padding:var(--post-device-spacing-padding-3) var(--post-device-spacing-padding-11);padding-inline-start:calc(var(--post-device-spacing-padding-11) + var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-2));font-weight:var(--post-core-font-weight-400);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);position:relative;color:var(--post-scheme-color-surface-default-fg);background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.toast:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast:not(.no-icon)::before{color:CanvasText}}.toast:has(>post-icon)::before{content:none}.toast>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.toast::before{content:"";display:block}.toast::before,.toast>post-icon{position:absolute;height:var(--post-device-sizing-notification-icon-3);width:var(--post-device-sizing-notification-icon-3);left:var(--post-device-spacing-padding-11);top:var(--post-device-spacing-padding-3)}.toast.no-icon{min-height:calc(2*var(--post-device-spacing-padding-3) + var(--post-core-dimension-24));padding-inline-start:var(--post-device-spacing-padding-11)}.toast.no-icon::before{content:unset}.toast.no-icon>post-icon{display:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast{filter:none !important;border:2px solid CanvasText}}.toast{display:flex;flex-direction:column;justify-content:center;gap:var(--post-core-dimension-4)}.toast a{font-weight:var(--post-core-font-weight-400)}.toast hr{margin-block:var(--post-core-dimension-4) var(--post-core-dimension-12) !important}.toast>*{margin:0}.toast-dismissible{pointer-events:auto;position:relative}.toast-dismissible:not(.banner-action):not(.alert-action){padding-inline-end:calc(var(--post-device-spacing-padding-11) + var(--post-device-spacing-gap-inline-2) + var(--post-core-dimension-24))}.toast-dismissible>.toast-close-button{position:absolute;inset-block-start:1rem;inset-inline-end:var(--post-device-spacing-padding-11)}.toast-close-button>span{display:none}.toast-neutral{background-color:var(--post-scheme-color-signal-neutral);border-color:var(--post-scheme-color-signal-neutral-dark);color-scheme:var(--post-core-bg-scheme-light)}.toast-neutral:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.986 15.73c-.503.16-1.03.27-1.586.27a5.24 5.24 0 0 1-4.43-2.448c-.73.382-1.547.62-2.427.62a5.257 5.257 0 0 1-5.257-5.258c0-.88.237-1.698.62-2.427a5.24 5.24 0 0 1-2.449-4.43c0-.714.145-1.393.403-2.014C16.574.028 16.29 0 16 0 7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16c0-.091-.012-.18-.014-.27M16 30.667c-8.087 0-14.667-6.58-14.667-14.667 0-7.806 6.13-14.207 13.828-14.643a6.54 6.54 0 0 0 2.116 5.56 6.3 6.3 0 0 0-.325 1.997 6.6 6.6 0 0 0 6.59 6.59c.677 0 1.346-.108 1.998-.324a6.54 6.54 0 0 0 5.067 2.15C29.933 24.796 23.639 30.667 16 30.667M11.352 14.17a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 1 1 1.334 1.334 1.336 1.336 0 0 1-1.334-1.334m13.981 8.496a2.667 2.667 0 1 0-5.333 0 2.667 2.667 0 0 0 5.333 0m-4 0a1.335 1.335 0 0 1 2.667 0c0 .735-.598 1.333-1.333 1.333a1.335 1.335 0 0 1-1.334-1.333m-7.276-1.829a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.667a.667.667 0 1 1 .002-1.335.667.667 0 0 1-.002 1.335m7.772-6a2 2 0 1 0-4 0 2 2 0 0 0 4 0m-2 .666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M11.505 5.505a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 2.666a.667.667 0 1 1 .001-1.334.667.667 0 0 1-.001 1.334M28.93 18.548a13.2 13.2 0 0 1-4.335 7.357.663.663 0 0 1-.94-.073.666.666 0 0 1 .073-.94 11.84 11.84 0 0 0 3.894-6.61.668.668 0 0 1 1.307.266m-6.668 8.212a.667.667 0 0 1-.295.896c-.837.423-1.722.757-2.63.99a.665.665 0 1 1-.33-1.292 11.7 11.7 0 0 0 2.359-.888.67.67 0 0 1 .896.294M4 15.921a.666.666 0 1 1-1.333 0 13.13 13.13 0 0 1 4.597-9.984.666.666 0 1 1 .867 1.013A11.8 11.8 0 0 0 4 15.92'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-signal-neutral-dark)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-neutral:not(.no-icon)::before{color:CanvasText}}.toast-neutral:has(>post-icon)::before{content:none}.toast-neutral>post-icon{background-color:var(--post-scheme-color-signal-neutral);color:var(--post-scheme-color-signal-neutral-dark)}.toast-success{background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-success:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-success-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-success:not(.no-icon)::before{color:CanvasText}}.toast-success:has(>post-icon)::before{content:none}.toast-success>post-icon{background-color:var(--post-scheme-color-interactive-notification-success-bg);color:var(--post-scheme-color-interactive-notification-success-icon)}.toast-warning{background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-warning:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-warning-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-warning:not(.no-icon)::before{color:CanvasText}}.toast-warning:has(>post-icon)::before{content:none}.toast-warning>post-icon{background-color:var(--post-scheme-color-interactive-notification-warning-bg);color:var(--post-scheme-color-interactive-notification-warning-icon)}.toast-error{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-error:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-error:not(.no-icon)::before{color:CanvasText}}.toast-error:has(>post-icon)::before{content:none}.toast-error>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}.toast-info{background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-info:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.33 25.33v-16h-4.67V12h2v13.33h-2V28h6.67v-2.67zM14.67 4h2.67v2.67h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-info-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-info:not(.no-icon)::before{color:CanvasText}}.toast-info:has(>post-icon)::before{content:none}.toast-info>post-icon{background-color:var(--post-scheme-color-interactive-notification-info-bg);color:var(--post-scheme-color-interactive-notification-info-icon)}.toast-danger{background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke);color-scheme:var(--post-core-bg-scheme-light)}.toast-danger:not(.no-icon)::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.67 4h2.67v18.67h-2.67zm0 21.33h2.67V28h-2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;color:var(--post-scheme-color-interactive-notification-error-icon)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.toast-danger:not(.no-icon)::before{color:CanvasText}}.toast-danger:has(>post-icon)::before{content:none}.toast-danger>post-icon{background-color:var(--post-scheme-color-interactive-notification-error-bg);color:var(--post-scheme-color-interactive-notification-error-icon)}.toast-container{position:fixed;z-index:1080;display:flex;flex-direction:column}.toast-container .toast{width:25rem}@media(max-width: 779.98px){.toast-container .toast{max-width:25rem}}@media(max-width: 779.98px){.toast-container{right:1rem;left:1rem}.toast-container .toast{width:100%}}.toast-top-center,.toast-top-full-width,.toast-top-left,.toast-top-right{top:1rem}.toast-bottom-center,.toast-bottom-full-width,.toast-bottom-right,.toast-bottom-left{bottom:1rem}.toast-top-left,.toast-bottom-left,.toast-top-full-width,.toast-bottom-full-width,.toast-center-left{left:1rem}.toast-top-right,.toast-bottom-right,.toast-top-full-width,.toast-bottom-full-width,.toast-center-right{right:1rem}.toast-top-center,.toast-bottom-center{left:50%;transform:translateX(-50%)}.toast-center-left,.toast-center-right{top:50%;transform:translateY(-50%)}.toast-center-center{top:50%;left:50%;transform:translate(-50%, -50%)}.toast-top-full-width .toast,.toast-bottom-full-width .toast{width:100% !important}

package/components/toast.scss

@@ -1,4 +1,4 @@
-@forward './../variables/options';
+@use 'sass:list';
 
 @use './../themes/bootstrap/core' as *;
 
@@ -8,10 +8,17 @@
 @use './../variables/commons';
 @use './../variables/spacing';
 @use './../variables/components/notification';
+@use './../tokens/components';
+@use './../functions/tokens';
+
+tokens.$default-map: components.$post-banner;
 
 .toast {
   @include notification-mx.notification-size(toast);
   @include notification-mx.notification-body(toast);
+}
+
+.toast-dismissible {
   @include notification-mx.notification-dismissible(toast, 'toast-close-button');
 }
 
@@ -24,20 +31,17 @@
   }
 }
 
-.toast-title {
-  @include notification-mx.notification-heading(toast);
-}
-
-@each $name, $color, $icon in notification.$notification-variants {
-  $selector: '.toast-#{$name}';
-
-  // the .toast-error class is needed because it is automatically added by the ngx-toastr library
-  @if $name == 'danger' {
-    $selector: '#{$selector}, .toast-error';
-  }
-
-  #{$selector} {
-    @include notification-mx.notification-variant($color, $icon);
+@each $name, $color, $icon, $border-color, $icon-color,
+  $scheme in notification.$notification-variants
+{
+  .toast-#{$name} {
+    @include notification-mx.notification-variant(
+      $color,
+      $icon,
+      $border-color,
+      $icon-color,
+      $scheme
+    );
   }
 }
 
@@ -47,7 +51,6 @@
   z-index: commons.$zindex-alert;
   display: flex;
   flex-direction: column;
-  pointer-events: none;
 
   .toast {
     width: 25rem;

package/components/tooltip.css

@@ -1 +1 @@
-.tooltip{--bs-tooltip-zindex: 1070;--bs-tooltip-max-width: 310px;--bs-tooltip-padding-x: 0.5rem;--bs-tooltip-padding-y: 0.25rem;--bs-tooltip-margin: 0;--bs-tooltip-font-size:1rem;--bs-tooltip-color: #000;--bs-tooltip-bg: #fc0;--bs-tooltip-border-radius: 0;--bs-tooltip-opacity: 1;--bs-tooltip-arrow-width: 0.8rem;--bs-tooltip-arrow-height: 0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:"Frutiger Neue For Post",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:rgba(0,0,0,0);border-style:solid}.bs-tooltip-top .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow{bottom:calc(-1*var(--bs-tooltip-arrow-height))}.bs-tooltip-top .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width)*.5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-end .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow{left:calc(-1*var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-end .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width)*.5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-bottom .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow{top:calc(-1*var(--bs-tooltip-arrow-height))}.bs-tooltip-bottom .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-start .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow{right:calc(-1*var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-start .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width)*.5) 0 calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.bs-tooltip-top{margin-bottom:.4rem !important}.bs-tooltip-top .arrow{bottom:1px}.bs-tooltip-end{margin-left:.4rem !important}.bs-tooltip-end .arrow{left:1px}.bs-tooltip-bottom{margin-top:.4rem !important}.bs-tooltip-bottom .arrow{top:1px}.bs-tooltip-start{margin-right:.4rem !important}.bs-tooltip-start .arrow{right:1px}
+.tooltip{--bs-tooltip-zindex: 1070;--bs-tooltip-max-width: 310px;--bs-tooltip-padding-x: 0.5rem;--bs-tooltip-padding-y: 0.25rem;--bs-tooltip-margin: 0;--bs-tooltip-font-size:1rem;--bs-tooltip-color: #000;--bs-tooltip-bg: #fc0;--bs-tooltip-border-radius: 0;--bs-tooltip-opacity: 1;--bs-tooltip-arrow-width: 0.8rem;--bs-tooltip-arrow-height: 0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:var(--post-core-font-weight-400);line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:rgba(0,0,0,0);border-style:solid}.bs-tooltip-top .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow{bottom:calc(-1*var(--bs-tooltip-arrow-height))}.bs-tooltip-top .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width)*.5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-end .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow{left:calc(-1*var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-end .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width)*.5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-bottom .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow{top:calc(-1*var(--bs-tooltip-arrow-height))}.bs-tooltip-bottom .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-start .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow{right:calc(-1*var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-start .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width)*.5) 0 calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.bs-tooltip-top{margin-bottom:.4rem !important}.bs-tooltip-top .arrow{bottom:1px}.bs-tooltip-end{margin-left:.4rem !important}.bs-tooltip-end .arrow{left:1px}.bs-tooltip-bottom{margin-top:.4rem !important}.bs-tooltip-bottom .arrow{top:1px}.bs-tooltip-start{margin-right:.4rem !important}.bs-tooltip-start .arrow{right:1px}

package/components/tooltip.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use './../themes/bootstrap/tooltip' as bt;
 
 @use './../variables/components/tooltips';

package/components/transitions.scss

@@ -1,3 +1 @@
-@forward './../variables/options';
-
 @use './../themes/bootstrap/transitions' as bt;

package/components/validation.css

@@ -0,0 +1 @@
+.valid-feedback,.invalid-feedback{display:none;align-items:flex-start;width:100%;margin:0;font-size:var(--post-device-font-size-9)}.valid-feedback{color:var(--post-scheme-color-signal-success-solo)}.was-validated :valid~.valid-feedback,.is-valid~.valid-feedback{display:flex}.was-validated:has(:valid)~.valid-feedback,:has(.is-valid)~.valid-feedback{display:flex}.was-validated:has(:invalid)~.invalid-feedback,:has(.is-invalid)~.invalid-feedback{display:flex}.invalid-feedback{color:var(--post-scheme-color-signal-error-solo)}.was-validated :invalid~.invalid-feedback,.is-invalid~.invalid-feedback{display:flex}input:not([type=checkbox],[type=radio])~.invalid-feedback,input:not([type=checkbox],[type=radio])~.valid-feedback,select~.invalid-feedback,select~.valid-feedback,textarea~.invalid-feedback,textarea~.valid-feedback{margin-block:var(--post-device-spacing-padding-block-5) !important;padding-inline:var(--post-device-spacing-padding-2)}input[type=checkbox]~.invalid-feedback,input[type=checkbox]~.valid-feedback,input[type=radio]~.invalid-feedback,input[type=radio]~.valid-feedback,:has(input[type=checkbox])~.invalid-feedback,:has(input[type=checkbox])~.valid-feedback,:has(input[type=radio])~.invalid-feedback,:has(input[type=radio])~.valid-feedback{padding-inline-start:var(--post-core-dimension-4)}input[type=checkbox]~.invalid-feedback::before,input[type=checkbox]~.valid-feedback::before,input[type=radio]~.invalid-feedback::before,input[type=radio]~.valid-feedback::before,:has(input[type=checkbox])~.invalid-feedback::before,:has(input[type=checkbox])~.valid-feedback::before,:has(input[type=radio])~.invalid-feedback::before,:has(input[type=radio])~.valid-feedback::before{height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block-start:var(--post-core-dimension-2);margin-block-end:var(--post-core-dimension-3);margin-inline-end:var(--post-device-spacing-gap-inline-10);content:"";flex-shrink:0;mask-size:contain;mask-position:center;mask-repeat:no-repeat}input[type=checkbox] input[type=radio]~.invalid-feedback,input[type=checkbox] input[type=radio]~.valid-feedback,input[type=checkbox] :has(input[type=radio])~.invalid-feedback,input[type=checkbox] :has(input[type=radio])~.valid-feedback,input[type=radio] input[type=radio]~.invalid-feedback,input[type=radio] input[type=radio]~.valid-feedback,input[type=radio] :has(input[type=radio])~.invalid-feedback,input[type=radio] :has(input[type=radio])~.valid-feedback,:has(input[type=checkbox]) input[type=radio]~.invalid-feedback,:has(input[type=checkbox]) input[type=radio]~.valid-feedback,:has(input[type=checkbox]) :has(input[type=radio])~.invalid-feedback,:has(input[type=checkbox]) :has(input[type=radio])~.valid-feedback,:has(input[type=radio]) input[type=radio]~.invalid-feedback,:has(input[type=radio]) input[type=radio]~.valid-feedback,:has(input[type=radio]) :has(input[type=radio])~.invalid-feedback,:has(input[type=radio]) :has(input[type=radio])~.valid-feedback{margin-block-start:var(--post-device-spacing-gap-4);margin-block-end:var(--post-device-spacing-padding-block-8)}input[type=checkbox] input[type=checkbox]~.invalid-feedback,input[type=checkbox] input[type=checkbox]~.valid-feedback,input[type=checkbox] :has(input[type=checkbox])~.invalid-feedback,input[type=checkbox] :has(input[type=checkbox])~.valid-feedback,input[type=radio] input[type=checkbox]~.invalid-feedback,input[type=radio] input[type=checkbox]~.valid-feedback,input[type=radio] :has(input[type=checkbox])~.invalid-feedback,input[type=radio] :has(input[type=checkbox])~.valid-feedback,:has(input[type=checkbox]) input[type=checkbox]~.invalid-feedback,:has(input[type=checkbox]) input[type=checkbox]~.valid-feedback,:has(input[type=checkbox]) :has(input[type=checkbox])~.invalid-feedback,:has(input[type=checkbox]) :has(input[type=checkbox])~.valid-feedback,:has(input[type=radio]) input[type=checkbox]~.invalid-feedback,:has(input[type=radio]) input[type=checkbox]~.valid-feedback,:has(input[type=radio]) :has(input[type=checkbox])~.invalid-feedback,:has(input[type=radio]) :has(input[type=checkbox])~.valid-feedback{margin-block-start:var(--post-device-spacing-gap-4);margin-block-end:var(--post-device-spacing-padding-block-8)}input[type=checkbox]~.invalid-feedback::before,input[type=radio]~.invalid-feedback::before,:has(input[type=checkbox])~.invalid-feedback::before,:has(input[type=radio])~.invalid-feedback::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'%3E%3C/path%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}input[type=checkbox]~.valid-feedback::before,input[type=radio]~.valid-feedback::before,:has(input[type=checkbox])~.valid-feedback::before,:has(input[type=radio])~.valid-feedback::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'%3E%3C/path%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}

package/components/validation.scss

@@ -0,0 +1,120 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../functions/icons';
+@use './../mixins/icons' as icon-mixin;
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-validation;
+
+/*
+Default feedback message classes
+ */
+.valid-feedback,
+.invalid-feedback {
+  display: none;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0;
+  font-size: tokens.get('post-validation-font-size');
+}
+
+/*
+ Valid input feedback
+*/
+.valid-feedback {
+  color: tokens.get('post-validation-success');
+
+  .was-validated :valid ~ &,
+  .is-valid ~ & {
+    display: flex;
+  }
+}
+
+// Special for fieldset
+.was-validated:has(:valid) ~ .valid-feedback,
+:has(.is-valid) ~ .valid-feedback {
+  display: flex;
+}
+
+// Special for fieldset
+.was-validated:has(:invalid) ~ .invalid-feedback,
+:has(.is-invalid) ~ .invalid-feedback {
+  display: flex;
+}
+
+/*
+ Invalid input feedback
+*/
+.invalid-feedback {
+  color: tokens.get('post-validation-error');
+
+  .was-validated :invalid ~ &,
+  .is-invalid ~ & {
+    display: flex;
+  }
+}
+
+input:not([type='checkbox'], [type='radio']),
+select,
+textarea {
+  ~ .invalid-feedback,
+  ~ .valid-feedback {
+    margin-block: tokens.get('assist-padding-block', components.$post-assist) !important;
+    padding-inline: tokens.get('validation-input-padding-inline');
+  }
+}
+
+/*
+ Checkbox and Radio box specific classes
+*/
+input[type='checkbox'],
+input[type='radio'],
+:has(input[type='checkbox']),
+:has(input[type='radio']) {
+  ~ .invalid-feedback,
+  ~ .valid-feedback {
+    padding-inline-start: tokens.get('validation-group-padding-inline-start');
+
+    &::before {
+      height: tokens.get('validation-group-icon-size');
+      width: tokens.get('validation-group-icon-size');
+      margin-block-start: tokens.get('validation-group-icon-block-start');
+      margin-block-end: tokens.get('validation-group-icon-block-end');
+      margin-inline-end: tokens.get('validation-group-gap-inline');
+      content: '';
+      flex-shrink: 0;
+      mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+    }
+  }
+
+  input[type='radio'],
+  :has(input[type='radio']) {
+    ~ .invalid-feedback,
+    ~ .valid-feedback {
+      margin-block-start: tokens.get('radio-button-gap-block-group', components.$post-radio-button);
+      margin-block-end: tokens.get(
+        'radio-button-padding-block-group',
+        components.$post-radio-button
+      );
+    }
+  }
+
+  input[type='checkbox'],
+  :has(input[type='checkbox']) {
+    ~ .invalid-feedback,
+    ~ .valid-feedback {
+      margin-block-start: tokens.get('checkbox-gap-block-group', components.$post-checkbox);
+      margin-block-end: tokens.get('checkbox-padding-block-group', components.$post-checkbox);
+    }
+  }
+
+  ~ .invalid-feedback::before {
+    @include icon-mixin.icon('warning');
+  }
+
+  ~ .valid-feedback::before {
+    @include icon-mixin.icon('success');
+  }
+}

package/elements/_index.scss

@@ -1,4 +1,10 @@
 @use 'reset';
+
 @use 'body';
-@use 'heading';
+@use 'anchor';
+@use 'list-bullet';
+@use 'list-description';
+@use 'list-number';
+@use 'paragraph';
 @use 'fieldset-legend';
+@use 'heading';

package/elements/anchor.css

@@ -0,0 +1 @@
+a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:inherit}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}}

package/elements/anchor.scss

@@ -0,0 +1,33 @@
+@use '../tokens/elements';
+@use '../functions/tokens';
+@use '../mixins/utilities';
+
+tokens.$default-map: elements.$post-link;
+
+a {
+  -webkit-text-decoration: tokens.get('link-decoration');
+          text-decoration: tokens.get('link-decoration');
+  border-radius: tokens.get('link-border-radius');
+  color: inherit;
+
+  &:hover {
+    color: tokens.get('link-hover-fg');
+  }
+
+  @include utilities.focus-style;
+
+  @include utilities.high-contrast-mode() {
+    &,
+    &:focus {
+      color: LinkText !important;
+    }
+
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+
+    &:visited {
+      color: VisitedText;
+    }
+  }
+}

package/elements/body.css

@@ -1 +1 @@
-@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:900;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlk.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlk.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:900;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlkIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlkIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:700;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}body{font-family:var(--post-device-font-family-default);font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-regular);line-height:var(--post-device-line-height-content);letter-spacing:var(--post-core-letter-spacing-default);color:var(--post-mode-color-surface-default-fg)}
+@font-face{font-family:"Swiss Post Sans";font-weight:900;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Black.woff2") format("woff2")}@font-face{font-family:"Swiss Post Sans";font-weight:700;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Bold.woff2") format("woff2")}@font-face{font-family:"Swiss Post Sans";font-weight:400;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Regular.woff2") format("woff2")}body{font-family:var(--post-device-font-family-default),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-regular);line-height:var(--post-device-line-height-content);letter-spacing:var(--post-core-letter-spacing-default);font-variant-numeric:proportional-nums;color:var(--post-scheme-color-surface-default-fg);min-height:100vh}

package/elements/body.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use '../variables/color';
+@use '../variables/type';
 @use '../functions/tokens';
 @use '../tokens/elements';
 
@@ -8,10 +10,12 @@ tokens.$default-map: elements.$post-body;
 @use '../components/fonts';
 
 body {
-  font-family: tokens.get('body-font-family');
+  font-family: type.$font-family-sans-serif;
   font-size: tokens.get('body-font-size');
   font-weight: tokens.get('body-font-weight');
   line-height: tokens.get('body-line-height');
   letter-spacing: tokens.get('body-letter-spacing');
+  font-variant-numeric: proportional-nums;
   color: tokens.get('body-color');
+  min-height: 100vh;
 }

package/elements/fieldset-legend.css

@@ -1 +1 @@
-legend{font-weight:var(--post-device-font-weight-bold);line-height:var(--post-device-line-height-legend);width:100%}legend.large{font-size:var(--post-device-font-size-3);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-4);padding-block-end:var(--post-device-spacing-padding-17);border-bottom:var(--post-core-color-sandgrey-100) var(--post-device-border-width-default) var(--post-core-border-style-solid)}
+legend{margin-bottom:var(--post-core-dimension-16);font-weight:var(--post-device-font-weight-bold);line-height:var(--post-device-line-height-legend);width:100%}legend.large{font-size:var(--post-device-font-size-3);padding-block-start:var(--post-device-spacing-margin-1);padding-block-end:calc(var(--post-device-spacing-padding-17) - var(--post-device-border-width-default));margin-block-end:var(--post-device-spacing-margin-4);border-bottom:var(--post-device-border-width-default) var(--post-scheme-color-surface-default-stroke) var(--post-core-border-style-solid)}

package/elements/fieldset-legend.scss

@@ -4,15 +4,19 @@
 tokens.$default-map: elements.$post-legend;
 
 legend {
+  margin-bottom: tokens.get('legend-margin-block-end');
   font-weight: tokens.get('legend-font-weight');
   line-height: tokens.get('legend-line-height');
   width: 100%;
 
   &.large {
     font-size: tokens.get('legend-large-font-size');
-    margin-block-start: tokens.get('legend-large-margin-block-start');
+    padding-block-start: tokens.get('legend-large-padding-block-start');
+    padding-block-end: calc(
+      tokens.get('legend-large-padding-block-end') - tokens.get('legend-large-border-width')
+    );
     margin-block-end: tokens.get('legend-large-margin-block-end');
-    padding-block-end: tokens.get('legend-large-padding-block-end');
-    border-bottom: tokens.get('legend-large-border-bottom');
+    border-bottom: tokens.get('legend-large-border-width') tokens.get('legend-large-border-color')
+      tokens.get('legend-large-border-style');
   }
 }

package/elements/heading.css

@@ -1 +1 @@
-h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}h1,.h1{font-size:var(--post-device-font-size-1);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h2,.h2{font-size:var(--post-device-font-size-2);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h3,.h3{font-size:var(--post-device-font-size-3);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h4,.h4{font-size:var(--post-device-font-size-4);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h5,.h5{font-size:var(--post-device-font-size-5);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h6,.h6{font-size:var(--post-device-font-size-6);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}
+:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6){line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):first-child{margin-block-start:0}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):last-child{margin-block-end:0}h1,.h1{font-size:var(--post-device-font-size-1);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h2,.h2{font-size:var(--post-device-font-size-2);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h3,.h3{font-size:var(--post-device-font-size-3);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h4,.h4{font-size:var(--post-device-font-size-4);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h5,.h5{font-size:var(--post-device-font-size-5);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h6,.h6{font-size:var(--post-device-font-size-6);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}

package/elements/heading.scss

@@ -3,20 +3,18 @@
 
 tokens.$default-map: elements.$post-heading;
 
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
+// :is keeps specificity which is handy here
+:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
   line-height: tokens.get('heading-line-height');
   font-weight: tokens.get('heading-font-weight');
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 h1,