@swisspost/design-system-styles 10.3.0 → 10.5.0

package/components/fonts.scss

@@ -1,4 +1,4 @@
-$font-base-path: 'https://fonts.post.ch/swiss-post-sans/v1';
+$font-base-path: 'https://fonts.post.ch/swiss-post-sans/v1.1';
 
 @font-face {
   font-family: 'Swiss Post Sans';
@@ -7,6 +7,14 @@ $font-base-path: 'https://fonts.post.ch/swiss-post-sans/v1';
   src: url('#{$font-base-path}/SwissPostSans-ExtraBlack.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'Swiss Post Sans';
+  font-style: italic;
+  font-weight: 950;
+  font-display: swap;
+  src: url('#{$font-base-path}/SwissPostSans-ExtraBlackIt.woff2') format('woff2');
+}
+
 @font-face {
   font-family: 'Swiss Post Sans';
   font-weight: 900;
@@ -14,6 +22,14 @@ $font-base-path: 'https://fonts.post.ch/swiss-post-sans/v1';
   src: url('#{$font-base-path}/SwissPostSans-Black.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'Swiss Post Sans';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('#{$font-base-path}/SwissPostSans-BlackIt.woff2') format('woff2');
+}
+
 @font-face {
   font-family: 'Swiss Post Sans';
   font-weight: 700;
@@ -21,9 +37,25 @@ $font-base-path: 'https://fonts.post.ch/swiss-post-sans/v1';
   src: url('#{$font-base-path}/SwissPostSans-Bold.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'Swiss Post Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('#{$font-base-path}/SwissPostSans-BoldIt.woff2') format('woff2');
+}
+
 @font-face {
   font-family: 'Swiss Post Sans';
   font-weight: 400;
   font-display: swap;
   src: url('#{$font-base-path}/SwissPostSans-Regular.woff2') format('woff2');
 }
+
+@font-face {
+  font-family: 'Swiss Post Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('#{$font-base-path}/SwissPostSans-RegularIt.woff2') format('woff2');
+}

package/components/footer/_post-footer.scss

@@ -78,12 +78,12 @@ post-footer {
   }
 
   div:is(
-      [slot='socialmedia'],
-      [slot='app'],
-      [slot='businesssectors'],
-      [slot='meta'],
-      [slot='prefooter']
-    )
+    [slot='socialmedia'],
+    [slot='app'],
+    [slot='businesssectors'],
+    [slot='meta'],
+    [slot='prefooter']
+  )
     > ul {
     @include list.list-inline();
     column-gap: var(--post-footer-list-item-gap);

package/components/form-input.css

@@ -1 +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.form-control-sm{height:var(--post-device-sizing-interactive-button-height-8);padding-block:var(--post-device-spacing-padding-29);font-size:var(--post-device-font-size-7)}input.form-control:focus{border-color:var(--post-scheme-color-interactive-input-enabled-border);background-color:var(--post-scheme-color-interactive-input-enabled-bg);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].is-valid::file-selector-button,input.form-control[type=file].is-invalid::file-selector-button{padding-inline-end:calc(var(--post-device-spacing-padding-3) + var(--post-device-position-2) + var(--post-device-sizing-notification-1))}input.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}input.form-control[type=time]{padding-inline-end:calc(var(--post-device-spacing-padding-3) + var(--post-device-position-2) + var(--post-device-sizing-notification-1))}input.form-control[type=time]::-webkit-date-and-time-value{text-align:start}input.form-control[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:var(--post-device-position-2);top:50%;transform:translateY(-50%);width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);background:rgba(0,0,0,0);cursor:pointer;z-index:1;padding:0;margin:0}input.form-control[type=time]::-webkit-calendar-picker-indicator:focus-within{border-radius:4px;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) var(--post-core-border-style-solid) var(--post-device-border-width-focus) !important}input.form-control[type=time]::after{position:absolute;inset-inline-end:var(--post-device-position-2);top:50%;transform:translateY(-50%);width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);content:"";display:block;pointer-events:none;background-color:var(--post-scheme-color-interactive-input-enabled-fg);z-index:2;mask-image:var(--post-icon-time);background-color:currentColor}:root,:host{--post-icon-time: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktdGltZSI+PHN5bWJvbCBpZD0iczE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Im0xMy40MSA0LjY4LjgtLjhjLjI5LS4yOS4yOS0uNzcgMC0xLjA2cy0uNzctLjI5LTEuMDYgMGwtLjguOGE2Ljk1IDYuOTUgMCAwIDAtMy42LTEuNXYtLjYxaDEuMzJWMEg1Ljk0djEuNWgxLjMydi42MWMtMy40OC4zOC02LjIgMy4zNC02LjIgNi45MiAwIDMuODQgMy4xMiA2Ljk2IDYuOTUgNi45NnM2Ljk1LTMuMTIgNi45NS02Ljk2YzAtMS42NS0uNTgtMy4xNy0xLjU0LTQuMzZaTTggMTQuNWMtMyAwLTUuNDUtMi40NS01LjQ1LTUuNDZTNC45OSAzLjU4IDggMy41OHM1LjQ1IDIuNDUgNS40NSA1LjQ2UzExLjAxIDE0LjUgOCAxNC41bTIuMjUtNi42OWMuMjkuMjkuMjkuNzcgMCAxLjA2bC0xLjcyIDEuNzJjLS4xNS4xNS0uMzQuMjItLjUzLjIycy0uMzgtLjA3LS41My0uMjJsLTIuNS0yLjUxYy0uMjktLjI5LS4yOS0uNzcgMC0xLjA2cy43Ny0uMjkgMS4wNiAwTDggOWwxLjE5LTEuMTljLjI5LS4yOS43Ny0uMjkgMS4wNiAwIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im0xOS45NiA2Ljg4LjkxLS45MWMuMzQtLjM0LjM0LS44OSAwLTEuMjRzLS45LS4zNC0xLjI0IDBsLS45MS45MWExMC40IDEwLjQgMCAwIDAtNS44NC0yLjQyVjEuNzRoMi4zMVYwSDguODJ2MS43NWgyLjMxdjEuNDhjLTUuMzQuNDQtOS41NSA0LjkxLTkuNTUgMTAuMzZDMS41OCAxOS4zMyA2LjI2IDI0IDEyIDI0czEwLjQyLTQuNjcgMTAuNDItMTAuNDFjMC0yLjU2LS45My00LjktMi40Ny02LjcxWk0xMiAyMi4yNWMtNC43OCAwLTguNjctMy44OS04LjY3LTguNjZTNy4yMiA0LjkzIDEyIDQuOTNzOC42NyAzLjg5IDguNjcgOC42Ni0zLjg5IDguNjYtOC42NyA4LjY2bTMuOC0xMC44N2MuMzQuMzQuMzQuOSAwIDEuMjRsLTMuMTggMy4xOGMtLjE3LjE3LS40LjI2LS42Mi4yNnMtLjQ1LS4wOC0uNjItLjI2TDYuOCAxMS4yMmEuODguODggMCAwIDEgMC0xLjI0Yy4zNC0uMzQuOS0uMzQgMS4yNCAwbDMuOTcgMy45NiAyLjU2LTIuNTZjLjM0LS4zNC45LS4zNCAxLjI0IDBaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Im0yNi40NyA5LjA5IDEuMzUtMS4zNWEuOTk2Ljk5NiAwIDEgMC0xLjQxLTEuNDFsLTEuMzUgMS4zNWMtMi4xOS0xLjktNC45OC0zLjEyLTguMDUtMy4zNFYyaDMuMjlWMGgtOC41N3YyaDMuMjl2Mi4zNGMtNy4xNy41Mi0xMi44NiA2LjUtMTIuODYgMTMuODFzNi4yMiAxMy44NiAxMy44NiAxMy44NiAxMy44Ni02LjIyIDEzLjg2LTEzLjg2YzAtMy40Ni0xLjI4LTYuNjItMy4zOS05LjA1Wk0xNiAzMEM5LjQ2IDMwIDQuMTQgMjQuNjggNC4xNCAxOC4xNFM5LjQ2IDYuMjggMTYgNi4yOHMxMS44NiA1LjMyIDExLjg2IDExLjg2UzIyLjU0IDMwIDE2IDMwbTQuOTktMTQuNzFjLjM5LjM5LjM5IDEuMDIgMCAxLjQxbC00LjI5IDQuMjljLS4yLjItLjQ1LjI5LS43MS4yOXMtLjUxLS4xLS43MS0uMjlsLTUuOTctNS45N2EuOTk2Ljk5NiAwIDEgMSAxLjQxLTEuNDFsNS4yNyA1LjI3IDMuNTgtMy41OGEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiPjxwYXRoIGQ9Im0zMi45OSAxMS4zIDEuNzktMS43OWMuNDQtLjQ0LjQ0LTEuMTUgMC0xLjU5cy0xLjE1LS40NC0xLjU5IDBMMzEuNCA5LjcxYy0yLjc4LTIuNDQtNi4zNS00LTEwLjI3LTQuMjZ2LTMuMmg0LjI3VjBIMTQuNjJ2Mi4yNWg0LjI3djMuMkM5Ljg2IDYuMDMgMi43IDEzLjUzIDIuNyAyMi43UzEwLjQ2IDQwIDIwIDQwczE3LjMtNy43NiAxNy4zLTE3LjNjMC00LjM3LTEuNjQtOC4zNS00LjMxLTExLjRNMjAgMzcuNzVDMTEuNyAzNy43NSA0Ljk1IDMxIDQuOTUgMjIuN1MxMS43IDcuNjUgMjAgNy42NSAzNS4wNSAxNC40IDM1LjA1IDIyLjcgMjguMyAzNy43NSAyMCAzNy43NW02LjE5LTE4LjU1Yy40NC40NC40NCAxLjE1IDAgMS41OWwtNS4zOSA1LjM5Yy0uMjIuMjItLjUxLjMzLS44LjMzcy0uNTgtLjExLS44LS4zM2wtNy41OS03LjZjLS40NC0uNDQtLjQ0LTEuMTUgMC0xLjU5czEuMTUtLjQ0IDEuNTkgMGw2LjggNi44IDQuNi00LjZjLjQ0LS40NCAxLjE1LS40NCAxLjU5IDBaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Im0zOS41MiAxMy41MSAyLjIzLTIuMjNjLjQ5LS40OS40OS0xLjI4IDAtMS43N3MtMS4yOC0uNDktMS43NyAwbC0yLjIzIDIuMjNhMjAuNjggMjAuNjggMCAwIDAtMTIuNS01LjE4VjIuNWg1LjI1VjBIMTcuNDl2Mi41aDUuMjV2NC4wNmMtMTAuODYuNjYtMTkuNSA5LjY4LTE5LjUgMjAuNjlTMTIuNTUgNDggMjQgNDhzMjAuNzYtOS4zMSAyMC43Ni0yMC43NWMwLTUuMjctMS45OS0xMC4wOC01LjI1LTEzLjc0Wk0yNCA0NS41MWMtMTAuMDcgMC0xOC4yNi04LjE5LTE4LjI2LTE4LjI1UzEzLjkzIDkgMjQgOXMxOC4yNiA4LjE5IDE4LjI2IDE4LjI1UzM0LjA3IDQ1LjUgMjQgNDUuNVptNy4zOS0yMi4zOWMuNDkuNDkuNDkgMS4yOCAwIDEuNzdsLTYuNSA2LjVjLS4yNC4yNC0uNTYuMzctLjg4LjM3cy0uNjQtLjEyLS44OC0uMzdsLTkuMzQtOS4zM2MtLjQ5LS40OS0uNDktMS4yOCAwLTEuNzdzMS4yOC0uNDkgMS43NyAwbDguNDYgOC40NSA1LjYyLTUuNjJhMS4yNSAxLjI1IDAgMCAxIDEuNzcgMFoiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTUyLjQ3IDE3Ljgzcy4wNS0uMDMuMDctLjA1bDMuMTMtMy4xM2MuNTQtLjU0LjU0LTEuNDEgMC0xLjk0LS41NC0uNTQtMS40MS0uNTQtMS45NCAwbC0zLjEzIDMuMTNzLS4wMy4wNS0uMDUuMDdjLTQuNTktNC4xNi0xMC41OC02LjgxLTE3LjE4LTcuMTNWMi43NGg3LjM4VjBIMjMuMjR2Mi43NWg3LjM4djYuMDRDMTYuMDEgOS41MSA0LjM1IDIxLjYxIDQuMzUgMzYuMzhTMTYuNzUgNjQgMzEuOTkgNjRzMjcuNjQtMTIuMzkgMjcuNjQtMjcuNjJjMC03LjEzLTIuNzItMTMuNjQtNy4xNy0xOC41NFpNMzIgNjEuMjRjLTEzLjczIDAtMjQuODktMTEuMTYtMjQuODktMjQuODhTMTguMjggMTEuNDggMzIgMTEuNDhzMjQuODkgMTEuMTYgMjQuODkgMjQuODhTNDUuNzIgNjEuMjQgMzIgNjEuMjRtOS43Mi0zMC4yMWMuNTQuNTQuNTQgMS40MSAwIDEuOTRsLTguNzUgOC43NWMtLjI3LjI3LS42Mi40LS45Ny40cy0uNy0uMTMtLjk3LS40TDE4LjMxIDI5LjAxYy0uNTQtLjU0LS41NC0xLjQxIDAtMS45NC41NC0uNTQgMS40MS0uNTQgMS45NSAwbDExLjc1IDExLjc0IDcuNzgtNy43N2MuNTQtLjU0IDEuNDEtLjU0IDEuOTUgMFoiLz48L3N5bWJvbD48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMTYsIG5vbmUpIiBocmVmPSIjczE2Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczI0LCBub25lKSIgaHJlZj0iI3MyNCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMzMiwgbm9uZSkiIGhyZWY9IiNzMzIiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNDAsIG5vbmUpIiBocmVmPSIjczQwIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQ4LCBub25lKSIgaHJlZj0iI3M0OCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM2NCwgbm9uZSkiIGhyZWY9IiNzNjQiLz48L3N5bWJvbD48L2RlZnM+PHN0eWxlPkBtZWRpYSAobWF4LXdpZHRoOiAyMy45OHB4KSB7Z3stLXMxNjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiAyNHB4KSBhbmQgKG1heC13aWR0aDogMzEuOThweCkge2d7LS1zMjQ6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMzJweCkgYW5kIChtYXgtd2lkdGg6IDM5Ljk4cHgpIHtney0tczMyOmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDQwcHgpIGFuZCAobWF4LXdpZHRoOiA0Ny45OHB4KSB7Z3stLXM0MDpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0OHB4KSBhbmQgKG1heC13aWR0aDogNjMuOThweCkge2d7LS1zNDg6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNjRweCkge2d7LS1zNjQ6YmxvY2s7fX08L3N0eWxlPjxnPjx1c2UgaHJlZj0iI2ktdGltZSIvPjwvZz48L3N2Zz4=")}input.form-control[type=time]:disabled::after{display:none}input.form-control[type=time].is-valid:not(:disabled),input.form-control[type=time].is-invalid:not(:disabled){padding-inline-end:calc(var(--post-device-position-2) + var(--post-device-spacing-gap-inline-8) + var(--post-device-sizing-notification-1)*2 + var(--post-device-spacing-padding-3));background-position:top 50% right calc(var(--post-device-position-2) + var(--post-device-spacing-gap-inline-8) + var(--post-device-sizing-notification-1))}input.form-control::placeholder{color:var(--post-scheme-color-interactive-input-enabled-fg);opacity:1}input.form-control[type=date]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-meridiem-field:not(:focus){-webkit-text-fill-color:var(--post-scheme-color-interactive-input-enabled-fg) !important}input.form-control[type=date]::-webkit-datetime-edit-day-field:focus,input.form-control[type=date]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=date]::-webkit-datetime-edit-month-field:focus,input.form-control[type=date]::-webkit-datetime-edit-year-field:focus,input.form-control[type=date]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=date]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=date]::-webkit-datetime-edit-second-field:focus,input.form-control[type=date]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=date]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-day-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-month-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-year-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-second-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=month]::-webkit-datetime-edit-day-field:focus,input.form-control[type=month]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=month]::-webkit-datetime-edit-month-field:focus,input.form-control[type=month]::-webkit-datetime-edit-year-field:focus,input.form-control[type=month]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=month]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=month]::-webkit-datetime-edit-second-field:focus,input.form-control[type=month]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=month]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=week]::-webkit-datetime-edit-day-field:focus,input.form-control[type=week]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=week]::-webkit-datetime-edit-month-field:focus,input.form-control[type=week]::-webkit-datetime-edit-year-field:focus,input.form-control[type=week]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=week]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=week]::-webkit-datetime-edit-second-field:focus,input.form-control[type=week]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=week]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=time]::-webkit-datetime-edit-day-field:focus,input.form-control[type=time]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=time]::-webkit-datetime-edit-month-field:focus,input.form-control[type=time]::-webkit-datetime-edit-year-field:focus,input.form-control[type=time]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=time]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=time]::-webkit-datetime-edit-second-field:focus,input.form-control[type=time]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=time]::-webkit-datetime-edit-meridiem-field:focus{background-color:#b4d5fe !important;-webkit-text-fill-color:#000 !important}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) var(--post-device-sizing-notification-1);background-position:top 50% 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).form-control-sm,input.form-control.is-invalid:not(:disabled).form-control-sm{background-size:var(--post-device-sizing-notification-5) var(--post-device-sizing-notification-5);padding-inline-end:calc(var(--post-device-spacing-padding-3) + var(--post-device-position-2) + var(--post-device-sizing-notification-5))}*:not(.form-floating)>input.form-control.is-valid:not(:disabled){background-image:var(--post-signal-icon-success)}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){*:not(.form-floating)>input.form-control.is-valid:not(:disabled){background-image:var(--post-signal-icon-success)}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){*:not(.form-floating)>input.form-control.is-valid:not(:disabled){background-image:var(--post-signal-icon-success)}}*:not(.form-floating)>input.form-control.is-invalid:not(:disabled){background-image:var(--post-signal-icon-error)}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){*:not(.form-floating)>input.form-control.is-invalid:not(:disabled){background-image:var(--post-signal-icon-error)}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){*:not(.form-floating)>input.form-control.is-invalid:not(:disabled){background-image:var(--post-signal-icon-error)}}.form-label:has(+input.form-control[disabled]){color:var(--post-scheme-color-interactive-input-disabled-fg)}.form-label:has(+input.form-control-sm){display:block;padding-inline:var(--post-device-spacing-padding-2);padding-block:var(--post-device-spacing-padding-30);font-weight:var(--post-device-font-weight-bold);font-size:var(--post-device-font-size-7)}.form-floating{position:relative}.form-floating::after{width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1)}.form-floating:has(>input.form-control.is-valid:not(:disabled))::after,.form-floating:has(>input.form-control:-webkit-autofill.is-valid)::after{content:"";position:absolute;top:calc(var(--post-device-sizing-interactive-button-height-6)/2);transform:translateY(-50%);right:var(--post-device-position-2);z-index:2;pointer-events:none;background-image:var(--post-signal-icon-success)}.form-floating:has(>input.form-control.is-invalid:not(:disabled))::after,.form-floating:has(>input.form-control:-webkit-autofill.is-invalid)::after{content:"";position:absolute;top:calc(var(--post-device-sizing-interactive-button-height-6)/2);transform:translateY(-50%);right:var(--post-device-position-2);z-index:1;pointer-events:none;background-image:var(--post-signal-icon-error)}.form-floating:has(>input.form-control[type=time].is-valid:not(:disabled))::after,.form-floating:has(>input.form-control[type=time]:-webkit-autofill.is-valid)::after,.form-floating:has(>input.form-control[type=time].is-invalid:not(:disabled))::after,.form-floating:has(>input.form-control[type=time]:-webkit-autofill.is-invalid)::after{right:calc(var(--post-device-position-2) + var(--post-device-spacing-gap-inline-8) + var(--post-device-sizing-notification-1))}.form-floating>input.form-control~label{position:absolute;z-index:1;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-inline-1);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}.form-floating>input.form-control{min-height:var(--post-device-sizing-interactive-button-height-6);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::placeholder{color:rgba(0,0,0,0);opacity:0;transition:opacity .25s linear}.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:focus::placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg2);opacity:1;transition:opacity .35s .15s linear}.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)}.form-floating>input.form-control[type=file]:focus,.form-floating>input.form-control[type=file]:not(:placeholder-shown){padding-inline-start:var(--post-device-spacing-padding-5);padding-inline-end:var(--post-device-spacing-padding-inline-4)}.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-input-enabled-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-floating>input::placeholder{opacity:0}}
+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.form-control-sm{height:var(--post-device-sizing-interactive-button-height-8);padding-block:var(--post-device-spacing-padding-29);font-size:var(--post-device-font-size-7)}input.form-control:focus{border-color:var(--post-scheme-color-interactive-input-enabled-border);background-color:var(--post-scheme-color-interactive-input-enabled-bg);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;inset-block-start:0;inset-block-end:0;inset-inline-end: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;inset-block-start:0;inset-block-end:0;inset-inline-end:0;z-index:2;padding-inline:var(--post-device-spacing-padding-inline-1);background-color:inherit;border-inline-start: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].is-valid::file-selector-button,input.form-control[type=file].is-invalid::file-selector-button{padding-inline-end:calc(var(--post-device-spacing-padding-3) + var(--post-device-position-2) + var(--post-device-sizing-notification-1))}input.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}input.form-control[type=time]{padding-inline-end:calc(var(--post-device-spacing-padding-3) + var(--post-device-position-2) + var(--post-device-sizing-notification-1))}input.form-control[type=time]::-webkit-date-and-time-value{text-align:start}input.form-control[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:var(--post-device-position-2);inset-block-start:50%;transform:translateY(-50%);width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);background:rgba(0,0,0,0);cursor:pointer;z-index:1;padding:0;margin:0}input.form-control[type=time]::-webkit-calendar-picker-indicator:focus-within{border-radius:4px;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) var(--post-core-border-style-solid) var(--post-device-border-width-focus) !important}input.form-control[type=time]::after{position:absolute;inset-inline-end:var(--post-device-position-2);inset-block-start:50%;transform:translateY(-50%);width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);content:"";display:block;pointer-events:none;background-color:var(--post-scheme-color-interactive-input-enabled-fg);z-index:2;mask-image:var(--post-icon-time);background-color:currentColor}:root,:host{--post-icon-time: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktdGltZSI+PHN5bWJvbCBpZD0iczE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Im0xMy40MSA0LjY4LjgtLjhjLjI5LS4yOS4yOS0uNzcgMC0xLjA2cy0uNzctLjI5LTEuMDYgMGwtLjguOGE2Ljk1IDYuOTUgMCAwIDAtMy42LTEuNXYtLjYxaDEuMzJWMEg1Ljk0djEuNWgxLjMydi42MWMtMy40OC4zOC02LjIgMy4zNC02LjIgNi45MiAwIDMuODQgMy4xMiA2Ljk2IDYuOTUgNi45NnM2Ljk1LTMuMTIgNi45NS02Ljk2YzAtMS42NS0uNTgtMy4xNy0xLjU0LTQuMzZaTTggMTQuNWMtMyAwLTUuNDUtMi40NS01LjQ1LTUuNDZTNC45OSAzLjU4IDggMy41OHM1LjQ1IDIuNDUgNS40NSA1LjQ2UzExLjAxIDE0LjUgOCAxNC41bTIuMjUtNi42OWMuMjkuMjkuMjkuNzcgMCAxLjA2bC0xLjcyIDEuNzJjLS4xNS4xNS0uMzQuMjItLjUzLjIycy0uMzgtLjA3LS41My0uMjJsLTIuNS0yLjUxYy0uMjktLjI5LS4yOS0uNzcgMC0xLjA2cy43Ny0uMjkgMS4wNiAwTDggOWwxLjE5LTEuMTljLjI5LS4yOS43Ny0uMjkgMS4wNiAwIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im0xOS45NiA2Ljg4LjkxLS45MWMuMzQtLjM0LjM0LS44OSAwLTEuMjRzLS45LS4zNC0xLjI0IDBsLS45MS45MWExMC40IDEwLjQgMCAwIDAtNS44NC0yLjQyVjEuNzRoMi4zMVYwSDguODJ2MS43NWgyLjMxdjEuNDhjLTUuMzQuNDQtOS41NSA0LjkxLTkuNTUgMTAuMzZDMS41OCAxOS4zMyA2LjI2IDI0IDEyIDI0czEwLjQyLTQuNjcgMTAuNDItMTAuNDFjMC0yLjU2LS45My00LjktMi40Ny02LjcxWk0xMiAyMi4yNWMtNC43OCAwLTguNjctMy44OS04LjY3LTguNjZTNy4yMiA0LjkzIDEyIDQuOTNzOC42NyAzLjg5IDguNjcgOC42Ni0zLjg5IDguNjYtOC42NyA4LjY2bTMuOC0xMC44N2MuMzQuMzQuMzQuOSAwIDEuMjRsLTMuMTggMy4xOGMtLjE3LjE3LS40LjI2LS42Mi4yNnMtLjQ1LS4wOC0uNjItLjI2TDYuOCAxMS4yMmEuODguODggMCAwIDEgMC0xLjI0Yy4zNC0uMzQuOS0uMzQgMS4yNCAwbDMuOTcgMy45NiAyLjU2LTIuNTZjLjM0LS4zNC45LS4zNCAxLjI0IDBaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Im0yNi40NyA5LjA5IDEuMzUtMS4zNWEuOTk2Ljk5NiAwIDEgMC0xLjQxLTEuNDFsLTEuMzUgMS4zNWMtMi4xOS0xLjktNC45OC0zLjEyLTguMDUtMy4zNFYyaDMuMjlWMGgtOC41N3YyaDMuMjl2Mi4zNGMtNy4xNy41Mi0xMi44NiA2LjUtMTIuODYgMTMuODFzNi4yMiAxMy44NiAxMy44NiAxMy44NiAxMy44Ni02LjIyIDEzLjg2LTEzLjg2YzAtMy40Ni0xLjI4LTYuNjItMy4zOS05LjA1Wk0xNiAzMEM5LjQ2IDMwIDQuMTQgMjQuNjggNC4xNCAxOC4xNFM5LjQ2IDYuMjggMTYgNi4yOHMxMS44NiA1LjMyIDExLjg2IDExLjg2UzIyLjU0IDMwIDE2IDMwbTQuOTktMTQuNzFjLjM5LjM5LjM5IDEuMDIgMCAxLjQxbC00LjI5IDQuMjljLS4yLjItLjQ1LjI5LS43MS4yOXMtLjUxLS4xLS43MS0uMjlsLTUuOTctNS45N2EuOTk2Ljk5NiAwIDEgMSAxLjQxLTEuNDFsNS4yNyA1LjI3IDMuNTgtMy41OGEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiPjxwYXRoIGQ9Im0zMi45OSAxMS4zIDEuNzktMS43OWMuNDQtLjQ0LjQ0LTEuMTUgMC0xLjU5cy0xLjE1LS40NC0xLjU5IDBMMzEuNCA5LjcxYy0yLjc4LTIuNDQtNi4zNS00LTEwLjI3LTQuMjZ2LTMuMmg0LjI3VjBIMTQuNjJ2Mi4yNWg0LjI3djMuMkM5Ljg2IDYuMDMgMi43IDEzLjUzIDIuNyAyMi43UzEwLjQ2IDQwIDIwIDQwczE3LjMtNy43NiAxNy4zLTE3LjNjMC00LjM3LTEuNjQtOC4zNS00LjMxLTExLjRNMjAgMzcuNzVDMTEuNyAzNy43NSA0Ljk1IDMxIDQuOTUgMjIuN1MxMS43IDcuNjUgMjAgNy42NSAzNS4wNSAxNC40IDM1LjA1IDIyLjcgMjguMyAzNy43NSAyMCAzNy43NW02LjE5LTE4LjU1Yy40NC40NC40NCAxLjE1IDAgMS41OWwtNS4zOSA1LjM5Yy0uMjIuMjItLjUxLjMzLS44LjMzcy0uNTgtLjExLS44LS4zM2wtNy41OS03LjZjLS40NC0uNDQtLjQ0LTEuMTUgMC0xLjU5czEuMTUtLjQ0IDEuNTkgMGw2LjggNi44IDQuNi00LjZjLjQ0LS40NCAxLjE1LS40NCAxLjU5IDBaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Im0zOS41MiAxMy41MSAyLjIzLTIuMjNjLjQ5LS40OS40OS0xLjI4IDAtMS43N3MtMS4yOC0uNDktMS43NyAwbC0yLjIzIDIuMjNhMjAuNjggMjAuNjggMCAwIDAtMTIuNS01LjE4VjIuNWg1LjI1VjBIMTcuNDl2Mi41aDUuMjV2NC4wNmMtMTAuODYuNjYtMTkuNSA5LjY4LTE5LjUgMjAuNjlTMTIuNTUgNDggMjQgNDhzMjAuNzYtOS4zMSAyMC43Ni0yMC43NWMwLTUuMjctMS45OS0xMC4wOC01LjI1LTEzLjc0Wk0yNCA0NS41MWMtMTAuMDcgMC0xOC4yNi04LjE5LTE4LjI2LTE4LjI1UzEzLjkzIDkgMjQgOXMxOC4yNiA4LjE5IDE4LjI2IDE4LjI1UzM0LjA3IDQ1LjUgMjQgNDUuNVptNy4zOS0yMi4zOWMuNDkuNDkuNDkgMS4yOCAwIDEuNzdsLTYuNSA2LjVjLS4yNC4yNC0uNTYuMzctLjg4LjM3cy0uNjQtLjEyLS44OC0uMzdsLTkuMzQtOS4zM2MtLjQ5LS40OS0uNDktMS4yOCAwLTEuNzdzMS4yOC0uNDkgMS43NyAwbDguNDYgOC40NSA1LjYyLTUuNjJhMS4yNSAxLjI1IDAgMCAxIDEuNzcgMFoiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTUyLjQ3IDE3Ljgzcy4wNS0uMDMuMDctLjA1bDMuMTMtMy4xM2MuNTQtLjU0LjU0LTEuNDEgMC0xLjk0LS41NC0uNTQtMS40MS0uNTQtMS45NCAwbC0zLjEzIDMuMTNzLS4wMy4wNS0uMDUuMDdjLTQuNTktNC4xNi0xMC41OC02LjgxLTE3LjE4LTcuMTNWMi43NGg3LjM4VjBIMjMuMjR2Mi43NWg3LjM4djYuMDRDMTYuMDEgOS41MSA0LjM1IDIxLjYxIDQuMzUgMzYuMzhTMTYuNzUgNjQgMzEuOTkgNjRzMjcuNjQtMTIuMzkgMjcuNjQtMjcuNjJjMC03LjEzLTIuNzItMTMuNjQtNy4xNy0xOC41NFpNMzIgNjEuMjRjLTEzLjczIDAtMjQuODktMTEuMTYtMjQuODktMjQuODhTMTguMjggMTEuNDggMzIgMTEuNDhzMjQuODkgMTEuMTYgMjQuODkgMjQuODhTNDUuNzIgNjEuMjQgMzIgNjEuMjRtOS43Mi0zMC4yMWMuNTQuNTQuNTQgMS40MSAwIDEuOTRsLTguNzUgOC43NWMtLjI3LjI3LS42Mi40LS45Ny40cy0uNy0uMTMtLjk3LS40TDE4LjMxIDI5LjAxYy0uNTQtLjU0LS41NC0xLjQxIDAtMS45NC41NC0uNTQgMS40MS0uNTQgMS45NSAwbDExLjc1IDExLjc0IDcuNzgtNy43N2MuNTQtLjU0IDEuNDEtLjU0IDEuOTUgMFoiLz48L3N5bWJvbD48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMTYsIG5vbmUpIiBocmVmPSIjczE2Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczI0LCBub25lKSIgaHJlZj0iI3MyNCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMzMiwgbm9uZSkiIGhyZWY9IiNzMzIiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNDAsIG5vbmUpIiBocmVmPSIjczQwIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQ4LCBub25lKSIgaHJlZj0iI3M0OCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM2NCwgbm9uZSkiIGhyZWY9IiNzNjQiLz48L3N5bWJvbD48L2RlZnM+PHN0eWxlPkBtZWRpYSAobWF4LXdpZHRoOiAyMy45OHB4KSB7Z3stLXMxNjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiAyNHB4KSBhbmQgKG1heC13aWR0aDogMzEuOThweCkge2d7LS1zMjQ6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMzJweCkgYW5kIChtYXgtd2lkdGg6IDM5Ljk4cHgpIHtney0tczMyOmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDQwcHgpIGFuZCAobWF4LXdpZHRoOiA0Ny45OHB4KSB7Z3stLXM0MDpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0OHB4KSBhbmQgKG1heC13aWR0aDogNjMuOThweCkge2d7LS1zNDg6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNjRweCkge2d7LS1zNjQ6YmxvY2s7fX08L3N0eWxlPjxnPjx1c2UgaHJlZj0iI2ktdGltZSIvPjwvZz48L3N2Zz4=")}input.form-control[type=time]:disabled::after{display:none}input.form-control[type=time].is-valid:not(:disabled),input.form-control[type=time].is-invalid:not(:disabled){padding-inline-end:calc(var(--post-device-position-2) + var(--post-device-spacing-gap-inline-8) + var(--post-device-sizing-notification-1)*2 + var(--post-device-spacing-padding-3));background-position:top 50% right calc(var(--post-device-position-2) + var(--post-device-spacing-gap-inline-8) + var(--post-device-sizing-notification-1))}input.form-control::placeholder{color:var(--post-scheme-color-interactive-input-enabled-fg);opacity:1}input.form-control[type=date]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=date]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=datetime-local]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=month]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=week]::-webkit-datetime-edit-meridiem-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-day-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-month-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-year-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-hour-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-minute-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-second-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-ampm-field:not(:focus),input.form-control[type=time]::-webkit-datetime-edit-meridiem-field:not(:focus){-webkit-text-fill-color:var(--post-scheme-color-interactive-input-enabled-fg) !important}input.form-control[type=date]::-webkit-datetime-edit-day-field:focus,input.form-control[type=date]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=date]::-webkit-datetime-edit-month-field:focus,input.form-control[type=date]::-webkit-datetime-edit-year-field:focus,input.form-control[type=date]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=date]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=date]::-webkit-datetime-edit-second-field:focus,input.form-control[type=date]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=date]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-day-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-month-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-year-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-second-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=datetime-local]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=month]::-webkit-datetime-edit-day-field:focus,input.form-control[type=month]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=month]::-webkit-datetime-edit-month-field:focus,input.form-control[type=month]::-webkit-datetime-edit-year-field:focus,input.form-control[type=month]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=month]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=month]::-webkit-datetime-edit-second-field:focus,input.form-control[type=month]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=month]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=week]::-webkit-datetime-edit-day-field:focus,input.form-control[type=week]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=week]::-webkit-datetime-edit-month-field:focus,input.form-control[type=week]::-webkit-datetime-edit-year-field:focus,input.form-control[type=week]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=week]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=week]::-webkit-datetime-edit-second-field:focus,input.form-control[type=week]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=week]::-webkit-datetime-edit-meridiem-field:focus,input.form-control[type=time]::-webkit-datetime-edit-day-field:focus,input.form-control[type=time]::-webkit-datetime-edit-fields-wrapper:focus,input.form-control[type=time]::-webkit-datetime-edit-month-field:focus,input.form-control[type=time]::-webkit-datetime-edit-year-field:focus,input.form-control[type=time]::-webkit-datetime-edit-hour-field:focus,input.form-control[type=time]::-webkit-datetime-edit-minute-field:focus,input.form-control[type=time]::-webkit-datetime-edit-second-field:focus,input.form-control[type=time]::-webkit-datetime-edit-ampm-field:focus,input.form-control[type=time]::-webkit-datetime-edit-meridiem-field:focus{background-color:#b4d5fe !important;-webkit-text-fill-color:#000 !important}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) var(--post-device-sizing-notification-1);background-position:top 50% 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).form-control-sm,input.form-control.is-invalid:not(:disabled).form-control-sm{background-size:var(--post-device-sizing-notification-5) var(--post-device-sizing-notification-5);padding-inline-end:calc(var(--post-device-spacing-padding-3) + var(--post-device-position-2) + var(--post-device-sizing-notification-5))}*:not(.form-floating)>input.form-control.is-valid:not(:disabled){background-image:var(--post-signal-icon-success)}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){*:not(.form-floating)>input.form-control.is-valid:not(:disabled){background-image:var(--post-signal-icon-success)}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){*:not(.form-floating)>input.form-control.is-valid:not(:disabled){background-image:var(--post-signal-icon-success)}}*:not(.form-floating)>input.form-control.is-invalid:not(:disabled){background-image:var(--post-signal-icon-error)}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){*:not(.form-floating)>input.form-control.is-invalid:not(:disabled){background-image:var(--post-signal-icon-error)}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){*:not(.form-floating)>input.form-control.is-invalid:not(:disabled){background-image:var(--post-signal-icon-error)}}.form-label:has(+input.form-control[disabled]){color:var(--post-scheme-color-interactive-input-disabled-fg)}.form-label:has(+input.form-control-sm){display:block;padding-inline:var(--post-device-spacing-padding-2);padding-block:var(--post-device-spacing-padding-30);font-weight:var(--post-device-font-weight-bold);font-size:var(--post-device-font-size-7)}.form-floating{position:relative}.form-floating::after{width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1)}.form-floating:has(>input.form-control.is-valid:not(:disabled))::after,.form-floating:has(>input.form-control:-webkit-autofill.is-valid)::after{content:"";position:absolute;inset-block-start:var(--post-form-floating-validation-icon-block-start, calc(var(--post-device-sizing-interactive-button-height-6) / 2));transform:translateY(-50%);inset-inline-end:var(--post-form-floating-validation-icon-inline-end, var(--post-device-position-2));z-index:2;pointer-events:none;background-image:var(--post-signal-icon-success)}.form-floating:has(>input.form-control.is-invalid:not(:disabled))::after,.form-floating:has(>input.form-control:-webkit-autofill.is-invalid)::after{content:"";position:absolute;inset-block-start:var(--post-form-floating-validation-icon-block-start, calc(var(--post-device-sizing-interactive-button-height-6) / 2));transform:translateY(-50%);inset-inline-end:var(--post-form-floating-validation-icon-inline-end, var(--post-device-position-2));z-index:1;pointer-events:none;background-image:var(--post-signal-icon-error)}.form-floating:has(>input.form-control[type=time].is-valid:not(:disabled))::after,.form-floating:has(>input.form-control[type=time]:-webkit-autofill.is-valid)::after,.form-floating:has(>input.form-control[type=time].is-invalid:not(:disabled))::after,.form-floating:has(>input.form-control[type=time]:-webkit-autofill.is-invalid)::after{inset-inline-end:calc(var(--post-device-position-2) + var(--post-device-spacing-gap-inline-8) + var(--post-device-sizing-notification-1))}.form-floating>input.form-control~label{position:absolute;z-index:1;text-align:start;pointer-events:none;display:block;inset-block-start:var(--post-device-border-width-default);inset-inline-start:var(--post-device-border-width-default);margin:0;padding-inline-start:var(--post-device-spacing-padding-inline-1);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}.form-floating>input.form-control{min-height:var(--post-device-sizing-interactive-button-height-6);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::placeholder{color:rgba(0,0,0,0);opacity:0;transition:opacity .25s linear}.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:focus::placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg2);opacity:1;transition:opacity .35s .15s linear}.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)}.form-floating>input.form-control[type=file]:focus,.form-floating>input.form-control[type=file]:not(:placeholder-shown){padding-inline-start:var(--post-device-spacing-padding-5);padding-inline-end:var(--post-device-spacing-padding-inline-4)}.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-input-enabled-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-floating>input::placeholder{opacity:0}}

package/components/form-input.scss

@@ -12,7 +12,7 @@ tokens.$default-map: components.$post-text-input;
 ) {
   position: absolute;
   inset-inline-end: $inset-inline-end;
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
   width: tokens.get('input-sizing-icon');
   height: tokens.get('input-sizing-icon');
@@ -102,9 +102,9 @@ input.form-control {
       border-radius: 0;
       display: block;
       position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-end: 0;
       margin-inline: 0;
       height: auto;
       background-color: inherit;
@@ -129,13 +129,13 @@ input.form-control {
         align-items: center;
         content: 'Choose File';
         position: absolute;
-        top: 0;
-        bottom: 0;
-        right: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
         z-index: 2;
         padding-inline: tokens.get('input-padding-inline-start');
         background-color: inherit;
-        border-left: inherit;
+        border-inline-start: inherit;
         text-align: center;
 
         [lang='de'] & {
@@ -171,8 +171,8 @@ input.form-control {
       &::file-selector-button {
         padding-inline-end: calc(
           #{tokens.get('input-padding-inline-end')} +
-            #{tokens.get('input-validation-icon-position-inline-end')} +
-            #{tokens.get('input-sizing-icon')}
+          #{tokens.get('input-validation-icon-position-inline-end')} +
+          #{tokens.get('input-sizing-icon')}
         );
       }
     }
@@ -185,8 +185,8 @@ input.form-control {
   &[type='time'] {
     padding-inline-end: calc(
       #{tokens.get('input-padding-inline-end')} +
-        #{tokens.get('input-validation-icon-position-inline-end')} +
-        #{tokens.get('input-sizing-icon')}
+      #{tokens.get('input-validation-icon-position-inline-end')} +
+      #{tokens.get('input-sizing-icon')}
     );
 
     &::-webkit-date-and-time-value {
@@ -231,14 +231,14 @@ input.form-control {
       &:not(:disabled) {
         padding-inline-end: calc(
           #{tokens.get('input-validation-icon-position-inline-end')} +
-            #{tokens.get('post-datepicker-input-icons-gap-inline', components.$post-datepicker)} +
-            #{tokens.get('input-sizing-icon')} * 2 + #{tokens.get('input-padding-inline-end')}
+          #{tokens.get('post-datepicker-input-icons-gap-inline', components.$post-datepicker)} +
+          #{tokens.get('input-sizing-icon')} * 2 + #{tokens.get('input-padding-inline-end')}
         );
         background-position: top 50% right
           calc(
             #{tokens.get('input-validation-icon-position-inline-end')} +
-              #{tokens.get('post-datepicker-input-icons-gap-inline', components.$post-datepicker)} +
-              #{tokens.get('input-sizing-icon')}
+            #{tokens.get('post-datepicker-input-icons-gap-inline', components.$post-datepicker)} +
+            #{tokens.get('input-sizing-icon')}
           );
       }
     }
@@ -309,16 +309,16 @@ input.form-control {
       background-repeat: no-repeat;
       padding-inline-end: calc(
         #{tokens.get('input-padding-inline-end')} +
-          #{tokens.get('input-validation-icon-position-inline-end')} +
-          #{tokens.get('input-sizing-icon')}
+        #{tokens.get('input-validation-icon-position-inline-end')} +
+        #{tokens.get('input-sizing-icon')}
       );
 
       &.form-control-sm {
         background-size: tokens.get('input-small-sizing-icon') tokens.get('input-small-sizing-icon');
         padding-inline-end: calc(
           #{tokens.get('input-padding-inline-end')} +
-            #{tokens.get('input-validation-icon-position-inline-end')} +
-            #{tokens.get('input-small-sizing-icon')}
+          #{tokens.get('input-validation-icon-position-inline-end')} +
+          #{tokens.get('input-small-sizing-icon')}
         );
       }
     }
@@ -354,9 +354,15 @@ input.form-control {
   &:has(> input.form-control:-webkit-autofill.is-valid)::after {
     content: '';
     position: absolute;
-    top: calc(#{tokens.get('input-sizing-height')} / 2);
+    inset-block-start: var(
+      --post-form-floating-validation-icon-block-start,
+      calc(#{tokens.get('input-sizing-height')} / 2)
+    );
     transform: translateY(-50%);
-    right: tokens.get('input-validation-icon-position-inline-end');
+    inset-inline-end: var(
+      --post-form-floating-validation-icon-inline-end,
+      #{tokens.get('input-validation-icon-position-inline-end')}
+    );
     z-index: 2;
     pointer-events: none;
     background-image: var(--post-signal-icon-success);
@@ -366,9 +372,15 @@ input.form-control {
   &:has(> input.form-control:-webkit-autofill.is-invalid)::after {
     content: '';
     position: absolute;
-    top: calc(#{tokens.get('input-sizing-height')} / 2);
+    inset-block-start: var(
+      --post-form-floating-validation-icon-block-start,
+      calc(#{tokens.get('input-sizing-height')} / 2)
+    );
     transform: translateY(-50%);
-    right: tokens.get('input-validation-icon-position-inline-end');
+    inset-inline-end: var(
+      --post-form-floating-validation-icon-inline-end,
+      #{tokens.get('input-validation-icon-position-inline-end')}
+    );
     z-index: 1;
     pointer-events: none;
     background-image: var(--post-signal-icon-error);
@@ -378,10 +390,10 @@ input.form-control {
   &:has(> input.form-control[type='time']:-webkit-autofill.is-valid)::after,
   &:has(> input.form-control[type='time'].is-invalid:not(:disabled))::after,
   &:has(> input.form-control[type='time']:-webkit-autofill.is-invalid)::after {
-    right: calc(
+    inset-inline-end: calc(
       #{tokens.get('input-validation-icon-position-inline-end')} +
-        #{tokens.get('post-datepicker-input-icons-gap-inline', components.$post-datepicker)} +
-        #{tokens.get('input-sizing-icon')}
+      #{tokens.get('post-datepicker-input-icons-gap-inline', components.$post-datepicker)} +
+      #{tokens.get('input-sizing-icon')}
     );
   }
 
@@ -391,8 +403,8 @@ input.form-control {
     text-align: start;
     pointer-events: none;
     display: block;
-    top: tokens.get('input-border-width');
-    left: tokens.get('input-border-width');
+    inset-block-start: tokens.get('input-border-width');
+    inset-inline-start: tokens.get('input-border-width');
     margin: 0;
     padding-inline-start: tokens.get('input-padding-inline-start');
     padding-inline-end: tokens.get('input-label-empty-padding-inline-end');

package/components/form-search-input.scss

@@ -54,7 +54,7 @@ tokens.$default-map: components.$post-search-input;
   .delete-button {
     right: calc(
       tokens.get('input-sizing-icon', components.$post-text-input) +
-        tokens.get('input-search-filled-gap-icon') + tokens.get('search-position-inline-end-icon')
+      tokens.get('input-search-filled-gap-icon') + tokens.get('search-position-inline-end-icon')
     );
     visibility: hidden;
     opacity: 0;

package/components/form-select.scss

@@ -217,9 +217,9 @@ tokens.$default-map: components.$post-select;
       color: tokens.get('select-color-enabled-fg');
       max-width: calc(
         100% -
-          (#{tokens.get('select-border-width')} * 2) - tokens.get(
-            'select-label-empty-padding-inline-end'
-          )
+        (#{tokens.get('select-border-width')} * 2) - tokens.get(
+          'select-label-empty-padding-inline-end'
+        )
       );
       background-color: tokens.get('select-color-enabled-bg');
       white-space: nowrap;
@@ -272,7 +272,7 @@ tokens.$default-map: components.$post-select;
           padding-block: tokens.get('select-standalone-padding-block');
           width: calc(
             100% - (#{tokens.get('select-border-width')} * 2) -
-              #{tokens.get('select-label-empty-padding-inline-start')}
+            #{tokens.get('select-label-empty-padding-inline-start')}
           );
         }
       }
@@ -299,32 +299,26 @@ tokens.$default-map: components.$post-select;
     }
 
     &.is-valid:not(:disabled) {
-      background-image:
-        forms-fx.select-arrow-icon('enabled', 'dark'), var(--post-signal-icon-success);
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), var(--post-signal-icon-success);
 
       &:focus {
-        background-image:
-          forms-fx.select-arrow-icon('selected', 'dark'), var(--post-signal-icon-success);
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), var(--post-signal-icon-success);
       }
 
       &:hover {
-        background-image:
-          forms-fx.select-arrow-icon('hover', 'dark'), var(--post-signal-icon-success);
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), var(--post-signal-icon-success);
       }
     }
 
     &.is-invalid:not(:disabled) {
-      background-image:
-        forms-fx.select-arrow-icon('enabled', 'dark'), var(--post-signal-icon-error);
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), var(--post-signal-icon-error);
 
       &:focus {
-        background-image:
-          forms-fx.select-arrow-icon('selected', 'dark'), var(--post-signal-icon-error);
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), var(--post-signal-icon-error);
       }
 
       &:hover {
-        background-image:
-          forms-fx.select-arrow-icon('hover', 'dark'), var(--post-signal-icon-error);
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), var(--post-signal-icon-error);
       }
     }
   }

package/components/form-textarea.scss

@@ -132,7 +132,7 @@ textarea.form-control {
     padding-block-start: tokens.get('textarea-label-padding-block-start');
     width: calc(
       100% - (#{tokens.get('textarea-border-width')} * 2) -
-        #{tokens.get('textarea-label-padding-inline-end')}
+      #{tokens.get('textarea-label-padding-inline-end')}
     );
     border: 0;
     border-top-left-radius: tokens.get('textarea-border-radius');
@@ -200,7 +200,7 @@ textarea.form-control {
       ~ label {
         width: calc(
           100% - (#{tokens.get('textarea-border-width')} * 2) -
-            #{tokens.get('textarea-label-validated-padding-inline-end')}
+          #{tokens.get('textarea-label-validated-padding-inline-end')}
         );
       }
     }

package/components/header/_custom-properties.scss

@@ -8,16 +8,16 @@
 // ============================================================
 
 :root:has(post-header [slot='main-nav']):not(:has(post-header [slot='title'])) {
-  --post-global-header-expanded-height: 4rem;
-  --post-local-header-reduced-height: 0rem;
-  --post-local-header-expanded-min-height: var(--post-main-navigation-height, 0rem);
+  --post-global-header-expanded-height: 64px;
+  --post-local-header-reduced-height: 0px;
+  --post-local-header-expanded-min-height: var(--post-main-navigation-height, 0px);
 
   @include media.only(desktop) {
-    --post-global-header-expanded-height: 4.5rem;
-    --post-global-header-reduced-height: 1.5rem;
-    --post-local-header-reduced-height: 3.5rem;
+    --post-global-header-expanded-height: 72px;
+    --post-global-header-reduced-height: 24px;
+    --post-local-header-reduced-height: 56px;
     --post-main-navigation-height: var(--post-local-header-reduced-height);
-    --post-logo-reduced-offset: 0.375rem;
+    --post-logo-reduced-offset: 6px;
   }
 }
 
@@ -43,23 +43,23 @@ post-header:has([slot='main-nav']):not(:has([slot='title'])) {
 // ============================================================
 
 :root:has(post-header [slot='main-nav']):has(post-header [slot='title']) {
-  --post-global-header-expanded-height: 4rem;
+  --post-global-header-expanded-height: 64px;
   --post-local-header-reduced-height: var(--post-local-header-expanded-height);
 
   @include media.only(mobile) {
-    --post-local-header-expanded-min-height: 3rem;
+    --post-local-header-expanded-min-height: 48px;
   }
 
   @include media.only(tablet) {
-    --post-local-header-expanded-min-height: 3.5rem;
+    --post-local-header-expanded-min-height: 56px;
   }
 
   @include media.only(desktop) {
-    --post-global-header-expanded-height: 4.5rem;
-    --post-local-header-expanded-min-height: 7rem;
-    --post-global-header-reduced-height: 1.5rem;
-    --post-main-navigation-height: 3.5rem;
-    --post-logo-reduced-offset: 0.375rem;
+    --post-global-header-expanded-height: 72px;
+    --post-local-header-expanded-min-height: 112px;
+    --post-global-header-reduced-height: 24px;
+    --post-main-navigation-height: 56px;
+    --post-logo-reduced-offset: 6px;
   }
 }
 
@@ -83,21 +83,21 @@ post-header:has([slot='main-nav']):has([slot='title']) {
 // ============================================================
 
 :root:has(post-header):not(:has(post-header [slot='main-nav'])) {
-  --post-global-header-expanded-height: 4rem;
-  --post-local-header-expanded-min-height: 3.5rem;
+  --post-global-header-expanded-height: 64px;
+  --post-local-header-expanded-min-height: 56px;
 
   @include media.only(desktop) {
-    --post-global-header-expanded-height: 4.5rem;
-    --post-local-header-expanded-min-height: 4rem;
+    --post-global-header-expanded-height: 72px;
+    --post-local-header-expanded-min-height: 64px;
   }
 }
 
 // One-pager header: when there is no main-nav and no title,
 // ensure the local header collapses to zero height
 :root:has(post-header):not(:has(post-header [slot='main-nav'])):not(
-    :has(post-header [slot='title'])
-  ) {
-  --post-local-header-expanded-min-height: 0rem;
+  :has(post-header [slot='title'])
+) {
+  --post-local-header-expanded-min-height: 0px;
 }
 
 post-header:not(:has([slot='main-nav'])) {
@@ -135,24 +135,24 @@ post-header:not(:has([slot='main-nav'])) {
 // ============================================================
 
 :root:has(post-header):not(:has(post-header > [slot='audience'])):not(
-    :has(post-header > [slot='global-nav-primary'])
-  ):not(:has(post-header > [slot='global-nav-secondary'])):not(
-    :has(post-header > [slot='language-menu'])
-  ):not(:has(post-header > [slot='post-login'])) {
+  :has(post-header > [slot='global-nav-primary'])
+):not(:has(post-header > [slot='global-nav-secondary'])):not(
+  :has(post-header > [slot='language-menu'])
+):not(:has(post-header > [slot='post-login'])) {
   --post-global-header-expanded-height: var(--_post-initial-global-header-height);
-  --post-global-header-reduced-height: 2rem;
+  --post-global-header-reduced-height: 32px;
 
   @include media.only(desktop) {
-    --post-logo-expanded-offset: 0.625rem;
-    --post-logo-reduced-offset: 0.625rem;
+    --post-logo-expanded-offset: 10px;
+    --post-logo-reduced-offset: 10px;
   }
   @include media.only(tablet) {
-    --post-logo-expanded-offset: 0.75rem;
-    --post-logo-reduced-offset: 0.75rem;
+    --post-logo-expanded-offset: 12px;
+    --post-logo-reduced-offset: 12px;
   }
   @include media.only(mobile) {
-    --post-logo-expanded-offset: 0.5rem;
-    --post-logo-reduced-offset: 0.5rem;
+    --post-logo-expanded-offset: 8px;
+    --post-logo-reduced-offset: 8px;
   }
 }
 

package/components/header/_mixins.scss

@@ -7,8 +7,8 @@
 
 $interactive-elements-selector: 'a, button, [role="link"], [role="button"]';
 
-$nav-block-padding-inline-start: 0.5rem;
-$nav-block-padding-inline-end: 0.75rem;
+$nav-block-padding-inline-start: 8px;
+$nav-block-padding-inline-end: 12px;
 
 /**
  selects all slotted nav items
@@ -43,8 +43,8 @@ $nav-block-padding-inline-end: 0.75rem;
   border: unset;
   font-weight: unset;
   display: flex;
-  padding: 0.25rem 0.625rem;
-  gap: 0.375rem;
+  padding: 4px 10px;
+  gap: 6px;
   font-size: 1rem;
 
   @include button.button-variant-def('enabled', 'tertiary');
@@ -72,9 +72,9 @@ $nav-block-padding-inline-end: 0.75rem;
   width: 100%;
   justify-content: start;
   position: relative;
-  padding: 0.75rem $nav-block-padding-inline-end calc(0.75rem - var(--post-nav-item-border-width))
+  padding: 12px $nav-block-padding-inline-end calc(12px - var(--post-nav-item-border-width))
     $nav-block-padding-inline-start;
-  gap: 1rem;
+  gap: 16px;
   border-radius: 0;
   line-height: 1.5;
   outline-color: currentColor !important;
@@ -119,9 +119,9 @@ $nav-block-padding-inline-end: 0.75rem;
   }
 
   @include media.only(mobile) {
-    padding: calc(0.5rem + 1.5px) $nav-block-padding-inline-end
-      calc(0.5rem + 1.5px - var(--post-nav-item-border-width)) $nav-block-padding-inline-start;
-    gap: 0.5rem;
+    padding: calc(8px + 1.5px) $nav-block-padding-inline-end
+      calc(8px + 1.5px - var(--post-nav-item-border-width)) $nav-block-padding-inline-start;
+    gap: 8px;
     font-size: 0.875rem;
 
     > post-icon {

package/components/header/_placeholders.scss

@@ -5,7 +5,7 @@
 
 %header-list {
   @include list.list-inline;
-  gap: 0 0.5rem;
+  gap: 0 8px;
   margin: 0;
 
   @include media.max(desktop) {
@@ -27,8 +27,8 @@
   height: 100%;
 
   @include media.only(desktop) {
-    padding: 1rem 0.75rem;
-    gap: 0.5rem;
+    padding: 16px 12px;
+    gap: 8px;
     border-bottom: 0;
   }
 }