@arbor-education/design-system.components 0.25.9 → 1.0.0

package/dist/index.css

@@ -632,6 +632,9 @@
   --size-control-large: 4rem;
   --size-control-xlarge: 5rem;
   --shadow-small: 0 4px 12px 0 rgba(32, 32, 32, 0.08);
+  --shadow-medium: 0 8px 24px 0 rgba(32, 32, 32, 0.12);
+  --z-index-popup: 1;
+  --z-index-toast: 10;
   --page-sign-in-color-background: #fffcf8;
   --color-grey-100: #efefef;
   --color-grey-200: #dfdfdf;
@@ -1437,6 +1440,12 @@
   --widget-calendar-weight-border: var(--border-weight);
   --widget-calendar-spacing-vertical: var(--spacing-medium);
   --widget-calendar-spacing-horizontal: var(--spacing-small);
+  --widget-calendar-list-gap: var(--spacing-xsmall);
+  --widget-calendar-type-bar-width: 3px;
+  --widget-calendar-type-bar-radius: var(--border-radius-xsmall);
+  --widget-calendar-type-primary-color: var(--color-brand-500);
+  --widget-calendar-type-secondary-color: var(--color-grey-300);
+  --widget-calendar-color-title: var(--color-grey-900);
   --widget-list-row-hover-hover-bg: var(--color-grey-050);
   --widget-list-row-hover-color-icon-arrow: var(--color-grey-900);
   --widget-list-row-active-active-bg: var(--color-grey-200);
@@ -1485,6 +1494,7 @@
   --widget-attachments-default-color-background: var(--color-grey-050);
   --widget-attachments-spacing-vertical: var(--spacing-large);
   --widget-attachments-spacing-horizontal: var(--spacing-small);
+  --widget-notifications-timestamp-font-size: 0.625rem;
   --widget-notifications-read-focus-icon-hover-color-background: var(--color-grey-050);
   --widget-notifications-read-focus-icon-active-color-background: var(--color-grey-100);
   --widget-notifications-read-focus-icon-default-color-background: var(--color-mono-white);
@@ -1514,11 +1524,11 @@
   --widget-notifications-unread-default-color-background: var(--color-brand-050);
   --widget-notifications-unread-color-text: var(--color-brand-900);
   --widget-notifications-unread-color-title: var(--color-brand-900);
-  --widget-notifications-x-posted-spacing-vertical-gap: var(--spacing-small);
+  --widget-notifications-secondary-spacing-vertical-gap: var(--spacing-xsmall);
   --widget-notifications-color-text: var(--color-grey-600);
   --widget-notifications-color-title: var(--color-grey-900);
   --widget-notifications-spacing-vertical: var(--spacing-small);
-  --widget-notifications-spacing-horizointal: var(--spacing-small);
+  --widget-notifications-spacing-horizontal: var(--spacing-small);
   --widget-notifications-spacing-vertical-gap: var(--spacing-small);
   --filters-hover-color-background: var(--color-grey-100);
   --filters-radius: var(--border-radius-small);
@@ -2474,6 +2484,29 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   line-height: var(--type-headings-h4-line-height);
 }
 
+.ds-link {
+  display: inline;
+  color: var(--type-body-hyperlink-color);
+  font-weight: var(--type-body-hyperlink-weight);
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-underline-position: from-font;
+  cursor: pointer;
+}
+.ds-link:hover {
+  color: var(--hyperlink-hover);
+}
+.ds-link:active {
+  color: var(--hyperlink-active);
+}
+.ds-link:focus {
+  outline: none;
+}
+.ds-link:focus-visible {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  outline-offset: calc(1 * var(--focus-border));
+}
+
 .ds-card__icon-click {
   flex-shrink: 0;
 }
@@ -4305,6 +4338,7 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   top: 0;
   right: 0;
   position: fixed;
+  z-index: var(--z-index-toast);
 }
 
 .ds-toast {
@@ -4325,6 +4359,37 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
 .ds-toast__icon {
   flex-shrink: 0;
 }
+.ds-toast__content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+.ds-toast__message-row {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--spacing-xsmall);
+  min-width: 0;
+}
+.ds-toast__title {
+  min-width: 0;
+}
+.ds-toast__actions {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--spacing-xsmall);
+}
+.ds-toast__action {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+}
 .ds-toast__close {
   flex-shrink: 0;
   background-color: transparent;
@@ -5776,41 +5841,665 @@ li.ds-combobox__option--disabled {
     height: 0;
   }
 }
-.ds-sidebar-nav {
+.ds-favourite-button {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-xsmall);
+  height: var(--size-control-xsmall);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--border-radius-round);
+  cursor: pointer;
+}
+.ds-favourite-button:hover, .ds-favourite-button[data-state=delayed-open], .ds-favourite-button[data-state=instant-open], .ds-favourite-button[data-state=open] {
+  background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
+}
+.ds-favourite-button:focus {
+  outline: none;
+}
+.ds-favourite-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
+}
+
+.ds-favourite-button--toggle {
+  color: inherit;
+}
+
+.ds-empty-state {
   display: flex;
-  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  gap: var(--spacing-xsmall);
+}
+
+.ds-empty-state--padding-xs {
+  padding-block: var(--spacing-small);
+  padding-inline: var(--spacing-xsmall);
+}
+
+.ds-empty-state--padding-sm {
+  padding-block: var(--spacing-large);
+  padding-inline: var(--spacing-medium);
+}
+
+.ds-empty-state--padding-md {
+  padding-block: var(--spacing-xlarge);
+  padding-inline: var(--spacing-large);
+}
+
+.ds-empty-state--padding-lg {
+  padding-block: var(--spacing-xxxlarge);
+  padding-inline: var(--spacing-xlarge);
 }
 
-.ds-sidebar-nav__rail {
+.ds-empty-state__illustration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-empty-state__heading {
+  justify-content: center;
+}
+
+.ds-empty-state__sub-heading {
   margin: 0;
-  width: var(--sidebar-nav-rail-width);
+  color: var(--color-grey-600);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+  margin-bottom: var(--spacing-xsmall);
+}
+
+.ds-empty-state__actions {
   display: flex;
+  gap: var(--spacing-small);
+}
+
+.ds-empty-state__actions--horizontal {
+  flex-flow: row wrap;
+  justify-content: center;
+}
+
+.ds-empty-state__actions--vertical {
   flex-direction: column;
   align-items: center;
-  padding: var(--spacing-small);
-  gap: var(--spacing-large);
-  box-sizing: border-box;
-  border-right: var(--border-weight) solid var(--page-base-color-border);
 }
 
-.ds-sidebar-nav__rail-list {
-  list-style: none;
+.ds-widget {
+  width: 100%;
+}
+
+.ds-widget.ds-card__container {
+  height: 100%;
+  min-height: 0;
+  align-items: stretch;
+}
+
+.ds-widget .ds-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.ds-widget .ds-card__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
+.ds-widget.ds-card__container:hover:not(.ds-card__container--disabled, .ds-widget--floating) {
+  box-shadow: none;
+}
+
+.ds-widget.ds-card__container.ds-widget--floating {
+  box-shadow: var(--shadow-medium);
+}
+.ds-widget.ds-card__container.ds-widget--floating:hover:not(.ds-card__container--disabled) {
+  box-shadow: var(--shadow-medium);
+}
+
+.ds-widget__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  width: 100%;
+  margin-bottom: var(--spacing-small);
+  flex-shrink: 0;
+}
+
+.ds-widget__header--linked {
+  position: relative;
+  cursor: pointer;
+}
+.ds-widget__header--linked:has(.ds-widget__header-link:focus-within) {
+  outline: var(--focus-border) solid var(--widget-heading-interactive-focus-color-border);
+  border-radius: var(--widget-heading-interactive-radius);
+}
+
+.ds-widget__header-title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-widget__header-slot-start {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.ds-widget__header-heading-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  min-width: 0;
+}
+
+.ds-widget__header--collapsible .ds-widget__header-heading-row {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+}
+
+.ds-widget__header-heading {
+  margin: 0;
+}
+
+.ds-widget__header--collapsible .ds-widget__header-heading {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+}
+
+.ds-widget__header-link {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: inherit;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-underline-position: from-font;
+}
+.ds-widget__header-link:hover {
+  color: inherit;
+  text-decoration: none;
+}
+.ds-widget__header-link:focus {
+  outline: none;
+}
+.ds-widget__header-link:focus-visible {
+  outline: none;
+}
+.ds-widget__header-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.ds-widget__header-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  width: 100%;
+  min-width: 0;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ds-widget__header-toggle:hover {
+  color: inherit;
+}
+.ds-widget__header-toggle:focus-within {
+  outline: var(--focus-border) solid var(--widget-heading-interactive-focus-color-border);
+  border-radius: var(--widget-heading-interactive-radius);
+}
+.ds-widget__header-toggle .ds-heading__inner-container {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+
+.ds-widget__header-chevron {
+  flex-shrink: 0;
+  transition: transform 0.16s ease;
+}
+
+.ds-widget__header-toggle[aria-expanded=true] .ds-widget__header-chevron {
+  transform: rotate(90deg);
+}
+
+.ds-widget__header-end {
+  display: inline-flex;
+  padding-right: var(--spacing-small);
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  position: relative;
+  z-index: 2;
+}
+
+.ds-widget__header-tooltip-trigger {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  cursor: pointer;
+  color: var(--color-grey-600);
+}
+.ds-widget__header-tooltip-trigger:focus-within {
+  outline: var(--focus-border) solid var(--widget-heading-interactive-focus-color-border);
+  border-radius: var(--widget-heading-interactive-radius);
+}
+
+.ds-widget__body {
+  position: relative;
+  width: 100%;
+  padding-top: var(--spacing-small);
+  border-top: var(--border-weight) solid var(--card-default-color-border);
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.ds-widget__body--collapsed {
+  display: none;
+}
+
+.ds-widget__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: var(--spacing-xxxlarge);
+}
+
+.ds-widget__loading-spinner {
+  display: inline-flex;
+  animation: ds-widget-loading-spin 1s linear infinite;
+}
+
+@keyframes ds-widget-loading-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.ds-widget-notifications__list {
   margin: 0;
   padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xsmall);
+}
+
+.ds-widget-notifications__title {
+  margin: 0;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-bold-weight);
+  line-height: var(--type-body-line-height);
+}
+
+.ds-widget-notifications__description {
+  margin: 0;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-widget-notifications__time {
+  font-family: var(--type-body-p-family);
+  font-size: var(--widget-notifications-timestamp-font-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+  white-space: nowrap;
+}
+
+.ds-widget-notifications__item {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-small);
+  padding: var(--widget-notifications-spacing-vertical) var(--widget-notifications-spacing-horizontal);
+  border-radius: var(--widget-notifications-radius);
+}
+.ds-widget-notifications__item--unread {
+  background-color: var(--widget-notifications-unread-default-color-background);
+  --notification-clear-bg: var(--widget-notifications-unread-default-icon-default-color-background);
+  --notification-clear-bg-hover: var(--widget-notifications-unread-default-icon-hover-color-background);
+  --notification-clear-bg-active: var(--widget-notifications-unread-default-icon-active-color-background);
+}
+.ds-widget-notifications__item--unread:hover {
+  background-color: var(--widget-notifications-unread-hover-color-background);
+  --notification-clear-bg: var(--widget-notifications-unread-hover-icon-default-color-background);
+  --notification-clear-bg-hover: var(--widget-notifications-unread-hover-icon-hover-color-background);
+  --notification-clear-bg-active: var(--widget-notifications-unread-hover-icon-active-color-background);
+}
+.ds-widget-notifications__item--unread:has(.ds-widget-notifications__primary-button:focus-visible), .ds-widget-notifications__item--unread:has(.ds-widget-notifications__clear:focus-visible) {
+  background-color: var(--widget-notifications-unread-focus-color-background);
+  --notification-clear-bg: var(--widget-notifications-unread-focus-icon-default-color-background);
+  --notification-clear-bg-hover: var(--widget-notifications-unread-focus-icon-hover-color-background);
+  --notification-clear-bg-active: var(--widget-notifications-unread-focus-icon-active-color-background);
+}
+.ds-widget-notifications__item--unread:has(.ds-widget-notifications__primary-button:focus-visible) {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+}
+.ds-widget-notifications__item--unread .ds-widget-notifications__title {
+  color: var(--widget-notifications-unread-color-title);
+}
+.ds-widget-notifications__item--unread .ds-widget-notifications__description,
+.ds-widget-notifications__item--unread .ds-widget-notifications__time {
+  color: var(--widget-notifications-unread-color-text);
+}
+.ds-widget-notifications__item--read {
+  background-color: var(--widget-notifications-read-default-color-background);
+  --notification-clear-bg: var(--widget-notifications-read-default-icon-default-color-background);
+  --notification-clear-bg-hover: var(--widget-notifications-read-default-icon-hover-color-background);
+  --notification-clear-bg-active: var(--widget-notifications-read-default-icon-active-color-background);
+}
+.ds-widget-notifications__item--read:hover {
+  background-color: var(--widget-notifications-read-hover-color-background);
+  --notification-clear-bg: var(--widget-notifications-read-hover-icon-default-color-background);
+  --notification-clear-bg-hover: var(--widget-notifications-read-hover-icon-hover-color-background);
+  --notification-clear-bg-active: var(--widget-notifications-read-hover-icon-active-color-background);
+}
+.ds-widget-notifications__item--read:has(.ds-widget-notifications__primary-button:focus-visible), .ds-widget-notifications__item--read:has(.ds-widget-notifications__clear:focus-visible) {
+  background-color: var(--widget-notifications-read-focus-color-background);
+  --notification-clear-bg: var(--widget-notifications-read-focus-icon-default-color-background);
+  --notification-clear-bg-hover: var(--widget-notifications-read-focus-icon-hover-color-background);
+  --notification-clear-bg-active: var(--widget-notifications-read-focus-icon-active-color-background);
+}
+.ds-widget-notifications__item--read:has(.ds-widget-notifications__primary-button:focus-visible) {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+}
+.ds-widget-notifications__item--read .ds-widget-notifications__title {
+  color: var(--widget-notifications-read-color-title);
+}
+.ds-widget-notifications__item--read .ds-widget-notifications__description,
+.ds-widget-notifications__item--read .ds-widget-notifications__time {
+  color: var(--widget-notifications-read-color-text);
+}
+
+.ds-widget-notifications__primary {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+}
+
+.ds-widget-notifications__primary-button,
+.ds-widget-notifications__primary-content {
+  display: block;
   width: 100%;
+  min-width: 0;
+  text-align: left;
+}
+
+.ds-widget-notifications__primary-button {
+  cursor: pointer;
+  color: inherit;
+}
+.ds-widget-notifications__primary-button:focus {
+  outline: none;
+}
+.ds-widget-notifications__primary-button:focus-visible {
+  outline: none;
+}
+
+.ds-widget-notifications__secondary {
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: var(--widget-notifications-secondary-spacing-vertical-gap);
+}
+
+.ds-widget-notifications__clear {
+  display: inline-flex;
   align-items: center;
-  gap: var(--spacing-large);
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--icon-size-medium);
+  height: var(--icon-size-medium);
+  border-radius: var(--border-radius-round);
+  cursor: pointer;
+  color: inherit;
+  background-color: var(--notification-clear-bg);
+}
+.ds-widget-notifications__clear:hover {
+  background-color: var(--notification-clear-bg-hover);
+}
+.ds-widget-notifications__clear:active {
+  background-color: var(--notification-clear-bg-active);
+}
+.ds-widget-notifications__clear:focus {
+  outline: none;
+}
+.ds-widget-notifications__clear:focus-visible {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  outline-offset: calc(1 * var(--focus-border));
 }
 
-.ds-sidebar-nav__rail-list-item {
+.ds-widget-calendar__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: var(--widget-calendar-list-gap);
+}
+
+.ds-widget-calendar__icon-chevron {
+  display: inline-flex;
+}
+
+.ds-widget-calendar__icon-arrow {
+  display: none;
+}
+
+.ds-widget-calendar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--widget-calendar-spacing-vertical) var(--widget-calendar-spacing-horizontal);
+  border-bottom: var(--widget-calendar-weight-border) solid var(--widget-calendar-color-border);
+  background-color: var(--widget-calendar-default-color-background);
+  border-radius: var(--widget-calendar-radius);
+}
+.ds-widget-calendar__item:last-child {
+  border-bottom: none;
+}
+.ds-widget-calendar__item--interactive {
+  cursor: pointer;
+}
+.ds-widget-calendar__item--interactive:hover {
+  background-color: var(--widget-calendar-hover-color-background);
+}
+.ds-widget-calendar__item--interactive:hover .ds-widget-calendar__icon-chevron {
+  display: none;
+}
+.ds-widget-calendar__item--interactive:hover .ds-widget-calendar__icon-arrow {
+  display: inline-flex;
+}
+.ds-widget-calendar__item--interactive:focus-visible {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  background-color: var(--widget-calendar-focus-color-background);
+}
+
+.ds-widget-calendar__content {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  padding-left: calc(var(--widget-calendar-type-bar-width) + var(--spacing-small));
+}
+.ds-widget-calendar__content::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--widget-calendar-type-bar-width);
+  border-radius: var(--widget-calendar-type-bar-radius);
+}
+
+.ds-widget-calendar__item--primary .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-primary-color);
+}
+
+.ds-widget-calendar__item--secondary .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-secondary-color);
+}
+
+.ds-widget-calendar__details {
+  margin: 0;
+}
+
+.ds-widget-calendar__row {
+  margin: 0;
+}
+
+.ds-widget-calendar__primary-definition {
+  margin: 0;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-bold-weight);
+  line-height: var(--type-body-line-height);
+  color: var(--widget-calendar-color-title);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-widget-calendar__secondary-definition {
+  margin: 0;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+  color: var(--widget-calendar-color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-widget-calendar__time {
+  font: inherit;
+  color: inherit;
+}
+
+.ds-widget-calendar__action {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--widget-list-row-default-color-icon-arrow);
+}
+
+.ds-widget-calendar__item--interactive:hover .ds-widget-calendar__action {
+  color: var(--widget-list-row-hover-color-icon-arrow);
+}
+
+.ds-widget-favourites__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
-.ds-sidebar-nav__rail-item {
+.ds-widget-favourites__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: var(--widget-favourites-radius);
+  background: var(--widget-favourites-default-color-background);
+}
+.ds-widget-favourites__item .ds-favourite-button--remove {
+  color: var(--widget-favourites-icon-default-color-icon);
+  opacity: 0;
+  transition: opacity 0.16s ease, color 0.16s ease, background 0.16s ease;
+}
+.ds-widget-favourites__item .ds-favourite-button--remove:hover, .ds-widget-favourites__item .ds-favourite-button--remove[data-state=delayed-open], .ds-widget-favourites__item .ds-favourite-button--remove[data-state=instant-open], .ds-widget-favourites__item .ds-favourite-button--remove[data-state=open] {
+  color: var(--widget-favourites-icon-hover-color-icon);
+}
+.ds-widget-favourites__item .ds-favourite-button--remove:active {
+  color: var(--widget-favourites-icon-active-color-icon);
+}
+.ds-widget-favourites__item .ds-favourite-button--remove:focus-visible, .ds-widget-favourites__item .ds-favourite-button--remove[data-state=delayed-open], .ds-widget-favourites__item .ds-favourite-button--remove[data-state=instant-open], .ds-widget-favourites__item .ds-favourite-button--remove[data-state=open] {
+  opacity: 1;
+}
+.ds-widget-favourites__item:hover, .ds-widget-favourites__item:focus-within, .ds-widget-favourites__item:has(.ds-favourite-button--remove[data-state=delayed-open]), .ds-widget-favourites__item:has(.ds-favourite-button--remove[data-state=instant-open]), .ds-widget-favourites__item:has(.ds-favourite-button--remove[data-state=open]) {
+  background: var(--widget-favourites-hover-color-background);
+}
+.ds-widget-favourites__item:hover .ds-favourite-button--remove, .ds-widget-favourites__item:focus-within .ds-favourite-button--remove, .ds-widget-favourites__item:has(.ds-favourite-button--remove[data-state=delayed-open]) .ds-favourite-button--remove, .ds-widget-favourites__item:has(.ds-favourite-button--remove[data-state=instant-open]) .ds-favourite-button--remove, .ds-widget-favourites__item:has(.ds-favourite-button--remove[data-state=open]) .ds-favourite-button--remove {
+  opacity: 1;
+}
+.ds-widget-favourites__item:has(.ds-widget-favourites__link:focus-visible), .ds-widget-favourites__item:has(.ds-favourite-button--remove:focus-visible) {
+  background: var(--widget-favourites-focus-color-background);
+}
+
+.ds-widget-favourites__link {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding: var(--widget-favourites-spacing-vertical) var(--widget-favourites-spacing-horizontal);
+  padding-right: calc(var(--size-control-xsmall) + var(--spacing-small));
+  border-radius: var(--widget-favourites-radius);
+  color: var(--widget-favourites-color-text);
+  text-decoration: none;
+  font-size: var(--type-body-p-size);
+  line-height: var(--line-height-default);
+}
+.ds-widget-favourites__link:hover {
+  color: var(--widget-favourites-color-text);
+}
+.ds-widget-favourites__link:focus {
+  outline: none;
+}
+.ds-widget-favourites__link:focus-visible {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  outline-offset: calc(-1 * var(--focus-border));
+}
+
+.ds-sidebar {
+  margin: 0;
+  width: var(--sidebar-nav-rail-width);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-small);
+  gap: var(--spacing-large);
+  box-sizing: border-box;
+  border-right: var(--border-weight) solid var(--page-base-color-border);
+}
+
+.ds-sidebar__item {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -5825,92 +6514,67 @@ li.ds-combobox__option--disabled {
   cursor: pointer;
   text-decoration: none;
 }
-.ds-sidebar-nav__rail-item:hover, .ds-sidebar-nav__rail-item:active, .ds-sidebar-nav__rail-item[data-state=delayed-open], .ds-sidebar-nav__rail-item[data-state=instant-open], .ds-sidebar-nav__rail-item[data-state=open] {
+.ds-sidebar__item:hover, .ds-sidebar__item:active, .ds-sidebar__item[data-state=delayed-open], .ds-sidebar__item[data-state=instant-open], .ds-sidebar__item[data-state=open] {
   color: var(--sidebar-nav-rail-item-color-icon-hover);
   background: var(--sidebar-nav-rail-item-color-background-hover);
 }
-.ds-sidebar-nav__rail-item:focus {
+.ds-sidebar__item:focus {
   outline: none;
 }
-.ds-sidebar-nav__rail-item:focus-visible {
+.ds-sidebar__item:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
 }
 
-.ds-sidebar-nav__rail-item--selected {
+.ds-sidebar__item--selected {
   color: var(--sidebar-nav-rail-item-color-icon-selected);
   background: var(--sidebar-nav-rail-item-color-background-selected);
 }
-.ds-sidebar-nav__rail-item--selected:hover, .ds-sidebar-nav__rail-item--selected:active, .ds-sidebar-nav__rail-item--selected[data-state=delayed-open], .ds-sidebar-nav__rail-item--selected[data-state=instant-open], .ds-sidebar-nav__rail-item--selected[data-state=open] {
+.ds-sidebar__item--selected:hover, .ds-sidebar__item--selected:active, .ds-sidebar__item--selected[data-state=delayed-open], .ds-sidebar__item--selected[data-state=instant-open], .ds-sidebar__item--selected[data-state=open] {
   color: var(--sidebar-nav-rail-item-color-icon-selected);
   background: var(--sidebar-nav-rail-item-color-background-selected);
 }
 
-.ds-sidebar-nav__rail-badge-anchor {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.ds-sidebar-nav__rail-item .ds-badge {
+.ds-sidebar__item .ds-badge {
   position: absolute;
   top: var(--spacing-xsmall);
   right: var(--spacing-xsmall);
 }
 
-.ds-sidebar-nav__panel {
+.ds-side-navigation {
   width: var(--sidebar-nav-panel-width);
   gap: var(--sidebar-nav-panel-gap);
+  padding: var(--spacing-small);
+  box-sizing: border-box;
   overflow: auto;
 }
 
-.ds-sidebar-nav__panel[aria-hidden=true] {
+.ds-side-navigation[aria-hidden=true] {
   display: none;
 }
 
-.ds-sidebar-nav__title {
-  min-height: var(--sidebar-nav-title-min-height);
-  padding: var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-end) var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-start);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin: 0;
-  border-bottom: var(--border-weight) solid var(--page-base-color-border);
-  font-family: var(--type-headings-h6-family, var(--font-family-standard));
-  font-size: var(--type-headings-h6-size, var(--font-size-4-16));
-  font-weight: var(--type-headings-h6-weight, var(--font-weight-semi-bold));
-  line-height: var(--type-headings-h6-line-height, 1.25);
-}
-
-.ds-sidebar-nav__nav {
-  padding: var(--spacing-small);
-  box-sizing: border-box;
-}
-
-.ds-sidebar-nav__list,
-.ds-sidebar-nav__group-children {
+.ds-side-navigation__list,
+.ds-side-navigation__group-children {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.ds-sidebar-nav__list {
+.ds-side-navigation__list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xsmall);
 }
 
-.ds-sidebar-nav__list-item {
+.ds-side-navigation__list-item {
   display: block;
 }
 
-.ds-sidebar-nav__item {
+.ds-side-navigation__item {
   position: relative;
 }
 
-.ds-sidebar-nav__group-link {
+.ds-side-navigation__group-link {
   width: 100%;
   display: flex;
   border: 0;
@@ -5926,42 +6590,42 @@ li.ds-combobox__option--disabled {
   font-weight: var(--font-weight-semi-bold);
   box-sizing: border-box;
 }
-.ds-sidebar-nav__group-link:hover {
+.ds-side-navigation__group-link:hover {
   background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
 }
-.ds-sidebar-nav__group-link:focus {
+.ds-side-navigation__group-link:focus {
   outline: none;
 }
-.ds-sidebar-nav__group-link:focus-visible {
+.ds-side-navigation__group-link:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
 }
 
-.ds-sidebar-nav__group-chevron {
+.ds-side-navigation__group-chevron {
   flex-shrink: 0;
   transition: transform 0.16s ease;
 }
 
-.ds-sidebar-nav__group-link[aria-expanded=true] .ds-sidebar-nav__group-chevron {
+.ds-side-navigation__group-link[aria-expanded=true] .ds-side-navigation__group-chevron {
   transform: rotate(90deg);
 }
 
-.ds-sidebar-nav__group-children {
+.ds-side-navigation__group-children {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xsmall);
   padding-left: var(--spacing-medium);
 }
 
-.ds-sidebar-nav__group-children[aria-hidden=true] {
+.ds-side-navigation__group-children[aria-hidden=true] {
   display: none;
 }
 
-.ds-sidebar-nav__group-children .ds-sidebar-nav__group-link {
+.ds-side-navigation__group-children .ds-side-navigation__group-link {
   padding-left: var(--spacing-small);
 }
 
-.ds-sidebar-nav__item-link {
+.ds-side-navigation__item-link {
   width: 100%;
   display: flex;
   align-items: center;
@@ -5975,37 +6639,37 @@ li.ds-combobox__option--disabled {
   font-size: var(--type-body-p-size);
   font-weight: var(--font-weight-regular);
 }
-.ds-sidebar-nav__item-link:hover {
+.ds-side-navigation__item-link:hover {
   background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
 }
-.ds-sidebar-nav__item-link:focus {
+.ds-side-navigation__item-link:focus {
   outline: none;
 }
-.ds-sidebar-nav__item-link:focus-visible {
+.ds-side-navigation__item-link:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
 }
 
-.ds-sidebar-nav__group-children .ds-sidebar-nav__item-link {
+.ds-side-navigation__group-children .ds-side-navigation__item-link {
   padding-left: var(--spacing-xlarge);
 }
 
-.ds-sidebar-nav__item-link--current {
+.ds-side-navigation__item-link--current {
   background: var(--color-brand-050);
   color: var(--color-brand-800);
   font-weight: var(--font-weight-semi-bold);
 }
 
-.ds-sidebar-nav__item--has-favourite .ds-sidebar-nav__item-link {
+.ds-side-navigation__item--has-favourite .ds-side-navigation__item-link {
   padding-right: calc(var(--size-control-xsmall) + var(--spacing-small));
 }
 
-.ds-sidebar-nav__group-label {
+.ds-side-navigation__group-label {
   font-size: var(--type-body-p-size);
   font-weight: var(--font-weight-semi-bold);
 }
 
-.ds-sidebar-nav__item-favourite {
+.ds-side-navigation__item-favourite {
   position: absolute;
   right: 0;
   top: 50%;
@@ -6023,21 +6687,35 @@ li.ds-combobox__option--disabled {
   color: inherit;
   cursor: pointer;
 }
-.ds-sidebar-nav__item-favourite:hover {
+.ds-side-navigation__item-favourite:hover {
   background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
 }
-.ds-sidebar-nav__item-favourite:focus {
+.ds-side-navigation__item-favourite:focus {
   outline: none;
 }
-.ds-sidebar-nav__item-favourite:focus-visible {
+.ds-side-navigation__item-favourite:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
 }
 
-.ds-sidebar-nav__item-link--current + .ds-sidebar-nav__item-favourite {
+.ds-side-navigation__item-link--current + .ds-side-navigation__item-favourite {
   color: var(--color-brand-600);
 }
 
+.ds-side-navigation__title {
+  min-height: var(--sidebar-nav-title-min-height);
+  padding: var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-end) var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-start);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  border-bottom: var(--border-weight) solid var(--page-base-color-border);
+  font-family: var(--type-headings-h6-family, var(--font-family-standard));
+  font-size: var(--type-headings-h6-size, var(--font-size-4-16));
+  font-weight: var(--type-headings-h6-weight, var(--font-weight-semi-bold));
+  line-height: var(--type-headings-h6-line-height, 1.25);
+}
+
 .ds-file-upload {
   display: flex;
   flex-direction: column;