@danske/sapphire-css 50.2.1 → 51.0.0

package/components/link/link.module.css

@@ -23,7 +23,6 @@
   color: var(--sapphire-semantic-color-foreground-action-link-default);
 
   text-decoration: underline;
-  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
 }
 
 /* Disabled state for all variants */

package/components/select/select.module.css

@@ -29,12 +29,12 @@
   border: none;
   background: var(--sapphire-semantic-color-background-field);
   width: 100%;
-  outline: 0;
+  outline: solid var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-default);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
   text-align: left;
   color: inherit;
   font-family: inherit;
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-border-sm)
-    var(--sapphire-semantic-color-border-field-default);
   border-radius: var(--sapphire-semantic-size-radius-md);
   gap: var(--sapphire-semantic-size-spacing-sm);
 }
@@ -127,8 +127,9 @@
  * Error
  */
 .sapphire-select--error:not(.is-disabled) .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px 1px
+  outline: solid var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-negative-default);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
 }
 
 /**
@@ -142,8 +143,9 @@
     .is-disabled
   ):not(.js-hover):hover
   .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-border-sm)
+  outline: solid var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-hover);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
 }
 
 .sapphire-select:not(.is-disabled).is-hover .sapphire-select__icon-container,
@@ -156,13 +158,15 @@
  * Focus
  */
 .sapphire-select:not(.is-disabled).is-focus .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+  outline: solid var(--sapphire-semantic-size-focus-ring)
     var(--sapphire-semantic-color-focus-ring);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
 }
 
 .sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
+  outline: solid var(--sapphire-semantic-size-focus-ring)
     var(--sapphire-semantic-color-border-negative-default);
+  outline-offset: calc(-1 * var(--sapphire-semantic-size-focus-ring));
 }
 
 .sapphire-select.is-disabled .sapphire-select__button {

package/components/table/table.module.css

@@ -173,6 +173,7 @@
 
 .sapphire-table__headCell.sapphire-table__headCell--sortable {
   cursor: pointer;
+  user-select: none;
 }
 
 .sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover
@@ -223,6 +224,7 @@
 }
 
 /* Overflow behaviour */
+/* @deprecated in favor of TruncateOverflow */
 .sapphire-table__cell--ellipsed,
 .sapphire-table__headCell_content--ellipsed,
 .sapphire-table__cell--ellipsed .sapphire-table__cell-contents {
@@ -261,6 +263,7 @@
   padding: var(--sapphire-table-cell-spacing-v)
     var(--sapphire-table-cell-spacing-h);
   box-sizing: content-box;
+  text-align: center;
 }
 .sapphire-table__head .sapphire-table__selectionCell {
   padding: var(--sapphire-semantic-size-spacing-2xs)
@@ -326,7 +329,14 @@ th.sapphire-table__selectionCell:first-child {
   );
 }
 
-.sapphire-table--interactive .sapphire-table__row--active {
+/* Applied only when the "action" on rows is disabled. If only selection is disabled, only the checkbox should be disabled */
+.sapphire-table__row.is-disabled:not(.sapphire-table__row--selected)
+  .sapphire-table__cell {
+  opacity: var(--sapphire-semantic-opacity-disabled);
+}
+
+.sapphire-table--interactive .sapphire-table__row--active,
+.sapphire-table__row--interactive.sapphire-table__row--active {
   --sapphire-table-row-bg-active: var(
     --sapphire-semantic-color-background-action-tertiary-active
   );
@@ -334,7 +344,8 @@ th.sapphire-table__selectionCell:first-child {
 }
 
 .sapphire-table--interactive
-  .sapphire-table__row--selected.sapphire-table__row--active {
+  .sapphire-table__row--selected.sapphire-table__row--active,
+.sapphire-table__row--interactive.sapphire-table__row--selected.sapphire-table__row--active {
   --sapphire-table-row-bg-active: var(
     /* using hover color for active here is intentional, and to avoid too many color changes when selecting rows */
       --sapphire-semantic-color-background-action-select-secondary-hover
@@ -363,16 +374,60 @@ th.sapphire-table__selectionCell:first-child {
 }
 
 .sapphire-table__row-expand-button {
-  display: inline-flex; /* for transform to take effect */
-  transition: transform var(--sapphire-semantic-transitions-dynamic)
-    var(--sapphire-semantic-time-motion-quick);
+  display: inline-flex;
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+  margin-right: var(--sapphire-semantic-size-spacing-sm);
+}
+/* the following rule is not yet properly supported. When that's widely supported, we can remove the specific rules */
+.sapphire-table__row[aria-level] {
+  --sapphire-table-row-level: attr(aria-level, number);
+}
+.sapphire-table__row[aria-level='1'] {
+  --sapphire-table-row-level: 1;
+}
+.sapphire-table__row[aria-level='2'] {
+  --sapphire-table-row-level: 2;
+}
+.sapphire-table__row[aria-level='3'] {
+  --sapphire-table-row-level: 3;
+}
+.sapphire-table__row[aria-level='4'] {
+  --sapphire-table-row-level: 4;
+}
+.sapphire-table__row[aria-level='5'] {
+  --sapphire-table-row-level: 5;
 }
 
-.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 */
+/* tree column renders expand/collapse icon and is indented based on row level */
+.sapphire-table__cell--tree {
+  /* the unit of indentation for nested rows. */
+  /* Important: this should match the width+margin-right of .sapphire-table__row-expand-button for expandable/non-expandable siblings to align. */
+  --sapphire-table-indent-unit: calc(
+    var(--sapphire-semantic-size-icon-md) +
+      var(--sapphire-semantic-size-spacing-sm)
+  );
+  --sapphire-table-cell-indent-count: calc(var(--sapphire-table-row-level) - 1);
+  padding-left: calc(
+    var(--sapphire-table-cell-spacing-h) +
+      calc(
+        var(--sapphire-table-cell-indent-count) *
+          var(--sapphire-table-indent-unit)
+      )
+  );
+}
+.sapphire-table__cell--tree:not(:has(.sapphire-table__row-expand-button)) {
+  --sapphire-table-cell-indent-count: var(--sapphire-table-row-level);
 }
 
-.sapphire-table__row--expanded .sapphire-table__row-expand-button {
+.sapphire-table__row-expand-button svg {
+  transition: transform var(--sapphire-semantic-transitions-dynamic)
+    var(--sapphire-semantic-time-motion-quick);
+}
+.sapphire-table__row-expand-button--expanded svg {
   transform: rotate(180deg);
 }
 
@@ -505,12 +560,12 @@ tbody .sapphire-table__row--highlighted > .sapphire-table__cell:first-child {
   /* Making sure the button does not change the row height */
   margin-top: calc(-1 * var(--sapphire-semantic-size-spacing-2xs));
   margin-bottom: calc(-1 * var(--sapphire-semantic-size-spacing-2xs));
-  visibility: hidden;
+  opacity: 0;
   flex-shrink: 0;
 }
 
 .sapphire-table__row.is-hover .sapphire-table__edit-button,
 .sapphire-table__row:hover .sapphire-table__edit-button,
 .sapphire-table__row:focus-within .sapphire-table__edit-button {
-  visibility: visible;
+  opacity: 1;
 }

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

@@ -32,13 +32,16 @@ declare const styles: {
   readonly "sapphire-table__table--spacing-lg": string;
   readonly "sapphire-table__table--spacing-xl": string;
   readonly "sapphire-table__tfoot": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-table__row--selected": string;
   readonly "sapphire-table--interactive": string;
   readonly "sapphire-table__row--active": string;
-  readonly "sapphire-table__row--selected": string;
+  readonly "sapphire-table__row--interactive": string;
   readonly "sapphire-table__row--expanded": string;
   readonly "sapphire-table__row-expand-button": string;
+  readonly "sapphire-table__cell--tree": string;
+  readonly "sapphire-table__row-expand-button--expanded": string;
   readonly "sapphire-table--without-last-divider": string;
-  readonly "sapphire-table__row--interactive": string;
   readonly "sapphire-table__row--highlighted": string;
   readonly "sapphire-table__footer": string;
   readonly "sapphire-table__footer--sticky": string;

package/components/truncate-overflow/truncate-overflow.module.css

@@ -0,0 +1,7 @@
+.sapphire-truncate-overflow {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}

package/components/truncate-overflow/truncate-overflow.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "sapphire-truncate-overflow": string;
+};
+export = styles;
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "50.2.1",
+  "version": "51.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -47,7 +47,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.0.1",
+    "@danske/sapphire-react": "^5.17.2",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
@@ -70,5 +70,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^42.5.0"
   },
-  "gitHead": "468518f32524d0aa811f5d273a5c4d4a6b1dcf62"
+  "gitHead": "4903f9d28140b74e3e42467f790174d7f977f15d"
 }