docs: fix broken relative links

Author: adrianschmidt

README.md

@@ -88,7 +88,7 @@ font-weight: 400;
 color: rgb(var(--contrast-1500));
 ```
 
-💡 About the `color` specified above, read more on [our color system](/#/DesignGuidelines/color-system.md/).
+💡 About the `color` specified above, read more on [our color system](#/DesignGuidelines/color-system.md/).
 
 Feel free to customize the font-family and related styles to suit your project's needs. For example, you might prefer a different typeface like below:
 

src/components/button/examples/button-reduce-presence.tsx

@@ -9,7 +9,7 @@ import { Component, h, State } from '@stencil/core';
  * button remains visible while the loading animation is ongoing. When the
  * animation is done and the checkmark has been shown, the button will hide.
  *
- * Read more in the [Design Guidelines](#/DesignGuidelines/decluttering.md/)
+ * Read more in the [Design Guidelines](#/DesignGuidelines/declutter.md/)
  */
 @Component({
     tag: 'limel-example-button-reduce-presence',

src/components/checkbox/checkbox.tsx

@@ -31,7 +31,7 @@ import { Label } from '../dynamic-label/label.types';
  * :::important
  * Checkboxes are sometimes used interchangeably with switches in user interfaces.
  * But there is an important difference between the two! Please read our guidelines about
- * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+ * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
  *
  * @exampleComponent limel-example-checkbox
  * @exampleComponent limel-example-checkbox-helper-text

src/components/checkbox/examples/checkbox-readonly.tsx

@@ -11,8 +11,8 @@ import { Component, h, State } from '@stencil/core';
  * :::important
  * Before reading the documentations below, make sure to read
  * 1. our guides about the difference between
- * [Disabled vs. Readonly](/#/DesignGuidelines/disabled-vs-readonly.md/) in our components.
- * 2. our guidelines about [Labeling boolean fields](/#/DesignGuidelines/labeling-boolean-fields.md/).
+ * [Disabled vs. Readonly](#/DesignGuidelines/disabled-vs-readonly.md/) in our components.
+ * 2. our guidelines about [Labeling boolean fields](#/DesignGuidelines/labeling-boolean-fields.md/).
  * :::
  *
  * Using the `readonlyLabels` optional prop, you can override the `label` and

src/components/color-picker/color-picker.tsx

@@ -18,7 +18,7 @@ import type { CustomColorSwatch } from './color-picker.types';
  * The color picker can also show you a preview of any valid color name or color value.
  *
  * :::note
- * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+ * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.
  * :::
  *
  * @exampleComponent limel-example-color-picker-basic

src/components/dynamic-label/examples/dynamic-label-readonly-boolean.tsx

@@ -22,7 +22,7 @@ import { Component, State, h } from '@stencil/core';
  * This example shows how to setup the `limel-dynamic-label` component to
  * create a more descriptive and dynamic labels for boolean fields.
  * But please make sure to read our guidelines about
- * [Labeling boolean fields](/#/DesignGuidelines/labeling-boolean-fields.md/)
+ * [Labeling boolean fields](#/DesignGuidelines/labeling-boolean-fields.md/)
  * to understand the importance of this, and get help in choosing the right labels
  * for boolean fields.
  * :::

src/components/menu/examples/menu-notification.tsx

@@ -28,7 +28,7 @@ import { Component, h } from '@stencil/core';
  *
  * By default, the badge is red and its text is white.
  * This is to attract users' attention. However, this is possible to override using
- * [provided style variables](/#/component/limel-menu/styles/).
+ * [provided style variables](#/component/limel-menu/styles/).
  *
  * :::warning
  * - Do not negatively exploit this possibility and spam users' attention.

src/components/select/examples/select-separators.tsx

@@ -8,7 +8,7 @@ import { Component, h, State } from '@stencil/core';
  * by providing valuable visual cues that aid users in perceiving
  * and navigating through lists. Read more about advantages of using
  * separators in the
- * [List component's documentations](/#/component/limel-list/).
+ * [List component's documentations](#/component/limel-list/).
  */
 @Component({
     shadow: true,

src/components/snackbar/snackbar.tsx

@@ -35,9 +35,9 @@ const hideAnimationDuration = 300;
  * :::note
  * If the information you want to display has a higher importance or priority,
  * and you need to make sure that the user takes an action to dismiss it,
- * consider using the [Banner](/#/component/limel-banner/) component instead.
+ * consider using the [Banner](#/component/limel-banner/) component instead.
  * For more complex interactions and for delivering more detailed information,
- * [Dialog](/#/component/limel-dialog/) is a better choice.
+ * [Dialog](#/component/limel-dialog/) is a better choice.
  * :::
  *
  * @exampleComponent limel-example-snackbar

src/components/switch/examples/switch-readonly.tsx

@@ -12,8 +12,8 @@ import { Component, h, State } from '@stencil/core';
  * :::important
  * Before reading the documentations below, make sure to read
  * 1. our guides about the difference between
- * [Disabled vs. Readonly](/#/DesignGuidelines/disabled-vs-readonly.md/) in our components.
- * 2. our guidelines about [Labeling boolean fields](/#/DesignGuidelines/labeling-boolean-fields.md/).
+ * [Disabled vs. Readonly](#/DesignGuidelines/disabled-vs-readonly.md/) in our components.
+ * 2. our guidelines about [Labeling boolean fields](#/DesignGuidelines/labeling-boolean-fields.md/).
  * :::
  *
  * Using the `readonlyLabels` optional prop, you can override the `label` and