@danske/sapphire-css 46.0.0 → 47.0.0

package/components/listbox/listbox.module.css

@@ -84,23 +84,17 @@
 /* Content inside the item */
 
 .sapphire-listbox__content {
+  --sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);
+  --sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);
   width: 100%;
   /**
    * max-width set to mitigate the issue of not being able to set a max-width on the popover the
    * listbox is rendered in, in use cases like Select.
    */
-  max-width: calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));
-  display: grid;
-  grid-auto-flow: column;
+  max-width: calc(100vw - 2 * var(--sapphire-listbox-icon-size));
+  display: flex;
   align-items: center;
-  gap: var(--sapphire-semantic-size-spacing-xs);
-  /*
-   * We want the left-side icon column to not take space if it's empty in the default 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 doesn't jump
-   * when selecting items that add the checkmark in the last column
-   */
-  grid-template-columns: [left-icon] auto [text-content] 1fr [right-icon] auto;
+  gap: var(--sapphire-listbox-content-gap);
   padding: calc(
       var(--sapphire-semantic-size-spacing-sm) -
         var(--sapphire-semantic-size-spacing-4xs)
@@ -112,62 +106,57 @@
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
 }
 
-.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
- * doesn't jump when selecting items that add the checkmark in the last
- * column
+/**
+ * A modifier that can be applied on listbox or listbox sections, and makes
+ * items reserve the space for selection checkmark on the left side,
+ * regardless of whether they have selection checkmark or not.
+ * This has two purposes:
+ * - keeps the content of selected and unselected items align
+ * - prevent the content jump when selection changes,
+ *   by reserving the space for checkmark even when no item is selected.
  */
-  grid-template-columns: [left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto;
+.sapphire-listbox--selection
+  .sapphire-listbox__item:not(.sapphire-listbox__item--empty)
+  .sapphire-listbox__content
+  > :first-child:not(.sapphire-listbox__checkmark) {
+  padding-left: calc(
+    var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap)
+  );
 }
 
-.sapphire-listbox__content--empty {
-  grid-template-columns: 1fr;
-  justify-items: center;
+.sapphire-listbox__item--empty {
   cursor: default;
+  /* instead of manually excluding empty state modifier from hover/active styles */
+  pointer-events: none;
 }
-.sapphire-listbox__item:has(.sapphire-listbox__content--empty) {
-  cursor: default;
+.sapphire-listbox__item--empty .sapphire-listbox__content,
+.sapphire-listbox__item--empty .sapphire-listbox__text-container {
+  justify-content: center;
 }
 
 /* Icon content */
-.sapphire-listbox__icon {
+.sapphire-listbox__icon,
+/* NOTE: based on the designs, unlike checkmark icons,
+the other icons should not change the alignment.
+Hence a separate class for checkmark icon to be used in the alignment styles */
+.sapphire-listbox__checkmark {
   line-height: 0;
   align-self: start;
+  flex-shrink: 0;
   /* to align with the centered text even when the item has a description */
   padding-top: calc(
     (
         (
             var(--sapphire-semantic-size-font-body-sm) *
               var(--sapphire-semantic-size-line-height-md)
-          ) - var(--sapphire-semantic-size-icon-sm)
+          ) - var(--sapphire-listbox-icon-size)
       ) / 2
   );
 }
 
-.sapphire-listbox__icon:last-child {
-  grid-column: right-icon / span 1;
-}
-
-.sapphire-listbox__icon:first-child {
-  grid-column: left-icon / span 1;
-}
-
-/* Text content */
 .sapphire-listbox__text-container {
-  grid-column: text-content / span 1;
   line-height: var(--sapphire-semantic-size-line-height-md);
-}
-
-/*
- * When there is no icon before the content we want the content
- * to stretch 2 columns out of the 3.
- */
-.sapphire-listbox:not(.sapphire-listbox--selection)
-  .sapphire-listbox__text-container:first-child {
-  grid-column: span 2;
+  flex: 1;
 }
 
 .sapphire-listbox__primary-text {

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

@@ -5,9 +5,10 @@ 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__item--empty": string;
+  readonly "sapphire-listbox__checkmark": string;
   readonly "sapphire-listbox__text-container": string;
+  readonly "sapphire-listbox__icon": string;
   readonly "sapphire-listbox__primary-text": string;
   readonly "is-disabled": string;
   readonly "sapphire-listbox__section": string;

package/components/segmentedControl/segmentedControl.module.css

@@ -3,11 +3,6 @@
   height: var(--sapphire-semantic-size-height-control-md);
 }
 
-.sapphire-segmented-control--stretch
-  .sapphire-segmented-control__button-container {
-  width: 100%;
-}
-
 .sapphire-segmented-control--align-center {
   justify-content: center;
 }
@@ -66,7 +61,6 @@
      */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  flex: 1 1 auto;
   box-sizing: content-box;
   margin: 0;
   border: 0;
@@ -84,6 +78,7 @@
   position: relative;
   transition: color var(--sapphire-semantic-time-motion-quick)
     var(--sapphire-semantic-transitions-dynamic);
+  white-space: nowrap;
 }
 
 .sapphire-segmented-control__button--active {
@@ -95,6 +90,12 @@
   cursor: not-allowed;
 }
 
+.sapphire-segmented-control--stretch
+  .sapphire-segmented-control__button-container,
+.sapphire-segmented-control--stretch .sapphire-segmented-control__button {
+  width: 100%;
+}
+
 .sapphire-segmented-control.focus-visible:focus-within
   .sapphire-segmented-control__glider {
   outline: var(--sapphire-semantic-size-focus-ring) solid

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

@@ -1,15 +1,15 @@
 declare const styles: {
   readonly "sapphire-segmented-control": string;
-  readonly "sapphire-segmented-control--stretch": string;
-  readonly "sapphire-segmented-control__button-container": string;
   readonly "sapphire-segmented-control--align-center": string;
   readonly "sapphire-segmented-control--align-right": string;
   readonly "sapphire-segmented-control--align-left": string;
+  readonly "sapphire-segmented-control__button-container": string;
   readonly "sapphire-segmented-control__glider": string;
   readonly "sapphire-segmented-control__glider--with-transition": string;
   readonly "sapphire-segmented-control__button": string;
   readonly "sapphire-segmented-control__button--active": string;
   readonly "sapphire-segmented-control__button--disabled": string;
+  readonly "sapphire-segmented-control--stretch": string;
   readonly "focus-visible": string;
   readonly "sapphire-segmented-control--manual-keyboard-activation": string;
   readonly "sapphire-segmented-control--lg": string;

package/components/tabs/tabs.module.css

@@ -40,8 +40,8 @@
   padding-right: var(--sapphire-semantic-size-spacing-3xl);
   background: linear-gradient(
     90deg,
-    var(--sapphire-global-color-white) 0%,
-    var(--sapphire-global-color-white) 40%,
+    var(--sapphire-semantic-color-background-surface) 0%,
+    var(--sapphire-semantic-color-background-surface) 40%,
     var(--sapphire-global-color-transparent) 100%
   );
 }
@@ -52,8 +52,8 @@
   background: linear-gradient(
     90deg,
     var(--sapphire-global-color-transparent) 0%,
-    var(--sapphire-global-color-white) 60%,
-    var(--sapphire-global-color-white) 100%
+    var(--sapphire-semantic-color-background-surface) 60%,
+    var(--sapphire-semantic-color-background-surface) 100%
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "46.0.0",
+  "version": "47.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": "b745d009a1799e0912fcaeb52973104d566326c0"
+  "gitHead": "2c917bb01b95074630d7d28a6745f5b37f5c5963"
 }