@danske/sapphire-css 43.1.0 → 45.0.0

package/components/breadcrumbs/breadcrumbs.module.css

@@ -16,6 +16,24 @@
   max-width: var(--sapphire-global-size-generic-480);
 }
 
+.sapphire-breadcrumbs__item--static {
+  /* typography */
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
+  text-transform: none;
+
+  /* sizing */
+  padding: 0 var(--sapphire-global-size-generic-50);
+  height: var(--sapphire-semantic-size-height-control-md);
+  min-width: var(--sapphire-global-size-generic-100);
+  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
+  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
+
+  align-content: center;
+}
+
 .sapphire-breadcrumbs .sapphire-breadcrumbs__item:last-child {
   padding: 0 var(--sapphire-semantic-size-spacing-lg);
 }
@@ -29,6 +47,14 @@
     );
 }
 
+.sapphire-breadcrumbs__item--static--sm {
+  height: var(--sapphire-semantic-size-height-control-sm);
+  min-width: var(--sapphire-global-size-generic-80);
+  padding: 0 var(--sapphire-semantic-size-spacing-md);
+  font-size: var(--sapphire-semantic-size-font-control-sm);
+  border-radius: var(--sapphire-semantic-size-height-control-sm);
+}
+
 .sapphire-breadcrumbs.sapphire-breadcrumbs--lg
   .sapphire-breadcrumbs__item:last-child {
   padding: 0
@@ -38,6 +64,14 @@
     );
 }
 
+.sapphire-breadcrumbs__item--static--lg {
+  height: var(--sapphire-semantic-size-height-control-lg);
+  min-width: var(--sapphire-global-size-generic-120);
+  padding: 0 var(--sapphire-semantic-size-spacing-xl);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
+}
+
 /**
  * Breadcrumb separator
  */

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

@@ -1,8 +1,11 @@
 declare const styles: {
   readonly "sapphire-breadcrumbs": string;
   readonly "sapphire-breadcrumbs__item": string;
+  readonly "sapphire-breadcrumbs__item--static": string;
   readonly "sapphire-breadcrumbs--sm": string;
+  readonly "sapphire-breadcrumbs__item--static--sm": string;
   readonly "sapphire-breadcrumbs--lg": string;
+  readonly "sapphire-breadcrumbs__item--static--lg": string;
   readonly "sapphire-breadcrumbs__separator": string;
 };
 export = styles;

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,7 +11,7 @@
   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-2xl);
+  border-radius: var(--sapphire-semantic-size-radius-md);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
@@ -29,7 +29,7 @@
      */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --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');
+  --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="6" ry="6" stroke-width="2" stroke-dasharray="5 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 */
@@ -44,7 +44,7 @@
   mask: var(--mask-data);
   -webkit-mask: var(--mask-data);
   background: var(--sapphire-semantic-color-border-field-default);
-  border-radius: var(--sapphire-semantic-size-radius-2xl);
+  border-radius: var(--sapphire-semantic-size-radius-md);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);

package/components/label/label.module.css

@@ -1,10 +1,7 @@
 .sapphire-label {
-  display: flex;
-  align-items: center;
   min-height: var(--sapphire-semantic-size-height-control-xs);
   line-height: var(--sapphire-semantic-size-line-height-md);
   font-size: var(--sapphire-semantic-size-font-label-md);
-  gap: var(--sapphire-semantic-size-spacing-3xs);
 }
 
 .sapphire-label--md {
@@ -15,14 +12,22 @@
 .sapphire-label__text {
   font-weight: var(--sapphire-semantic-font-weight-default-medium);
   color: var(--sapphire-semantic-color-foreground-primary);
+  vertical-align: middle;
 }
 
 .sapphire-label__required-indicator {
   background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A");
   width: 8px; /* Hard coded, since it's linked to the svg above */
   height: 8px; /* Hard coded, since it's linked to the svg above */
+  margin-left: var(--sapphire-semantic-size-spacing-3xs);
+  display: inline-block;
 }
 
 .sapphire-label__optional-indicator {
   color: var(--sapphire-semantic-color-foreground-secondary);
+  margin-left: var(--sapphire-semantic-size-spacing-3xs);
+}
+
+.sapphire-label__help-button {
+  margin-left: var(--sapphire-semantic-size-spacing-3xs);
 }

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

@@ -4,6 +4,7 @@ declare const styles: {
   readonly "sapphire-label__text": string;
   readonly "sapphire-label__required-indicator": string;
   readonly "sapphire-label__optional-indicator": string;
+  readonly "sapphire-label__help-button": string;
 };
 export = styles;
 

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

@@ -112,7 +112,8 @@
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
 }
 
-.sapphire-listbox--selection .sapphire-listbox__content {
+.sapphire-listbox--selection
+  .sapphire-listbox__content:not(.sapphire-listbox__content--empty) {
   /*
    * In this case, the right-side "checkmark" icon column should always take
    * space even if the checkmark isn't there. This is to make sure the listbox
@@ -122,6 +123,15 @@
   grid-template-columns: [left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto;
 }
 
+.sapphire-listbox__content--empty {
+  grid-template-columns: 1fr;
+  justify-items: center;
+  cursor: default;
+}
+.sapphire-listbox__item:has(.sapphire-listbox__content--empty) {
+  cursor: default;
+}
+
 /* Icon content */
 .sapphire-listbox__icon {
   line-height: 0;
@@ -210,6 +220,10 @@
     );
 }
 
+.sapphire-listbox > .sapphire-listbox__separator:first-child {
+  display: none;
+}
+
 /* Focus */
 
 .sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,

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

@@ -5,6 +5,7 @@ declare const styles: {
   readonly "sapphire-listbox__secondary-text": string;
   readonly "sapphire-listbox__content": string;
   readonly "sapphire-listbox--selection": string;
+  readonly "sapphire-listbox__content--empty": string;
   readonly "sapphire-listbox__icon": string;
   readonly "sapphire-listbox__text-container": string;
   readonly "sapphire-listbox__primary-text": 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/progressIndicator/progressIndicator.module.css

@@ -1,4 +1,4 @@
-/* Progress bar Track styles */
+/* ProgressIndicator Track styles */
 .sapphire-progress {
   height: 3px;
   width: 100%;
@@ -11,7 +11,7 @@
   display: flex;
 }
 
-/* Progress bar Progress styles */
+/* ProgressIndicator Progress styles */
 .sapphire-progress--indicator {
   height: 100%;
   background: var(--sapphire-semantic-color-background-progress-fill);
@@ -19,7 +19,7 @@
     var(--sapphire-semantic-transitions-dynamic);
 }
 
-/* Progress bar Segmented styles */
+/* ProgressIndicator Segmented styles */
 .sapphire-progress--segments {
   position: absolute;
   width: 100%;

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": "45.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": "956d65c795c2bffc1e4cc153c7721e94c35827c9"
 }