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

package/components/form-select.scss

@@ -1,97 +1,308 @@
-@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 './../functions/forms' as forms-fx;
+@use './../mixins/forms' as forms-mx;
+@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: inherit;
+  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');
+  background-image: forms-fx.select-arrow-icon('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]) {
+      background-image: forms-fx.select-arrow-icon('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');
+      background-image: forms-fx.select-arrow-icon('selected');
+
+      @include utilities.focus-style;
+
       @include utilities.high-contrast-mode {
         border-color: FieldText;
       }
+
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('selected-hcm', $mode: dark);
+      }
     }
 
     &: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]) {
+        background-image: forms-fx.select-arrow-icon('hover');
+
+        @include utilities.high-contrast-mode-light() {
+          background-image: forms-fx.select-arrow-icon('hover-hcm', $mode: light);
+        }
+
+        @include utilities.high-contrast-mode-dark() {
+          background-image: forms-fx.select-arrow-icon('hover-hcm', $mode: dark);
+        }
+      }
+
       @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);
+  @include utilities.high-contrast-mode-light() {
+    background-image: forms-fx.select-arrow-icon('enabled-hcm', $mode: light);
+  }
+
+  @include utilities.high-contrast-mode-dark() {
+    background-image: forms-fx.select-arrow-icon('enabled-hcm', $mode: dark);
+  }
+
+  &.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) {
+    background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.success-icon();
 
-    @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);
+    &:focus {
+      background-image: forms-fx.select-arrow-icon('selected'), forms-fx.success-icon();
     }
 
-    background-color: Field;
-    border-color: FieldText;
-    color: FieldText;
+    &:hover {
+      &:not([multiple]) {
+        background-image: forms-fx.select-arrow-icon('hover'), forms-fx.success-icon();
+      }
+    }
 
-    &:focus-visible {
-      color: FieldText;
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.success-icon(#e0e0e0);
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.success-icon(#333);
+      }
     }
   }
+
+  &.is-invalid:not(:disabled) {
+    background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon();
+
+    &:focus {
+      background-image: forms-fx.select-arrow-icon('selected'), forms-fx.warning-icon();
+    }
+
+    &:hover {
+      &:not([multiple]) {
+        background-image: forms-fx.select-arrow-icon('hover'), forms-fx.warning-icon();
+      }
+    }
+
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon(#e0e0e0);
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon(#333);
+      }
+    }
+  }
+
+  &[multiple],
+  &[size]:not([size='1']) {
+    background-image: none;
+
+    &.is-valid,
+    &.is-invalid {
+      background-position: center right tokens.get('select-validation-icon-position-inline-end');
+    }
+
+    @include forms-mx.validation-icons();
+  }
 }
 
-.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.
+.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-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.
+[data-color-scheme='dark'] {
+  .form-select:not([multiple]) {
+    background-image: forms-fx.select-arrow-icon('enabled', 'dark');
+
+    &:disabled {
+      background-image: forms-fx.select-arrow-icon('disabled', 'dark');
+    }
+
+    &:not(:disabled) {
+      &:focus {
+        background-image: forms-fx.select-arrow-icon('selected', 'dark');
+      }
+
+      &:hover {
+        background-image: forms-fx.select-arrow-icon('hover', 'dark');
+      }
+    }
+
+    &.is-valid:not(:disabled) {
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms-fx.success-icon();
+
+      &:focus {
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms-fx.success-icon();
+      }
+
+      &:hover {
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms-fx.success-icon();
+      }
+    }
+
+    &.is-invalid:not(:disabled) {
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms-fx.warning-icon();
+
+      &:focus {
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms-fx.warning-icon();
+      }
+
+      &:hover {
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms-fx.warning-icon();
+      }
+    }
+  }
 }
 
-.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.
+.no-toggle-arrow::after {
+  display: none !important;
 }

package/components/form-textarea.css

@@ -1 +1 @@
-textarea.form-control::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='hsl(0, 0%, 20%)' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='hsl(0, 0%, 20%)' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='hsl(0, 0%, 20%)' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='hsl(0, 0%, 20%)' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='hsl(0, 0%, 20%)' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='hsl(0, 0%, 20%)' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:75%}textarea.form-control[disabled]::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='var(--post-gray-40)' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='var(--post-gray-40)' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='var(--post-gray-40)' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='var(--post-gray-40)' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='var(--post-gray-40)' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='var(--post-gray-40)' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E")}
+textarea.form-control{display:block;width:100%;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-core-dimension-26);padding-block:var(--post-device-spacing-padding-3);min-height:var(--post-core-dimension-88);resize:vertical}textarea.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}textarea.form-control: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){textarea.form-control:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){textarea.form-control: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){textarea.form-control:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}textarea.form-control::-webkit-resizer{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"%3E%3Cg clip-path="url(%23clip0_7846_3191)"%3E%3Cpath d="M6.5 18H9.5V21H6.5V18Z" fill="%23050400"/%3E%3Cpath d="M12.5 18H15.5V21H12.5V18Z" fill="%23050400"/%3E%3Cpath d="M12.5 12H15.5V15H12.5V12Z" fill="%23050400"/%3E%3Cpath d="M18.5 12H21.5V15H18.5V12Z" fill="%23050400"/%3E%3Cpath d="M18.5 6H21.5V9H18.5V6Z" fill="%23050400"/%3E%3Cpath d="M18.5 18H21.5V21H18.5V18Z" fill="%23050400"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_7846_3191"%3E%3Crect width="24" height="24" fill="white" transform="translate(0.5)"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');background-repeat:no-repeat;background-size:100%}textarea.form-control[disabled]::-webkit-resizer{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"%3E%3Cg clip-path="url(%23clip0_7846_3191)"%3E%3Cpath d="M6.5 18H9.5V21H6.5V18Z" fill="%23696864"/%3E%3Cpath d="M12.5 18H15.5V21H12.5V18Z" fill="%23696864"/%3E%3Cpath d="M12.5 12H15.5V15H12.5V12Z" fill="%23696864"/%3E%3Cpath d="M18.5 12H21.5V15H18.5V12Z" fill="%23696864"/%3E%3Cpath d="M18.5 6H21.5V9H18.5V6Z" fill="%23696864"/%3E%3Cpath d="M18.5 18H21.5V21H18.5V18Z" fill="%23696864"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_7846_3191"%3E%3Crect width="24" height="24" fill="white" transform="translate(0.5)"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');background-repeat:no-repeat;background-size:100%}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){textarea.form-control:focus{border-color:FieldText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){textarea.form-control:not(:disabled):hover,textarea.form-control:not(:disabled):focus{border-color:FieldText}}textarea.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){textarea.form-control:not(:disabled):hover{border-color:Highlight}}textarea.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)}textarea.form-control::placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg2);opacity:1}textarea.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}textarea.form-control.is-valid:not(:disabled),textarea.form-control.is-invalid:not(:disabled){background-size:var(--post-device-sizing-notification-1);background-position:top var(--post-core-dimension-12) right var(--post-core-dimension-28);background-repeat:no-repeat;padding-inline-end:var(--post-core-dimension-56)}textarea.form-control.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23107800' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'%3E%3C/path%3E%3C/svg%3E")}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){textarea.form-control.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23e0e0e0' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'%3E%3C/path%3E%3C/svg%3E")}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){textarea.form-control.is-valid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23333333' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'%3E%3C/path%3E%3C/svg%3E")}}textarea.form-control.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23b20000' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'%3E%3C/path%3E%3C/svg%3E")}@media(forced-colors: active)and (prefers-color-scheme: dark),(-ms-high-contrast: white-on-black){textarea.form-control.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23e0e0e0' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'%3E%3C/path%3E%3C/svg%3E")}}@media(forced-colors: active)and (prefers-color-scheme: light),(-ms-high-contrast: black-on-white){textarea.form-control.is-invalid:not(:disabled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23333333' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'%3E%3C/path%3E%3C/svg%3E")}}.form-label:has(+textarea.form-control[disabled]){color:var(--post-scheme-color-interactive-input-disabled-fg)}.form-floating{position:relative}.form-floating>textarea~label{position:absolute;z-index:2;text-align:start;pointer-events:none;display:block;top:var(--post-device-border-width-default);left:var(--post-device-border-width-default);margin:0;padding-inline-start: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-27);width:calc(100% - var(--post-device-border-width-default)*2 - var(--post-core-dimension-28));border:0;color:var(--post-scheme-color-interactive-input-enabled-fg);height:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:padding-block-start .2s ease-in-out,font-size .2s ease-in-out;background-color:var(--post-scheme-color-interactive-input-enabled-bg)}.form-floating>textarea.form-control{padding-block-start:var(--post-device-spacing-padding-block-29);padding-block-end:var(--post-device-spacing-padding-3)}.form-floating>textarea.form-control::placeholder{color:rgba(0,0,0,0)}.form-floating>textarea.form-control:focus~label,.form-floating>textarea.form-control:not(:placeholder-shown)~label{font-size:var(--post-device-font-size-10);padding-block-start:var(--post-device-spacing-padding-block-30)}.form-floating>textarea.form-control::placeholder{opacity:0}.form-floating>textarea.form-control::input-placeholder{opacity:0}.form-floating>textarea.form-control:focus::placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg2);opacity:1}.form-floating>textarea.form-control:focus::input-placeholder{color:var(--post-scheme-color-interactive-primary-enabled-fg2);opacity:1}.form-floating>textarea.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>textarea.form-control:not(:disabled):hover~label{color:var(--post-scheme-color-interactive-input-hover-fg);background-color:var(--post-scheme-color-interactive-input-hover-bg)}.form-floating>textarea.form-control:is(.is-valid,.is-invalid)~label{width:calc(100% - var(--post-device-border-width-default)*2 - var(--post-core-dimension-58))}.form-floating>textarea:disabled~label{color:var(--post-scheme-color-interactive-input-disabled-fg);background-color:var(--post-scheme-color-interactive-input-disabled-bg)}

package/components/form-textarea.scss

@@ -1,17 +1,180 @@
-@use './../variables/spacing';
+@use './../mixins/utilities';
 @use './../variables/components/forms';
-@use './../functions/sizing';
+@use './../mixins/forms' as forms-mx;
+
+@use './../functions/tokens';
+@use './../tokens/components';
+@use './../tokens/elements';
+
+tokens.$default-map: components.$post-text-area;
 
 textarea.form-control {
-  &::-webkit-resizer {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-size: 75%;
-  }
+  display: block;
+  width: 100%;
+  appearance: none; // Fix appearance for date inputs in Safari
+  background-clip: padding-box;
+  border: tokens.get('textarea-border-width') tokens.get('textarea-border-style-enabled')
+    tokens.get('textarea-enabled-border');
+  position: relative;
+  border-radius: tokens.get('textarea-border-radius');
+  background-color: tokens.get('textarea-enabled-bg');
+  color: tokens.get('textarea-enabled-fg');
+  padding-inline-start: tokens.get('textarea-padding-inline-start');
+  padding-inline-end: tokens.get('textarea-padding-inline-end');
+  padding-block: tokens.get('textarea-standalone-padding-block');
+  min-height: tokens.get('textarea-sizing-min-height');
+  resize: vertical;
+  @include utilities.focus-style;
+  @include forms-mx.textarea-resizer-svg(#050400);
 
   &[disabled] {
-    &::-webkit-resizer {
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-disabled-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
+    @include forms-mx.textarea-resizer-svg(#696864);
+  }
+
+  &:focus {
+    @include utilities.high-contrast-mode {
+      border-color: FieldText !important; // On blink browser valid and invalid border colors are converted to Highlight color
+    }
+  }
+
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      @include utilities.high-contrast-mode {
+        border-color: FieldText;
+      }
+    }
+
+    &:hover {
+      border-color: tokens.get('textarea-hover-border');
+      background-color: tokens.get('textarea-hover-bg');
+
+      @include utilities.high-contrast-mode {
+        border-color: Highlight;
+      }
     }
   }
+
+  &[readonly]:not(:disabled) {
+    border-color: tokens.get('textarea-enabled-border');
+    background-color: tokens.get('textarea-enabled-bg');
+  }
+
+  &::placeholder {
+    color: tokens.get('textarea-placeholder-fg');
+    opacity: 1;
+  }
+
+  &:disabled {
+    color: tokens.get('textarea-disabled-fg');
+    background-color: tokens.get('textarea-disabled-bg');
+    border-color: tokens.get('textarea-disabled-border');
+    border-style: tokens.get('textarea-border-style-disabled');
+    opacity: 1;
+  }
+
+  &.is-valid,
+  &.is-invalid {
+    &:not(:disabled) {
+      background-size: tokens.get('textarea-sizing-icon');
+      background-position: top tokens.get('textarea-position-block-start-validation') right
+        tokens.get('textarea-position-inline-end-validation');
+      background-repeat: no-repeat;
+      padding-inline-end: tokens.get('textarea-validated-padding-inline-end');
+    }
+  }
+
+  @include forms-mx.validation-icons;
+}
+
+.form-label:has(+ textarea.form-control[disabled]) {
+  color: tokens.get('textarea-disabled-fg');
+}
+
+.form-floating {
+  position: relative;
+
+  > textarea ~ label {
+    position: absolute;
+    z-index: 2;
+    text-align: start;
+    pointer-events: none;
+    display: block;
+    top: tokens.get('textarea-border-width');
+    left: tokens.get('textarea-border-width');
+    margin: 0;
+    padding-inline-start: calc(
+      tokens.get('textarea-label-padding-inline-start') - tokens.get('textarea-border-width')
+    );
+    padding-inline-end: 0;
+    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'
+        )}
+    );
+    border: 0;
+    color: tokens.get('textarea-enabled-fg');
+    height: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition:
+      padding-block-start 0.2s ease-in-out,
+      font-size 0.2s ease-in-out;
+    background-color: tokens.get('textarea-enabled-bg');
+  }
+
+  > textarea.form-control {
+    padding-block-start: tokens.get('textarea-padding-block-start');
+    padding-block-end: tokens.get('textarea-padding-block-end');
+
+    &::placeholder {
+      color: transparent;
+    }
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      ~ label {
+        font-size: tokens.get('textarea-label-filled-font-size');
+        padding-block-start: tokens.get('textarea-label-filled-padding-block-start');
+      }
+    }
+
+    @include forms-mx.placeholder {
+      opacity: 0;
+    }
+
+    &:focus {
+      @include forms-mx.placeholder {
+        color: tokens.get('textarea-placeholder-fg');
+        opacity: 1;
+      }
+    }
+
+    &:disabled ~ label {
+      color: tokens.get('textarea-disabled-fg');
+      background-color: tokens.get('textarea-disabled-bg');
+    }
+
+    &:not(:disabled):hover ~ label {
+      color: tokens.get('textarea-hover-fg');
+      background-color: tokens.get('textarea-hover-bg');
+    }
+
+    &:is(.is-valid, .is-invalid) {
+      ~ label {
+        width: calc(
+          100% - (#{tokens.get('textarea-border-width')} * 2) - #{tokens.get(
+              'textarea-label-validated-padding-inline-end'
+            )}
+        );
+      }
+    }
+  }
+
+  > textarea:disabled ~ label {
+    color: tokens.get('textarea-disabled-fg');
+    background-color: tokens.get('textarea-disabled-bg');
+  }
 }

package/components/globals/_index.scss

@@ -0,0 +1 @@
+@use 'post-footer';

package/components/globals/post-footer.css

@@ -0,0 +1 @@
+post-footer{--post-footer-grid-list-title-display: none;--post-footer-grid-list-title-gap: 0;--post-footer-grid-list-item-gap: 8px;--post-footer-socialmedia-list-item-gap: 8px;--post-footer-app-list-item-gap: 8px;--post-footer-businesssector-list-item-gap: 8px;--post-footer-meta-list-item-gap: 8px}@media screen and (min-width: 600px){post-footer{--post-footer-grid-list-title-display: block;--post-footer-grid-list-title-gap: 8px;--post-footer-socialmedia-list-item-gap: 16px;--post-footer-businesssector-list-item-gap: 24px;--post-footer-meta-list-item-gap: 16px}}@media screen and (min-width: 1024px){post-footer{--post-footer-meta-list-item-gap: 24px}}post-footer :is(h3,.h3){margin:0;font-size:inherit}post-footer a:not(.btn-icon,.app-store-badge){display:block;text-decoration:none}post-footer a:not(.btn-icon,.app-store-badge):hover{text-decoration:underline}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-footer a:not(.btn-icon,.app-store-badge):hover{text-decoration:underline}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-footer a.btn-icon{color:CanvasText !important}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-footer a.btn-icon:hover{color:LinkText !important}}post-footer post-list[slot|=grid] :is(h3,.h3){display:var(--post-footer-grid-list-title-display);margin-block-end:var(--post-footer-grid-list-title-gap)}post-footer post-list[slot|=grid]>[role=list]{list-style:none;margin-block:var(--post-device-spacing-padding-block-8);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10));margin-block:0;padding-inline-start:0;list-style:none}post-footer post-list[slot|=grid]>[role=list]>post-list-item{margin:0;padding-inline:0;padding-block:var(--post-device-spacing-padding-block-6)}post-footer post-list[slot|=grid]>[role=list]>post-list-item~post-list-item{margin-block-start:var(--post-device-spacing-gap-1)}post-footer post-list[slot|=grid]>[role=list]>post-list-item::before{display:block;content:"";box-sizing:content-box;float:inline-start;margin-block-start:calc(var(--post-device-line-height-content)*.5em - var(--post-device-sizing-interactive-button-icon-6)*.5);margin-inline-start:calc(var(--post-device-sizing-notification-icon-3)*-0.5 + var(--post-device-sizing-interactive-button-icon-6)*-0.5 + var(--post-device-spacing-gap-inline-10)*-1);width:var(--post-device-sizing-interactive-button-icon-6);height:var(--post-device-sizing-interactive-button-icon-6);background-color:currentColor;border-radius:50%}post-footer post-list[slot|=grid]>[role=list]>post-list-item::before{display:none}post-footer post-list[slot|=grid]>[role=list]>post-list-item~post-list-item{margin-block-start:var(--post-footer-grid-list-item-gap)}post-footer post-list:is([slot=socialmedia],[slot=app],[slot=businesssectors],[slot=meta])>[role=list]{all:unset;display:block;list-style:none;display:flex;flex-wrap:wrap;row-gap:var(--post-device-spacing-gap-1);column-gap:calc(var(--post-device-spacing-gap-inline-10)*2);margin-block:var(--post-device-spacing-padding-block-8);margin:0}post-footer post-list:is([slot=socialmedia],[slot=app],[slot=businesssectors],[slot=meta])>[role=list]>post-list-item{all:unset;display:list-item}post-footer post-list:is([slot=socialmedia],[slot=app],[slot=businesssectors],[slot=meta])>[role=list]>post-list-item~post-list-item{all:unset;display:list-item}post-footer post-list:is([slot=socialmedia],[slot=app],[slot=businesssectors],[slot=meta])>[role=list]>post-list-item::before{all:unset}post-footer post-list[slot=socialmedia]>[role=list]{gap:var(--post-footer-socialmedia-list-item-gap)}post-footer post-list[slot=app]>[role=list]{gap:var(--post-footer-app-list-item-gap)}post-footer post-list[slot=businesssectors]>[role=list]{gap:var(--post-footer-businesssector-list-item-gap)}post-footer post-list[slot=meta]>[role=list]{row-gap:0;column-gap:var(--post-footer-meta-list-item-gap)}