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

package/components/datepicker.css

@@ -1 +1 @@
-ngb-datepicker{--bs-light: var(--post-light)}ngb-datepicker.dropdown-menu{box-shadow:0 0 8px 0 #333}ngb-datepicker-navigation{justify-content:space-between}ngb-datepicker-navigation button.ngb-dp-arrow-btn{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}ngb-datepicker-navigation button.ngb-dp-arrow-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){ngb-datepicker-navigation button.ngb-dp-arrow-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){ngb-datepicker-navigation button.ngb-dp-arrow-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){ngb-datepicker-navigation button.ngb-dp-arrow-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}ngb-datepicker-navigation-select.ngb-dp-navigation-select{flex:0 1 auto}ngb-datepicker-navigation-select.ngb-dp-navigation-select select{padding-right:2.25rem;border:0;background-position:right}ngb-datepicker-navigation-select.ngb-dp-navigation-select select+select{margin-left:.5rem}ngb-datepicker .ngb-dp-arrow{flex-grow:0;height:auto}ngb-datepicker .ngb-dp-arrow span{flex-shrink:0}.ngb-dp-header{font-size:1.25rem;font-weight:700}.ngb-dp-header .ngb-dp-month-name{padding-top:.3rem;color:#000 !important;font:inherit}.ngb-dp-navigation-select .form-select{background-color:rgba(0,0,0,0);font:inherit;min-width:-moz-fit-content;min-width:fit-content}span.ngb-dp-navigation-chevron{border-width:.09em .09em 0 0}.ngb-dp-weekday{color:rgba(var(--post-contrast-color-rgb), 0.6) !important;font-size:1rem;font-style:normal !important;line-height:1.5 !important;width:40px !important;height:auto !important;font-weight:normal}.ngb-dp-weekdays{border-bottom:0 !important}.ngb-dp-day{width:auto !important;height:auto !important}.ngb-dp-day.hidden{flex-grow:1}.ngb-dp-day{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.ngb-dp-day: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){.ngb-dp-day:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.ngb-dp-day: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){.ngb-dp-day:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.ngb-dp-day>[ngbDatepickerDayView]{width:40px !important;height:40px !important;line-height:40px}.ngb-dp-day>[ngbDatepickerDayView].active:not(.bg-primary){outline:none}.ngb-dp-day>.text-white{color:#000 !important}.ngb-dp-day>.btn-light,.ngb-dp-day>.btn-light:hover{background:none}.ngb-dp-day>.btn-light:hover{background-color:#faf9f8}.ngb-dp-day>.btn-light:not(:disabled):not(.disabled):active,.ngb-dp-day>.btn-light:not(:disabled):not(.disabled).active{background-color:rgba(0,0,0,0)}.ngb-dp-day>.btn-light.bg-primary.text-white{background-color:#fc0 !important}.ngb-dp-open{display:flex;align-items:center;justify-content:center;position:absolute;z-index:5;top:2px;right:2px;bottom:2px;height:3.25rem;width:3.25rem;background:rgba(0,0,0,0)}.ngb-dp-open .pi-calendar{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.2 18.67h.8c.93 0 2.27-.27 2.27-1.47 0-1.07-.8-1.47-1.87-1.47-.8 0-1.47.27-2 .53l-.13-1.2c.67-.27 1.6-.4 2.27-.4 1.6 0 3.07.8 3.07 2.53 0 1.2-.93 1.87-2 2.13 1.2.27 2.13.93 2.13 2.27 0 2.13-1.87 2.67-3.6 2.67-.8 0-1.6-.13-2.13-.4l.13-1.2c.53.27 1.2.53 2 .53 1.07 0 2.27-.4 2.27-1.6 0-1.33-1.07-1.73-2.27-1.73h-.93v-1.2zm9.07-2.4-1.47 1.2-.67-.93 2.27-1.87h1.2V24h-1.33zm5.06-13.6V1.33H24v1.33H8V1.33H6.67v1.33H1.33v28h29.33v-28zm4 26.67H2.67V10.67h26.67zm-26.67-20V4h4v1.33H8V4h16v1.33h1.33V4h4v5.33H2.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='M11.2 18.67h.8c.93 0 2.27-.27 2.27-1.47 0-1.07-.8-1.47-1.87-1.47-.8 0-1.47.27-2 .53l-.13-1.2c.67-.27 1.6-.4 2.27-.4 1.6 0 3.07.8 3.07 2.53 0 1.2-.93 1.87-2 2.13 1.2.27 2.13.93 2.13 2.27 0 2.13-1.87 2.67-3.6 2.67-.8 0-1.6-.13-2.13-.4l.13-1.2c.53.27 1.2.53 2 .53 1.07 0 2.27-.4 2.27-1.6 0-1.33-1.07-1.73-2.27-1.73h-.93v-1.2zm9.07-2.4-1.47 1.2-.67-.93 2.27-1.87h1.2V24h-1.33zm5.06-13.6V1.33H24v1.33H8V1.33H6.67v1.33H1.33v28h29.33v-28zm4 26.67H2.67V10.67h26.67zm-26.67-20V4h4v1.33H8V4h16v1.33h1.33V4h4v5.33H2.67z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.ngb-dp-open .pi-calendar,.ngb-dp-open .pi-3203,.ngb-dp-open post-icon{width:22px;height:22px;transform:none}.ngb-dp-open{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.ngb-dp-open: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){.ngb-dp-open:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.ngb-dp-open: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){.ngb-dp-open:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-control-rg~.ngb-dp-open{height:2.75rem;width:2.75rem}.form-floating>.ngb-dp-open,.form-control-lg~.ngb-dp-open{height:calc(4.6875rem - 4px);width:2.875rem}.form-floating>.ngb-dp-open .pi-3203,.form-floating>.ngb-dp-open .pi-calendar,.form-floating>.ngb-dp-open post-icon,.form-control-lg~.ngb-dp-open .pi-3203,.form-control-lg~.ngb-dp-open .pi-calendar,.form-control-lg~.ngb-dp-open post-icon{width:24px;height:24px}.form-control-sm~.ngb-dp-open{height:1.75rem}input[ngbDatepicker]::-ms-clear{display:none}input[ngbDatepicker]~.ngb-dp-open{border:0}.form-floating>input[ngbDatepicker]~label:first-of-type,input[ngbDatepicker].form-control-lg~label:first-of-type{left:0 !important}input[ngbDatepicker]+ngb-datepicker .ngb-dp-header{padding:1rem}input[ngbDatepicker]+ngb-datepicker .ngb-dp-weekdays{margin-bottom:1rem;padding:0 1rem 1rem}input[ngbDatepicker]+ngb-datepicker .ngb-dp-week{padding-right:1rem !important;padding-left:1rem !important}input[ngbDatepicker]+ngb-datepicker .ngb-dp-week:last-child{padding-bottom:1rem}.form-control[ngbdatepicker]{padding-right:3rem}.form-control[ngbdatepicker].is-invalid,.form-control[ngbdatepicker].is-valid,.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 3.25rem) center}.form-control[ngbdatepicker].is-invalid{padding-right:5rem}.form-floating>.form-control[ngbdatepicker],.form-control[ngbdatepicker].form-control-lg{padding-right:4rem}.form-floating>.form-control[ngbdatepicker].is-invalid,.form-floating>.form-control[ngbdatepicker].is-valid,.form-floating>.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-invalid,.form-floating>.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-valid,.form-control[ngbdatepicker].form-control-lg.is-invalid,.form-control[ngbdatepicker].form-control-lg.is-valid,.form-control[ngbdatepicker].form-control-lg.show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].form-control-lg.show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 2.875rem) center !important}.form-floating>.form-control[ngbdatepicker].is-invalid,.form-control[ngbdatepicker].form-control-lg.is-invalid{padding-right:6rem}.form-control[ngbdatepicker].form-control-rg{padding-right:2.5rem}.form-control[ngbdatepicker].form-control-rg.is-invalid,.form-control[ngbdatepicker].form-control-rg.is-valid,.form-control[ngbdatepicker].form-control-rg.show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].form-control-rg.show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 2.75rem) center}.form-control[ngbdatepicker].form-control-rg.is-invalid{padding-right:4.5rem}.form-control[ngbdatepicker].form-control-sm{padding-right:2rem}.form-control[ngbdatepicker].form-control-sm.is-invalid,.form-control[ngbdatepicker].form-control-sm.is-valid,.form-control[ngbdatepicker].form-control-sm.show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].form-control-sm.show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 1.5rem) center}.form-control[ngbdatepicker].form-control-sm.is-invalid{padding-right:3.5rem}
+ngb-datepicker{--bs-light: color.$light}ngb-datepicker.dropdown-menu{box-shadow:0 0 8px 0 #333}ngb-datepicker-navigation{justify-content:space-between}ngb-datepicker-navigation button.ngb-dp-arrow-btn{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}ngb-datepicker-navigation button.ngb-dp-arrow-btn: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){ngb-datepicker-navigation button.ngb-dp-arrow-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){ngb-datepicker-navigation button.ngb-dp-arrow-btn: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){ngb-datepicker-navigation button.ngb-dp-arrow-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}ngb-datepicker-navigation-select.ngb-dp-navigation-select{flex:0 1 auto}ngb-datepicker-navigation-select.ngb-dp-navigation-select select{padding-right:2.25rem;border:0;background-position:right}ngb-datepicker-navigation-select.ngb-dp-navigation-select select+select{margin-left:.5rem}ngb-datepicker .ngb-dp-arrow{flex-grow:0;height:auto}ngb-datepicker .ngb-dp-arrow span{flex-shrink:0}.ngb-dp-header{font-size:1.25rem;font-weight:700}.ngb-dp-header .ngb-dp-month-name{padding-top:.3rem;color:#000 !important;font:inherit}.ngb-dp-navigation-select .form-select{background-color:rgba(0,0,0,0);font:inherit;min-width:fit-content}span.ngb-dp-navigation-chevron{border-width:.09em .09em 0 0}.ngb-dp-weekday{color:rgba(0,0,0,.6) !important;font-size:1rem;font-style:normal !important;line-height:1.5 !important;width:40px !important;height:auto !important;font-weight:normal}.ngb-dp-weekdays{border-bottom:0 !important}.ngb-dp-day{width:auto !important;height:auto !important}.ngb-dp-day.hidden{flex-grow:1}.ngb-dp-day{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}.ngb-dp-day: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){.ngb-dp-day:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.ngb-dp-day: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){.ngb-dp-day:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.ngb-dp-day>[ngbDatepickerDayView]{width:40px !important;height:40px !important;line-height:40px}.ngb-dp-day>[ngbDatepickerDayView].active{outline:none}.ngb-dp-day>.text-white{color:#000 !important}.ngb-dp-day>.btn-light,.ngb-dp-day>.btn-light:hover{background:none}.ngb-dp-day>.btn-light:hover{background-color:#faf9f8}.ngb-dp-day>.btn-light:not(:disabled):not(.disabled):active,.ngb-dp-day>.btn-light:not(:disabled):not(.disabled).active{background-color:rgba(0,0,0,0)}.ngb-dp-open{display:flex;align-items:center;justify-content:center;position:absolute;z-index:5;top:2px;right:2px;bottom:2px;height:3.25rem;width:3.25rem;background:rgba(0,0,0,0)}.ngb-dp-open post-icon{width:22px;height:22px;transform:none}.ngb-dp-open{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}.ngb-dp-open: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){.ngb-dp-open:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.ngb-dp-open: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){.ngb-dp-open:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-control-rg~.ngb-dp-open{height:2.75rem;width:2.75rem}.form-floating>.ngb-dp-open,.form-control-lg~.ngb-dp-open{height:calc(4.6875rem - 4px);width:2.875rem}.form-floating>.ngb-dp-open post-icon,.form-control-lg~.ngb-dp-open post-icon{width:24px;height:24px}.form-control-sm~.ngb-dp-open{height:1.75rem}input[ngbDatepicker]::-ms-clear{display:none}input[ngbDatepicker]~.ngb-dp-open{border:0}.form-floating>input[ngbDatepicker]~label:first-of-type,input[ngbDatepicker].form-control-lg~label:first-of-type{left:0 !important}input[ngbDatepicker]+ngb-datepicker .ngb-dp-header{padding:1rem}input[ngbDatepicker]+ngb-datepicker .ngb-dp-weekdays{margin-bottom:1rem;padding:0 1rem 1rem}input[ngbDatepicker]+ngb-datepicker .ngb-dp-week{padding-right:1rem !important;padding-left:1rem !important}input[ngbDatepicker]+ngb-datepicker .ngb-dp-week:last-child{padding-bottom:1rem}.form-control[ngbdatepicker]{padding-right:3rem}.form-control[ngbdatepicker].is-invalid,.form-control[ngbdatepicker].is-valid,.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 3.25rem) center}.form-control[ngbdatepicker].is-invalid{padding-right:5rem}.form-floating>.form-control[ngbdatepicker],.form-control[ngbdatepicker].form-control-lg{padding-right:4rem}.form-floating>.form-control[ngbdatepicker].is-invalid,.form-floating>.form-control[ngbdatepicker].is-valid,.form-floating>.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-invalid,.form-floating>.form-control[ngbdatepicker].show-ng-validation.ng-touched.ng-valid,.form-control[ngbdatepicker].form-control-lg.is-invalid,.form-control[ngbdatepicker].form-control-lg.is-valid,.form-control[ngbdatepicker].form-control-lg.show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].form-control-lg.show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 2.875rem) center !important}.form-floating>.form-control[ngbdatepicker].is-invalid,.form-control[ngbdatepicker].form-control-lg.is-invalid{padding-right:6rem}.form-control[ngbdatepicker].form-control-rg{padding-right:2.5rem}.form-control[ngbdatepicker].form-control-rg.is-invalid,.form-control[ngbdatepicker].form-control-rg.is-valid,.form-control[ngbdatepicker].form-control-rg.show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].form-control-rg.show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 2.75rem) center}.form-control[ngbdatepicker].form-control-rg.is-invalid{padding-right:4.5rem}.form-control[ngbdatepicker].form-control-sm{padding-right:2rem}.form-control[ngbdatepicker].form-control-sm.is-invalid,.form-control[ngbdatepicker].form-control-sm.is-valid,.form-control[ngbdatepicker].form-control-sm.show-ng-validation.ng-touched.ng-invalid,.form-control[ngbdatepicker].form-control-sm.show-ng-validation.ng-touched.ng-valid{background-position:calc(100% - 1.5rem) center}.form-control[ngbdatepicker].form-control-sm.is-invalid{padding-right:3.5rem}

package/components/datepicker.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use './../variables/color';
 @use './../variables/type';
 @use './../variables/components/datepicker';
@@ -13,7 +11,7 @@
 
 ngb-datepicker {
   // Conversion for compatibility
-  --bs-light: var(--post-light);
+  --bs-light: color.$light;
 }
 
 ngb-datepicker.dropdown-menu {
@@ -24,7 +22,7 @@ ngb-datepicker-navigation {
   justify-content: space-between;
 
   button.ngb-dp-arrow-btn {
-    @include utilities.focus-style();
+    @include utilities.focus-style;
   }
 }
 
@@ -66,7 +64,6 @@ ngb-datepicker .ngb-dp-arrow {
   .form-select {
     background-color: transparent;
     font: inherit;
-    min-width: -moz-fit-content;
     min-width: fit-content;
   }
 }
@@ -76,7 +73,7 @@ span.ngb-dp-navigation-chevron {
 }
 
 .ngb-dp-weekday {
-  color: rgba(var(--post-contrast-color-rgb), 0.6) !important;
+  color: color.$black-alpha-60 !important;
   font-size: 1rem;
   font-style: normal !important;
   line-height: type.$line-height-copy !important;
@@ -97,7 +94,7 @@ span.ngb-dp-navigation-chevron {
     flex-grow: 1;
   }
 
-  @include utilities.focus-style() {
+  @include utilities.focus-style {
     border-radius: commons.$border-radius;
   }
 
@@ -106,7 +103,7 @@ span.ngb-dp-navigation-chevron {
     height: 40px !important;
     line-height: 40px;
 
-    &.active:not(.bg-primary) {
+    &.active {
       outline: none;
     }
   }
@@ -130,10 +127,6 @@ span.ngb-dp-navigation-chevron {
   background-color: transparent;
 }
 
-.ngb-dp-day > .btn-light.bg-primary.text-white {
-  background-color: color.$yellow !important;
-}
-
 .ngb-dp-open {
   display: flex;
   align-items: center;
@@ -147,20 +140,13 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner;
   background: transparent;
 
-  // DEPRECATED
-  .pi-calendar {
-    @include icons-mx.icon(3203);
-  }
-
-  .pi-calendar,
-  .pi-3203,
   post-icon {
     width: datepicker.$ngb-dp-icon-size;
     height: datepicker.$ngb-dp-icon-size;
     transform: none;
   }
 
-  @include utilities.focus-style() {
+  @include utilities.focus-style {
     border-radius: commons.$border-radius;
   }
 }
@@ -175,8 +161,6 @@ span.ngb-dp-navigation-chevron {
   height: calc(#{forms.$form-floating-height} - #{forms.$input-border-width * 2});
   width: forms.$input-height-inner-lg;
 
-  .pi-3203,
-  .pi-calendar,
   post-icon {
     width: datepicker.$ngb-dp-icon-size-lg;
     height: datepicker.$ngb-dp-icon-size-lg;

package/components/dialog.css

@@ -1 +1 @@
-dialog{box-shadow:1px 6px 8px rgba(0,0,0,.1),2px 8px 20px 8px rgba(0,0,0,.14);padding:0;min-width:min(389px,90vw);max-width:590px;max-height:90vh;overflow:auto;margin:revert;overscroll-behavior:contain;border:2px solid var(--post-contrast-color)}dialog::backdrop{background-color:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){dialog{border-width:2px}dialog::backdrop{background-image:linear-gradient(135deg, CanvasText 4.55%, transparent 4.55%, transparent 50%, CanvasText 50%, CanvasText 54.55%, transparent 54.55%, transparent 100%);background-size:22px 22px;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(0,0,0,0);forced-color-adjust:none}}dialog[data-size=small]{min-width:296px;max-width:388px}dialog[data-size=large]{min-width:min(600px,90vw);max-width:792px}dialog[data-position=top]{top:2rem;bottom:auto}dialog[data-position=bottom]{top:auto;bottom:2rem}dialog>.dialog-grid{margin:1rem 1rem 0 1rem;display:grid;column-gap:1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon header close-button" "icon body close-button" "controls controls controls";background-color:inherit}:where(.dialog-icon,.dialog-header,.dialog-body,.dialog-controls,.dialog-close):empty{display:none}.dialog-grid>post-icon{grid-area:icon;display:block;width:2rem;height:2rem}@media(min-width: 600px){dialog:not([size=small]) .dialog-grid>post-icon{width:3rem;height:3rem}}.dialog-header{grid-area:header;margin-top:0}.dialog-body{grid-area:body;margin-bottom:0}.dialog-body>*:last-child{margin-bottom:0}.dialog-controls{grid-area:controls;position:sticky;bottom:0;padding-block:1rem;display:flex;flex-wrap:wrap;flex-direction:row-reverse;gap:1rem;background-color:inherit}@media(max-width: 399.98px){.dialog-controls button{width:100%}}.dialog-grid>.btn-close{position:sticky;top:0;grid-area:close-button;width:1.5rem;height:1.5rem;min-height:0}dialog:not([data-animation=none]){--_dialog-transition-duration: var(--dialog-transition-duration, 0.5s);transform:scale(0.8);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--_dialog-transition-duration);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}dialog:not([data-animation=none])::backdrop{opacity:0;transition:opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete,-webkit-backdrop-filter var(--_dialog-transition-duration);transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete;transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete,-webkit-backdrop-filter var(--_dialog-transition-duration)}dialog:not([data-animation=none])[open]{transform:scale(1);opacity:1}@starting-style{dialog:not([data-animation=none])[open]{opacity:0;transform:scale(0.8)}}dialog:not([data-animation=none])[open]::backdrop{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@starting-style{dialog:not([data-animation=none])[open]::backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}@media(forced-colors: active){dialog:not([data-animation=none])[open]::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}dialog:not([data-animation=none])[data-animation=slide-in]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}dialog:not([data-animation=none])[data-animation=slide-in][data-position=top]{--_dialog-slide-in-offset: -3rem}dialog:not([data-animation=none])[data-animation=slide-in][data-position=bottom]{--_dialog-slide-in-offset: 3rem}dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(0)}@starting-style{dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}}
+dialog{box-shadow:var(--post-device-elevation-500);padding:0;min-width:min(389px,90vw);max-width:590px;max-height:90vh;overflow:auto;margin:revert;overscroll-behavior:contain;border:2px solid #000}dialog::backdrop{background-color:rgba(0,0,0,.8);backdrop-filter:blur(0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){dialog{border-width:2px}dialog::backdrop{background-image:linear-gradient(135deg, CanvasText 4.55%, transparent 4.55%, transparent 50%, CanvasText 50%, CanvasText 54.55%, transparent 54.55%, transparent 100%);background-size:22px 22px;backdrop-filter:none;background-color:rgba(0,0,0,0);forced-color-adjust:none}}dialog[data-size=small]{min-width:296px;max-width:388px}dialog[data-size=large]{min-width:min(600px,90vw);max-width:792px}dialog[data-position=top]{top:2rem;bottom:auto}dialog[data-position=bottom]{top:auto;bottom:2rem}dialog>.dialog-grid{margin:var(--post-core-dimension-16) var(--post-core-dimension-16) 0 var(--post-core-dimension-16);display:grid;column-gap:var(--post-core-dimension-16);grid-template-columns:auto 1fr auto;grid-template-areas:"icon header close-button" "icon body close-button" "controls controls controls";background-color:inherit}:where(.dialog-icon,.dialog-header,.dialog-body,.dialog-controls,.dialog-close):empty{display:none}.dialog-grid>post-icon{grid-area:icon;display:block;width:var(--post-core-dimension-32);height:var(--post-core-dimension-32)}@media(min-width: 600px){dialog:not([size=small]) .dialog-grid>post-icon{width:var(--post-core-dimension-48);height:var(--post-core-dimension-48)}}.dialog-header{grid-area:header;margin-top:0}.dialog-body{grid-area:body;margin-bottom:0}.dialog-body>*:last-child{margin-bottom:0}.dialog-controls{grid-area:controls;position:sticky;bottom:0;padding-block:var(--post-core-dimension-16);display:flex;flex-wrap:wrap;flex-direction:row-reverse;gap:var(--post-core-dimension-16);background-color:inherit}@media(max-width: 599.98px){.dialog-controls button{width:100%}}.dialog-grid>.btn-close{position:sticky;top:0;grid-area:close-button;width:var(--post-core-dimension-24);height:var(--post-core-dimension-24);min-height:0}dialog:not([data-animation=none]){--_dialog-transition-duration: var(--dialog-transition-duration, 0.5s);transform:scale(0.8);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--_dialog-transition-duration);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}dialog:not([data-animation=none])::backdrop{opacity:0;transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete}dialog:not([data-animation=none])[open]{transform:scale(1);opacity:1}@starting-style{dialog:not([data-animation=none])[open]{opacity:0;transform:scale(0.8)}}dialog:not([data-animation=none])[open]::backdrop{opacity:1;backdrop-filter:blur(10px)}@starting-style{dialog:not([data-animation=none])[open]::backdrop{opacity:0;backdrop-filter:blur(0)}}@media(forced-colors: active){dialog:not([data-animation=none])[open]::backdrop{backdrop-filter:none}}dialog:not([data-animation=none])[data-animation=slide-in]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}dialog:not([data-animation=none])[data-animation=slide-in][data-position=top]{--_dialog-slide-in-offset: -3rem}dialog:not([data-animation=none])[data-animation=slide-in][data-position=bottom]{--_dialog-slide-in-offset: 3rem}dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(0)}@starting-style{dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}}

package/components/dialog.scss

@@ -1,14 +1,18 @@
-@use '../mixins/elevation';
-@use '../mixins/utilities';
+@use '../mixins/utilities' as utilities-mx;
 @use '../variables/spacing';
 @use '../variables/color';
 @use '../variables/animation';
+@use '../variables/elevation';
 
 @use './../themes/bootstrap/core' as *;
 
-dialog {
-  @include elevation.elevation('elevation-5');
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
+dialog {
+  box-shadow: elevation.$elevation-500;
   padding: 0;
   min-width: min(389px, 90vw);
   max-width: 590px;
@@ -16,15 +20,14 @@ dialog {
   overflow: auto;
   margin: revert;
   overscroll-behavior: contain;
-  border: 2px solid var(--post-contrast-color); // Ensures good contrast when bg is dark against dark backdrop
+  border: 2px solid color.$black; // Ensures good contrast when bg is dark against dark backdrop
 
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.8);
-    -webkit-backdrop-filter: blur(0);
-            backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
   }
 
-  @include utilities.high-contrast-mode {
+  @include utilities-mx.high-contrast-mode {
     // Show the border in HCM
     border-width: 2px;
 
@@ -41,8 +44,7 @@ dialog {
         transparent 100%
       );
       background-size: 22px 22px;
-      -webkit-backdrop-filter: none;
-              backdrop-filter: none;
+      backdrop-filter: none;
       background-color: transparent;
       forced-color-adjust: none;
     }
@@ -74,9 +76,9 @@ dialog {
 }
 
 dialog > .dialog-grid {
-  margin: spacing.$size-regular spacing.$size-regular 0 spacing.$size-regular;
+  margin: tokens.get('utility-gap-16') tokens.get('utility-gap-16') 0 tokens.get('utility-gap-16');
   display: grid;
-  column-gap: spacing.$size-regular;
+  column-gap: tokens.get('utility-gap-16');
   grid-template-columns: auto 1fr auto;
   grid-template-areas:
     'icon header close-button'
@@ -95,14 +97,14 @@ dialog > .dialog-grid {
   grid-area: icon;
   display: block;
 
-  width: spacing.$size-big;
-  height: spacing.$size-big;
+  width: tokens.get('utility-gap-32');
+  height: tokens.get('utility-gap-32');
 
   // Larger icon for bigger notification dialogs
   dialog:not([size='small']) & {
-    @include media-breakpoint-up(rg) {
-      width: spacing.$size-small-huge;
-      height: spacing.$size-small-huge;
+    @include media-breakpoint-up(sm) {
+      width: tokens.get('utility-gap-48');
+      height: tokens.get('utility-gap-48');
     }
   }
 }
@@ -125,11 +127,11 @@ dialog > .dialog-grid {
   grid-area: controls;
   position: sticky;
   bottom: 0;
-  padding-block: spacing.$size-regular;
+  padding-block: tokens.get('utility-gap-16');
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;
-  gap: spacing.$size-regular;
+  gap: tokens.get('utility-gap-16');
   background-color: inherit;
 
   button {
@@ -143,8 +145,8 @@ dialog > .dialog-grid {
   position: sticky;
   top: 0;
   grid-area: close-button;
-  width: spacing.$size-large;
-  height: spacing.$size-large;
+  width: tokens.get('utility-gap-24');
+  height: tokens.get('utility-gap-24');
   min-height: 0;
 }
 
@@ -182,22 +184,11 @@ dialog:not([data-animation='none']) {
 
   &::backdrop {
     opacity: 0;
-    transition:
-      opacity var(--_dialog-transition-duration),
-      overlay var(--_dialog-transition-duration) allow-discrete,
-      display var(--_dialog-transition-duration) allow-discrete,
-      -webkit-backdrop-filter var(--_dialog-transition-duration);
     transition:
       backdrop-filter var(--_dialog-transition-duration),
       opacity var(--_dialog-transition-duration),
       overlay var(--_dialog-transition-duration) allow-discrete,
       display var(--_dialog-transition-duration) allow-discrete;
-    transition:
-      backdrop-filter var(--_dialog-transition-duration),
-      opacity var(--_dialog-transition-duration),
-      overlay var(--_dialog-transition-duration) allow-discrete,
-      display var(--_dialog-transition-duration) allow-discrete,
-      -webkit-backdrop-filter var(--_dialog-transition-duration);
   }
 
   &[open] {
@@ -211,18 +202,15 @@ dialog:not([data-animation='none']) {
 
     &::backdrop {
       opacity: 1;
-      -webkit-backdrop-filter: blur(10px);
-              backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
 
       @starting-style {
         opacity: 0;
-        -webkit-backdrop-filter: blur(0);
-                backdrop-filter: blur(0);
+        backdrop-filter: blur(0);
       }
 
       @media (forced-colors: active) {
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
   }

package/components/dropdown.css

@@ -1 +1 @@
-.dropup,.dropend,.dropdown,.dropstart,.dropup-center,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid rgba(0,0,0,0);border-bottom:0;border-left:.3em solid rgba(0,0,0,0)}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex: 1000;--bs-dropdown-min-width: 10rem;--bs-dropdown-padding-x: 0;--bs-dropdown-padding-y: 0.5rem;--bs-dropdown-spacer: 0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color: var(--bs-body-color);--bs-dropdown-bg: #fff;--bs-dropdown-border-color: rgba(0, 0, 0, 0.15);--bs-dropdown-border-radius: 4px;--bs-dropdown-border-width: 1px;--bs-dropdown-inner-border-radius: calc(4px - 1px);--bs-dropdown-divider-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6);--bs-dropdown-divider-margin-y: 0.5rem;--bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);--bs-dropdown-link-color: hsl(0, 0%, 40%);--bs-dropdown-link-hover-color: #000;--bs-dropdown-link-hover-bg: #faf9f8;--bs-dropdown-link-active-color: hsl(0, 0%, 20%);--bs-dropdown-link-active-bg: #fc0;--bs-dropdown-link-disabled-color: hsl(0, 0%, 80%);--bs-dropdown-item-padding-x: 1.5rem;--bs-dropdown-item-padding-y: 0.25rem;--bs-dropdown-header-color: hsl(0, 0%, 80%);--bs-dropdown-header-padding-x: 1.5rem;--bs-dropdown-header-padding-y: 0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position: start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position: end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media(min-width: 400px){.dropdown-menu-sm-start{--bs-position: start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position: end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 600px){.dropdown-menu-rg-start{--bs-position: start}.dropdown-menu-rg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-rg-end{--bs-position: end}.dropdown-menu-rg-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 780px){.dropdown-menu-md-start{--bs-position: start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position: end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 1024px){.dropdown-menu-lg-start{--bs-position: start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position: end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 1280px){.dropdown-menu-xl-start{--bs-position: start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position: end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 1440px){.dropdown-menu-xxl-start{--bs-position: start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position: end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid rgba(0,0,0,0);border-bottom:.3em solid;border-left:.3em solid rgba(0,0,0,0)}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid rgba(0,0,0,0);border-right:0;border-bottom:.3em solid rgba(0,0,0,0);border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid rgba(0,0,0,0);border-right:.3em solid;border-bottom:.3em solid rgba(0,0,0,0)}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:rgba(0,0,0,0);border:0;border-radius:var(--bs-dropdown-item-border-radius, 0)}.dropdown-item:hover,.dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:rgba(0,0,0,0)}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:0.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color: #dee2e6;--bs-dropdown-bg: #343a40;--bs-dropdown-border-color: rgba(0, 0, 0, 0.15);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color: #dee2e6;--bs-dropdown-link-hover-color: #fff;--bs-dropdown-divider-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6);--bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color: hsl(0, 0%, 20%);--bs-dropdown-link-active-bg: #fc0;--bs-dropdown-link-disabled-color: #adb5bd;--bs-dropdown-header-color: #adb5bd}.dropdown-toggle::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.5rem;border:0}.dropdown .dropdown-menu,.dropup .dropdown-menu{min-width:200px;max-width:25vw;max-height:50vh}.dropdown-menu{z-index:1000;margin-top:0;overflow-y:auto;border:0;border-radius:0;box-shadow:0 0 5px 0 rgba(0,0,0,.3);font-size:1rem}.dropdown-menu hr{margin:.25rem 0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}.dropdown-toggle::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6 10.667 16 22.267l-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'/%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='M27.6 10.667 16 22.267l-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.dropdown-toggle[aria-expanded=true]::after,.dropup .dropdown-toggle::after{transform:rotate(180deg)}.dropup .dropdown-toggle[aria-expanded=true]::after{transform:rotate(0deg)}.dropdown-item{max-width:100%;padding:.5rem .75rem;overflow:hidden;text-overflow:ellipsis}.dropdown-item:focus{outline:0}
+.dropup,.dropend,.dropdown,.dropstart,.dropup-center,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid rgba(0,0,0,0);border-bottom:0;border-left:.3em solid rgba(0,0,0,0)}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex: 1000;--bs-dropdown-min-width: 10rem;--bs-dropdown-padding-x: 0;--bs-dropdown-padding-y: 0.5rem;--bs-dropdown-spacer: 0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color: var(--bs-body-color);--bs-dropdown-bg: #fff;--bs-dropdown-border-color: rgba(0, 0, 0, 0.15);--bs-dropdown-border-radius: 4px;--bs-dropdown-border-width: 1px;--bs-dropdown-inner-border-radius: calc(4px - 1px);--bs-dropdown-divider-bg: rgba(255, 255, 255, 0.6);--bs-dropdown-divider-margin-y: 0.5rem;--bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);--bs-dropdown-link-color: hsl(0, 0%, 40%);--bs-dropdown-link-hover-color: #000;--bs-dropdown-link-hover-bg: #faf9f8;--bs-dropdown-link-active-color: hsl(0, 0%, 20%);--bs-dropdown-link-active-bg: #fc0;--bs-dropdown-link-disabled-color: hsl(0, 0%, 80%);--bs-dropdown-item-padding-x: 1.5rem;--bs-dropdown-item-padding-y: 0.25rem;--bs-dropdown-header-color: hsl(0, 0%, 80%);--bs-dropdown-header-padding-x: 1.5rem;--bs-dropdown-header-padding-y: 0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position: start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position: end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media(min-width: 600px){.dropdown-menu-sm-start{--bs-position: start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position: end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 780px){.dropdown-menu-md-start{--bs-position: start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position: end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 1024px){.dropdown-menu-lg-start{--bs-position: start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position: end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media(min-width: 1280px){.dropdown-menu-xl-start{--bs-position: start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position: end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid rgba(0,0,0,0);border-bottom:.3em solid;border-left:.3em solid rgba(0,0,0,0)}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid rgba(0,0,0,0);border-right:0;border-bottom:.3em solid rgba(0,0,0,0);border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid rgba(0,0,0,0);border-right:.3em solid;border-bottom:.3em solid rgba(0,0,0,0)}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:var(--post-core-font-weight-400);color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:rgba(0,0,0,0);border:0;border-radius:var(--bs-dropdown-item-border-radius, 0)}.dropdown-item:hover,.dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:rgba(0,0,0,0)}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:0.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color: #dee2e6;--bs-dropdown-bg: #343a40;--bs-dropdown-border-color: rgba(0, 0, 0, 0.15);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color: #dee2e6;--bs-dropdown-link-hover-color: #fff;--bs-dropdown-divider-bg: rgba(255, 255, 255, 0.6);--bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color: hsl(0, 0%, 20%);--bs-dropdown-link-active-bg: #fc0;--bs-dropdown-link-disabled-color: #adb5bd;--bs-dropdown-header-color: #adb5bd}.dropdown-toggle::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.5rem;border:0}.dropdown .dropdown-menu,.dropup .dropdown-menu{min-width:200px;max-width:25vw;max-height:50vh}.dropdown-menu{z-index:1000;margin-top:0;overflow-y:auto;border:0;border-radius:0;box-shadow:0 0 5px 0 rgba(0,0,0,.3);font-size:1rem}.dropdown-menu hr{margin:.25rem 0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-2)*-1)}}.dropdown-toggle::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6 10.667 16 22.267l-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.dropdown-toggle[aria-expanded=true]::after,.dropup .dropdown-toggle::after{transform:rotate(180deg)}.dropup .dropdown-toggle[aria-expanded=true]::after{transform:rotate(0deg)}.dropdown-item{max-width:100%;padding:.5rem .75rem;overflow:hidden;text-overflow:ellipsis}.dropdown-item:focus{outline:0}

package/components/dropdown.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use './../themes/bootstrap/dropdown' as bd;
 
 @use './../variables/color';
@@ -7,7 +5,12 @@
 @use './../variables/icons';
 @use './../variables/spacing';
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 %toggler-icon {
   content: '';
@@ -40,12 +43,12 @@
     margin: 0.25rem 0;
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     .dropdown-item {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-line);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-2') * -1);
       }
     }
   }

package/components/fonts.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")}
+@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")}

package/components/fonts.scss

@@ -1,60 +1,22 @@
-@forward './../variables/options';
-
-@use './../variables/options';
+$font-base-path: 'https://fonts.post.ch/swiss-post-sans/v1';
 
 @font-face {
-  font-display: swap;
-  font-family: 'Swiss Post Sans v005';
+  font-family: 'Swiss Post Sans';
   font-weight: 900;
-  src:
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-XBlk.woff2') format('woff2'),
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-XBlk.woff') format('woff');
-}
-
-@font-face {
   font-display: swap;
-  font-family: 'Swiss Post Sans v005';
-  font-weight: 900;
-  font-style: italic;
-  src:
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-XBlkIt.woff2') format('woff2'),
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-XBlkIt.woff') format('woff');
+  src: url('#{$font-base-path}/SwissPostSans-Black.woff2') format('woff2');
 }
 
 @font-face {
-  font-display: swap;
-  font-family: 'Swiss Post Sans v005';
+  font-family: 'Swiss Post Sans';
   font-weight: 700;
-  src:
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff2') format('woff2'),
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Bold.woff') format('woff');
-}
-
-@font-face {
   font-display: swap;
-  font-family: 'Swiss Post Sans v005';
-  font-weight: 700;
-  font-style: italic;
-  src:
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff2') format('woff2'),
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-BdIt.woff') format('woff');
+  src: url('#{$font-base-path}/SwissPostSans-Bold.woff2') format('woff2');
 }
 
 @font-face {
-  font-display: swap;
-  font-family: 'Swiss Post Sans v005';
+  font-family: 'Swiss Post Sans';
   font-weight: 400;
-  src:
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff2') format('woff2'),
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-Rg.woff') format('woff');
-}
-
-@font-face {
   font-display: swap;
-  font-family: 'Swiss Post Sans v005';
-  font-weight: 400;
-  font-style: italic;
-  src:
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff2') format('woff2'),
-    url('#{options.$font-base-path}/FrutigerNeueforPostW05-It.woff') format('woff');
+  src: url('#{$font-base-path}/SwissPostSans-Regular.woff2') format('woff2');
 }

package/components/form-footer.css

@@ -0,0 +1 @@
+.form-footer{border-block-start-width:var(--post-device-border-width-default);border-block-start-color:var(--post-scheme-color-surface-default-stroke);border-block-start-style:var(--post-core-border-style-solid);padding-block-start:var(--post-device-spacing-padding-block-21);gap:var(--post-device-spacing-gap-4);display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 780px){.form-footer{flex-direction:row-reverse}.form-footer>.btn{margin-right:auto}}.form-footer-primary-actions{display:flex;flex-direction:column;gap:var(--post-device-spacing-gap-4)}@media screen and (min-width: 780px){.form-footer-primary-actions{flex-direction:row-reverse;margin-left:auto}}

package/components/form-footer.scss

@@ -0,0 +1,18 @@
+@use '../tokens/components';
+@use '../functions/tokens';
+
+@use '../mixins/layout';
+
+tokens.$default-map: components.$post-form-footer;
+
+.form-footer {
+  border-block-start-width: tokens.get('form-footer-border-block-start-width');
+  border-block-start-color: tokens.get('form-footer-border-start-color');
+  border-block-start-style: tokens.get('form-footer-border-block-start-style');
+  padding-block-start: tokens.get('form-footer-padding-block-start');
+  gap: tokens.get('form-footer-gap');
+
+  @include layout.responsive-actions {
+    gap: tokens.get('form-footer-gap');
+  }
+}

package/components/form-hint.css

@@ -0,0 +1 @@
+.form-hint{color:var(--post-scheme-color-interactive-primary-enabled-fg1);padding-inline:var(--post-device-spacing-padding-2);margin-block:var(--post-device-spacing-padding-block-5) !important;font-size:var(--post-device-font-size-9)}.form-control:disabled .form-hint{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}

package/components/form-hint.scss

@@ -0,0 +1,15 @@
+@use './../functions/tokens';
+@use './../tokens/components';
+
+tokens.$default-map: components.$post-assist;
+
+.form-hint {
+  color: tokens.get('assist-enabled-fg');
+  padding-inline: tokens.get('assist-padding-inline');
+  margin-block: tokens.get('post-assist-padding-block') !important;
+  font-size: tokens.get('assist-font-size');
+}
+
+.form-control:disabled .form-hint {
+  color: tokens.get('assist-disabled-fg');
+}

package/components/form-input.css

@@ -0,0 +1 @@
+input.form-control{display:block;width:100%;font-family:inherit;appearance:none;background-clip:padding-box;border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-input-enabled-border);position:relative;border-radius:var(--post-device-border-radius-1);background-color:var(--post-scheme-color-interactive-input-enabled-bg);color:var(--post-scheme-color-interactive-input-enabled-fg);padding-inline-start:var(--post-device-spacing-padding-inline-1);padding-inline-end:var(--post-device-spacing-padding-3);padding-block:var(--post-device-spacing-padding-block-1);height:var(--post-device-sizing-interactive-button-height-6)}input.form-control:focus{border-color:var(--post-scheme-color-interactive-input-enabled-border);background-color:var(--post-scheme-color-interactive-primary-selected-bg1);color:var(--post-scheme-color-interactive-input-enabled-fg)}input.form-control:focus{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}input.form-control:focus: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){input.form-control:focus:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){input.form-control:focus: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){input.form-control:focus: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){input.form-control:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){input.form-control:not(:disabled):hover,input.form-control:not(:disabled):focus{border-color:FieldText}}input.form-control:not(:disabled):hover{border-color:var(--post-scheme-color-interactive-input-hover-border);background-color:var(--post-scheme-color-interactive-input-hover-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){input.form-control:not(:disabled):hover{border-color:Highlight}}input.form-control[readonly]:not(:disabled){border-color:var(--post-scheme-color-interactive-input-enabled-border);background-color:var(--post-scheme-color-interactive-input-enabled-bg)}input.form-control[type=file]{overflow:hidden;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){input.form-control[type=file]:disabled{color:GrayText;border-color:GrayText}}input.form-control[type=file]::file-selector-button{padding-block:var(--post-device-spacing-padding-block-1);padding-inline-start:var(--post-device-spacing-padding-inline-1);padding-inline-end:var(--post-device-spacing-padding-3);margin-block:calc(var(--post-device-spacing-padding-block-1)*-1);color:var(--post-scheme-color-interactive-input-enabled-fg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--post-device-border-width-default);border-radius:0;display:block;position:absolute;top:0;bottom:0;right:0;margin-inline:0;height:auto;background-color:inherit;border-right:0 none;border-left:inherit}@supports(background: -webkit-named-image(i)){input.form-control[type=file]::file-selector-button{display:initial;position:initial;margin-inline:0;padding-inline:0;width:0;border:0 none}input.form-control[type=file]::after{display:flex;align-items:center;content:"Choose File";position:absolute;top:0;bottom:0;right:0;z-index:2;padding-inline:var(--post-device-spacing-padding-inline-1);background-color:inherit;border-left:inherit;text-align:center}[lang=de] input.form-control[type=file]::after{content:"Datei auswählen"}[lang=fr] input.form-control[type=file]::after{content:"Choisir un fichier"}[lang=it] input.form-control[type=file]::after{content:"Scegli file"}input.form-control[type=file][multiple]::after{content:"Choose Files"}[lang=de] input.form-control[type=file][multiple]::after{content:"Dateien auswählen"}[lang=fr] input.form-control[type=file][multiple]::after{content:"Choisir des fichiers"}}input.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}input.form-control::placeholder{color:var(--post-scheme-color-interactive-input-enabled-fg);opacity:1}input.form-control:disabled{color:var(--post-scheme-color-interactive-input-disabled-fg);background-color:var(--post-scheme-color-interactive-input-disabled-bg);border-color:var(--post-scheme-color-interactive-input-disabled-border);border-style:var(--post-core-border-style-dash);opacity:1}input.form-control:disabled::placeholder{color:var(--post-scheme-color-interactive-input-disabled-fg);opacity:1}input.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--post-scheme-color-interactive-input-hover-bg)}input.form-control.is-valid:not(:disabled),input.form-control.is-invalid:not(:disabled){background-size:var(--post-device-sizing-notification-1);background-position:center right var(--post-device-position-2);background-repeat:no-repeat;padding-inline-end:calc(var(--post-device-spacing-padding-3) + var(--post-device-position-2) + var(--post-device-sizing-notification-1))}input.form-control.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23107800' 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")}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){input.form-control.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23e0e0e0' 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")}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){input.form-control.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23333333' 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")}}input.form-control.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23b20000' 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")}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){input.form-control.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23e0e0e0' 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")}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){input.form-control.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23333333' 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")}}.form-label:has(+input.form-control[disabled]){color:var(--post-scheme-color-interactive-input-disabled-fg)}.form-floating{position:relative}.form-floating>input.form-control~label{position:absolute;z-index:2;text-align:start;pointer-events:none;display:block;top:var(--post-device-border-width-default);left:var(--post-device-border-width-default);margin:0;padding-inline-start:var(--post-device-spacing-padding-5);padding-inline-end:var(--post-device-spacing-padding-inline-4);padding-block-start:var(--post-device-spacing-padding-block-28);border:0;color:var(--post-scheme-color-interactive-input-enabled-fg);width:auto;height:auto;max-width:calc(100% - var(--post-device-border-width-default)*2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:padding-block-start .2s ease-in-out,font-size .2s ease-in-out;background-color:var(--post-scheme-color-interactive-input-enabled-bg)}.form-floating>input.form-control{min-height:var(--post-device-sizing-interactive-button-height-6)}.form-floating>input.form-control::placeholder{color:rgba(0,0,0,0)}.form-floating>input.form-control:focus,.form-floating>input.form-control:not(:placeholder-shown){padding-block-start:var(--post-device-spacing-padding-block-29);padding-block-end:var(--post-device-spacing-padding-block-3)}.form-floating>input.form-control:focus~label,.form-floating>input.form-control:not(:placeholder-shown)~label{color:var(--post-scheme-color-interactive-input-enabled-fg);font-size:var(--post-device-font-size-10);padding-block-start:var(--post-device-spacing-padding-block-30)}.form-floating>input.form-control:focus:not(:hover):not(:disabled)~label,.form-floating>input.form-control:not(:placeholder-shown):not(:hover):not(:disabled)~label{color:var(--post-scheme-color-interactive-input-enabled-fg)}.form-floating>input.form-control::placeholder{opacity:0}.form-floating>input.form-control::input-placeholder{opacity:0}.form-floating>input.form-control:focus::placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg2);opacity:1}.form-floating>input.form-control:focus::input-placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg2);opacity:1}.form-floating>input.form-control:disabled~label{color:var(--post-scheme-color-interactive-input-disabled-fg);background-color:var(--post-scheme-color-interactive-input-disabled-bg)}.form-floating>input.form-control:not(:disabled):hover~label{color:var(--post-scheme-color-interactive-input-hover-fg);background-color:var(--post-scheme-color-interactive-input-hover-bg)}.form-floating>input.form-control[type=file]:focus,.form-floating>input.form-control[type=file]:not(:placeholder-shown){padding-block-start:calc(var(--post-device-spacing-padding-block-29)*1.33)}.form-floating>input.form-control:-webkit-autofill{padding-block-start:var(--post-device-spacing-padding-block-29);padding-block-end:var(--post-device-spacing-padding-block-3)}.form-floating>input.form-control:-webkit-autofill~label{color:var(--post-scheme-color-interactive-input-enabled-fg);font-size:var(--post-device-font-size-10);background-color:var(--post-scheme-color-interactive-primary-selected-bg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-floating>input::placeholder{opacity:0}.form-floating>input::input-placeholder{opacity:0}}