@danske/sapphire-css 39.0.1 → 40.0.0

package/components/link/link.module.css

@@ -16,14 +16,13 @@
   display: inline;
 
   font-family: var(--sapphire-semantic-font-name-default);
-  font-size: var(--sapphire-semantic-size-font-text-lg);
-  line-height: var(--sapphire-semantic-size-line-height-md);
   cursor: pointer;
   border-radius: var(--sapphire-semantic-size-radius-xs);
 
   text-decoration-skip-ink: none;
 
   outline: none;
+  color: var(--sapphire-semantic-color-foreground-action-link-default);
 }
 
 /* Disabled state for all variants */
@@ -35,64 +34,35 @@
 /**
  * Skin rules
  */
-/* primary */
-.sapphire-link--primary {
-  color: var(--sapphire-semantic-color-content-link-primary-default);
-}
-.sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(
-    .is-active
-  ):not(.js-hover):hover,
-.sapphire-link--primary:not(:disabled):not(.is-disabled):not(:active):not(
-    .is-active
-  ).is-hover {
-  color: var(--sapphire-semantic-color-content-link-primary-hover);
+.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(
+    .is-disabled
+  ):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(
+    .is-disabled
+  ):not(:active):not(.is-active).is-hover {
+  color: var(--sapphire-semantic-color-foreground-action-link-hover);
 }
-.sapphire-link--primary.is-focus,
-.sapphire-link--primary:not(.js-focus):focus-visible {
-  color: var(--sapphire-semantic-color-content-link-primary-default);
+.sapphire-link.is-focus,
+.sapphire-link:not(.js-focus):focus-visible {
   text-decoration-style: double;
 }
-.sapphire-link--primary:not(:disabled):not(.is-disabled).is-active,
-.sapphire-link--primary:not(:disabled):not(.is-disabled):active,
-.sapphire-link--primary:not(:disabled):not(.is-disabled):focus-visible:active {
-  color: var(--sapphire-semantic-color-content-link-primary-active);
+.sapphire-link:not(.sapphire-link--secondary).is-focus,
+.sapphire-link:not(.sapphire-link--secondary):not(.js-focus):focus-visible {
+  color: var(--sapphire-semantic-color-foreground-action-link-default);
 }
-
-/* secondary */
-.sapphire-link--secondary {
-  color: var(--sapphire-semantic-color-content-link-secondary-default);
-}
-
-.sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(
-    .is-active
-  ):not(.js-hover):hover,
-.sapphire-link--secondary:not(:disabled):not(.is-disabled):not(:active):not(
-    .is-active
-  ).is-hover {
-  color: var(--sapphire-semantic-color-content-link-secondary-hover);
-}
-
-.sapphire-link--secondary.is-focus,
-.sapphire-link--secondary:not(.js-focus):focus-visible {
-  color: var(--sapphire-semantic-color-content-link-secondary-default);
-  text-decoration-style: double;
-}
-
-.sapphire-link--secondary:not(:disabled):not(.is-disabled).is-active,
-.sapphire-link--secondary:not(:disabled):not(.is-disabled):active,
-.sapphire-link--secondary:not(:disabled):not(
+.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(
+    .is-disabled
+  ).is-active,
+.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(
+    .is-disabled
+  ):active,
+.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-semantic-color-content-link-secondary-active);
-}
-
-/**
- * Size variations
- */
-.sapphire-link--md {
-  font-size: var(--sapphire-semantic-size-font-text-md);
+  color: var(--sapphire-semantic-color-foreground-action-link-active);
 }
 
-.sapphire-link--sm {
-  font-size: var(--sapphire-semantic-size-font-text-sm);
+/* secondary */
+.sapphire-link--secondary {
+  color: var(--sapphire-semantic-color-foreground-primary);
 }

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

@@ -1,15 +1,12 @@
 declare const styles: {
   readonly "sapphire-link": string;
   readonly "is-disabled": string;
-  readonly "sapphire-link--primary": string;
+  readonly "sapphire-link--secondary": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
-  readonly "sapphire-link--secondary": string;
-  readonly "sapphire-link--md": string;
-  readonly "sapphire-link--sm": string;
 };
 export = styles;
 

package/components/list/list.module.css

@@ -26,11 +26,9 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  padding: var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg);
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-default
-  );
+  padding: var(--sapphire-semantic-size-spacing-sm)
+    var(--sapphire-semantic-size-spacing-md);
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
   outline: none;
   font-family: var(--sapphire-semantic-font-name-default);
 }
@@ -74,12 +72,12 @@ instead of being applied on the list item itself  */
    * Same as outermost element (li) as this should control padding instead
    * if element is a (href prop has value) or button (action prop has value).
    */
-  padding: var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg);
+  padding: var(--sapphire-semantic-size-spacing-sm)
+    var(--sapphire-semantic-size-spacing-md);
 
   /* Counterstyling anything passed as custom content wrapper */
   text-decoration: none;
-  background-color: inherit;
+  background: inherit;
   color: inherit;
   font-family: inherit;
   font-size: inherit;
@@ -90,17 +88,8 @@ instead of being applied on the list item itself  */
 }
 
 .sapphire-list--negative-margin-self {
-  margin-left: calc(
-    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg) *
-      -1
-  );
-  width: calc(
-    100% +
-      (
-        var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg) *
-          2
-      )
-  );
+  margin-left: calc(var(--sapphire-semantic-size-spacing-md) * -1);
+  width: calc(100% + (var(--sapphire-semantic-size-spacing-md) * 2));
 }
 
 .sapphire-list__item--interactive:disabled,
@@ -122,7 +111,7 @@ instead of being applied on the list item itself  */
 */
 .sapphire-list__item--interactive:not(.is-focus, :not(.js-focus):focus),
 .sapphire-list__item:not(:has(.sapphire-list__item--interactive)) {
-  box-shadow: inset 0px -1px 0px 0px var(--sapphire-semantic-color-border-separator-default);
+  box-shadow: inset 0px -1px 0px 0px var(--sapphire-semantic-color-border-secondary);
 }
 /* For not virtualized list */
 .sapphire-list--without-last-divider:not(:has([role="presentation"] > [role="presentation"]))
@@ -170,9 +159,7 @@ instead of being applied on the list item itself  */
 .sapphire-list__item--interactive:not(.js-hover):not(
     [aria-disabled='true']
   ):not(:disabled):not(:active):hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
 /*
@@ -209,19 +196,19 @@ instead of being applied on the list item itself  */
 .sapphire-list__item-content-left {
   display: flex;
   align-items: center;
-  margin-right: var(--sapphire-semantic-size-spacing-30);
+  margin-right: var(--sapphire-semantic-size-spacing-sm);
   /* This was added to accommodate nowrap + hidden text overflow situations */
   min-width: 0;
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-list__item-content-right {
   display: flex;
   align-items: center;
   text-align: right;
-  margin-left: var(--sapphire-semantic-size-spacing-30);
-  color: var(--sapphire-semantic-color-content-default-primary);
-  gap: var(--sapphire-semantic-size-spacing-30);
+  margin-left: var(--sapphire-semantic-size-spacing-sm);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-list__item-text {
@@ -238,14 +225,14 @@ instead of being applied on the list item itself  */
 }
 
 .sapphire-list__item-text-primary {
-  color: var(--sapphire-semantic-color-content-default-primary);
+  color: var(--sapphire-semantic-color-foreground-primary);
   line-height: var(--sapphire-semantic-size-line-height-md);
-  font-size: var(--sapphire-semantic-size-font-text-lg);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-size: var(--sapphire-semantic-size-font-body-md);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
 }
 
 .sapphire-list__item-text-secondary {
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
   line-height: var(--sapphire-semantic-size-line-height-md);
-  font-size: var(--sapphire-semantic-size-font-text-md);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
 }

package/components/listbox/listbox.module.css

@@ -5,6 +5,15 @@
   list-style: none;
   outline: none;
   font-family: var(--sapphire-semantic-font-name-default);
+  /**
+   * spacing between container and list items
+   */
+  --sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);
+
+  /**
+   * gap between list items
+   */
+  --sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);
 
   /**
    * tldr; Please inspect the listbox without these adding props, it's easier
@@ -24,8 +33,7 @@
    */
 
   padding: calc(
-      var(--sapphire-semantic-size-spacing-10) -
-        var(--sapphire-semantic-size-spacing-5)
+      var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)
     )
     0;
 
@@ -50,9 +58,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sapphire-semantic-size-spacing-5)
-    var(--sapphire-semantic-size-spacing-10);
-  color: var(--sapphire-semantic-color-content-selection-unselected-default);
+  padding: var(--sapphire-listbox-items-gap)
+    var(--sapphire-listbox-spacing-outer);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
   outline: none;
   cursor: pointer;
   text-decoration: none;
@@ -66,17 +74,10 @@
   min-width: max-content;
 }
 
-.sapphire-listbox__item--danger {
-  color: var(--sapphire-semantic-color-content-action-danger-default);
-}
-
-.sapphire-listbox__item--selected {
-  color: var(--sapphire-semantic-color-content-selection-selected-default);
-}
-
-.sapphire-listbox__item--selected .sapphire-listbox__content {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-default
+.sapphire-listbox__item--danger,
+.sapphire-listbox__item--danger .sapphire-listbox__secondary-text {
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-default
   );
 }
 
@@ -88,58 +89,65 @@
    * 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-lg));
+  max-width: calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));
   display: grid;
   grid-auto-flow: column;
   align-items: center;
-  gap: var(--sapphire-semantic-size-spacing-30);
+  gap: var(--sapphire-semantic-size-spacing-xs);
   /*
-   * We want the left-side icon column to not take space if it's empty. 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.
+   * 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: auto 1fr var(--sapphire-semantic-size-icon-lg);
+  grid-template-columns: [left-icon] auto [text-content] 1fr [right-icon] auto;
   padding: calc(
-      var(--sapphire-semantic-size-spacing-30) -
-        var(--sapphire-semantic-size-spacing-5)
+      var(--sapphire-semantic-size-spacing-sm) -
+        var(--sapphire-semantic-size-spacing-4xs)
     )
-    var(--sapphire-semantic-size-spacing-30);
+    var(--sapphire-semantic-size-spacing-sm);
   border-radius: var(--sapphire-semantic-size-radius-sm);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
-
-  min-height: var(--sapphire-semantic-size-height-control-xs);
-}
-
-.sapphire-listbox--md .sapphire-listbox__content {
-  gap: var(--sapphire-semantic-size-spacing-25);
-  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-md);
-  padding: calc(
-      var(--sapphire-semantic-size-spacing-20) -
-        var(--sapphire-semantic-size-spacing-5)
-    )
-    var(--sapphire-semantic-size-spacing-25);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
 }
 
-.sapphire-listbox--sm .sapphire-listbox__content {
-  gap: var(--sapphire-semantic-size-spacing-20);
-  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-sm);
-  padding: calc(
-      var(--sapphire-semantic-size-spacing-10) -
-        var(--sapphire-semantic-size-spacing-5)
-    )
-    var(--sapphire-semantic-size-spacing-20);
+.sapphire-listbox--selection .sapphire-listbox__content {
+  /*
+   * 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
+ */
+  grid-template-columns: [left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto;
 }
 
 /* Icon content */
 .sapphire-listbox__icon {
   line-height: 0;
+  align-self: start;
+  /* 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)
+      ) / 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);
 }
 
@@ -147,40 +155,20 @@
  * When there is no icon before the content we want the content
  * to stretch 2 columns out of the 3.
  */
-.sapphire-listbox__text-container:first-child {
+.sapphire-listbox:not(.sapphire-listbox--selection)
+  .sapphire-listbox__text-container:first-child {
   grid-column: span 2;
 }
 
 .sapphire-listbox__primary-text {
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
-  font-size: var(--sapphire-semantic-size-font-text-lg);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
+  font-size: var(--sapphire-semantic-size-font-body-sm);
 }
 
 .sapphire-listbox__secondary-text {
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
-  font-size: var(--sapphire-semantic-size-font-text-md);
-}
-
-.sapphire-listbox--md .sapphire-listbox__primary-text {
-  font-size: var(--sapphire-semantic-size-font-text-md);
-}
-.sapphire-listbox--sm .sapphire-listbox__primary-text {
-  font-size: var(--sapphire-semantic-size-font-text-sm);
-}
-
-.sapphire-listbox--md .sapphire-listbox__secondary-text {
-  font-size: var(--sapphire-semantic-size-font-text-sm);
-}
-
-.sapphire-listbox--sm .sapphire-listbox__secondary-text {
-  font-size: var(--sapphire-semantic-size-font-text-sm);
-}
-
-.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(
-    .sapphire-listbox__item--selected
-  )
-  .sapphire-listbox__secondary-text {
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  font-size: var(--sapphire-semantic-size-font-body-xs);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-listbox__item.is-disabled {
@@ -194,42 +182,32 @@
 }
 
 .sapphire-listbox__section-header {
-  font-size: var(--sapphire-semantic-size-font-text-md);
-  color: var(--sapphire-semantic-color-content-default-secondary);
-  padding: var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-40)
-    var(--sapphire-semantic-size-spacing-20)
-    var(--sapphire-semantic-size-spacing-40);
-}
-
-.sapphire-listbox--md .sapphire-listbox__section-header {
-  font-size: var(--sapphire-semantic-size-font-text-sm);
-  padding: var(--sapphire-semantic-size-spacing-25)
-    var(--sapphire-global-size-generic-35)
-    var(--sapphire-global-size-generic-15)
-    var(--sapphire-global-size-generic-35);
-}
-
-.sapphire-listbox--sm .sapphire-listbox__section-header {
-  font-size: var(--sapphire-semantic-size-font-text-sm);
-  padding: var(--sapphire-semantic-size-spacing-20)
-    var(--sapphire-semantic-size-spacing-30)
-    var(--sapphire-semantic-size-spacing-10)
-    var(--sapphire-semantic-size-spacing-30);
+  font-size: var(--sapphire-semantic-size-font-body-xs);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  padding: calc(
+      var(--sapphire-semantic-size-spacing-md) -
+        var(--sapphire-listbox-items-gap)
+    )
+    calc(
+      var(--sapphire-semantic-size-spacing-sm) +
+        var(--sapphire-listbox-spacing-outer)
+    )
+    var(--sapphire-semantic-size-spacing-3xs)
+    calc(
+      var(--sapphire-semantic-size-spacing-sm) +
+        var(--sapphire-listbox-spacing-outer)
+    );
 }
 
 .sapphire-listbox__separator {
   height: var(--sapphire-semantic-size-border-sm);
-  width: 100%;
-  background: var(--sapphire-semantic-color-border-separator-default);
-  margin-top: calc(
-    var(--sapphire-semantic-size-spacing-10) -
-      var(--sapphire-semantic-size-spacing-5)
-  );
-  margin-bottom: calc(
-    var(--sapphire-semantic-size-spacing-10) -
-      var(--sapphire-semantic-size-spacing-5)
-  );
+  background: var(--sapphire-semantic-color-border-secondary);
+  margin: var(--sapphire-listbox-items-gap)
+    calc(
+      var(--sapphire-semantic-size-spacing-sm) +
+        var(--sapphire-listbox-spacing-outer)
+    );
 }
 
 /* Focus */
@@ -247,10 +225,8 @@
   .sapphire-listbox__content,
 .sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover
   .sapphire-listbox__content {
-  color: var(--sapphire-semantic-color-content-selection-unselected-hover);
-  background-color: var(
-    --sapphire-semantic-color-background-selection-unselected-hover
-  );
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
@@ -259,45 +235,47 @@
     .is-active
   ):hover
   .sapphire-listbox__content {
-  color: var(--sapphire-semantic-color-content-action-danger-default);
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-default
+  background: var(
+    --sapphire-semantic-color-background-action-danger-tertiary-hover
   );
 }
 
-.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover
+.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
   .sapphire-listbox__content,
-.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(
-    .js-hover
+.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
+  .sapphire-listbox__secondary-text,
+.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(
+    .is-active
   ):hover
-  .sapphire-listbox__content {
-  color: var(--sapphire-semantic-color-content-selection-selected-hover);
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-hover
+  .sapphire-listbox__content,
+.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(
+    .is-active
+  ):hover
+  .sapphire-listbox__secondary-text {
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-hover
   );
 }
 
 /* Active */
 
 .sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content {
-  color: var(--sapphire-semantic-color-content-selection-unselected-active);
-  background-color: var(
-    --sapphire-semantic-color-background-selection-unselected-active
-  );
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
 }
 
 .sapphire-listbox__item--danger:not(.is-disabled).is-active
   .sapphire-listbox__content {
-  color: var(--sapphire-semantic-color-content-action-danger-active);
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-hover
+  background: var(
+    --sapphire-semantic-color-background-action-danger-tertiary-active
   );
 }
 
-.sapphire-listbox__item--selected:not(.is-disabled).is-active
-  .sapphire-listbox__content {
-  color: var(--sapphire-semantic-color-content-selection-selected-active);
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-active
+.sapphire-listbox__item--danger:not(.is-disabled).is-active
+  .sapphire-listbox__content,
+.sapphire-listbox__item--danger:not(.is-disabled).is-active
+  .sapphire-listbox__secondary-text {
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-active
   );
 }

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

@@ -2,14 +2,12 @@ declare const styles: {
   readonly "sapphire-listbox": string;
   readonly "sapphire-listbox__item": string;
   readonly "sapphire-listbox__item--danger": string;
-  readonly "sapphire-listbox__item--selected": string;
+  readonly "sapphire-listbox__secondary-text": string;
   readonly "sapphire-listbox__content": string;
-  readonly "sapphire-listbox--md": string;
-  readonly "sapphire-listbox--sm": string;
+  readonly "sapphire-listbox--selection": string;
   readonly "sapphire-listbox__icon": string;
   readonly "sapphire-listbox__text-container": string;
   readonly "sapphire-listbox__primary-text": string;
-  readonly "sapphire-listbox__secondary-text": string;
   readonly "is-disabled": string;
   readonly "sapphire-listbox__section": string;
   readonly "sapphire-listbox__section-header": string;