@danske/sapphire-css 16.3.0 → 25.1.0

package/components/calendar/calendar.module.css

@@ -34,6 +34,7 @@
 
 .sapphire-calendar__header-title {
   margin: 0 auto;
+  color: var(--sapphire-calendar-color-content-default);
 }
 
 .sapphire-calendar__tables-row {
@@ -155,8 +156,7 @@
   padding: 0 var(--sapphire-calendar-size-spacing-title-horizontal);
 }
 
-.sapphire-calendar__header-title,
-.sapphire-calendar__button--title .sapphire-calendar__button-text {
+.sapphire-calendar__header-title {
   font-weight: var(--sapphire-calendar-font-weight-title);
   font-size: var(--sapphire-calendar-size-font-title);
 }
@@ -371,6 +371,13 @@
   overflow: initial;
 }
 
+.sapphire-calendar__grid-page-animation .exit-active {
+  /* The calendar page that's transitioning out should not accept any pointer event. Otherwise
+  there can be edge cases where quickly hovering over the grid area while page is being changed
+  can move focus to the page that's about to be removed from dom, which causes focus to get lost */
+  pointer-events: none;
+}
+
 /* Next page animation, applied on the wrapper, when next grid(s) are animating in */
 .sapphire-calendar__grid-page-animation--next .enter {
   transform: translateX(100%);

package/components/calendar/calendar.module.css.d.ts

@@ -19,7 +19,6 @@ declare const styles: {
   readonly "sapphire-calendar__week-number": string;
   readonly "sapphire-calendar__button": string;
   readonly "sapphire-calendar__button-text": string;
-  readonly "sapphire-calendar__button--title": string;
   readonly "sapphire-calendar__button--day": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
@@ -38,9 +37,9 @@ declare const styles: {
   readonly "sapphire-calendar__grid-page-animation": string;
   readonly "enter": string;
   readonly "exit": string;
+  readonly "exit-active": string;
   readonly "sapphire-calendar__grid-page-animation--next": string;
   readonly "enter-active": string;
-  readonly "exit-active": string;
   readonly "sapphire-calendar__grid-page-animation--prev": string;
 };
 export = styles;

package/components/checkbox/checkbox.module.css

@@ -1,7 +1,6 @@
 .sapphire-checkbox {
   font-family: var(--sapphire-checkbox-font-label-name);
   display: inline-flex;
-  align-items: center;
   position: relative;
   max-width: 100%;
 }
@@ -40,25 +39,41 @@
   -moz-osx-font-smoothing: grayscale;
 
   margin-left: var(--sapphire-checkbox-size-spacing-label);
-  font-size: var(--sapphire-checkbox-size-font-default);
+  font-size: var(--sapphire-checkbox-size-font-content-l);
   color: var(--sapphire-checkbox-color-label);
-  line-height: var(--sapphire-checkbox-size-height-label);
+  line-height: var(--sapphire-checkbox-size-height-label-l);
 }
 
 .sapphire-checkbox__label:empty {
   margin-left: 0;
 }
 
+.sapphire-checkbox--medium .sapphire-checkbox__label {
+  font-size: var(--sapphire-checkbox-size-font-content-m);
+  line-height: var(--sapphire-checkbox-size-height-label-m);
+}
+
 .sapphire-checkbox__error-text {
   display: block;
   font-family: var(--sapphire-checkbox-font-error-text-name);
   font-weight: var(--sapphire-checkbox-font-error-text-weight);
-  font-size: var(--sapphire-checkbox-size-font-error-text);
+  font-size: var(--sapphire-checkbox-size-font-error-text-l);
+  line-height: var(--sapphire-checkbox-size-line-height-error-text-l);
   color: var(--sapphire-checkbox-color-error-text);
   margin-top: var(--sapphire-checkbox-size-spacing-error-text-vertical);
+
+  margin-left: calc(
+    var(--sapphire-checkbox-size-spacing-label) +
+      var(--sapphire-checkbox-size-width-box-l)
+  );
+}
+
+.sapphire-checkbox__error-text--medium {
+  font-size: var(--sapphire-checkbox-size-font-error-text-m);
+  line-height: var(--sapphire-checkbox-size-line-height-error-text-m);
   margin-left: calc(
     var(--sapphire-checkbox-size-spacing-label) +
-      var(--sapphire-checkbox-size-width-box)
+      var(--sapphire-checkbox-size-width-box-m)
   );
 }
 
@@ -67,8 +82,8 @@
 .sapphire-checkbox__box {
   box-sizing: border-box;
   position: relative;
-  width: var(--sapphire-checkbox-size-width-box);
-  height: var(--sapphire-checkbox-size-height-box);
+  width: var(--sapphire-checkbox-size-width-box-l);
+  height: var(--sapphire-checkbox-size-height-box-l);
   border-radius: var(--sapphire-checkbox-size-radius);
   border: var(--sapphire-checkbox-size-width-border-unchecked) solid
     var(--sapphire-checkbox-color-border-unchecked-default);
@@ -80,13 +95,27 @@
   align-items: center;
 }
 
+.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)) {
+  margin-top: var(--sapphire-checkbox-size-spacing-box);
+}
+
+.sapphire-checkbox--medium .sapphire-checkbox__box {
+  width: var(--sapphire-checkbox-size-width-box-m);
+  height: var(--sapphire-checkbox-size-height-box-m);
+}
+
 .sapphire-checkbox__box-icon {
   display: inherit;
   line-height: 0;
   color: var(--sapphire-checkbox-color-icon);
   margin: calc(var(--sapphire-checkbox-size-width-border-unchecked) * -1);
-  height: var(--sapphire-checkbox-size-height-box);
-  width: var(--sapphire-checkbox-size-width-box);
+  height: var(--sapphire-checkbox-size-height-box-l);
+  width: var(--sapphire-checkbox-size-width-box-l);
+}
+
+.sapphire-checkbox--medium .sapphire-checkbox__box-icon {
+  height: var(--sapphire-checkbox-size-height-box-m);
+  width: var(--sapphire-checkbox-size-width-box-m);
 }
 
 .sapphire-checkbox--error .sapphire-checkbox__box {
@@ -176,7 +205,11 @@
   cursor: not-allowed;
 }
 
-.sapphire-checkbox__input:disabled ~ .sapphire-checkbox__box,
-.sapphire-checkbox__input:disabled ~ .sapphire-checkbox__label {
+.sapphire-checkbox:not(.sapphire-checkbox--no-disabled)
+  .sapphire-checkbox__input:disabled
+  ~ .sapphire-checkbox__box,
+.sapphire-checkbox:not(.sapphire-checkbox--no-disabled)
+  .sapphire-checkbox__input:disabled
+  ~ .sapphire-checkbox__label {
   opacity: var(--sapphire-checkbox-opacity-disabled);
 }

package/components/checkbox/checkbox.module.css.d.ts

@@ -2,7 +2,9 @@ declare const styles: {
   readonly "sapphire-checkbox": string;
   readonly "sapphire-checkbox__input": string;
   readonly "sapphire-checkbox__label": string;
+  readonly "sapphire-checkbox--medium": string;
   readonly "sapphire-checkbox__error-text": string;
+  readonly "sapphire-checkbox__error-text--medium": string;
   readonly "sapphire-checkbox__box": string;
   readonly "sapphire-checkbox__box-icon": string;
   readonly "sapphire-checkbox--error": string;
@@ -13,6 +15,7 @@ declare const styles: {
   readonly "js-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
+  readonly "sapphire-checkbox--no-disabled": string;
 };
 export = styles;
 

package/components/dateField/dateField.module.css

@@ -1,8 +1,13 @@
 .sapphire-date-field {
-  display: inline-flex;
-  flex-direction: column;
+  box-sizing: border-box;
+  display: grid;
   font-family: var(--sapphire-date-field-font-name);
-  width: var(--sapphire-date-field-size-width-control);
+  grid-auto-flow: column;
+  align-items: center;
+  line-height: var(--sapphire-date-field-size-line-height-content);
+  gap: var(--sapphire-date-field-size-spacing-control-gap);
+  box-sizing: border-box;
+  width: var(--sapphire-date-field-size-width-control-default);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
    * looks bolder than intended due to subpixel rendering. This quirk generally
@@ -17,60 +22,82 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  box-sizing: border-box;
-}
-
-.sapphire-date-field__label {
-  display: flex;
-  align-items: center;
-  gap: var(--sapphire-date-field-size-spacing-label-horizontal);
-  min-height: var(--sapphire-date-field-size-height-label);
-  margin-bottom: var(--sapphire-date-field-size-spacing-label-vertical);
-}
-
-.sapphire-date-field__label-text {
-  font-size: var(--sapphire-date-field-size-font-label);
-  font-weight: var(--sapphire-date-field-size-font-weight-label);
-  line-height: var(--sapphire-date-field-size-line-height-label);
-  color: var(--sapphire-date-field-color-content-label);
-}
-
-.sapphire-date-field__content {
-  box-sizing: border-box;
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  gap: var(--sapphire-date-field-size-spacing-control-gap);
   /*
    * The right-side "clear" button column should always take space even if the
    * button isn't there. This is to make sure the field doesn't jump when the
    * "clear" button appears in the last column.
    */
-  grid-template-columns: auto 1fr var(--sapphire-date-field-size-width-button);
-  height: var(--sapphire-date-field-size-height-field);
+  grid-template-columns:
+    var(--sapphire-date-field-size-width-button-l) auto
+    var(--sapphire-date-field-size-width-button-l);
+
+  height: var(--sapphire-date-field-size-height-field-l);
   border-radius: var(--sapphire-date-field-size-radius-field);
-  padding: 0 var(--sapphire-date-field-size-spacing-control-horizontal);
+  padding: 0 var(--sapphire-date-field-size-spacing-control-horizontal-l);
   border: var(--sapphire-date-field-size-width-border) solid
     var(--sapphire-date-field-color-border-default);
   background-color: var(--sapphire-date-field-color-background-field);
 }
 
+.sapphire-date-field--medium {
+  grid-template-columns:
+    var(--sapphire-date-field-size-width-button-m) auto
+    var(--sapphire-date-field-size-width-button-m);
+
+  height: var(--sapphire-date-field-size-height-field-m);
+  padding: 0 var(--sapphire-date-field-size-spacing-control-horizontal-m);
+}
+
+.sapphire-date-field--range {
+  width: auto;
+}
+
+.sapphire-date-field.sapphire-date-field--range {
+  grid-template-columns:
+    var(--sapphire-date-field-size-width-button-l) min-content
+    var(--sapphire-date-field-size-width-button-l)
+    min-content var(--sapphire-date-field-size-width-button-l);
+}
+
+.sapphire-date-field--medium.sapphire-date-field--range {
+  grid-template-columns:
+    var(--sapphire-date-field-size-width-button-m) min-content
+    var(--sapphire-date-field-size-width-button-m)
+    min-content var(--sapphire-date-field-size-width-button-m);
+}
+
 .sapphire-date-field__input {
   display: flex;
   align-items: center;
   height: 100%;
   cursor: text;
-  line-height: var(--sapphire-date-field-size-line-height-content);
-  font-size: var(--sapphire-date-field-size-font-content);
+  font-size: var(--sapphire-date-field-size-font-content-l);
   font-weight: var(--sapphire-date-field-size-font-weight-input);
+  min-width: var(--sapphire-date-field-size-min-width-field-l);
+}
+.sapphire-date-field__input:first-of-type {
+  margin-left: var(--sapphire-date-field-size-spacing-icon-l);
+}
+.sapphire-date-field__input:last-of-type {
+  margin-right: var(--sapphire-date-field-size-spacing-icon-l);
+}
+
+.sapphire-date-field--medium .sapphire-date-field__input {
+  font-size: var(--sapphire-date-field-size-font-content-m);
+  min-width: var(--sapphire-date-field-size-min-width-field-m);
+}
+
+.sapphire-date-field--medium .sapphire-date-field__input:first-of-type {
+  margin-left: var(--sapphire-date-field-size-spacing-icon-m);
+}
+.sapphire-date-field--medium .sapphire-date-field__input:last-of-type {
+  margin-right: var(--sapphire-date-field-size-spacing-icon-m);
 }
 
 /**
  * Editable segments
  */
 .sapphire-date-field__segment {
-  padding: 0 var(--sapphire-date-field-size-spacing-segment-horizontal);
   color: var(--sapphire-date-field-color-content-segment-placeholder);
   border-radius: var(--sapphire-date-field-size-radius-segment);
   transition-property: color, background-color;
@@ -78,6 +105,7 @@
   transition-timing-function: ease-in-out;
   text-align: right;
   text-transform: uppercase;
+  padding: 0 var(--sapphire-date-field-size-spacing-segment-horizontal);
 }
 
 .sapphire-date-field__segment:focus,
@@ -95,34 +123,6 @@
   color: var(--sapphire-date-field-color-content-segment-unselected);
 }
 
-/**
- * Note
- */
-
-.sapphire-date-field__note-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--sapphire-date-field-size-font-note);
-  line-height: var(--sapphire-date-field-size-line-height-note);
-  color: var(--sapphire-date-field-color-content-note-default);
-  margin-top: var(--sapphire-date-field-size-spacing-note-vertical);
-}
-
-.sapphire-date-field__note {
-  display: block;
-  font-size: var(--sapphire-date-field-size-font-note);
-  line-height: var(--sapphire-date-field-size-line-height-note);
-  color: var(--sapphire-date-field-color-content-note-default);
-}
-
-.sapphire-date-field--error .sapphire-date-field__note {
-  color: var(--sapphire-date-field-color-content-note-error);
-}
-
-.sapphire-date-field--error .sapphire-date-field__content {
-  border-color: var(--sapphire-date-field-color-border-error);
-}
-
 /**
  * Focus
  *
@@ -131,24 +131,18 @@
  * default https://caniuse.com/?search=%3Ahas
  * But this is not a crucial aspect of the UI and we can live with this for a time.
  */
-.sapphire-date-field__content:has(.sapphire-date-field__segment:focus),
-.sapphire-date-field__content:has(.sapphire-date-field__segment.is-focus) {
+.sapphire-date-field:has(.sapphire-date-field__segment:focus),
+.sapphire-date-field:has(.sapphire-date-field__segment.is-focus) {
   outline: var(--sapphire-date-field-size-focus-ring) solid
     var(--sapphire-date-field-color-focus-ring);
   outline-offset: calc(-1 * var(--sapphire-date-field-size-focus-ring));
 }
 
 /**
- * Disabled
+ * Hover
  */
-.sapphire-date-field.is-disabled {
-  opacity: var(--sapphire-date-field-opacity-disabled);
-  cursor: not-allowed;
-}
-
-.sapphire-date-field.is-disabled .sapphire-date-field__button,
-.sapphire-date-field.is-disabled .sapphire-date-field__input {
-  cursor: not-allowed;
+.sapphire-date-field--error {
+  border-color: var(--sapphire-date-field-color-border-error);
 }
 
 /**
@@ -185,18 +179,28 @@
   transition-timing-function: ease-in-out;
   cursor: pointer;
 
-  height: var(--sapphire-date-field-size-height-button);
-  width: var(--sapphire-date-field-size-width-button);
+  height: var(--sapphire-date-field-size-height-button-l);
+  width: var(--sapphire-date-field-size-width-button-l);
   background-color: transparent;
   color: var(--sapphire-date-field-color-content-button-default);
 }
 
+.sapphire-date-field--medium .sapphire-date-field__button {
+  height: var(--sapphire-date-field-size-height-button-m);
+  width: var(--sapphire-date-field-size-width-button-m);
+}
+
 /**
  * Icon (button)
  */
 .sapphire-date-field__icon {
-  height: var(--sapphire-date-field-size-icon);
-  width: var(--sapphire-date-field-size-icon);
+  height: var(--sapphire-date-field-size-icon-l);
+  width: var(--sapphire-date-field-size-icon-l);
+}
+
+.sapphire-date-field--medium .sapphire-date-field__icon {
+  height: var(--sapphire-date-field-size-icon-m);
+  width: var(--sapphire-date-field-size-icon-m);
 }
 
 /**
@@ -220,15 +224,6 @@
     var(--sapphire-date-field-color-focus-ring);
 }
 
-/**
- * Disabled (buttons)
- */
-.sapphire-date-field__button:disabled,
-.sapphire-date-field__button.is-disabled {
-  opacity: var(--sapphire-date-field-opacity-disabled);
-  cursor: not-allowed;
-}
-
 /**
  * Active (buttons)
  */

package/components/dateField/dateField.module.css.d.ts

@@ -1,18 +1,15 @@
 declare const styles: {
   readonly "sapphire-date-field": string;
-  readonly "sapphire-date-field__label": string;
-  readonly "sapphire-date-field__label-text": string;
-  readonly "sapphire-date-field__content": string;
+  readonly "sapphire-date-field--medium": string;
+  readonly "sapphire-date-field--range": string;
   readonly "sapphire-date-field__input": string;
   readonly "sapphire-date-field__segment": string;
   readonly "is-focus": string;
   readonly "sapphire-date-field__segment--filled": string;
-  readonly "sapphire-date-field__note-row": string;
-  readonly "sapphire-date-field__note": string;
   readonly "sapphire-date-field--error": string;
-  readonly "is-disabled": string;
   readonly "sapphire-date-field__button": string;
   readonly "sapphire-date-field__icon": string;
+  readonly "is-disabled": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;

package/components/dialog/dialog.module.css

@@ -1,6 +1,8 @@
 .sapphire-dialog {
   border-radius: var(--sapphire-dialog-size-radius);
-  background-color: var(--sapphire-dialog-color-background-dialog);
+  background-color: var(--sapphire-dialog-color-background);
+  font-family: var(--sapphire-dialog-font-name);
+  color: var(--sapphire-dialog-color-content);
   box-sizing: border-box;
   overflow: hidden;
   max-height: 90vh;
@@ -13,15 +15,15 @@
 }
 
 .sapphire-dialog--small {
-  width: var(--sapphire-dialog-size-width-small);
+  width: var(--sapphire-dialog-size-width-s);
 }
 
 .sapphire-dialog--medium {
-  width: var(--sapphire-dialog-size-width-medium);
+  width: var(--sapphire-dialog-size-width-m);
 }
 
 .sapphire-dialog--large {
-  width: var(--sapphire-dialog-size-width-large);
+  width: var(--sapphire-dialog-size-width-l);
 }
 
 .sapphire-dialog-header {
@@ -41,11 +43,6 @@
     var(--sapphire-dialog-size-spacing-header-left-passive);
 }
 
-.sapphire-dialog--scrolled .sapphire-dialog-header {
-  box-shadow: 0 var(--sapphire-dialog-size-border) 0
-    var(--sapphire-dialog-color-border-scrollable);
-}
-
 .sapphire-dialog-close-button-container {
   align-self: flex-start;
 }
@@ -56,6 +53,7 @@
     var(--sapphire-dialog-size-spacing-body-bottom-default)
     var(--sapphire-dialog-size-spacing-body-left-default);
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .sapphire-dialog--passive .sapphire-dialog-body {
@@ -72,10 +70,31 @@
     var(--sapphire-dialog-size-spacing-footer-left-default);
 }
 
-.sapphire-dialog--scrollable .sapphire-dialog-footer {
-  border-top: 1px solid var(--sapphire-dialog-color-border-scrollable);
-  margin-left: var(--sapphire-dialog-size-spacing-footer-left-scrollable);
-  margin-right: var(--sapphire-dialog-size-spacing-footer-right-scrollable);
-  padding: var(--sapphire-dialog-size-spacing-footer-top-scrollable) 0
-    var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) 0;
+.sapphire-dialog-header + .sapphire-dialog-body {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-top: var(--sapphire-dialog-size-border) solid transparent;
+}
+
+.sapphire-dialog-header + .sapphire-dialog-body.sapphire-dialog-body--scrolled {
+  border-top: var(--sapphire-dialog-size-border) solid
+    var(--sapphire-dialog-color-separator);
+}
+
+.sapphire-dialog-body + .sapphire-dialog-footer {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-top: var(--sapphire-dialog-size-border) solid transparent;
+}
+
+.sapphire-dialog-body.sapphire-dialog-body--scrollable
+  + .sapphire-dialog-footer {
+  border-top: var(--sapphire-dialog-size-border) solid
+    var(--sapphire-dialog-color-separator);
+}
+
+.sapphire-dialog:has(.sapphire-dialog-body--scrollable)
+  > .sapphire-dialog-footer {
+  padding: var(--sapphire-dialog-size-spacing-footer-top-scrollable)
+    var(--sapphire-dialog-size-spacing-footer-right-scrollable)
+    var(--sapphire-dialog-size-spacing-footer-bottom-scrollable)
+    var(--sapphire-dialog-size-spacing-footer-left-scrollable);
 }

package/components/dialog/dialog.module.css.d.ts

@@ -5,11 +5,11 @@ declare const styles: {
   readonly "sapphire-dialog--large": string;
   readonly "sapphire-dialog-header": string;
   readonly "sapphire-dialog--passive": string;
-  readonly "sapphire-dialog--scrolled": string;
   readonly "sapphire-dialog-close-button-container": string;
   readonly "sapphire-dialog-body": string;
   readonly "sapphire-dialog-footer": string;
-  readonly "sapphire-dialog--scrollable": string;
+  readonly "sapphire-dialog-body--scrolled": string;
+  readonly "sapphire-dialog-body--scrollable": string;
 };
 export = styles;
 

package/components/field/field.module.css

@@ -0,0 +1,136 @@
+.sapphire-field {
+  display: inline-grid;
+  grid-template-columns: auto; /* One column by default */
+  row-gap: var(--sapphire-field-size-spacing-vertical);
+  column-gap: var(--sapphire-field-size-spacing-horizontal);
+  font-family: var(--sapphire-field-font-name);
+  grid-auto-rows: min-content;
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  box-sizing: border-box;
+}
+
+.sapphire-field__label {
+  order: 1;
+  justify-content: end;
+}
+
+.sapphire-field__control {
+  order: 2;
+  min-width: 100%;
+}
+
+/**
+ * Modifier which makes the control's width exceed the
+ * field's container. This is useful when the control's
+ * contents must not shrink beyond a min width.
+ */
+.sapphire-field--no-shrink .sapphire-field__control {
+  min-width: initial;
+}
+
+.sapphire-field__message {
+  /**
+   * The below "min-width" and "max-width" combination is a little bit magical.
+   * It results in this element always having a width equal to the widest of the
+   * other grid rows but never greater than that.
+   *
+   * The reason for why "max-width: 100%" alone is not enough has to do with
+   * its interacton with the grid's column width definiton from the parent.
+   **/
+  min-width: 100%;
+  max-width: min-content;
+  order: 3;
+}
+
+/**
+ * Note
+ * An error message or a note, which by design are mutually exclusive.
+ */
+.sapphire-field__note-row {
+  display: flex;
+  align-items: top;
+  font-size: var(--sapphire-field-size-font-note-l);
+  line-height: var(--sapphire-field-size-line-height-note-l);
+  color: var(--sapphire-field-color-note-default);
+}
+
+.sapphire-field--medium .sapphire-field__note-row {
+  font-size: var(--sapphire-field-size-font-note-m);
+  line-height: var(--sapphire-field-size-line-height-note-m);
+}
+
+.sapphire-field__note {
+  flex: 1;
+}
+
+.sapphire-field--error .sapphire-field__note {
+  color: var(--sapphire-field-color-note-error);
+}
+
+/**
+ * Disabled
+ */
+.sapphire-field.is-disabled {
+  opacity: var(--sapphire-field-opacity-disabled);
+  cursor: not-allowed;
+}
+.sapphire-field.is-disabled .sapphire-field__control * {
+  cursor: inherit;
+}
+
+/**
+ * Side placement
+ */
+.sapphire-field--label-placement-side {
+  grid-template-columns: max-content auto;
+}
+.sapphire-field--label-placement-side .sapphire-field__control,
+.sapphire-field--label-placement-side .sapphire-field__message {
+  grid-column: 2;
+}
+.sapphire-field--label-placement-side .sapphire-field__label {
+  /* label is center aligned with control by default. But if the control is too long (e.g. textarea)
+   * the label stays at the top (max-height)
+   */
+  display: flex;
+  align-items: center;
+  max-height: var(--sapphire-field-size-max-height-label);
+}
+
+/*
+ * FieldSet - a wrapper for fields, that handles spacing, and label alignment when labels are on
+ * the side.
+ */
+.sapphire-fieldset {
+  display: inline-flex;
+  flex-direction: column;
+  width: min-content; /* this is needed to have the labels column shrunk to the largest one */
+  gap: var(--sapphire-field-size-spacing-fieldset-large);
+}
+
+.sapphire-fieldset .sapphire-field--label-placement-side {
+  grid-template-columns: 1fr min-content;
+}
+
+.sapphire-fieldset
+  .sapphire-field--label-placement-side
+  .sapphire-field__label {
+  /* That is necessary because of width: min-content on field-set. Would be nice to avoid it
+     but couldn't find a way to avoid it while meeting the other requirements of having labels
+     aligned and not take up more space than needed.
+   */
+  white-space: nowrap;
+}