@danske/sapphire-css 44.0.0 → 45.1.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/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

@@ -87,6 +87,12 @@ instead of being applied on the list item itself  */
   align-items: inherit;
 }
 
+.sapphire-list__item > .sapphire-list__item--selected {
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-default
+  );
+}
+
 .sapphire-list--negative-margin-self {
   margin-left: calc(var(--sapphire-semantic-size-spacing-md) * -1);
   width: calc(100% + (var(--sapphire-semantic-size-spacing-md) * 2));
@@ -163,6 +169,15 @@ instead of being applied on the list item itself  */
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
+.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),
+.sapphire-list__item--selected:not(.js-hover):not([aria-disabled='true']):not(
+    :disabled
+  ):not(:active):not(:has(:hover)):hover {
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-hover
+  );
+}
+
 /*
  * Focus
  */
@@ -193,6 +208,17 @@ instead of being applied on the list item itself  */
   );
 }
 
+.sapphire-list__item--selected:not(.is-disabled).is-active:not(
+    :has(.is-active)
+  ),
+.sapphire-list__item--selected:not([aria-disabled='true']):not(:disabled):not(
+    :has(:active)
+  ):active {
+  background-color: var(
+    --sapphire-semantic-color-background-action-select-secondary-active
+  );
+}
+
 .sapphire-list__item[aria-disabled='true']
   .sapphire-list__item--interactive:active,
 .sapphire-list__item--interactive:focus-visible {

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

@@ -2,6 +2,7 @@ declare const styles: {
   readonly "sapphire-list": string;
   readonly "sapphire-list__item": string;
   readonly "sapphire-list__item--interactive": string;
+  readonly "sapphire-list__item--selected": string;
   readonly "sapphire-list--negative-margin-self": string;
   readonly "is-focus": string;
   readonly "js-focus": 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

@@ -114,6 +114,7 @@
 }
 
 .sapphire-modal-layout__section-title {
+  z-index: 1; /* Only <legend> element appears above content by default when sticky, <header> needs this */
   margin-left: calc(
     var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1
   );

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/package.json

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