@danske/sapphire-css 31.1.2 → 31.2.2

package/components/accordion/accordion.module.css

@@ -134,7 +134,7 @@
   transition: transform var(--sapphire-accordion-time-transition-arrow)
     ease-in-out;
 }
-.sapphire-accordion__item--open .sapphire-accordion__item-arrow {
+.sapphire-accordion__item--open > :first-child .sapphire-accordion__item-arrow {
   transform: rotate(180deg);
 }
 
@@ -159,11 +159,13 @@
   padding-left: var(--sapphire-accordion-size-spacing-body-horizontal);
 }
 
-.sapphire-accordion__item--open .sapphire-accordion__item-content-wrapper {
+.sapphire-accordion__item--open > .sapphire-accordion__item-content-wrapper {
   grid-template-rows: 1fr;
 }
 
-.sapphire-accordion__item--open .sapphire-accordion__item-content {
+.sapphire-accordion__item--open
+  > .sapphire-accordion__item-content-wrapper
+  > .sapphire-accordion__item-content {
   padding-top: var(--sapphire-accordion-size-spacing-body-top);
   padding-bottom: var(--sapphire-accordion-size-spacing-body-bottom);
   visibility: visible;

package/components/listbox/listbox.module.css

@@ -54,6 +54,7 @@
   color: var(--sapphire-listbox-color-content-normal-primary-default);
   outline: none;
   cursor: pointer;
+  text-decoration: none;
 
   /**
    * Making sure listbox will grow to the maximum width needed by the content, which should

package/components/table/table.module.css

@@ -212,6 +212,10 @@
   width: var(--sapphire-table-size-width-selection-cell);
 }
 
+.sapphire-table__selectionCell:not(:first-child) {
+  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-default);
+}
+
 .sapphire-table__cell:first-child {
   padding-left: var(--sapphire-table-size-spacing-cell-horizontal-end);
 }
@@ -243,10 +247,32 @@
 /**
 * Row divider. Only shown when row is not focused, because of z-index issue with the focus ring.
 */
-.sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible) {
+.sapphire-table__row:not(
+    .is-focus,
+    :not(.js-focus):focus-visible,
+    .sapphire-table__row--expanded
+  ) {
+  box-shadow: inset 0px -1px 0px 0px var(--sapphire-table-color-border-separator);
+}
+
+.sapphire-table__row-expanded-view {
   box-shadow: inset 0px -1px 0px 0px var(--sapphire-table-color-border-separator);
 }
 
+.sapphire-table__row-expand-button {
+  display: inline-flex; /* for transform to take effect */
+  transition: transform ease-in-out var(--sapphire-table-time-transition-arrow);
+  margin-left: var(--sapphire-table-size-spacing-icon-left-default);
+}
+
+.sapphire-table td:has(.sapphire-table__row-expand-button) {
+  width: 0; /* To prevent the cell from growing more than needed. only needed when td is used for cells */
+}
+
+.sapphire-table__row--expanded .sapphire-table__row-expand-button {
+  transform: rotate(180deg);
+}
+
 .sapphire-table--without-last-divider
   .sapphire-table__row:not(
     .is-focus,
@@ -255,16 +281,29 @@
   box-shadow: none;
 }
 
-.sapphire-table--interactive .sapphire-table__row {
+.sapphire-table--interactive .sapphire-table__row,
+.sapphire-table__row--interactive {
   cursor: default; /* by default cursor is text selection, which is unintuitive when rows are clickable */
 }
 
 .sapphire-table--interactive .sapphire-table__row.is-hover,
-.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover {
+.sapphire-table__row--interactive.is-hover,
+.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,
+.sapphire-table__row--interactive:not(.js-hover):hover {
   background-color: var(--sapphire-table-color-background-hover);
   cursor: pointer;
 }
 
+.sapphire-table__row--highlighted {
+  background-color: var(--sapphire-table-color-background-hover);
+}
+.sapphire-table__row--highlighted > *:first-child /* setting the highlight style on the first cell,
+since box-shadow is used for separator on rows,
+and to avoid the complications of merging the two shadows */ {
+  box-shadow: inset var(--sapphire-table-size-width-highlight) 0px 0px 0px
+    var(--sapphire-table-color-background-highlight);
+}
+
 /**
  * Selection actions. Optionally shown when a table uses multiple selection.
  */

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

@@ -27,8 +27,13 @@ declare const styles: {
   readonly "sapphire-table__headCell_content--ellipsed": string;
   readonly "sapphire-table__row--active": string;
   readonly "sapphire-table__row--selected": string;
+  readonly "sapphire-table__row--expanded": string;
+  readonly "sapphire-table__row-expanded-view": string;
+  readonly "sapphire-table__row-expand-button": string;
   readonly "sapphire-table--without-last-divider": string;
   readonly "sapphire-table--interactive": string;
+  readonly "sapphire-table__row--interactive": string;
+  readonly "sapphire-table__row--highlighted": string;
   readonly "sapphire-table__selection-action-bar": string;
   readonly "sapphire-table__footer": string;
   readonly "sapphire-table__footer--sticky": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "31.1.2",
+  "version": "31.2.2",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -46,7 +46,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@danske/sapphire-icons": "^2.0.0",
-    "@danske/sapphire-react": "3.17.0",
+    "@danske/sapphire-react": "^3.39.2",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/addons": "^6.5.13",
@@ -66,7 +66,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^39.1.0"
+    "@danske/sapphire-design-tokens": "^39.2.0"
   },
-  "gitHead": "5fa695dce9089b8fd8519eff034c3f03db00e0d4"
+  "gitHead": "e25b4232146128fc907e0602d8a9d4a6fbe5f402"
 }