@mozaic-ds/web-components 1.5.0 → 1.6.0

package/dist/components/sidebarnavitem/SidebarNavItem.spec.js

@@ -0,0 +1,95 @@
+import { render, fireEvent, findAllByText } from '@testing-library/svelte';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import SidebarNavItem from './SidebarNavItem.svelte';
+import { tick } from 'svelte';
+const showMock = vi.fn();
+const hideMock = vi.fn();
+vi.mock('../sidebar/floating-item.svelte', async () => {
+    return {
+        useFloatingItem: vi.fn(() => ({
+            showFloatingItem: showMock,
+            hideFloatingItem: hideMock,
+        })),
+    };
+});
+describe('SidebarNavItem', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders label and anchor with correct href and aria-label', () => {
+        const { container } = render(SidebarNavItem, {
+            props: { label: 'Home', href: '/home' },
+        });
+        const label = findAllByText(container, 'Home');
+        expect(label).toBeTruthy();
+        const anchor = container.querySelector('a');
+        expect(anchor.getAttribute('href')).toBe('/home');
+        expect(anchor.getAttribute('aria-label')).toBe('Home');
+        expect(anchor.getAttribute('target')).toBe('_self');
+    });
+    it('applies active and locked classes when props set', () => {
+        const { container } = render(SidebarNavItem, {
+            props: { label: 'Item', href: '#', active: true, locked: true },
+        });
+        const anchor = container.querySelector('a');
+        expect(anchor.classList.contains('mc-sidebar__link--selected')).toBe(true);
+        expect(anchor.classList.contains('mc-sidebar__link--locked')).toBe(true);
+        const svg = anchor.querySelector('svg');
+        expect(svg).toBeTruthy();
+    });
+    it('uses _blank target and renders external icon when external=true', () => {
+        const { container } = render(SidebarNavItem, {
+            props: { label: 'External', href: 'https://example.com', external: true },
+        });
+        const anchor = container.querySelector('a');
+        expect(anchor.getAttribute('target')).toBe('_blank');
+        const svg = anchor.querySelector('svg');
+        expect(svg).toBeTruthy();
+    });
+    it('renders floating tooltip element when collapsed and not a sub item', () => {
+        const { container } = render(SidebarNavItem, { props: { label: 'Tip', href: '/tip' } });
+        const floating = container.querySelector('.mc-sidebar__floating-item');
+        expect(floating).toBeTruthy();
+        expect(floating?.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
+    });
+    it('does not render floating tooltip when sub is true', () => {
+        const { container } = render(SidebarNavItem, {
+            props: { label: 'Sub', href: '/sub', sub: true },
+        });
+        const floating = container.querySelector('.mc-sidebar__floating-item');
+        expect(floating).toBeNull();
+    });
+    it('sets sub = true if SUB_ITEM context is true', async () => {
+        const { container } = render(SidebarNavItem, {
+            props: {
+                label: 'Item',
+                href: '/test',
+            },
+            context: new Map([['SUB_ITEM', true]]),
+        });
+        document.dispatchEvent(new CustomEvent('update:expanded', { detail: true }));
+        await tick();
+        const li = container.querySelector('li.mc-sidebar__item');
+        expect(li.classList.contains('mc-sidebar__item--sub')).toBe(true);
+    });
+    it('shows/hide tooltip on focus/blur events', async () => {
+        const { container } = render(SidebarNavItem, { props: { label: 'Focus', href: '/focus' } });
+        const anchor = container.querySelector('a');
+        const floating = container.querySelector('.mc-sidebar__floating-item');
+        expect(floating).toBeTruthy();
+        await fireEvent.focus(anchor);
+        expect(showMock).toHaveBeenCalled();
+        await fireEvent.blur(anchor);
+        expect(hideMock).toHaveBeenCalled();
+    });
+    it('shows/hide tooltip on mouseenter/mouseleave events', async () => {
+        const { container } = render(SidebarNavItem, { props: { label: 'Focus', href: '/focus' } });
+        const anchor = container.querySelector('a');
+        const floating = container.querySelector('.mc-sidebar__floating-item');
+        expect(floating).toBeTruthy();
+        await fireEvent.mouseEnter(anchor);
+        expect(showMock).toHaveBeenCalled();
+        await fireEvent.mouseLeave(anchor);
+        expect(hideMock).toHaveBeenCalled();
+    });
+});

package/dist/components/sidebarnavitem/SidebarNavItem.svelte

@@ -0,0 +1,617 @@
+<svelte:options
+  customElement={{
+    tag: 'm-sidebar-nav-item',
+    props: {
+      locked: { reflect: true, type: 'Boolean', attribute: 'locked' },
+      external: { reflect: true, type: 'Boolean', attribute: 'external' },
+      active: { reflect: true, type: 'Boolean', attribute: 'active' },
+      sub: { reflect: true, type: 'Boolean', attribute: 'sub' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { Lock20, ExternalLink20 } from '@mozaic-ds/icons-svelte';
+  import Tooltip from '../tooltip/Tooltip.svelte';
+  import { useFloatingItem } from '../sidebar/floating-item.svelte';
+  import { getContext, onMount } from 'svelte';
+  import { getSidebarState } from '../sidebar/sidebar-state.svelte';
+
+  /**
+   * SidebarNavItem is a component that renders a sidebar navigation item with optional icon support. It handles active, locked, and external states, shows tooltips or floating items when the sidebar is collapsed, and supports click events.
+   * @slot icon - Use this slot to display an icon alongside the sidebar item.
+   * @event item-click {CustomEvent<void>} - Emits when a navigation item is clicked.
+   */
+
+  interface Props {
+    tag?: string;
+    /**
+     * Identifier used for listbox controlling.
+     */
+    id?: string;
+    /**
+     * The text label displayed for the navigation item.
+     */
+    label: string;
+    /**
+     * The URL the navigation item links to.
+     */
+    href?: string;
+    /**
+     * Marks the item as locked. Shows a lock icon and prevents interaction.
+     */
+    locked?: boolean;
+    /**
+     * Indicates the link is external. Opens in a new tab and shows an external link icon.
+     */
+    external?: boolean;
+    /**
+     * Marks the item as active, applying the active styling.
+     */
+    active?: boolean;
+    /**
+     * Callback to trigger when an item is clicked
+     */
+    onclick?: () => void;
+    sub?: boolean; // Not documented as this is internal
+  }
+
+  let {
+    tag = 'li',
+    id = crypto.randomUUID(),
+    label,
+    href,
+    locked,
+    external,
+    active,
+    onclick,
+    sub,
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  let trigger: HTMLElement | null = $state(null);
+  let tooltip: HTMLElement | null = $state(null);
+
+  const { hideFloatingItem, showFloatingItem } = useFloatingItem(
+    () => trigger,
+    () => tooltip,
+    {
+      allowItemHover: false,
+    },
+  );
+
+  const Icon = $derived(locked ? Lock20 : ExternalLink20);
+
+  let expanded = $state(false);
+
+  function handleClick() {
+    onclick?.();
+
+    element.dispatchEvent(new CustomEvent('item-click', { bubbles: true, composed: true }));
+  }
+
+  const targetAttr = $derived.by(() => {
+    if (!href) return undefined;
+    return external ? '_blank' : '_self';
+  });
+
+  onMount(() => {
+    if (sub !== undefined) return;
+    const isSubItem: boolean | undefined = getContext('SUB_ITEM');
+
+    if (isSubItem === undefined) return;
+    sub = isSubItem ?? false;
+  });
+</script>
+
+<svelte:element
+  this={tag}
+  {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
+  bind:this={element}
+  class={{
+    'mc-sidebar__item': true,
+    'mc-sidebar__item--collapsed': !expanded && !sub,
+    'mc-sidebar__item--sub': sub,
+  }}
+>
+  <svelte:element
+    this={href ? 'a' : 'button'}
+    bind:this={trigger}
+    {href}
+    role={href ? 'link' : 'button'}
+    target={targetAttr}
+    class={{
+      'mc-sidebar__link': true,
+      'mc-sidebar__link--selected': active,
+      'mc-sidebar__link--locked': locked,
+    }}
+    aria-label={label}
+    onmouseenter={showFloatingItem}
+    onfocus={showFloatingItem}
+    onmouseleave={hideFloatingItem}
+    onblur={hideFloatingItem}
+    onclick={() => handleClick()}
+  >
+    {#if $$slots.icon}
+      <span class="mc-sidebar__icon">
+        <slot name="icon" />
+      </span>
+    {/if}
+
+    <span class="mc-sidebar__text">{label}</span>
+
+    {#if locked || external}
+      <Icon />
+    {/if}
+  </svelte:element>
+
+  {#if !expanded && !sub}
+    <div
+      bind:this={tooltip}
+      class="mc-sidebar__floating-item mc-sidebar__floating-item--tooltip mc-sidebar__floating-item--hidden"
+    >
+      <Tooltip id={id!} text={label} standalone pointer={false} />
+    </div>
+  {/if}
+</svelte:element>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-sidebar {
+  display: flex;
+  align-items: start;
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--sidebar-color-text-default, #404040);
+  box-sizing: border-box;
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  padding-right: 4rem;
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar {
+    display: inline-flex;
+    padding-right: 0;
+  }
+}
+.mc-sidebar__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 100vh;
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--sidebar-color-background-primary, #ffffff);
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__wrapper {
+    width: 17.25rem;
+  }
+}
+.mc-sidebar__close-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__close-button {
+    display: none;
+  }
+}
+.mc-sidebar__container {
+  flex-grow: 1;
+}
+.mc-sidebar__floating-item {
+  position: absolute;
+  padding-left: 1.25rem;
+  left: 3rem;
+}
+.mc-sidebar__floating-item--tooltip {
+  top: 0.25rem;
+}
+.mc-sidebar__floating-item--expanded {
+  left: 0;
+  padding: 0;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__floating-item--expanded {
+    left: 18.5rem;
+  }
+}
+.mc-sidebar__floating-item--hidden {
+  visibility: hidden;
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  pointer-events: none;
+}
+.mc-sidebar--expanded .mc-sidebar__menu {
+  padding: 0 0.25rem;
+}
+.mc-sidebar--collapsed {
+  width: 4rem;
+}
+.mc-sidebar--collapsed .mc-sidebar__menu {
+  padding: 0;
+}
+
+.mc-sidebar__footer-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.mc-sidebar__footer-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--border-radius-full, 100%);
+}
+.mc-sidebar__footer-profile {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.5rem;
+  flex-grow: 1;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));
+  cursor: pointer;
+  border: none;
+}
+.mc-sidebar__footer-profile:hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer-title {
+  margin: 0;
+  text-align: left;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  font-weight: var(--font-weight-bold, 700);
+}
+.mc-sidebar__footer-subtitle {
+  margin: 0;
+  font-size: var(--font-caption, 0.75rem);
+  color: var(--sidebar-color-job-title, #666666);
+}
+.mc-sidebar__footer-expand {
+  display: none;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  transform: none;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand {
+    display: inline-flex;
+  }
+}
+.mc-sidebar__footer-expand--mobile {
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand--mobile {
+    display: none;
+  }
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-container {
+  flex-direction: row;
+  justify-content: flex-end;
+  height: 3.5rem;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-content {
+  display: block;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-expand {
+  transform: rotate(180deg);
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-container {
+  flex-direction: column;
+  justify-content: flex-start;
+  height: auto;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand {
+  transform: none;
+}
+.mc-sidebar__footer-menu {
+  width: 19.75rem;
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--listbox-color-background, #ffffff);
+  border: 1px solid var(--listbox-color-border, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-menu {
+    width: 18.75rem;
+  }
+}
+.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider {
+  margin: 0.5rem 0.75rem;
+}
+
+.mc-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-sidebar__header-logo {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__header-title {
+  font-size: var(--font-size-200, 1.125rem);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--sidebar-color-product-name, #000000);
+  margin: 0;
+  flex-grow: 1;
+  display: none;
+}
+.mc-sidebar__header--expanded .mc-sidebar__header-title {
+  display: block;
+}
+.mc-sidebar__header--collapsed .mc-sidebar__header-title {
+  display: none;
+}
+
+.mc-sidebar__listbox {
+  min-width: 18.75rem;
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--listbox-color-background, #ffffff);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+.mc-sidebar__listbox-title {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding-bottom: 0.75rem;
+  margin: 0;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+}
+
+.mc-sidebar__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  width: 100%;
+  padding-left: 0.25rem;
+  text-align: left;
+  text-decoration: none;
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__link--locked {
+  pointer-events: none;
+}
+.mc-sidebar__link:not(.mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__link-expand:open .mc-sidebar__sub {
+  transform: rotate(180deg);
+}
+.mc-sidebar__link:is(summary) .mc-sidebar__text {
+  flex-grow: 1;
+}
+
+.mc-sidebar__icon {
+  fill: currentcolor;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.mc-sidebar__indicator {
+  fill: currentcolor;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__text {
+  display: block;
+}
+
+.mc-sidebar__sub {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__sublist {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0 0 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mc-sidebar__item {
+  position: relative;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.25rem;
+  padding-left: 0.5rem;
+  margin-bottom: 0.125rem;
+  height: 2rem;
+  text-decoration: none;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text {
+  display: block;
+  font-size: var(--font-body-s, 0.875rem);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__text, .mc-sidebar__item--collapsed .mc-sidebar__sub, .mc-sidebar__item--collapsed .mc-sidebar__sublist {
+  display: none;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__link {
+  padding-left: 0;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-wrapper {
+  width: 100%;
+  display: grid;
+  justify-content: center;
+  position: relative;
+}
+
+.mc-sidebar__shortcut-list {
+  display: flex;
+  margin: 0;
+}
+.mc-sidebar__shortcut-list--grid {
+  padding: 0;
+  gap: 0.5rem;
+  align-items: center;
+}
+.mc-sidebar__shortcut-list--stacked {
+  gap: 0.25rem;
+  flex-direction: column;
+  padding: 0;
+}
+.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating) {
+  padding: 0 0 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+}
+
+.mc-sidebar__shortcut-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  list-style: none;
+  border-radius: var(--border-radius-m, 0.5rem);
+  overflow: hidden;
+}
+.mc-sidebar__shortcut-item:hover {
+  background-color: var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));
+}
+.mc-sidebar__shortcut-item:nth-child(n+5) {
+  display: none;
+}
+.mc-sidebar__shortcut-item--grid {
+  justify-content: center;
+  padding: 0 0.125rem;
+  height: 3rem;
+  width: 3.9375rem;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link {
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.mc-sidebar__shortcut-item--stacked {
+  padding: 0.125rem 0.25rem;
+  width: 12.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating {
+  width: 100%;
+  padding: 0.125rem 0 0.125rem 0.25rem;
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label {
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-body-m, 1rem);
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link {
+  gap: 0.25rem;
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item {
+  background-color: var(--sidebar-color-shortcut-item-background-selected, #ebf5de);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label {
+  color: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger) {
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+  border: none;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover {
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+
+.mc-sidebar__shortcut-link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__shortcut-link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-label {
+  font-size: var(--font-size-25, 0.625rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-default, #404040);
+  width: 1.5rem;
+  height: 1.5rem;
+}</style>