fixup! Style(repo): Apply markdonw linting rules

packages/web-twig/src/Resources/components/VisuallyHidden/README.md

@@ -26,7 +26,7 @@ Without lexer:
 {% endembed %}
 ```
 
-### API
+## API
 
 | Name               | Type            | Default | Required | Description                          |
 | ------------------ | --------------- | ------- | -------- | ------------------------------------ |

packages/web/CONTRIBUTING.md

@@ -14,7 +14,7 @@
 
 This is an example of a typical file structure of a component:
 
-```
+```txt
 ├── src
     ├── scss
     │   └── components
@@ -60,7 +60,7 @@ Similarly, component's tools serve as a storage of component-scoped:
 
 ## Linking Design Tokens
 
-Components can (and should!) reuse Spirit [design tokens].
+Components can (and should!) reuse Spirit [design tokens][design-tokens].
 
 Component's theme properties can be linked to design tokens. This way, the
 appearance of individual components is always unified and coherent: **anytime
@@ -71,7 +71,7 @@ discussion between Spirit developers and designers. Linking component
 properties to design tokens needs to be done carefully **in order for the design
 to work as a system.**
 
-Default Spirit design tokens live in the [`spirit-design-tokens`] package.
+Default Spirit design tokens live in the [`spirit-design-tokens`][design-tokens] package.
 Products may define their own design tokens as long as they preserve the same
 structure and naming.
 
@@ -85,7 +85,7 @@ the [`@tokens` API][tokens-api] with
 From the implementation point of view, design tokens are Sass variables
 organized in Sass modules. Within component styles, Sass modules with design
 tokens are referred to just by filename. However, because the modules do not
-exist in the place they are called in (the [`spirit-design-tokens`] package is
+exist in the place they are called in (the [`spirit-design-tokens`][design-tokens] package is
 stored in `node_modules`), the correct load path for the desired set of design
 tokens must be [provided on build time][configuring-load-path]. This is the only
 way how Sass modules can be affected from outside, without giving in their
@@ -193,7 +193,7 @@ great portion of encapsulation, traceability, and more.
 <summary>Does <code>@use</code> behave the same way as <code>@import</code>?</summary>
 
 In most situations, no. Most importantly, while `@import` loads everything into
-global context, `@use` is scoped and works more like `import` in [ES modules].
+global context, `@use` is scoped and works more like `import` in [ES modules][es-modules].
 
 </details>
 
@@ -217,12 +217,11 @@ To avoid conflicts, we need a convention to distinguish situations when somethin
 - `id` attribute can be used by **JS only**.
 </details>
 
-[design tokens]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens
-[`spirit-design-tokens`]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens
+[design-tokens]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens
 [tokens-api]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#tokens-api
 [configuring-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#configuring-load-path
 [rebranding]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#rebranding
 [design-tokens-faq]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#faq
 [sass-modules]: https://sass-lang.com/blog/the-module-system-is-launched
-[es modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
+[es-modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
 [sass-true]: https://github.com/oddbird/true

packages/web/README.md

@@ -171,7 +171,7 @@ Learn more in the [`spirit-design-tokens` docs][rebranding].
 
 Start local development server with `yarn start` to get started. You will get the live preview of all components and plugins in your browser. Just get dirty and change something and you will see the changes live.
 
-The dev-stack is based on [Vite].
+The dev-stack is based on [Vite][vite].
 
 ## Deprecations
 
@@ -186,7 +186,7 @@ Check your browser console to see if you are using any of the deprecated functio
 
 ## Examples
 
-👀 See [examples] for a live demo.
+👀 See [examples][examples] for a live demo.
 
 ## License
 

packages/web/src/scss/components/Accordion/README.md

@@ -14,7 +14,7 @@ Building blocks:
     - Collapse
       - Accordion content
 
-### Accordion
+### Accordion component
 
 Common wrapper for all items:
 

packages/web/src/scss/components/Checkbox/README.md

@@ -1,6 +1,6 @@
 # Checkbox
 
-## Basic usage:
+## Basic usage
 
 ```html
 <label for="checkbox-default" class="Checkbox">
@@ -11,7 +11,7 @@
 </label>
 ```
 
-## Required input:
+## Required input
 
 ```html
 <label for="checkbox-required" class="Checkbox">
@@ -22,7 +22,7 @@
 </label>
 ```
 
-## Validation State with Validation Text:
+## Validation State with Validation Text
 
 See Validation state [dictionary][dictionary-validation].
 
@@ -47,7 +47,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## Hidden label:
+## Hidden label
 
 ```html
 <label for="checkbox-hidden-label" class="Checkbox">
@@ -58,7 +58,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## Helper Text:
+## Helper Text
 
 ```html
 <label for="checkbox-helper-text" class="Checkbox">
@@ -70,7 +70,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## Disabled state:
+## Disabled state
 
 ```html
 <label for="checkbox-disabled" class="Checkbox Checkbox--disabled">
@@ -81,7 +81,7 @@ See Validation state [dictionary][dictionary-validation].
 </label>
 ```
 
-## As an Item:
+## As an Item
 
 ```html
 <label for="checkbox-item-default" class="Checkbox Checkbox--item">

packages/web/src/scss/components/Collapse/README.md

@@ -55,10 +55,10 @@ Hide button when collapse
 
 ## Wrapper attributes
 
-| Name                     | Type                    | Default | Required | Description                                                              |
-| ------------------------ | ----------------------- | ------- | -------- | ------------------------------------------------------------------------ |
-| `data-spirit-breakpoint` | [`tablet` \| `desktop`] | —       | ✕        | Breakpoint on which the collapsed content is forced to reveal \*         |
-| `data-spirit-parent`     | `string`                | —       | ✕        | A parent element selector that ensures that only one item is opened \*\* |
+| Name                     | Type                     | Default | Required | Description                                                              |
+| ------------------------ | ------------------------ | ------- | -------- | ------------------------------------------------------------------------ |
+| `data-spirit-breakpoint` | \[`tablet` \| `desktop`] | —       | ✕        | Breakpoint on which the collapsed content is forced to reveal \*         |
+| `data-spirit-parent`     | `string`                 | —       | ✕        | A parent element selector that ensures that only one item is opened \*\* |
 
 There can be several triggers, the same rules apply to each.
 

packages/web/src/scss/components/Dropdown/README.md

@@ -221,7 +221,7 @@
 </div>
 ```
 
-## Usage with [Item] component
+## Usage with [Item][item] component
 
 ```html
 <div class="Dropdown">
@@ -267,9 +267,9 @@ There are two options here. Use the trigger element as an anchor or wrap the men
 
 ## DropdownPopover
 
-| Attribute                   | Type                              | Default | Required | Description     |
-| --------------------------- | --------------------------------- | ------- | -------- | --------------- |
-| `data-spirit-fullwidthmode` | [`off` \| `mobile-only` \| `all`] | —       | ✕        | Full-width mode |
+| Attribute                   | Type                               | Default | Required | Description     |
+| --------------------------- | ---------------------------------- | ------- | -------- | --------------- |
+| `data-spirit-fullwidthmode` | \[`off` \| `mobile-only` \| `all`] | —       | ✕        | Full-width mode |
 
 ## JavaScript API
 

packages/web/src/scss/components/FieldGroup/README.md

@@ -161,7 +161,7 @@ To render validation text as a list, use `<ul>` element instead of `<div>`.
 When implementing client-side form validation, use JS interaction state classes (`has-success`, `has-warning`,
 `has-danger`) on the wrapping `<fieldset>` element and render validation texts in a `<div>` or `<ul>` with
 `data-spirit-element="validation_text"` attribute. This way your JS remains disconnected from CSS that may or may not be
-[prefixed].
+[prefixed][prefixed].
 
 **Remember this approach is only valid for vanilla JS implementation. React components mix CSS with JS by design and
 handle prefixes their own way.**

packages/web/src/scss/components/FileUploader/README.md

@@ -2,7 +2,7 @@
 
 FileUploader allows users to pick one or more files to upload.
 
-**FileUploader itself actually does not upload anything to the server.**
+> FileUploader itself actually does not upload anything to the server.
 
 FileUploader is a composition of a few subcomponents:
 
@@ -25,7 +25,7 @@ Please consult the [main README][web-readme] for how to include JavaScript plugi
 
 Or, feel free to write the controlling script yourself.
 
-## FileUploader
+## FileUploader component
 
 This is the main wrapper for the whole composition. It provides proper spacing
 for its subcomponents:
@@ -235,7 +235,7 @@ When implementing client-side form validation, use JS interaction state classes
 (`has-success`, `has-warning`, `has-danger`) on the wrapping `<div>` element and
 render validation texts in a `<div>` or `<ul>` with `data-spirit-element="validation_text"`
 attribute. This way your JS remains disconnected from CSS that may or may not be
-[prefixed].
+[prefixed][prefixed].
 
 **Remember this approach is only valid for vanilla JS implementation. React
 components mix CSS with JS by design and handle CSS class-name prefixes their

packages/web/src/scss/components/Header/README.md

@@ -110,7 +110,7 @@ building blocks to use:
    1. primary actions slot (all breakpoints),
    2. secondary actions slot (all breakpoints).
 
-## Header
+## Header component
 
 ### Mobile-Only Actions
 
@@ -487,7 +487,6 @@ And the complete Header Dialog:
 ✍️ Please do feel free to let us know should you believe this component lacks
 some important capabilities. Thank you! 🙏
 
-[examples]: https://spirit-design-system.netlify.app/packages/web/
 [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [mdn-dialog]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
 [offcanvas-docs]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Offcanvas/README.md

packages/web/src/scss/components/Item/README.md

@@ -104,7 +104,7 @@ Checkbox as a Item:
 </label>
 ```
 
-Usage in [Dropdown] component:
+Usage in [Dropdown][dropdown] component:
 
 ```html
 <div class="DropdownWrapper">

packages/web/src/scss/components/Modal/README.md

@@ -8,7 +8,7 @@ Modal is a composition of several subcomponents:
     - [ModalBody](#modalfooter)
     - [ModalFooter](#modalfooter)
 
-## Modal
+## Modal component
 
 Modal establishes the top layer with a backdrop. Under the hood it uses the [`<dialog>` element][mdn-dialog] which
 provides several accessibility advantages.
@@ -39,7 +39,7 @@ Example:
 </dialog>
 ```
 
-## ModalDialog
+## ModalDialog component
 
 ModalDialog is the actual dialog window, a place for the header, body, and footer of the dialog.
 
@@ -93,7 +93,7 @@ By default, the docked dialog on mobile screens shrinks to fit the height of its
 </article>
 ```
 
-## ModalHeader
+## ModalHeader component
 
 ModalHeader contains the title of the dialog and the close button.
 
@@ -130,7 +130,7 @@ the `aria-label` attribute on the `<dialog>` element:
 </dialog>
 ```
 
-## ModalBody
+## ModalBody component
 
 ModalBody holds the actual content of the Modal.
 
@@ -144,7 +144,7 @@ ModalBody holds the actual content of the Modal.
 </div>
 ```
 
-## ModalFooter
+## ModalFooter component
 
 ModalFooter is the place for actions represented by the Button component. While there always must be a primary Button,
 secondary actions are optional.
@@ -456,4 +456,3 @@ Or feel free to write controlling scripts yourself.
 [scroll-view]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/ScrollView/README.md
 [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment
-[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#feature-flags