@danske/sapphire-css 50.2.1 → 52.2.0

package/components/searchField/searchField.module.css

@@ -23,6 +23,7 @@
   color: var(--sapphire-semantic-color-foreground-primary);
   font-size: var(--sapphire-semantic-size-font-control-lg);
   height: var(--sapphire-semantic-size-height-control-lg);
+  position: relative;
   background: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
@@ -116,19 +117,17 @@
    * Css only solution to:
    *  - hide the clear button when the input is empty.
    *  - Apply a gentle transition on appearance/disappearance
+   * The button's space is kept reserved (only opacity/scale animate) so the
+   * input's flex space doesn't shift when the button appears/disappears.
    * IMPORTANT: there must be a placeholder provided for :placeholder-shown to
    * work. " " can be set as placeholder as a fallback, or
    * sapphire-search-field__input--empty class can be used instead.
    */
   opacity: 0;
-  width: 0; /* To not cover the input when invisible. */
   transform: scale(0.85);
+  cursor: text; /* cursor: text is used to avoid the button's hover effect when the input is empty */
   transition: transform var(--sapphire-semantic-time-fade-quick),
-    opacity var(--sapphire-semantic-time-fade-quick),
-    width var(--sapphire-semantic-time-fade-quick)
-      /* Zero duration will kill the transition */
-      var(--sapphire-semantic-time-fade-quick)
-      /* Delaying to prevent width transition*/;
+    opacity var(--sapphire-semantic-time-fade-quick);
 }
 
 /*
@@ -166,3 +165,29 @@
 .sapphire-search-field--md .sapphire-search-field__icon {
   margin-left: var(--sapphire-semantic-size-spacing-sm);
 }
+
+/**
+ * Small Size
+ */
+.sapphire-search-field--sm {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  border-radius: var(--sapphire-semantic-size-height-control-sm);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__input {
+  padding-left: var(--sapphire-semantic-size-height-control-sm);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__button {
+  height: var(--sapphire-semantic-size-height-control-sm);
+  width: var(--sapphire-semantic-size-height-control-sm);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__input:last-child {
+  padding-right: var(--sapphire-semantic-size-spacing-xs);
+}
+
+.sapphire-search-field--sm .sapphire-search-field__icon {
+  margin-left: var(--sapphire-semantic-size-spacing-xs);
+}

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

@@ -10,6 +10,7 @@ declare const styles: {
   readonly "sapphire-search-field__input--empty": string;
   readonly "sapphire-search-field__icon": string;
   readonly "sapphire-search-field--md": string;
+  readonly "sapphire-search-field--sm": string;
 };
 export = styles;
 

package/components/select/select.module.css

@@ -24,17 +24,16 @@
   height: var(--sapphire-semantic-size-height-control-lg);
   box-sizing: border-box;
   cursor: pointer;
-  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0
-    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
   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);
 }
@@ -46,6 +45,14 @@
   gap: var(--sapphire-semantic-size-spacing-xs);
 }
 
+.sapphire-select--sm .sapphire-select__button {
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+  height: var(--sapphire-semantic-size-height-control-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-sm) 0
+    var(--sapphire-semantic-size-spacing-control-horizontal-md);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}
+
 .sapphire-select__value {
   flex: 1 0 0;
   min-width: 0;
@@ -61,6 +68,10 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+.sapphire-select--sm .sapphire-select__value {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+}
+
 .sapphire-select__placeholder {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -81,6 +92,11 @@
   height: var(--sapphire-semantic-size-icon-sm);
 }
 
+.sapphire-select--sm .sapphire-select__icon-container {
+  width: var(--sapphire-semantic-size-icon-sm);
+  height: var(--sapphire-semantic-size-icon-sm);
+}
+
 /**
  * Prefix
  */
@@ -91,15 +107,18 @@
   color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
-.sapphire-select:not(.sapphire-select--md)
-  .sapphire-select__button:has(.sapphire-select__prefix) {
-  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+.sapphire-select--sm .sapphire-select__button:has(.sapphire-select__prefix) {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-sm);
 }
 
 .sapphire-select--md .sapphire-select__prefix {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+.sapphire-select--sm .sapphire-select__prefix {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+}
+
 /*
  * Search input. If visually-hidden styles are not inline,
  * data-hidden="true" can be added when the input is visually hidden,
@@ -123,12 +142,41 @@
   z-index: 1;
 }
 
+/*
+ * iOS keyboard trigger.
+ *
+ * An invisible <label htmlFor> overlay (a sibling of __button) that covers the
+ * trigger while the searchable select is closed. On touch devices, tapping it
+ * forwards a trusted focus to the search input, which is the only way to make
+ * iOS Safari open the software keyboard — the trigger button itself cannot,
+ * because React Aria's usePress defers onPress to the click event and Sapphire's
+ * useButton (usePreventTouchEnd) calls preventDefault() on the trigger touchend.
+ *
+ * pointer-events is disabled by default so mouse/keyboard users interact with the
+ * trigger button exactly as before (hover, press, toggle). It is only enabled on
+ * touch devices, where the keyboard problem exists.
+ */
+.sapphire-select__ios-keyboard-trigger {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .sapphire-select__ios-keyboard-trigger {
+    pointer-events: auto;
+  }
+}
+
 /**
  * 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 +190,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 +205,9 @@
  * 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);
-}
-
-.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button {
-  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
-    var(--sapphire-semantic-color-border-negative-default);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
 }
 
 .sapphire-select.is-disabled .sapphire-select__button {

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

@@ -2,12 +2,14 @@ declare const styles: {
   readonly "sapphire-select": string;
   readonly "sapphire-select__button": string;
   readonly "sapphire-select--md": string;
+  readonly "sapphire-select--sm": string;
   readonly "sapphire-select__value": string;
   readonly "sapphire-select__placeholder": string;
   readonly "sapphire-select__icon-container": string;
   readonly "sapphire-select__prefix": string;
   readonly "sapphire-select__search-input": string;
   readonly "sapphire-select__native-select": string;
+  readonly "sapphire-select__ios-keyboard-trigger": string;
   readonly "sapphire-select--error": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;

package/components/slider/slider.module.css

@@ -4,12 +4,11 @@
   flex-direction: column;
   gap: var(--sapphire-semantic-size-spacing-xs);
   justify-content: center;
-  width: fit-content;
 }
 
 .sapphire-slider__track {
   position: relative;
-  width: var(--sapphire-semantic-size-width-field);
+  width: 100%;
   height: var(--sapphire-semantic-size-height-control-2xs);
   touch-action: none;
 }
@@ -22,7 +21,7 @@
   backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
   height: var(--sapphire-global-size-generic-10);
   border-radius: var(--sapphire-semantic-size-radius-sm);
-  width: var(--sapphire-semantic-size-width-field);
+  width: 100%;
   top: 50%;
   transform: translateY(-50%);
 }

package/components/switch/switch.module.css

@@ -66,6 +66,12 @@
   line-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
+.sapphire-switch--sm .sapphire-switch-label {
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  line-height: var(--sapphire-semantic-size-height-control-2xs);
+}
+
 /* focus */
 .sapphire-switch:not(.js-focus)
   .sapphire-switch-input:focus-visible
@@ -85,8 +91,9 @@
   width: var(--sapphire-global-size-generic-110);
   box-shadow: inset 0 0 0 var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-default);
-  transition: box-shadow var(--sapphire-semantic-time-motion-quick)
-    var(--sapphire-semantic-transitions-fade);
+  transition-property: background, box-shadow;
+  transition-duration: var(--sapphire-semantic-time-motion-quick);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   height: var(--sapphire-semantic-size-height-control-xs);
   border-radius: calc(var(--sapphire-semantic-size-height-control-xs) / 2);
   /* Prevents the component from shrinking */
@@ -162,7 +169,7 @@
   padding: var(--sapphire-global-size-static-5);
 
   height: 100%;
-  aspect-ratio: 1/1;
+  width: var(--sapphire-semantic-size-height-control-xs);
   border-radius: 50%;
   background-color: var(--sapphire-semantic-color-border-field-default);
   background-clip: content-box;
@@ -202,17 +209,41 @@
 }
 
 .sapphire-switch--md .sapphire-switch-track {
-  width: var(--sapphire-global-size-generic-80);
+  width: 2.25rem /* 36px - do we want a token for this? */;
   height: var(--sapphire-semantic-size-height-control-2xs);
   border-radius: calc(var(--sapphire-semantic-size-height-control-2xs) / 2);
 }
 
+.sapphire-switch--md .sapphire-switch-track::after {
+  width: var(--sapphire-semantic-size-height-control-2xs);
+}
+
 .sapphire-switch--md
   .sapphire-switch-input:checked
   ~ .sapphire-switch-track::after {
   left: calc(100% - var(--sapphire-semantic-size-height-control-2xs));
 }
 
+.sapphire-switch--sm .sapphire-switch-track {
+  width: 1.875rem; /* 30px - do we want a token for this? */
+  height: var(--sapphire-semantic-size-height-box-md);
+  border-radius: calc(var(--sapphire-semantic-size-height-box-md) / 2);
+}
+
+.sapphire-switch--sm .sapphire-switch-track::after {
+  width: var(--sapphire-semantic-size-height-box-md);
+}
+
+.sapphire-switch--sm
+  .sapphire-switch-input:checked
+  ~ .sapphire-switch-track::after {
+  left: calc(100% - var(--sapphire-semantic-size-height-box-md));
+}
+
+.sapphire-switch--sm {
+  gap: var(--sapphire-semantic-size-spacing-xs);
+}
+
 /* Note */
 .sapphire-switch__note {
   display: block;
@@ -231,8 +262,11 @@
 .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)
-  );
+  margin-left: calc(var(--sapphire-semantic-size-spacing-sm) + 2.25rem);
+}
+
+.sapphire-switch__note--sm {
+  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) + 1.875rem);
 }

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

@@ -4,6 +4,7 @@ declare const styles: {
   readonly "sapphire-switch-input": string;
   readonly "sapphire-switch-label": string;
   readonly "sapphire-switch--md": string;
+  readonly "sapphire-switch--sm": string;
   readonly "js-focus": string;
   readonly "sapphire-switch-track": string;
   readonly "is-focus": string;
@@ -12,6 +13,7 @@ declare const styles: {
   readonly "is-hover": string;
   readonly "sapphire-switch__note": string;
   readonly "sapphire-switch__note--md": string;
+  readonly "sapphire-switch__note--sm": string;
 };
 export = styles;
 

package/components/table/table.module.css

@@ -19,6 +19,11 @@
   background-color: var(--sapphire-semantic-color-background-surface);
 }
 
+.sapphire-table--negative-margin-self {
+  margin-left: calc(var(--sapphire-semantic-size-spacing-sm) * -1);
+  width: calc(100% + (var(--sapphire-semantic-size-spacing-sm) * 2));
+}
+
 .sapphire-table--overflow {
   /*
    * If the "sapphire-table" has a set height the table needs to overflow.
@@ -31,6 +36,7 @@
   border-spacing: 0;
   width: 100%;
   table-layout: auto;
+  --sapphire-table-side-padding: var(--sapphire-table-cell-spacing-h);
 }
 
 .sapphire-table__table--fixed-layout {
@@ -104,6 +110,14 @@
   width: 100%;
 }
 
+.sapphire-table__headCell:first-child .sapphire-table__headCell_container {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
+.sapphire-table__headCell:last-child .sapphire-table__headCell_container {
+  padding-right: var(--sapphire-table-side-padding);
+}
+
 .sapphire-table__cell--alignRight .sapphire-table__headCell_container {
   justify-content: flex-end;
 }
@@ -173,6 +187,7 @@
 
 .sapphire-table__headCell.sapphire-table__headCell--sortable {
   cursor: pointer;
+  user-select: none;
 }
 
 .sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover
@@ -216,6 +231,14 @@
     var(--sapphire-table-cell-spacing-h);
 }
 
+.sapphire-table__cell:not(.sapphire-table__cell--tree):first-child {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
+.sapphire-table__cell:not(.sapphire-table__cell--tree):last-child {
+  padding-right: var(--sapphire-table-side-padding);
+}
+
 .sapphire-table__cell-contents {
   display: block;
   width: 100%;
@@ -223,6 +246,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,12 +285,26 @@
   padding: var(--sapphire-table-cell-spacing-v)
     var(--sapphire-table-cell-spacing-h);
   box-sizing: content-box;
+  text-align: center;
 }
+
+.sapphire-table__selectionCell:first-child {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
+.sapphire-table__selectionCell:last-child {
+  padding-right: var(--sapphire-table-side-padding);
+}
+
 .sapphire-table__head .sapphire-table__selectionCell {
   padding: var(--sapphire-semantic-size-spacing-2xs)
     var(--sapphire-table-cell-spacing-h);
 }
 
+.sapphire-table__head .sapphire-table__selectionCell:first-child {
+  padding-left: var(--sapphire-table-side-padding);
+}
+
 td.sapphire-table__selectionCell,
 th.sapphire-table__selectionCell {
   width: var(--sapphire-global-size-generic-50);
@@ -326,7 +364,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 .sapphire-table__cell,
+.sapphire-table__row.is-disabled .sapphire-table__selectionCell {
+  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 +379,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 +409,68 @@ 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 */
+.sapphire-table__headCell.sapphire-table__cell--tree {
+  --sapphire-table-row-level: 1;
+}
+.sapphire-table__headCell.sapphire-table__cell--tree
+  .sapphire-table__headCell_container {
+  padding-left: 0;
 }
 
-.sapphire-table__row--expanded .sapphire-table__row-expand-button {
+/* 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-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 +603,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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-table": string;
+  readonly "sapphire-table--negative-margin-self": string;
   readonly "sapphire-table--overflow": string;
   readonly "sapphire-table__table": string;
   readonly "sapphire-table__table--fixed-layout": string;
@@ -25,6 +26,7 @@ declare const styles: {
   readonly "sapphire-table__headCell__text": string;
   readonly "sapphire-table__headCell__icon": string;
   readonly "sapphire-table__body": string;
+  readonly "sapphire-table__cell--tree": string;
   readonly "sapphire-table__cell-contents": string;
   readonly "sapphire-table__cell--ellipsed": string;
   readonly "sapphire-table__headCell_content--ellipsed": string;
@@ -32,13 +34,15 @@ 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--interactive": string;
   readonly "sapphire-table__row--active": string;
+  readonly "sapphire-table__row--interactive": string;
   readonly "sapphire-table__row--selected": string;
   readonly "sapphire-table__row--expanded": string;
   readonly "sapphire-table__row-expand-button": 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;