@danske/sapphire-css 16.3.0 → 25.1.0

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

@@ -3,13 +3,17 @@ declare const styles: {
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
-  readonly "sapphire-icon-button--primary": string;
+  readonly "sapphire-icon-button--primary-fill": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "sapphire-icon-button--secondary": string;
-  readonly "sapphire-icon-button--neutral": string;
-  readonly "sapphire-icon-button--danger": string;
+  readonly "sapphire-icon-button--secondary-fill": string;
+  readonly "sapphire-icon-button--secondary-surface": string;
+  readonly "sapphire-icon-button--secondary-ghost": string;
+  readonly "sapphire-icon-button--tertiary-fill": string;
+  readonly "sapphire-icon-button--tertiary-ghost": string;
+  readonly "sapphire-icon-button--danger-fill": string;
+  readonly "sapphire-icon-button--danger-ghost": string;
   readonly "sapphire-icon-button__icon": string;
   readonly "sapphire-icon-button--large": string;
   readonly "sapphire-icon-button--small": string;

package/components/label/label.module.css

@@ -0,0 +1,29 @@
+.sapphire-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--sapphire-label-size-height-l);
+  line-height: var(--sapphire-label-size-line-height-l);
+  font-size: var(--sapphire-label-size-font-l);
+  gap: var(--sapphire-label-size-spacing-horizontal);
+}
+
+.sapphire-label--medium {
+  line-height: var(--sapphire-label-size-line-height-m);
+  font-size: var(--sapphire-label-size-font-m);
+  min-height: var(--sapphire-label-size-height-m);
+}
+
+.sapphire-label__text {
+  font-weight: var(--sapphire-label-size-font-weight);
+  color: var(--sapphire-label-color-text);
+}
+
+.sapphire-label__required-indicator {
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A");
+  width: 8px; /* Hard coded, since it's linked to the svg above */
+  height: 8px; /* Hard coded, since it's linked to the svg above */
+}
+
+.sapphire-label__optional-indicator {
+  color: var(--sapphire-label-color-necessity-indicator);
+}

package/components/link/link.module.css

@@ -7,29 +7,87 @@
    * These do not do anything except in webkit browsers & firefox on OSX.
    *
    * For more details see:
-   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Flink%2Flink.module.css&discussionId=1507702&_a=files
    * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
+  /** 
+   * For making line-height take effect in all scenarios
+   * Otherwise in some cases the link can be set to display: inline
+   * by the browser which would not make line-height apply
+   * and focus styles would eg. be too cramped
+   */
+  display: inline-block;
+
   font-family: var(--sapphire-link-font-name);
-  color: var(--sapphire-link-color-text-default);
-  text-decoration: none;
+  font-size: var(--sapphire-link-size-font-l);
+  line-height: var(--sapphire-link-size-line-height);
   cursor: pointer;
   outline: 0;
-  text-decoration: underline;
+  border-radius: var(--sapphire-link-size-radius);
 }
 
-.sapphire-link:active .sapphire-link.is-active {
-  color: var(--sapphire-link-color-text-active);
+/* Disabled state for all variants */
+.sapphire-link.is-disabled {
+  opacity: var(--sapphire-link-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/**
+ * Skin rules
+ */
+/* primary */
+.sapphire-link--primary {
+  color: var(--sapphire-link-color-content-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-link-color-content-primary-hover);
 }
-.sapphire-link:not(.js-focus):focus-visible,
-.sapphire-link.is-focus {
-  color: var(--sapphire-link-color-text-default);
-  outline: 2px solid var(--sapphire-link-color-focus-ring);
+.sapphire-link--primary.is-focus,
+.sapphire-link--primary:not(.js-focus):focus-visible {
+  color: var(--sapphire-link-color-content-primary-default);
+  outline: var(--sapphire-link-size-focus-ring-border) solid
+    var(--sapphire-link-color-focus-ring);
 }
-.sapphire-link:not(.js-hover):hover,
-.sapphire-link.is-hover {
-  color: var(--sapphire-link-color-text-hover);
+.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-link-color-content-primary-active);
+}
+
+/* secondary */
+.sapphire-link--secondary {
+  color: var(--sapphire-link-color-content-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-link-color-content-secondary-hover);
+}
+
+.sapphire-link--secondary.is-focus,
+.sapphire-link--secondary:not(.js-focus):focus-visible {
+  color: var(--sapphire-link-color-content-secondary-default);
+  outline: var(--sapphire-link-size-focus-ring-border) solid
+    var(--sapphire-link-color-focus-ring);
+}
+
+.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(.is-disabled):focus-visible:active {
+  color: var(--sapphire-link-color-content-secondary-active);
+}
+
+/**
+ * Size variations
+ */
+.sapphire-link--medium {
+  font-size: var(--sapphire-link-size-font-m);
+}
+
+.sapphire-link--small {
+  font-size: var(--sapphire-link-size-font-s);
 }

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

@@ -1,10 +1,15 @@
 declare const styles: {
   readonly "sapphire-link": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-link--primary": string;
   readonly "is-active": string;
-  readonly "js-focus": string;
-  readonly "is-focus": 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--medium": string;
+  readonly "sapphire-link--small": string;
 };
 export = styles;
 

package/components/list/list.module.css

@@ -30,13 +30,12 @@
   background-color: var(--sapphire-list-color-background-item-default);
 }
 
-/* pure css approach, not properly supported in all browsers at the moment */
 .sapphire-list__item:has(.sapphire-list__item-content-wrapper) {
   padding: 0;
 }
-/* fallback js-based solution */
-.sapphire-list__item--content-wrapped {
-  padding: 0;
+
+.sapphire-list__item:focus-within {
+  z-index: 1;
 }
 
 .sapphire-list__item-content-wrapper {
@@ -62,35 +61,62 @@
   text-align: inherit;
   align-items: inherit;
 }
+
+.sapphire-list--negative-margin-self {
+  margin-left: calc(var(--sapphire-list-spacing-item-horizontal-default) * -1);
+  width: calc(
+    100% + (var(--sapphire-list-spacing-item-horizontal-default) * 2)
+  );
+}
+
 .sapphire-list__item-content-wrapper:disabled,
 .sapphire-list__item-content-wrapper[aria-disabled='true'] {
-  cursor: inherit;
-  /* TODO: Ask designers to provide disabled styles and apply them here */
+  cursor: not-allowed;
 }
 
-.sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus-visible)::after,
-.sapphire-list__item:not(.sapphire-list__item--content-wrapped)::after {
-  content: '';
-  position: absolute;
-  height: var(--sapphire-list-size-width-border-item-default);
-  background: var(--sapphire-list-color-border-item-default);
-  bottom: 0;
-  left: var(--sapphire-list-spacing-item-horizontal-default);
-  right: var(--sapphire-list-spacing-item-horizontal-default);
+.sapphire-list__item-content-wrapper:disabled > *,
+.sapphire-list__item-content-wrapper[aria-disabled='true'] > * {
+  opacity: var(--sapphire-list-opacity-disabled);
 }
 
+/* 
+  Only render a divider if
+  - item isn't last child of without-last-divider list
+  - next item is focused (as next item's top box-shadow will act as divider) either by
+    - parent item of item-content-wrapper not having a sibling with a focused child item-content-wrapper
+    - sibling of a list item without a child item-content-wrapper not having a focused child item-content-wrapper
+  - item-content-wrapper is not focused itself
+
+  Note that using box-shadow both for divider and focus styling complicates the selectors 
+  as we for instance have to exclude the focus states when adding the divider.
+*/
+.sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),
+.sapphire-list__item:not(:has(.sapphire-list__item-content-wrapper)) {
+  box-shadow: inset 0px -1px 0px 0px var(--sapphire-list-color-border-item-default);
+}
 .sapphire-list--without-last-divider
   .sapphire-list__item:last-child
-  .sapphire-list__item-content-wrapper::after,
-.sapphire-list--without-last-divider .sapphire-list__item:last-child::after {
-  height: 0;
+  .sapphire-list__item-content-wrapper:not(.is-focus):not(:focus),
+.sapphire-list--without-last-divider .sapphire-list__item:last-child,
+.sapphire-list__item:has(+ .sapphire-list__item
+    > .sapphire-list__item-content-wrapper.is-focus)
+  > .sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),
+.sapphire-list__item:has(+ .sapphire-list__item
+    > .sapphire-list__item-content-wrapper:not(.js-focus):focus)
+  > .sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus),
+.sapphire-list__item:has(+ .sapphire-list__item
+    > .sapphire-list__item-content-wrapper.is-focus),
+.sapphire-list__item:has(+ .sapphire-list__item
+    > .sapphire-list__item-content-wrapper:not(.js-focus):focus) {
+  box-shadow: none;
 }
 
 /*
  * Hover
  */
-.sapphire-list__item-content-wrapper.is-hover,
-.sapphire-list__item-content-wrapper:not(.js-hover):not([aria-disabled='true']):not(:disabled):hover {
+.sapphire-list .sapphire-list__item-content-wrapper.is-hover,
+.sapphire-list
+  .sapphire-list__item-content-wrapper:not(.js-hover):not([aria-disabled='true']):not(:disabled):hover {
   background-color: var(--sapphire-list-color-background-item-hover);
 }
 
@@ -109,7 +135,7 @@
     var(--sapphire-list-size-width-border-item-focus)
     var(--sapphire-list-color-border-item-focus);
   border: 0;
-  background-color: var(--sapphire-list-color-background-item-focus);
+  border-radius: var(--sapphire-list-size-radius);
 }
 
 .sapphire-list__item-content-left {

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

@@ -2,7 +2,7 @@ declare const styles: {
   readonly "sapphire-list": string;
   readonly "sapphire-list__item": string;
   readonly "sapphire-list__item-content-wrapper": string;
-  readonly "sapphire-list__item--content-wrapped": string;
+  readonly "sapphire-list--negative-margin-self": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
   readonly "sapphire-list--without-last-divider": string;

package/components/listbox/listbox.module.css

@@ -82,24 +82,48 @@
   display: grid;
   grid-auto-flow: column;
   align-items: center;
-  gap: var(--sapphire-listbox-size-spacing-inner-horizontal);
+  gap: var(--sapphire-listbox-size-spacing-inner-horizontal-l);
   /*
    * 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.
    */
-  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon);
-  padding: var(--sapphire-listbox-size-spacing-inner-vertical)
-    var(--sapphire-listbox-size-spacing-inner-horizontal);
+  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon-l);
+  padding: calc(
+      var(--sapphire-listbox-size-spacing-inner-vertical-l) -
+        var(--sapphire-listbox-size-spacing-outer-vertical)
+    )
+    var(--sapphire-listbox-size-spacing-inner-horizontal-l);
   border-radius: var(--sapphire-listbox-size-radius-item);
   transition-property: opacity, background-color, color;
   transition-duration: var(--sapphire-listbox-time-transition);
   transition-timing-function: ease-in-out;
+
+  min-height: var(--sapphire-listbox-size-height-min-height);
 }
 
-/* Icon content */
+.sapphire-listbox--medium .sapphire-listbox__content {
+  gap: var(--sapphire-listbox-size-spacing-inner-horizontal-m);
+  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon-m);
+  padding: calc(
+      var(--sapphire-listbox-size-spacing-inner-vertical-m) -
+        var(--sapphire-listbox-size-spacing-outer-vertical)
+    )
+    var(--sapphire-listbox-size-spacing-inner-horizontal-m);
+}
 
+.sapphire-listbox--small .sapphire-listbox__content {
+  gap: var(--sapphire-listbox-size-spacing-inner-horizontal-s);
+  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon-s);
+  padding: calc(
+      var(--sapphire-listbox-size-spacing-inner-vertical-s) -
+        var(--sapphire-listbox-size-spacing-outer-vertical)
+    )
+    var(--sapphire-listbox-size-spacing-inner-horizontal-s);
+}
+
+/* Icon content */
 .sapphire-listbox__icon {
   line-height: 0;
 }
@@ -120,12 +144,27 @@
 
 .sapphire-listbox__primary-text {
   font-weight: var(--sapphire-listbox-font-weight-primary);
-  font-size: var(--sapphire-listbox-size-font-primary);
+  font-size: var(--sapphire-listbox-size-font-primary-l);
 }
 
 .sapphire-listbox__secondary-text {
   font-weight: var(--sapphire-listbox-font-weight-secondary);
-  font-size: var(--sapphire-listbox-size-font-secondary);
+  font-size: var(--sapphire-listbox-size-font-secondary-l);
+}
+
+.sapphire-listbox--medium .sapphire-listbox__primary-text {
+  font-size: var(--sapphire-listbox-size-font-primary-m);
+}
+.sapphire-listbox--small .sapphire-listbox__primary-text {
+  font-size: var(--sapphire-listbox-size-font-primary-s);
+}
+
+.sapphire-listbox--medium .sapphire-listbox__secondary-text {
+  font-size: var(--sapphire-listbox-size-font-secondary-m);
+}
+
+.sapphire-listbox--small .sapphire-listbox__secondary-text {
+  font-size: var(--sapphire-listbox-size-font-secondary-s);
 }
 
 .sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected)
@@ -168,24 +207,25 @@
 
 /* Hover */
 
-.sapphire-listbox__item:not(.is-disabled).is-hover .sapphire-listbox__content,
-.sapphire-listbox__item:not(.is-disabled):not(.js-hover):hover
+.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active)
+  .sapphire-listbox__content,
+.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover
   .sapphire-listbox__content {
   color: var(--sapphire-listbox-color-content-normal-primary-hover);
   background-color: var(--sapphire-listbox-color-background-normal-hover);
 }
 
-.sapphire-listbox__item--danger:not(.is-disabled).is-hover
+.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover
   .sapphire-listbox__content,
-.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):hover
+.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover
   .sapphire-listbox__content {
   color: var(--sapphire-listbox-color-content-danger-hover);
   background-color: var(--sapphire-listbox-color-background-danger-hover);
 }
 
-.sapphire-listbox__item--selected:not(.is-disabled).is-hover
+.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover
   .sapphire-listbox__content,
-.sapphire-listbox__item--selected:not(.is-disabled):not(.js-hover):hover
+.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover
   .sapphire-listbox__content {
   color: var(--sapphire-listbox-color-content-selected-hover);
   background-color: var(--sapphire-listbox-color-background-selected-hover);

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

@@ -4,6 +4,8 @@ declare const styles: {
   readonly "sapphire-listbox__item--danger": string;
   readonly "sapphire-listbox__item--selected": string;
   readonly "sapphire-listbox__content": string;
+  readonly "sapphire-listbox--medium": string;
+  readonly "sapphire-listbox--small": string;
   readonly "sapphire-listbox__icon": string;
   readonly "sapphire-listbox__text-container": string;
   readonly "sapphire-listbox__primary-text": string;
@@ -14,8 +16,8 @@ declare const styles: {
   readonly "is-focus": string;
   readonly "js-focus": string;
   readonly "is-hover": string;
-  readonly "js-hover": string;
   readonly "is-active": string;
+  readonly "js-hover": string;
 };
 export = styles;
 

package/components/notificationBadge/notificationBadge.module.css

@@ -0,0 +1,126 @@
+@keyframes pop-in {
+  0% {
+    transform: scale(0) translate(50%, -50%);
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1) translate(50%, -50%);
+  }
+}
+
+@keyframes pop-out {
+  0% {
+    transform: scale(1) translate(50%, -50%);
+  }
+
+  75% {
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(0) translate(50%, -50%);
+    opacity: 0;
+    display: none;
+  }
+}
+
+.sapphire-notification-badge {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--sapphire-notification-badge-color-content-default);
+  font-family: var(--sapphire-notification-badge-font-name);
+  font-weight: var(--sapphire-notification-badge-font-weight);
+  box-sizing: border-box;
+  font-style: normal;
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-notification-badge--pop-in {
+  animation: pop-in var(--sapphire-notification-badge-time-transition)
+    cubic-bezier(0.55, -0.49, 0.39, 1.49);
+}
+
+.sapphire-notification-badge--pop-out {
+  animation: pop-out var(--sapphire-notification-badge-time-transition) forwards;
+}
+
+/* Sizes */
+.sapphire-notification-badge--large {
+  height: var(--sapphire-notification-badge-size-height-l);
+  border-radius: var(--sapphire-notification-badge-size-radius-l);
+  padding: var(--sapphire-notification-badge-size-spacing-l-vertical)
+    var(--sapphire-notification-badge-size-spacing-l-horizontal);
+  font-size: var(--sapphire-notification-badge-size-font-primary);
+}
+
+.sapphire-notification-badge--medium {
+  height: var(--sapphire-notification-badge-size-height-m);
+  border-radius: var(--sapphire-notification-badge-size-radius-m);
+  padding: 0 var(--sapphire-notification-badge-size-spacing-m-horizontal);
+  font-size: var(--sapphire-notification-badge-size-font-secondary);
+  min-width: var(--sapphire-notification-badge-size-width-m);
+  box-sizing: border-box;
+}
+
+.sapphire-notification-badge--small {
+  min-width: var(--sapphire-notification-badge-size-width-s);
+  height: var(--sapphire-notification-badge-size-height-s);
+  border-radius: var(--sapphire-notification-badge-size-radius-s);
+}
+
+/* Variants */
+.sapphire-notification-badge--primary {
+  background-color: var(--sapphire-notification-badge-color-background-primary);
+}
+
+.sapphire-notification-badge--secondary {
+  background-color: var(
+    --sapphire-notification-badge-color-background-secondary
+  );
+}
+
+/* Positioned */
+.sapphire-notification-badge-container {
+  position: relative;
+  display: inline-block;
+  width: max-content;
+}
+
+/* Placement in container with circular or circular-looking content */
+.sapphire-notification-badge-container .sapphire-notification-badge {
+  position: absolute;
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0;
+  pointer-events: none;
+}
+
+/* Placement in container with rectangular content */
+.sapphire-notification-badge-container--rectangle .sapphire-notification-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0;
+  pointer-events: none;
+}

package/components/panel/panel.module.css

@@ -1,5 +1,7 @@
 .sapphire-panel {
   background-color: var(--sapphire-panel-color-background);
+  font-family: var(--sapphire-panel-font-name);
+  color: var(--sapphire-panel-color-content);
   box-sizing: border-box;
   overflow: hidden;
   max-width: 100%;
@@ -9,7 +11,19 @@
   outline: 0;
   transition: transform var(--sapphire-panel-time-transition) ease-in-out;
   transform: translateX(100%);
-  width: var(--sapphire-panel-size-width-large);
+  width: var(--sapphire-panel-size-width-l);
+}
+
+/* Temporary alternative to `.sapphire-panel` if one wants to render the panel inline
+ * TODO: split panel into 2 independent blocks: panel layout and the panel content.
+ * UC-2757
+ */
+.sapphire-panel-inline {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sapphire-panel-color-background);
+  font-family: var(--sapphire-panel-font-name);
+  color: var(--sapphire-panel-color-content);
 }
 
 .sapphire-panel--visible {
@@ -17,18 +31,16 @@
 }
 
 .sapphire-panel--small {
-  width: var(--sapphire-panel-size-width-small);
+  width: var(--sapphire-panel-size-width-s);
 }
 
 .sapphire-panel-header {
-  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
-  border-bottom: var(--sapphire-panel-size-border) solid
-    var(--sapphire-panel-color-separator-transparent);
   flex-shrink: 0;
 }
 
 .sapphire-panel-body {
   overflow-y: auto;
+  overflow-x: hidden;
   flex-grow: 1;
   padding: 0 var(--sapphire-panel-size-spacing-side);
 }
@@ -38,9 +50,6 @@
 }
 
 .sapphire-panel-footer {
-  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
-  border-top: var(--sapphire-panel-size-border) solid
-    var(--sapphire-panel-color-separator-transparent);
   flex-shrink: 0;
 }
 
@@ -62,7 +71,6 @@
 .sapphire-panel-panel-header-subheading {
   color: var(--sapphire-panel-color-subheading);
   margin-top: var(--sapphire-panel-size-spacing-heading-gap);
-  font-family: var(--sapphire-panel-font-name);
 }
 
 .sapphire-panel-panel-footer {
@@ -76,12 +84,22 @@
   margin-left: var(--sapphire-panel-size-spacing-close-icon-left);
 }
 
-.sapphire-panel--scrollable .sapphire-panel-footer {
+.sapphire-panel-header + .sapphire-panel-body {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-top: var(--sapphire-panel-size-border) solid transparent;
+}
+
+.sapphire-panel-header + .sapphire-panel-body.sapphire-panel-body--scrolled {
   border-top: var(--sapphire-panel-size-border) solid
-    var(--sapphire-panel-color-separator-default);
+    var(--sapphire-panel-color-separator);
 }
 
-.sapphire-panel--scrolled .sapphire-panel-header {
-  border-bottom: var(--sapphire-panel-size-border) solid
-    var(--sapphire-panel-color-separator-default);
+.sapphire-panel-body + .sapphire-panel-footer {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-top: var(--sapphire-panel-size-border) solid transparent;
+}
+
+.sapphire-panel-body.sapphire-panel-body--scrollable + .sapphire-panel-footer {
+  border-top: var(--sapphire-panel-size-border) solid
+    var(--sapphire-panel-color-separator);
 }

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-panel": string;
+  readonly "sapphire-panel-inline": string;
   readonly "sapphire-panel--visible": string;
   readonly "sapphire-panel--small": string;
   readonly "sapphire-panel-header": string;
@@ -11,8 +12,8 @@ declare const styles: {
   readonly "sapphire-panel-panel-header-subheading": string;
   readonly "sapphire-panel-panel-footer": string;
   readonly "sapphire-panel-panel-header-close-button-container": string;
-  readonly "sapphire-panel--scrollable": string;
-  readonly "sapphire-panel--scrolled": string;
+  readonly "sapphire-panel-body--scrolled": string;
+  readonly "sapphire-panel-body--scrollable": string;
 };
 export = styles;