@danske/sapphire-css 43.1.0 → 44.0.0

package/components/checkbox/checkbox.module.css

@@ -72,21 +72,29 @@
   margin-left: var(--sapphire-semantic-size-spacing-xs);
 }
 
+.sapphire-checkbox__note,
 .sapphire-checkbox__error-text {
   display: block;
   font-family: var(--sapphire-semantic-font-name-default);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   font-size: var(--sapphire-semantic-size-font-label-md);
   line-height: var(--sapphire-semantic-size-line-height-md);
-  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
-  margin-top: var(--sapphire-semantic-size-spacing-2xs);
-
+  margin-top: var(--sapphire-semantic-size-spacing-3xs);
   margin-left: calc(
     var(--sapphire-semantic-size-spacing-sm) +
       var(--sapphire-semantic-size-height-box-lg)
   );
 }
 
+.sapphire-checkbox__note {
+  color: var(--sapphire-semantic-color-foreground-secondary);
+}
+
+.sapphire-checkbox__error-text {
+  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
+}
+
+.sapphire-checkbox__note--md,
 .sapphire-checkbox__error-text--md {
   font-size: var(--sapphire-semantic-size-font-label-sm);
   line-height: var(--sapphire-semantic-size-line-height-sm);

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

@@ -6,7 +6,9 @@ declare const styles: {
   readonly "sapphire-checkbox__required-indicator": string;
   readonly "sapphire-checkbox__optional-indicator": string;
   readonly "sapphire-checkbox--md": string;
+  readonly "sapphire-checkbox__note": string;
   readonly "sapphire-checkbox__error-text": string;
+  readonly "sapphire-checkbox__note--md": string;
   readonly "sapphire-checkbox__error-text--md": string;
   readonly "sapphire-checkbox__box": string;
   readonly "sapphire-checkbox__box-icon": string;

package/components/list/list.module.css

@@ -224,8 +224,16 @@ instead of being applied on the list item itself  */
   /* This was added to accommodate nowrap + hidden text overflow situation */
   min-width: 0;
   overflow-wrap: break-word;
+  gap: var(--sapphire-semantic-size-spacing-4xs);
 }
 
+.sapphire-list__item-text-label {
+  color: var(--sapphire-semantic-color-foreground-secondary);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
+}
+
+/* TODO remove in v6 deprecated */
 .sapphire-list__item-text--reversedOrder {
   flex-direction: column-reverse;
 }

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

@@ -16,6 +16,7 @@ declare const styles: {
   readonly "sapphire-list__item-content-left": string;
   readonly "sapphire-list__item-content-right": string;
   readonly "sapphire-list__item-text": string;
+  readonly "sapphire-list__item-text-label": string;
   readonly "sapphire-list__item-text--reversedOrder": string;
   readonly "sapphire-list__item-text-primary": string;
   readonly "sapphire-list__item-text-secondary": string;

package/components/modalLayout/modalLayout.module.css

@@ -13,13 +13,18 @@
 
 .sapphire-modal-layout__header {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   padding: var(--sapphire-semantic-size-spacing-xl)
     var(--sapphire-semantic-size-spacing-xl)
     var(--sapphire-semantic-size-spacing-xl)
     var(--sapphire-semantic-size-spacing-2xl);
   gap: var(--sapphire-semantic-size-spacing-sm);
-  min-height: var(--sapphire-semantic-size-height-control-md);
+}
+
+.sapphire-modal-layout__header-content {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-modal-layout__body {
@@ -53,11 +58,27 @@
   flex-direction: column;
   justify-content: center;
   word-break: break-word;
+  padding: var(--sapphire-semantic-size-spacing-2xs) 0;
 }
 
 .sapphire-modal-layout__subheading {
   color: var(--sapphire-semantic-color-foreground-secondary);
-  margin-top: var(--sapphire-semantic-size-spacing-2xs);
+  margin-top: var(--sapphire-semantic-size-spacing-3xs);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+}
+
+.sapphire-modal-layout__extra-container {
+  flex: 1;
+  flex-basis: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sapphire-semantic-size-spacing-sm);
+  margin-top: var(--sapphire-semantic-size-spacing-sm);
+}
+
+.sapphire-modal-layout__progress-container {
+  display: flex;
 }
 
 .sapphire-modal-layout__header-container + .sapphire-modal-layout__body {

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

@@ -2,12 +2,15 @@ declare const styles: {
   readonly "sapphire-modal-layout": string;
   readonly "sapphire-modal-layout__header-container": string;
   readonly "sapphire-modal-layout__header": string;
+  readonly "sapphire-modal-layout__header-content": string;
   readonly "sapphire-modal-layout__body": string;
   readonly "sapphire-modal-layout__body--no-padding": string;
   readonly "sapphire-modal-layout__footer-container": string;
   readonly "sapphire-modal-layout__footer": string;
   readonly "sapphire-modal-layout__heading-container": string;
   readonly "sapphire-modal-layout__subheading": string;
+  readonly "sapphire-modal-layout__extra-container": string;
+  readonly "sapphire-modal-layout__progress-container": string;
   readonly "sapphire-modal-layout__body--scrolled": string;
   readonly "sapphire-modal-layout__body--scrollable": string;
   readonly "sapphire-modal-layout__section": string;

package/components/radio/radio.module.css

@@ -5,6 +5,11 @@
   position: relative;
 }
 
+.sapphire-radio-container {
+  display: inline-flex;
+  flex-flow: column;
+}
+
 .sapphire-radio__input {
   margin: 0;
   overflow: visible;
@@ -163,3 +168,27 @@
 .sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__label {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
+
+/* Note */
+.sapphire-radio__note {
+  display: block;
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-label-md);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  margin-top: var(--sapphire-semantic-size-spacing-3xs);
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-sm) +
+      var(--sapphire-semantic-size-height-box-lg)
+  );
+  color: var(--sapphire-semantic-color-foreground-secondary);
+}
+
+.sapphire-radio__note--md {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-xs) +
+      var(--sapphire-semantic-size-height-box-lg)
+  );
+}

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-radio": string;
+  readonly "sapphire-radio-container": string;
   readonly "sapphire-radio__input": string;
   readonly "sapphire-radio__label": string;
   readonly "sapphire-radio--md": string;
@@ -10,6 +11,8 @@ declare const styles: {
   readonly "js-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
+  readonly "sapphire-radio__note": string;
+  readonly "sapphire-radio__note--md": string;
 };
 export = styles;
 

package/components/slider/slider.module.css

@@ -58,7 +58,10 @@
 }
 
 /* disabled */
-.sapphire-slider__track[data-disabled='true'] {
+.sapphire-slider__track.is-disabled {
   opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
+.sapphire-slider__track.is-disabled .sapphire-slider__thumb {
+  cursor: not-allowed;
+}

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

@@ -5,6 +5,7 @@ declare const styles: {
   readonly "sapphire-slider__track-fill": string;
   readonly "sapphire-slider__thumb": string;
   readonly "is-focus": string;
+  readonly "is-disabled": string;
 };
 export = styles;
 

package/components/switch/switch.module.css

@@ -10,9 +10,11 @@
   gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
-.sapphire-switch--md {
-  gap: var(--sapphire-semantic-size-spacing-2xs);
+.sapphire-switch-container {
+  display: inline-flex;
+  flex-flow: column;
 }
+
 /**
  * hidden html input
  */
@@ -179,3 +181,27 @@
   ~ .sapphire-switch-track::after {
   left: calc(100% - var(--sapphire-semantic-size-height-control-2xs));
 }
+
+/* Note */
+.sapphire-switch__note {
+  display: block;
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-label-md);
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  margin-top: var(--sapphire-semantic-size-spacing-3xs);
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-sm) +
+      var(--sapphire-global-size-generic-110)
+  );
+  color: var(--sapphire-semantic-color-foreground-secondary);
+}
+
+.sapphire-switch__note--md {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-sm) +
+      var(--sapphire-global-size-generic-80)
+  );
+}

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

@@ -1,14 +1,17 @@
 declare const styles: {
   readonly "sapphire-switch": string;
-  readonly "sapphire-switch--md": string;
+  readonly "sapphire-switch-container": string;
   readonly "sapphire-switch-input": string;
   readonly "sapphire-switch-label": string;
+  readonly "sapphire-switch--md": string;
   readonly "js-focus": string;
   readonly "sapphire-switch-track": string;
   readonly "is-focus": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
+  readonly "sapphire-switch__note": string;
+  readonly "sapphire-switch__note--md": string;
 };
 export = styles;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "43.1.0",
+  "version": "44.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -69,5 +69,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^42.2.1"
   },
-  "gitHead": "fcf8d5c8a3962dcc624ffd02cc607673cb91bd96"
+  "gitHead": "8e444e6b304060b29ba5ba3485086b0eddae52e1"
 }