@danske/sapphire-css 43.0.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/dropzone/dropzone.module.css

@@ -11,10 +11,11 @@
   height: var(--sapphire-global-size-generic-480);
   min-height: var(--sapphire-global-size-generic-480);
   padding: var(--sapphire-semantic-size-spacing-2xl);
-  border-radius: var(--sapphire-semantic-size-radius-xl);
+  border-radius: var(--sapphire-semantic-size-radius-2xl);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
+  overflow: hidden;
   /* 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
@@ -28,7 +29,7 @@
      */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --mask-data: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="12" ry="12" stroke-width="2" stroke-dasharray="6 6.01126518182488" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
+  --mask-data: url('data:image/svg+xml,%3csvg stroke="black" width="70%25" height="70%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="12" ry="12" stroke-width="2" stroke-dasharray="6 6.01126518182488" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
 }
 
 /* The before is needed because the SVG image cannot take CSS var, so the background of the ::before is set to the correct color instead */
@@ -42,8 +43,8 @@
   /* Dashed borders cannot be customised, so we use a trick with the SVG image to customise it */
   mask: var(--mask-data);
   -webkit-mask: var(--mask-data);
-  background: var(--sapphire-semantic-color-border-primary);
-  border-radius: var(--sapphire-semantic-size-radius-xl);
+  background: var(--sapphire-semantic-color-border-field-default);
+  border-radius: var(--sapphire-semantic-size-radius-2xl);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
@@ -59,7 +60,7 @@
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  background: none;
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:active,
@@ -69,7 +70,20 @@
 .sapphire-dropzone:not(:disabled):not(
     .is-disabled
   ).sapphire-dropzone.is-active {
-  background: var(--sapphire-semantic-color-background-action-tertiary-active);
+  background: none;
+}
+
+.sapphire-dropzone:not(:active):not(.is-disabled):not(
+    .is-active
+  ).is-hover::before,
+.sapphire-dropzone:not(:active):not(.is-disabled):not(.is-active):not(
+    .js-hover
+  ):hover::before {
+  background: var(--sapphire-semantic-color-background-action-primary-hover);
+}
+
+.sapphire-dropzone.is-active::before {
+  background: var(--sapphire-semantic-color-background-action-primary-active);
 }
 
 .sapphire-dropzone:focus {
@@ -95,13 +109,11 @@
 }
 
 .sapphire-dropzone--dropping {
-  background: var(
-    --sapphire-semantic-color-background-action-select-secondary-default
-  );
+  background: var(--sapphire-semantic-color-background-accent-subtle);
 }
 
 .sapphire-dropzone.sapphire-dropzone--dropping::before {
-  background: var(--sapphire-semantic-color-border-accent);
+  background: var(--sapphire-semantic-color-foreground-on-accent-subtle);
 }
 
 .sapphire-dropzone__content {
@@ -116,10 +128,9 @@
   margin-bottom: var(--sapphire-semantic-size-spacing-control-vertical-lg);
 }
 
-.sapphire-dropzone--dropping .sapphire-dropzone__icon {
-  color: var(
-    --sapphire-semantic-color-foreground-action-on-select-secondary-default
-  );
+.sapphire-dropzone--dropping .sapphire-dropzone__icon,
+.sapphire-dropzone--dropping .sapphire-dropzone__content * {
+  color: var(--sapphire-semantic-color-foreground-on-accent-subtle);
 }
 
 .sapphire-dropzone__heading {

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/components/table/table.module.css

@@ -420,15 +420,28 @@ th.sapphire-table__selectionCell:first-child {
     --sapphire-semantic-color-background-action-highlight
   );
 }
-.sapphire-table__row--highlighted::after {
+
+/* TODO remove tbody in v6 */
+.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody)::before {
   content: '';
-  position: absolute;
-  z-index: 2;
-  left: 0;
+  position: sticky;
+  float: inline-start;
   height: 100%;
   width: var(--sapphire-semantic-size-border-md);
+  /* counter the shift for the checkbox */
+  margin-left: calc(-1 * var(--sapphire-semantic-size-border-md));
+  inset-inline-start: 0;
   background: var(--sapphire-semantic-color-border-accent);
   pointer-events: none;
+  z-index: 2;
+}
+
+/* TODO remove in v6 */
+/* Targets non-virtualised tables */
+tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,
+tbody .sapphire-table__row--highlighted > .sapphire-table__cell:first-child {
+  box-shadow: inset var(--sapphire-semantic-size-border-md) 0 0 0
+    var(--sapphire-semantic-color-border-accent);
 }
 
 .sapphire-table__tfoot {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "43.0.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": "5447ed85a23a82d6d7339a1617296a648256ea3e"
+  "gitHead": "8e444e6b304060b29ba5ba3485086b0eddae52e1"
 }