@swisspost/design-system-styles 9.0.0-next.5 → 9.0.0-next.6

package/components/form-hint.scss

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

package/components/form-range.css

@@ -1 +1 @@
-.form-text{margin-top:.25rem;font-size:0.8125rem;color:var(--post-contrast-color)}.form-control{display:block;width:100%;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-clip:padding-box;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:inherit;background-color:inherit;border-color:inherit;outline:0;box-shadow:none}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:#666;opacity:1}.form-control:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:var(--post-gray-40);opacity:1}.form-control::file-selector-button{padding:.875rem 1.125rem;margin:-0.875rem -1.125rem;margin-inline-end:1.125rem;color:#000;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:2px;border-radius:0;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#fff}.form-control-plaintext{display:block;width:100%;padding:.875rem 0;margin-bottom:0;line-height:1.5;color:var(--post-contrast-color);background-color:rgba(0,0,0,0);border:solid rgba(0,0,0,0);border-width:2px 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg{padding-right:0;padding-left:0}.form-control-sm{min-height:1.75rem;padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.form-control-sm::file-selector-button{padding:.25rem 1rem;margin:-0.25rem -1rem;margin-inline-end:1rem}.form-control-lg{min-height:3.125rem;padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.form-control-lg::file-selector-button{padding:.75rem 1rem;margin:-0.75rem -1rem;margin-inline-end:1rem}textarea.form-control{min-height:3.5rem}textarea.form-control-sm{min-height:1.75rem}textarea.form-control-lg{min-height:3.125rem}.form-control-color{width:3rem;height:3.5rem;padding:.875rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0 !important;border-radius:0}.form-control-color::-webkit-color-swatch{border:0 !important;border-radius:0}.form-control-color.form-control-sm{height:1.75rem}.form-control-color.form-control-lg{height:3.125rem}.form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");display:block;width:100%;padding:.875rem 3.375rem .875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right 1.125rem center;background-size:16px 12px;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-select{transition:none}}.form-select:focus{border-color:inherit;outline:0;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:1.125rem;background-image:none}.form-select:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:#999}.form-select:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #000}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;font-size:0.875rem;border-radius:0}.form-select-lg{padding-top:.75rem;padding-bottom:.75rem;padding-left:1rem;font-size:1.25rem;border-radius:0}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-range{width:100%;height:2.4rem;padding:0;appearance:none;background-color:rgba(0,0,0,0)}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #000,0 0 0 .2rem rgba(51,51,51,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #000,0 0 0 .2rem rgba(51,51,51,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:2rem;height:2rem;margin-top:-0.9rem;appearance:none;background-color:#fff;border:2px solid #000;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#fff}.form-range::-webkit-slider-runnable-track{width:100%;height:.2rem;color:rgba(0,0,0,0);cursor:pointer;background-color:#ccc;border-color:rgba(0,0,0,0);border-radius:1rem}.form-range::-moz-range-thumb{width:2rem;height:2rem;appearance:none;background-color:#fff;border:2px solid #000;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#fff}.form-range::-moz-range-track{width:100%;height:.2rem;color:rgba(0,0,0,0);cursor:pointer;background-color:#ccc;border-color:rgba(0,0,0,0);border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#fff}.form-range:disabled::-moz-range-thumb{background-color:#fff}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:4.6875rem;min-height:4.6875rem;line-height:1.5}.form-floating>label{position:absolute;top:0;left:0;z-index:2;height:100%;padding:.75rem 1rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:2px solid rgba(0,0,0,0);transform-origin:0 0;transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:.75rem 1rem}.form-floating>.form-control::placeholder,.form-floating>.form-control-plaintext::placeholder{color:rgba(0,0,0,0)}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown),.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown){padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:-webkit-autofill,.form-floating>.form-control-plaintext:-webkit-autofill{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-select{padding-top:1.5rem;padding-bottom:0}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-control-plaintext~label,.form-floating>.form-select~label{color:rgba(var(--bs-body-color-rgb), 1);transform:scale(0.75)}.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-control-plaintext~label::after,.form-floating>.form-select~label::after{position:absolute;inset:.75rem .5rem;z-index:-1;height:4.6875rem;content:"";background-color:#fff;border-radius:0}.form-floating>.form-control:-webkit-autofill~label{color:rgba(var(--bs-body-color-rgb), 1);transform:scale(0.75)}.form-floating>.form-control-plaintext~label{border-width:2px 0}.form-floating>:disabled~label,.form-floating>.form-control:disabled~label{color:#6c757d}.form-floating>:disabled~label::after,.form-floating>.form-control:disabled~label::after{background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select,.input-group>.form-floating{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus,.input-group>.form-floating:focus-within{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;text-align:center;white-space:nowrap;background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.6);border:2px solid #333;border-radius:0}.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text,.input-group-lg>.btn{padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text,.input-group-sm>.btn{padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:4.5rem}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(2px*-1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.form-range-wrapper{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}.form-range-wrapper: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){.form-range-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-range-wrapper: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){.form-range-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-range-wrapper)>.form-range{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}:not(.form-range-wrapper)>.form-range: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){:not(.form-range-wrapper)>.form-range:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-range-wrapper)>.form-range: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){:not(.form-range-wrapper)>.form-range:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-range::-webkit-slider-container{overflow-x:clip}.form-range::-moz-range-thumb{border-radius:50%;box-sizing:border-box;cursor:pointer}.form-range::-webkit-slider-runnable-track{height:4px}.form-range::-webkit-slider-thumb{clip-path:polygon(0 calc(50% - 2px), 1px calc(50% - 6px), 1px 0, 32px 0, 32px 32px, 1px 32px, 1px calc(50% + 6px), 0 calc(50% + 2px), -100vw calc(50% + 2px), -100vw calc(50% - 2px))}.form-range::-moz-range-track,.form-range::-moz-range-progress{height:4px}.form-range:not(:disabled,.disabled)::-webkit-slider-runnable-track{background-color:#ccc}.form-range:not(:disabled,.disabled)::-moz-range-progress{background-color:#000}.form-range:not(:disabled,.disabled)::-webkit-slider-thumb{box-shadow:calc(-100vw - 32px) 0 0 100vw #000}.form-range:not(:disabled,.disabled):hover::-webkit-slider-thumb{border-width:3px}.form-range:not(:disabled,.disabled):hover::-moz-range-thumb{border-width:3px}.form-range:not(:disabled,.disabled):focus::-moz-range-thumb{box-shadow:none}.form-range:not(:disabled,.disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)::-moz-range-thumb{outline:none}@supports not selector(:has(:focus-visible)){.form-range:not(:disabled,.disabled):is(:focus-visible,:focus-within,.pretend-focus)::-moz-range-thumb{outline:none}}.form-range:disabled::-webkit-slider-thumb,.form-range.disabled::-webkit-slider-thumb{border-color:var(--post-gray-40);border-style:dashed;box-shadow:calc(-100vw - 32px) 0 0 100vw #999}.form-range:disabled::-moz-range-thumb,.form-range.disabled::-moz-range-thumb{border-color:var(--post-gray-40);border-style:dashed}.form-range:disabled::-moz-range-progress,.form-range.disabled::-moz-range-progress{background-color:#999}.form-range+.form-text{margin-top:1rem;transform:translateY(-1.2rem)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-range{forced-color-adjust:none}.form-range::-webkit-slider-thumb{box-shadow:calc(-100vw - 32px) 0 0 100vw SelectedItem !important}.form-range::-moz-range-progress{background-color:SelectedItem !important}.form-range:not(:disabled,.disabled)::-webkit-slider-runnable-track{background-color:ButtonBorder}.form-range:not(:disabled,.disabled)::-webkit-slider-thumb{background-color:ButtonFace;border-color:ButtonBorder}.form-range:not(:disabled,.disabled)::-moz-range-track{background-color:ButtonText}.form-range:not(:disabled,.disabled)::-moz-range-thumb{background-color:ButtonFace;border-color:ButtonText}.form-range:not(:disabled,.disabled):hover::-webkit-slider-thumb{border-color:Highlight}.form-range:not(:disabled,.disabled):hover::-moz-range-thumb{border-color:Highlight}.form-range:disabled::-moz-range-progress,.form-range.disabled::-moz-range-progress{background-color:GrayText !important}.form-range:disabled::-webkit-slider-thumb,.form-range.disabled::-webkit-slider-thumb{background-color:ButtonFace;border-color:GrayText;box-shadow:calc(-100vw - 32px) 0 0 100vw GrayText !important}.form-range:disabled::-moz-range-thumb,.form-range.disabled::-moz-range-thumb{background-color:ButtonFace;border-color:GrayText}}
+.form-range{width:100%;height:2.4rem;padding:0;appearance:none;background-color:rgba(0,0,0,0)}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #000,0 0 0 .2rem rgba(51,51,51,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #000,0 0 0 .2rem rgba(51,51,51,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:2rem;height:2rem;margin-top:-0.9rem;appearance:none;background-color:#fff;border:2px solid #000;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#fff}.form-range::-webkit-slider-runnable-track{width:100%;height:.2rem;color:rgba(0,0,0,0);cursor:pointer;background-color:#ccc;border-color:rgba(0,0,0,0);border-radius:1rem}.form-range::-moz-range-thumb{width:2rem;height:2rem;appearance:none;background-color:#fff;border:2px solid #000;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#fff}.form-range::-moz-range-track{width:100%;height:.2rem;color:rgba(0,0,0,0);cursor:pointer;background-color:#ccc;border-color:rgba(0,0,0,0);border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#fff}.form-range:disabled::-moz-range-thumb{background-color:#fff}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select,.input-group>.form-floating{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus,.input-group>.form-floating:focus-within{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:2px solid #333;border-radius:0}.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text,.input-group-lg>.btn{padding:.75rem 1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text,.input-group-sm>.btn{padding:.25rem 1rem;font-size:0.875rem;border-radius:var(--bs-border-radius-sm)}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:4.5rem}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(2px*-1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.form-range-wrapper{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}.form-range-wrapper: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){.form-range-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-range-wrapper: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){.form-range-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-range-wrapper)>.form-range{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}:not(.form-range-wrapper)>.form-range: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){:not(.form-range-wrapper)>.form-range:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-range-wrapper)>.form-range: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){:not(.form-range-wrapper)>.form-range:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-range::-webkit-slider-container{overflow-x:clip}.form-range::-moz-range-thumb{border-radius:50%;box-sizing:border-box;cursor:pointer}.form-range::-webkit-slider-runnable-track{height:4px}.form-range::-webkit-slider-thumb{clip-path:polygon(0 calc(50% - 2px), 1px calc(50% - 6px), 1px 0, 32px 0, 32px 32px, 1px 32px, 1px calc(50% + 6px), 0 calc(50% + 2px), -100vw calc(50% + 2px), -100vw calc(50% - 2px))}.form-range::-moz-range-track,.form-range::-moz-range-progress{height:4px}.form-range:not(:disabled,.disabled)::-webkit-slider-runnable-track{background-color:#ccc}.form-range:not(:disabled,.disabled)::-moz-range-progress{background-color:#000}.form-range:not(:disabled,.disabled)::-webkit-slider-thumb{box-shadow:calc(-100vw - 32px) 0 0 100vw #000}.form-range:not(:disabled,.disabled):hover::-webkit-slider-thumb{border-width:3px}.form-range:not(:disabled,.disabled):hover::-moz-range-thumb{border-width:3px}.form-range:not(:disabled,.disabled):focus::-moz-range-thumb{box-shadow:none}.form-range:not(:disabled,.disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)::-moz-range-thumb{outline:none}@supports not selector(:has(:focus-visible)){.form-range:not(:disabled,.disabled):is(:focus-visible,:focus-within,.pretend-focus)::-moz-range-thumb{outline:none}}.form-range:disabled::-webkit-slider-thumb,.form-range.disabled::-webkit-slider-thumb{border-color:var(--post-gray-40);border-style:dashed;box-shadow:calc(-100vw - 32px) 0 0 100vw #999}.form-range:disabled::-moz-range-thumb,.form-range.disabled::-moz-range-thumb{border-color:var(--post-gray-40);border-style:dashed}.form-range:disabled::-moz-range-progress,.form-range.disabled::-moz-range-progress{background-color:#999}.form-range+.form-hint{margin-top:1rem;transform:translateY(-1.2rem)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-range{forced-color-adjust:none}.form-range::-webkit-slider-thumb{box-shadow:calc(-100vw - 32px) 0 0 100vw SelectedItem !important}.form-range::-moz-range-progress{background-color:SelectedItem !important}.form-range:not(:disabled,.disabled)::-webkit-slider-runnable-track{background-color:ButtonBorder}.form-range:not(:disabled,.disabled)::-webkit-slider-thumb{background-color:ButtonFace;border-color:ButtonBorder}.form-range:not(:disabled,.disabled)::-moz-range-track{background-color:ButtonText}.form-range:not(:disabled,.disabled)::-moz-range-thumb{background-color:ButtonFace;border-color:ButtonText}.form-range:not(:disabled,.disabled):hover::-webkit-slider-thumb{border-color:Highlight}.form-range:not(:disabled,.disabled):hover::-moz-range-thumb{border-color:Highlight}.form-range:disabled::-moz-range-progress,.form-range.disabled::-moz-range-progress{background-color:GrayText !important}.form-range:disabled::-webkit-slider-thumb,.form-range.disabled::-webkit-slider-thumb{background-color:ButtonFace;border-color:GrayText;box-shadow:calc(-100vw - 32px) 0 0 100vw GrayText !important}.form-range:disabled::-moz-range-thumb,.form-range.disabled::-moz-range-thumb{background-color:ButtonFace;border-color:GrayText}}

package/components/form-range.scss

@@ -113,7 +113,7 @@ $webkit-thumb-width: 32px;
     }
   }
 
-  + .form-text {
+  + .form-hint {
     margin-top: spacing.$size-regular;
     transform: translateY(#{-0.5 * forms.$form-range-height});
   }

package/components/form-select.css

@@ -1 +1 @@
-.form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");display:block;width:100%;padding:.875rem 3.375rem .875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);background-repeat:no-repeat;background-position:right 1.125rem center;background-size:16px 12px;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-select{transition:none}}.form-select:focus{border-color:inherit;outline:0;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:1.125rem;background-image:none}.form-select:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:#999}.form-select:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #000}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;font-size:0.875rem;border-radius:0}.form-select-lg{padding-top:.75rem;padding-bottom:.75rem;padding-left:1rem;font-size:1.25rem;border-radius:0}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-select-wrapper{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}.form-select-wrapper: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){.form-select-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-select-wrapper: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){.form-select-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-select-wrapper)>.form-select{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}:not(.form-select-wrapper)>.form-select: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){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-select-wrapper)>.form-select: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){:not(.form-select-wrapper)>.form-select:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-select{--form-select-indicator: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E")}.form-select:focus{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:not(:disabled):hover,.form-select:not(:disabled):focus{border-color:FieldText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:not(:disabled):hover{border-color:Highlight}}.form-select:disabled{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through}.form-select:disabled~.form-text{color:var(--post-gray-60)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:disabled{color:GrayText;border-color:GrayText}}.form-select:not([multiple]):disabled{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23999999' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E"),var(--form-select-indicator),var(--bs-form-select-bg-icon, none)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select{--form-select-indicator: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:Field;border-color:FieldText;color:FieldText}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: active)and (prefers-color-scheme: light),(-ms-high-contrast: white-on-black)and (prefers-color-scheme: light){.form-select{--form-select-indicator: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23000000' d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E")}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:focus-visible{color:FieldText}}.form-select-rg{padding:.625rem .875rem;font-size:1rem;line-height:1.5;background-size:32px}.form-select-sm{font-size:.875rem;line-height:1.5;min-height:1.75rem;padding-block:.25rem;padding-inline:1rem;background-size:24px}.form-select-lg{font-size:1rem !important;line-height:1.5;min-height:3.125rem;background-size:32px}
+.form-select{display:block;width:100%;font-family:var(--post-device-font-family-default);appearance:none;position:relative;min-height:var(--post-device-sizing-interactive-button-height-6);padding-block:var(--post-device-spacing-padding-block-1);padding-inline-start:var(--post-device-spacing-padding-inline-1);padding-inline-end:var(--post-core-dimension-48);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);background-repeat:no-repeat;background-size:var(--post-device-sizing-notification-1);background-position:center right var(--post-device-position-2);border-width:var(--post-device-border-width-default);border-color:var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-device-border-radius-1);color:var(--post-scheme-color-interactive-primary-enabled-fg1);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23050400' 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")}.form-select:disabled{opacity:1;color:var(--post-scheme-color-interactive-primary-disabled-fg1);background-color:var(--post-scheme-color-interactive-primary-disabled-bg);border-color:var(--post-scheme-color-interactive-primary-disabled-stroke);border-style:var(--post-core-border-style-dash)}.form-select:disabled:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23696864' 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")}.form-select:not(:disabled):focus{background-color:var(--post-scheme-color-interactive-primary-selected-bg1);color:var(--post-scheme-color-interactive-primary-selected-fg1);border-color:var(--post-scheme-color-interactive-primary-selected-stroke1);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23050400' 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")}.form-select:not(:disabled):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}.form-select:not(:disabled):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){.form-select:not(:disabled):focus:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-select:not(:disabled):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){.form-select:not(:disabled):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){.form-select:not(:disabled):focus{border-color:FieldText}}.form-select:not(:disabled):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg);color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.form-select:not(:disabled):hover:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23504f4b' 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")}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select:not(:disabled):hover{border-color:Highlight}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-select{background-color:Field;border-color:FieldText;color:FieldText}.form-select:focus-visible{color:FieldText}}.form-select.is-valid:not(:disabled),.form-select.is-invalid:not(:disabled){padding-inline-end:var(--post-core-dimension-82);background-position:center right var(--post-device-position-2),center right var(--post-device-position-3)}.form-select.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23050400' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-select.is-valid:not(:disabled):focus{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23050400' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-select.is-valid:not(:disabled):hover:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23504f4b' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-select.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23050400' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-select.is-invalid:not(:disabled):focus{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23050400' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-select.is-invalid:not(:disabled):hover:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23504f4b' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-select[multiple],.form-select[size]:not([size="1"]){background-image:none}.form-select[multiple].is-valid,.form-select[multiple].is-invalid,.form-select[size]:not([size="1"]).is-valid,.form-select[size]:not([size="1"]).is-invalid{background-position:center right var(--post-device-position-3)}.form-select[multiple].is-valid:not(:disabled),.form-select[size]:not([size="1"]).is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-select[multiple].is-invalid:not(:disabled),.form-select[size]:not([size="1"]).is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-floating{position:relative}.form-floating>.form-select{padding-block-start:var(--post-device-spacing-padding-block-29);padding-block-end:var(--post-device-spacing-padding-block-3)}.form-floating>.form-select~label{position:absolute;z-index:2;text-align:start;pointer-events:none;display:block;left:var(--post-device-border-width-default);top:var(--post-device-border-width-default);font-size:var(--post-device-font-size-10);padding-inline-start:calc(var(--post-device-spacing-padding-5) - var(--post-device-border-width-default));padding-inline-end:0;padding-block-start:var(--post-device-spacing-padding-block-30);border-radius:var(--post-device-border-radius-1);color:var(--post-scheme-color-interactive-primary-enabled-fg1);max-width:calc(100% - var(--post-device-border-width-default)*2 - var(--post-core-dimension-50));background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size .25s ease-in-out,padding-block-start .25s ease-in-out}.form-floating>.form-select:not(:disabled):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1);background-color:var(--post-scheme-color-interactive-primary-hover-bg)}.form-floating>.form-select:disabled~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1);background-color:var(--post-scheme-color-interactive-primary-disabled-bg)}.form-floating>.form-select:empty~label,.form-floating>.form-select.form-select-empty~label{padding-block-start:var(--post-device-spacing-padding-block-28);font-size:unset}.form-floating>.form-select[multiple]{padding-block-end:0;height:auto}.form-floating>.form-select[multiple] option{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-floating>.form-select[multiple]~label{width:calc(100% - var(--post-core-dimension-48)*2)}.form-floating>.form-select[multiple]:disabled option{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}.form-floating>.form-select[multiple]:empty~label{padding-block:var(--post-device-spacing-padding-block-1);width:calc(100% - var(--post-device-border-width-default)*2 - var(--post-device-spacing-padding-5))}[data-color-scheme=dark] .form-select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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")}[data-color-scheme=dark] .form-select:not([multiple]):disabled{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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")}[data-color-scheme=dark] .form-select:not([multiple]):not(:disabled):focus{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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")}[data-color-scheme=dark] .form-select:not([multiple]):not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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")}[data-color-scheme=dark] .form-select:not([multiple]).is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}[data-color-scheme=dark] .form-select:not([multiple]).is-valid:not(:disabled):focus{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}[data-color-scheme=dark] .form-select:not([multiple]).is-valid:not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}[data-color-scheme=dark] .form-select:not([multiple]).is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}[data-color-scheme=dark] .form-select:not([multiple]).is-invalid:not(:disabled):focus{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}[data-color-scheme=dark] .form-select:not([multiple]).is-invalid:not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' fill='%23ffffff' 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"),url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}

package/components/form-select.scss

@@ -1,97 +1,267 @@
 @forward './../variables/options';
 
-@use './../themes/bootstrap/core' as b;
-@use './../themes/bootstrap/forms/form-select' as bffs;
-@use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';
+@use './../mixins/forms';
+@use './../functions/tokens';
+@use './../tokens/components';
+@use './../tokens/elements';
 
-@use './../variables/commons';
-@use './../variables/components/forms';
-@use './../variables/components/form-select' as form-select;
-
-.form-select-wrapper {
-  @include utilities.focus-style {
-    border-radius: commons.$border-radius;
-  }
-}
-
-:not(.form-select-wrapper) > {
-  .form-select {
-    @include utilities.focus-style {
-      border-radius: commons.$border-radius;
-    }
-  }
-}
+tokens.$default-map: components.$post-select;
 
 .form-select {
-  --form-select-indicator: #{form-select.$form-select-indicator};
+  display: block;
+  width: 100%;
+  font-family: tokens.get('body-font-family', elements.$post-body);
+  appearance: none;
+  position: relative;
+  min-height: tokens.get('select-sizing-height');
+  padding-block: tokens.get('select-standalone-padding-block');
+  padding-inline-start: tokens.get('select-padding-inline-start');
+  padding-inline-end: tokens.get('select-padding-inline-end');
+  background-color: tokens.get('select-color-enabled-bg');
+  background-repeat: no-repeat;
+  background-size: tokens.get('select-sizing-icon');
+  background-position: center right tokens.get('select-icon-position-inline-end');
+  border-width: tokens.get('select-border-width');
+  border-color: tokens.get('select-color-enabled-border');
+  border-radius: tokens.get('select-border-radius');
+  color: tokens.get('select-color-enabled-fg');
+  @include forms.select-bg-image('enabled');
 
-  &:focus {
-    box-shadow: none; // Override bootstrap
+  &:disabled {
+    opacity: 1;
+    color: tokens.get('select-color-disabled-fg');
+    background-color: tokens.get('select-color-disabled-bg');
+    border-color: tokens.get('select-color-disabled-border');
+    border-style: tokens.get('select-border-style-disabled');
 
-    @include utilities.high-contrast-mode {
-      border-color: FieldText !important;
+    &:not([multiple]) {
+      @include forms.select-bg-image('disabled');
     }
   }
 
   &:not(:disabled) {
-    &:hover,
     &:focus {
+      background-color: tokens.get('select-color-selected-bg');
+      color: tokens.get('select-color-selected-fg');
+      border-color: tokens.get('select-color-selected-border');
+      @include forms.select-bg-image('selected');
+
+      @include utilities.focus-style;
+
       @include utilities.high-contrast-mode {
         border-color: FieldText;
       }
     }
 
     &:hover {
+      background-color: tokens.get('select-color-hover-bg');
+      color: tokens.get('select-color-enabled-fg');
+      border-color: tokens.get('select-color-hover-border');
+
+      &:not([multiple]) {
+        @include forms.select-bg-image('hover');
+      }
+
       @include utilities.high-contrast-mode {
         border-color: Highlight;
       }
     }
   }
 
-  @include utilities.disabled-style {
-    ~ .form-text {
-      color: var(--post-gray-60);
+  @include utilities.high-contrast-mode() {
+    background-color: Field;
+    border-color: FieldText;
+    color: FieldText;
+
+    &:focus-visible {
+      color: FieldText;
     }
   }
 
-  &:not([multiple]) {
-    &:disabled {
-      background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
-        var(--form-select-indicator), var(--bs-form-select-bg-icon, none);
+  &.is-valid,
+  &.is-invalid {
+    &:not(:disabled) {
+      padding-inline-end: tokens.get('select-label-validated-padding-inline-end');
+      background-position:
+        center right tokens.get('select-icon-position-inline-end'),
+        center right tokens.get('select-validation-icon-position-inline-end');
     }
   }
 
-  @include utilities.high-contrast-mode() {
-    --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-dark)};
-    background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
+  &.is-valid:not(:disabled) {
+    @include forms.select-bg-image('enabled', 'valid');
+
+    &:focus {
+      @include forms.select-bg-image('selected', 'valid');
+    }
 
-    @media (prefers-color-scheme: light) {
-      --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-light)};
-      background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
+    &:hover {
+      &:not([multiple]) {
+        @include forms.select-bg-image('hover', 'valid');
+      }
     }
+  }
 
-    background-color: Field;
-    border-color: FieldText;
-    color: FieldText;
+  &.is-invalid:not(:disabled) {
+    @include forms.select-bg-image('enabled', 'invalid');
 
-    &:focus-visible {
-      color: FieldText;
+    &:focus {
+      @include forms.select-bg-image('selected', 'invalid');
+    }
+
+    &:hover {
+      &:not([multiple]) {
+        @include forms.select-bg-image('hover', 'invalid');
+      }
     }
   }
-}
 
-.form-select-rg {
-  @include forms-mixins.form-rg;
-  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+  &[multiple],
+  &[size]:not([size='1']) {
+    background-image: none;
+
+    &.is-valid,
+    &.is-invalid {
+      background-position: center right tokens.get('select-validation-icon-position-inline-end');
+    }
+
+    &.is-valid:not(:disabled) {
+      @include forms.select-bg-image($validation: 'valid');
+    }
+
+    &.is-invalid:not(:disabled) {
+      @include forms.select-bg-image($validation: 'invalid');
+    }
+  }
 }
 
-.form-select-sm {
-  @include forms-mixins.form-sm;
-  background-size: forms.$form-bg-size-sm; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+.form-floating {
+  position: relative;
+
+  > .form-select {
+    padding-block-start: tokens.get('select-padding-block-start');
+    padding-block-end: tokens.get('select-padding-block-end');
+
+    ~ label {
+      position: absolute;
+      z-index: 2;
+      text-align: start;
+      pointer-events: none;
+      display: block;
+      left: tokens.get('select-border-width');
+      top: tokens.get('select-border-width');
+      font-size: tokens.get('select-label-filled-font-size');
+      padding-inline-start: calc(
+        tokens.get('select-label-empty-padding-inline-start') - tokens.get('select-border-width')
+      );
+      padding-inline-end: 0;
+      padding-block-start: tokens.get('select-label-filled-padding-block-start');
+      border-radius: tokens.get('select-border-radius');
+      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'
+          )
+      );
+      background-color: tokens.get('select-color-enabled-bg');
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition:
+        font-size 0.25s ease-in-out,
+        padding-block-start 0.25s ease-in-out;
+    }
+
+    &:not(:disabled):hover ~ label {
+      color: tokens.get('select-color-hover-fg');
+      background-color: tokens.get('select-color-hover-bg');
+    }
+
+    &:disabled ~ label {
+      color: tokens.get('select-color-disabled-fg');
+      background-color: tokens.get('select-color-disabled-bg');
+    }
+
+    &:empty,
+    &.form-select-empty {
+      ~ label {
+        padding-block-start: tokens.get('select-label-empty-padding-block-start');
+        font-size: unset;
+      }
+    }
+
+    &[multiple] {
+      padding-block-end: 0;
+      height: auto;
+
+      option {
+        color: tokens.get('select-color-enabled-fg');
+      }
+
+      ~ label {
+        // Add some distance on the right to leave space for the scrollbar
+        width: calc(100% - (#{tokens.get('select-padding-inline-end')} * 2));
+      }
+
+      &:disabled option {
+        color: tokens.get('select-color-disabled-fg');
+      }
+
+      &:empty {
+        ~ label {
+          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'
+              )}
+          );
+        }
+      }
+    }
+  }
 }
 
-.form-select-lg {
-  @include forms-mixins.form-lg;
-  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+[data-color-scheme='dark'] {
+  .form-select:not([multiple]) {
+    @include forms.select-bg-image('enabled', null, 'dark');
+
+    &:disabled {
+      @include forms.select-bg-image('disabled', null, 'dark');
+    }
+
+    &:not(:disabled) {
+      &:focus {
+        @include forms.select-bg-image('selected', null, 'dark');
+      }
+
+      &:hover {
+        @include forms.select-bg-image('hover', null, 'dark');
+      }
+    }
+
+    &.is-valid:not(:disabled) {
+      @include forms.select-bg-image('enabled', 'valid', 'dark');
+
+      &:focus {
+        @include forms.select-bg-image('selected', 'valid', 'dark');
+      }
+
+      &:hover {
+        @include forms.select-bg-image('hover', 'valid', 'dark');
+      }
+    }
+
+    &.is-invalid:not(:disabled) {
+      @include forms.select-bg-image('enabled', 'invalid', 'dark');
+
+      &:focus {
+        @include forms.select-bg-image('selected', 'invalid', 'dark');
+      }
+
+      &:hover {
+        @include forms.select-bg-image('hover', 'invalid', 'dark');
+      }
+    }
+  }
 }

package/components/form-validation.css

@@ -1 +1 @@
-.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";flex-shrink:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;align-self:flex-start;height:1.125rem;width:1.125rem;margin-right:.5rem}.invalid-feedback{background:#a51728;color:#fff}.invalid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback{background:#2c871d;color:#fff}.valid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback.custom-feedback{background:#2c871d;color:#fff}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):valid,.input-group>.form-control:not(:focus).is-valid,.was-validated .input-group>.form-select:not(:focus):valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.input-group>.form-floating:not(:focus-within).is-valid{z-index:3}.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):invalid,.input-group>.form-control:not(:focus).is-invalid,.was-validated .input-group>.form-select:not(:focus):invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.input-group>.form-floating:not(:focus-within).is-invalid{z-index:4}.is-invalid~.invalid-feedback,.is-valid~.valid-feedback,post-card-control~.invalid-feedback{display:inline-flex}.form-control.is-invalid:not(:disabled),.form-select.is-invalid:not(:disabled){border-color:#a51728}.form-control.is-invalid:not(:disabled):focus,.form-select.is-invalid:not(:disabled):focus{border-color:#a51728}.form-control.is-invalid.form-control-sm~.invalid-feedback,.form-select.is-invalid.form-control-sm~.invalid-feedback{padding:.25rem 1rem}.form-control.is-valid:not(:disabled),.form-select.is-valid:not(:disabled){border-color:var(--post-success)}.form-control.is-valid:not(:disabled):focus,.form-select.is-valid:not(:disabled):focus{border-color:var(--post-success)}.form-control.is-valid.form-control-sm~.valid-feedback,.form-select.is-valid.form-control-sm~.valid-feedback{padding:.25rem 1rem}.form-check-input.is-invalid{border-color:#a51728}.form-check-input.is-invalid~.form-check-label{color:#a51728}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid{border-color:inherit}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid~.form-check-label{color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input.is-invalid{border-color:FieldText}}
+.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";flex-shrink:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;align-self:flex-start;height:1.125rem;width:1.125rem;margin-right:.5rem}.invalid-feedback{background:#a51728;color:#fff}.invalid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback{background:#2c871d;color:#fff}.valid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback.custom-feedback{background:#2c871d;color:#fff}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):valid,.input-group>.form-control:not(:focus).is-valid,.was-validated .input-group>.form-select:not(:focus):valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.input-group>.form-floating:not(:focus-within).is-valid{z-index:3}.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):invalid,.input-group>.form-control:not(:focus).is-invalid,.was-validated .input-group>.form-select:not(:focus):invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.input-group>.form-floating:not(:focus-within).is-invalid{z-index:4}.is-invalid~.invalid-feedback,.is-valid~.valid-feedback,post-card-control~.invalid-feedback{display:inline-flex}.form-check-input.is-invalid{border-color:#a51728}.form-check-input.is-invalid~.form-check-label{color:#a51728}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .form-check-input.is-invalid{border-color:inherit}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .form-check-input.is-invalid~.form-check-label{color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input.is-invalid{border-color:FieldText}}

package/components/form-validation.scss

@@ -94,37 +94,6 @@ post-card-control ~ .invalid-feedback {
   display: inline-flex;
 }
 
-.form-control,
-.form-select {
-  &.is-invalid {
-    &:not(:disabled) {
-      border-color: form-validation.$form-feedback-invalid-color;
-
-      &:focus {
-        border-color: form-validation.$form-feedback-invalid-color;
-      }
-    }
-
-    &.form-control-sm ~ .invalid-feedback {
-      padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
-    }
-  }
-
-  &.is-valid {
-    &:not(:disabled) {
-      border-color: var(--post-success);
-
-      &:focus {
-        border-color: var(--post-success);
-      }
-    }
-
-    &.form-control-sm ~ .valid-feedback {
-      padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
-    }
-  }
-}
-
 .form-check-input {
   @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;

package/components/forms.css

@@ -1 +1 @@
-.form-text{margin-top:.25rem;font-size:0.8125rem;color:var(--post-contrast-color)}.form-control{display:block;width:100%;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;appearance:none;background-color:#fff;background-clip:padding-box;border:2px solid #333;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:inherit;background-color:inherit;border-color:inherit;outline:0;box-shadow:none}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:#666;opacity:1}.form-control:disabled{color:var(--post-gray-60);background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.4);border-color:var(--post-gray-40);opacity:1}.form-control::file-selector-button{padding:.875rem 1.125rem;margin:-0.875rem -1.125rem;margin-inline-end:1.125rem;color:#000;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:2px;border-radius:0;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#fff}.form-control-plaintext{display:block;width:100%;padding:.875rem 0;margin-bottom:0;line-height:1.5;color:var(--post-contrast-color);background-color:rgba(0,0,0,0);border:solid rgba(0,0,0,0);border-width:2px 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg{padding-right:0;padding-left:0}.form-control-sm{min-height:1.75rem;padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.form-control-sm::file-selector-button{padding:.25rem 1rem;margin:-0.25rem -1rem;margin-inline-end:1rem}.form-control-lg{min-height:3.125rem;padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.form-control-lg::file-selector-button{padding:.75rem 1rem;margin:-0.75rem -1rem;margin-inline-end:1rem}textarea.form-control{min-height:3.5rem}textarea.form-control-sm{min-height:1.75rem}textarea.form-control-lg{min-height:3.125rem}.form-control-color{width:3rem;height:3.5rem;padding:.875rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0 !important;border-radius:0}.form-control-color::-webkit-color-swatch{border:0 !important;border-radius:0}.form-control-color.form-control-sm{height:1.75rem}.form-control-color.form-control-lg{height:3.125rem}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select,.input-group>.form-floating{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus,.input-group>.form-floating:focus-within{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.875rem 1.125rem;font-size:1rem;font-weight:400;line-height:1.5;color:#000;text-align:center;white-space:nowrap;background-color:rgba(var(--post-contrast-color-inverted-rgb), 0.6);border:2px solid #333;border-radius:0}.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text,.input-group-lg>.btn{padding:.75rem 1rem;font-size:1.25rem;border-radius:0}.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text,.input-group-sm>.btn{padding:.25rem 1rem;font-size:0.875rem;border-radius:0}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:4.5rem}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(2px*-1);border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.form-control-rg{padding:.625rem .875rem;font-size:1rem;line-height:1.5}.form-control-sm{font-size:.875rem;line-height:1.5;min-height:1.75rem;padding-block:.25rem;padding-inline:1rem}.form-control-lg{font-size:1rem !important;line-height:1.5;min-height:3.125rem}textarea.form-control-lg{padding-top:1rem;padding-bottom:.5rem;padding-right:1.5rem;min-height:3.25rem}textarea.form-control-sm{padding-top:.5rem;padding-right:1.5rem;padding-bottom:0;min-height:2.5625rem}select.form-control-rg:not([size]):not([multiple]){height:calc(2.75rem + 4px)}.form-control-wrapper{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}.form-control-wrapper: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){.form-control-wrapper:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-control-wrapper: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){.form-control-wrapper:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:not(.form-control-wrapper)>.form-control{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}:not(.form-control-wrapper)>.form-control: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){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:not(.form-control-wrapper)>.form-control: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){:not(.form-control-wrapper)>.form-control:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-control{position:relative}.form-control:focus{box-shadow:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover,.form-control:not(:disabled):focus{border-color:FieldText}}.form-control:not(:disabled):hover{border-color:#000}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover{border-color:Highlight}}.form-control:disabled{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through}.form-control:disabled~.form-text{color:var(--post-gray-60)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:disabled{color:GrayText;border-color:GrayText}}.form-control[readonly]:not(:disabled){border-color:#000;background-color:#fff}.form-control[type=file]{position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control[type=file]:disabled{color:GrayText;border-color:GrayText}}.form-control[type=file]::file-selector-button{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)){.form-control[type=file]::file-selector-button{display:initial;position:initial;margin-inline:0;padding-inline:0;width:0;border:0 none}.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:.875rem;background-color:inherit;border-left:inherit;text-align:center}[lang=de] .form-control[type=file]::after{content:"Datei auswählen"}[lang=fr] .form-control[type=file]::after{content:"Choisir un fichier"}[lang=it] .form-control[type=file]::after{content:"Scegli file"}.form-control[type=file][multiple]::after{content:"Choose Files"}[lang=de] .form-control[type=file][multiple]::after{content:"Dateien auswählen"}[lang=fr] .form-control[type=file][multiple]::after{content:"Choisir des fichiers"}}.form-control[type=file].form-control-sm::after{padding-inline:.25rem}.form-control[type=file].form-control-rg{min-height:calc(2.75rem + 4px)}.form-control[type=file].form-control-rg::after{padding-inline:.625rem}.form-control[type=file].form-control-lg::after{padding-inline:.75rem}.form-label:has(+.form-control-sm,+.form-select-sm){font-size:.875rem;margin-bottom:.25rem}.form-label:has(+.form-control[disabled],+.form-select[disabled]){color:var(--post-gray-60)}
+.form-control{display:block;width:100%;font-family:var(--post-device-font-family-default);appearance:none;background-clip:padding-box;border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);position:relative;border-radius:var(--post-device-border-radius-1);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);color:var(--post-scheme-color-interactive-primary-enabled-fg1);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)}.form-control:focus{border-color:var(--post-scheme-color-interactive-primary-selected-stroke1);background-color:var(--post-scheme-color-interactive-primary-selected-bg1);color:var(--post-scheme-color-interactive-primary-selected-fg1)}.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}.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){.form-control:focus:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.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){.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){.form-control:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover,.form-control:not(:disabled):focus{border-color:FieldText}}.form-control:not(:disabled):hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-primary-hover-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control:not(:disabled):hover{border-color:Highlight}}.form-control[readonly]:not(:disabled){border-color:var(--post-scheme-color-interactive-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}.form-control[type=file]{overflow:hidden;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-control[type=file]:disabled{color:GrayText;border-color:GrayText}}.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:calc(var(--post-device-spacing-padding-block-1)*-1) calc(var(--post-device-spacing-padding-inline-1)*-1);margin-inline-end:var(--post-device-spacing-padding-inline-1);color:var(--post-scheme-color-interactive-primary-enabled-fg1);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)){.form-control[type=file]::file-selector-button{display:initial;position:initial;margin-inline:0;padding-inline:0;width:0;border:0 none}.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] .form-control[type=file]::after{content:"Datei auswählen"}[lang=fr] .form-control[type=file]::after{content:"Choisir un fichier"}[lang=it] .form-control[type=file]::after{content:"Scegli file"}.form-control[type=file][multiple]::after{content:"Choose Files"}[lang=de] .form-control[type=file][multiple]::after{content:"Dateien auswählen"}[lang=fr] .form-control[type=file][multiple]::after{content:"Choisir des fichiers"}}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control::placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg1);opacity:1}.form-control:disabled{color:var(--post-scheme-color-interactive-primary-disabled-fg1);background-color:var(--post-scheme-color-interactive-primary-disabled-bg);border-color:var(--post-scheme-color-interactive-primary-disabled-stroke);border-style:var(--post-core-border-style-dash);opacity:1}.form-control:disabled::placeholder{color:var(--post-scheme-color-interactive-primary-disabled-fg1);opacity:1}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}.form-control.is-valid:not(:disabled),.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))}.form-control.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.form-control.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}textarea.form-control{min-height:var(--post-device-sizing-interactive-button-height-6)}.form-label:has(+.form-control[disabled]){color:var(--post-scheme-color-interactive-primary-disabled-fg1)}.form-floating>.form-control{height:var(--post-device-sizing-interactive-button-height-6);min-height:var(--post-device-sizing-interactive-button-height-6)}