From 0c53b1d4bb4fa51820656bacfc2aece653d03182 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Thu, 23 Jan 2020 18:24:38 +0100
Subject: [PATCH] fix: update links in stories

---
 packages/checkbox-group/README.md             |  2 +-
 .../checkbox-group/stories/index.stories.mdx  |  4 +-
 packages/fieldset/README.md                   |  2 +-
 .../fieldset/stories/overview.stories.mdx     |  8 ++--
 .../form-system/stories/10-intro.stories.mdx  |  9 ++--
 .../stories/20-System-Overview.stories.mdx    | 44 +++++++++----------
 .../stories/25-System-ModelValue.stories.mdx  |  2 +-
 ...System-creating-a-custom-field.stories.mdx |  4 +-
 packages/form/README.md                       |  2 +-
 packages/form/stories/overview.stories.mdx    |  8 ++--
 packages/input-amount/README.md               |  2 +-
 .../input-amount/stories/index.stories.mdx    |  4 +-
 packages/input-date/README.md                 |  2 +-
 packages/input-date/stories/index.stories.mdx |  6 +--
 packages/input-datepicker/README.md           |  2 +-
 .../stories/index.stories.mdx                 |  4 +-
 packages/input-email/README.md                |  2 +-
 .../input-email/stories/index.stories.mdx     |  4 +-
 packages/input-iban/README.md                 |  2 +-
 packages/input-iban/stories/index.stories.mdx |  4 +-
 packages/input-range/README.md                |  2 +-
 .../input-range/stories/index.stories.mdx     |  2 +-
 packages/input/README.md                      |  2 +-
 packages/input/stories/index.stories.mdx      |  6 +--
 .../stories/lion-web-components.stories.mdx   |  6 +--
 .../localize/stories/10-intro.stories.mdx     |  2 +-
 packages/option/stories/index.stories.mdx     |  4 +-
 packages/radio-group/README.md                |  2 +-
 .../radio-group/stories/index.stories.mdx     |  6 +--
 packages/select/README.md                     |  2 +-
 packages/textarea/README.md                   |  2 +-
 .../validate/stories/Overview.stories.mdx     |  2 +-
 32 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md
index 5bb0084185..87b1561e0d 100644
--- a/packages/checkbox-group/README.md
+++ b/packages/checkbox-group/README.md
@@ -8,7 +8,7 @@ You should use [lion-checkbox](../checkbox/)'s inside this element.
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/checkbox-group/stories/index.stories.mdx b/packages/checkbox-group/stories/index.stories.mdx
index 9e5acda9a5..dadaf1126b 100644
--- a/packages/checkbox-group/stories/index.stories.mdx
+++ b/packages/checkbox-group/stories/index.stories.mdx
@@ -37,11 +37,11 @@ Its purpose is to provide a way for users to check **multiple** options amongst
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
+> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
 
 ## Features
 
-Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
+Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
 
 ## How to use
 
diff --git a/packages/fieldset/README.md b/packages/fieldset/README.md
index b4b3bd6af4..f7c857fea0 100644
--- a/packages/fieldset/README.md
+++ b/packages/fieldset/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset) for a live demo and documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset-overview--page) for a live demo and documentation
 
 ## How to use
 
diff --git a/packages/fieldset/stories/overview.stories.mdx b/packages/fieldset/stories/overview.stories.mdx
index 912220f9a2..4edaa7310c 100644
--- a/packages/fieldset/stories/overview.stories.mdx
+++ b/packages/fieldset/stories/overview.stories.mdx
@@ -14,8 +14,8 @@ import './helpers/demo-fieldset-child.js';
 We have three specific fieldset implementations:
 
 - [lion-form](?path=/docs/forms-form-overview--page)
-- [lion-checkbox-group](?path=/docs/forms-checkbox-group)
-- [lion-radio-group](?path=/docs/forms-radio-group)
+- [lion-checkbox-group](?path=/docs/forms-checkbox-group--default-story)
+- [lion-radio-group](?path=/docs/forms-radio-group--default-story)
 
 ```html
 <lion-fieldset name="nameGroup" label="Name">
@@ -31,8 +31,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
-- Can have [validate](?path=/docs/forms-system-validate-system) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- Can have [validate](?path=/docs/forms-validation-overview--page) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 
diff --git a/packages/form-system/stories/10-intro.stories.mdx b/packages/form-system/stories/10-intro.stories.mdx
index 191eade714..c67614875b 100644
--- a/packages/form-system/stories/10-intro.stories.mdx
+++ b/packages/form-system/stories/10-intro.stories.mdx
@@ -6,7 +6,7 @@ The Form System allows you to create complex forms with various validations in a
 
 ## Features
 
-- Built in [validate](?path=/docs/forms-system-validate-system) for error/warning/info/success
+- Built in [validate](?path=/docs/forms-validation-overview--page) for error/warning/info/success
 - Formatting of values
 - Accessible
 
@@ -14,12 +14,13 @@ For a more in depth description look into the [Form System Overview](?path=/docs
 
 ## Packages
 
-| Package                                              | Description                        |
-| ---------------------------------------------------- | ---------------------------------- |
+| Package                                              | Description                                       |
+| ---------------------------------------------------- | ------------------------------------------------- |
 | [checkbox](?path=/docs/forms-checkbox--default-story)               | Checkbox form element              |
 | [checkbox-group](?path=/docs/forms-checkbox-group--default-story)   | Group of checkboxes                |
 | [field](?path=/docs/forms-field--default-story)                     | Base class for all inputs          |
-| [form](?path=/docs/forms-form--default-story)                       | Wrapper for multiple form elements |
+| [fieldset](?path=/docs/forms-fieldset-overview--page)               | Group for form inputs              |
+| [form](?path=/docs/forms-form-overview--page)                       | Wrapper for multiple form elements |
 | [input](?path=/docs/forms-input--default-story)                     | Input element for strings          |
 | [input-amount](?path=/docs/forms-input-amount--default-story)       | Input element for amounts          |
 | [input-date](?path=/docs/forms-input-date--default-story)           | Input element for dates            |
diff --git a/packages/form-system/stories/20-System-Overview.stories.mdx b/packages/form-system/stories/20-System-Overview.stories.mdx
index 64a6a2c96c..733eea1377 100644
--- a/packages/form-system/stories/20-System-Overview.stories.mdx
+++ b/packages/form-system/stories/20-System-Overview.stories.mdx
@@ -29,8 +29,8 @@ They extend `LionField`, which in turn uses the `FormControlMixin`.
 Fields provide a normalized api for both platform components and custom made form controls.
 On top of this, they offer:
 
-- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing) of view values
-- advanced [validation](?path=/docs/forms-system-validate-system) possibilities
+- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing--parser) of view values
+- advanced [validation](?path=/docs/forms-validation-overview--page) possibilities
 - creation of advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
 - provision of labels and help texts in an easy, declarative manner
 - accessibility out of the box <!-- TODO: write how our form system manages to deliver accessible components with all challenges that shadow dom provide -->
@@ -40,30 +40,30 @@ On top of this, they offer:
 
 Platform field wrappers add all of the functionality described above to native form elements.
 
-- [LionInput](?path=/docs/forms-input), a wrapper for `<input>`
-- [LionTextarea](?path=/docs/forms-textarea), a wrapper for `<textarea>`
-- [LionSelect](?path=/docs/forms-select), a wrapper for `<select>`
-- [LionRadio](?path=/docs/forms-radio-group), a wrapper for `<input type="radio">`
-- [LionCheckbox](?path=/docs/forms-checkbox-group), a wrapper for `<input type="checkbox">`
-- [LionInputRange](?path=/docs/forms-input-range), a wrapper for `<input type="range">`
+- [LionInput](?path=/docs/forms-input--default-story), a wrapper for `<input>`
+- [LionTextarea](?path=/docs/forms-textarea--default-story), a wrapper for `<textarea>`
+- [LionSelect](?path=/docs/forms-select--default-story), a wrapper for `<select>`
+- [LionRadio](?path=/docs/forms-radio-group--default-story), a wrapper for `<input type="radio">`
+- [LionCheckbox](?path=/docs/forms-checkbox-group--default-story), a wrapper for `<input type="checkbox">`
+- [LionInputRange](?path=/docs/forms-input-range--default-story), a wrapper for `<input type="range">`
 
 ### Dedicated fields
 
 Dedicated fields are less generic fields in a sense that they by default expect a certain type of
 modelValue. This means that they have validators, parsers and formatters preconfigured.
 
-- [`LionInputDate`](?path=/docs/forms-input-date)
-- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker)
-- [`LionInputEmail`](?path=/docs/forms-input-email)
-- [`LionInputAmount`](?path=/docs/forms-input-amount)
-- [`LionInputIban`](?path=/docs/forms-input-iban)
+- [`LionInputDate`](?path=/docs/forms-input-date--default-story)
+- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker--default-story)
+- [`LionInputEmail`](?path=/docs/forms-input-email--default-story)
+- [`LionInputAmount`](?path=/docs/forms-input-amount--default-story)
+- [`LionInputIban`](?path=/docs/forms-input-iban--default-story)
 
 ### Custom fields
 
 Instead of wrapping native elements, this category of fields contains custom built
 form elements.
 
-- [`LionSelectRich`](?path=/docs/forms-select-rich), an advanced (rich) version of `<select>`
+- [`LionSelectRich`](?path=/docs/forms-select-rich--default-story), an advanced (rich) version of `<select>`
 
 One could also think of components like:
 
@@ -80,17 +80,17 @@ Fieldsets are groups of fields. They can be considered fields on their own as we
 partly share the normalized api via `FormControlMixin`.
 Fieldsets are at the base of:
 
-- [`LionFieldset`](?path=/docs/forms-fieldset)
-- [`LionForm`](?path=/docs/forms-form)
-- [`LionRadioGroup`](?path=/docs/forms-radio-group)
-- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group)
+- [`LionFieldset`](?path=/docs/forms-fieldset-overview--page)
+- [`LionForm`](?path=/docs/forms-form-overview--page)
+- [`LionRadioGroup`](?path=/docs/forms-radio-group--default-story)
+- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group--default-story)
 
 ## Other Resources
 
 <!-- TODO: - [`FormControlMixin`] () -->
 <!-- TODO: - [`LionField`] () -->
 
-- [Model Value](?path=/docs/forms-system-modelvalue)
-- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing)
-- [Interaction states](?path=/docs/forms-system-interaction-states)
-- [Validation System](?path=/docs/forms-system-validate-system)
+- [Model Value](?path=/docs/forms-system-modelvalue--page)
+- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
+- [Interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- [Validation System](?path=/docs/forms-validation-overview--page)
diff --git a/packages/form-system/stories/25-System-ModelValue.stories.mdx b/packages/form-system/stories/25-System-ModelValue.stories.mdx
index 12ea57f44a..9a1d056ab3 100644
--- a/packages/form-system/stories/25-System-ModelValue.stories.mdx
+++ b/packages/form-system/stories/25-System-ModelValue.stories.mdx
@@ -25,4 +25,4 @@ level, via:
 > Internal/private concepts like viewValue, formattedValue, serializedValue are therefore not
 > recommended as a means of interaction.
 
-For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing)
+For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
diff --git a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx b/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
index fd99ee5b85..c18fb904a8 100644
--- a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
+++ b/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
@@ -9,7 +9,7 @@ import './helper-wc/h-output.js';
 # Creating a custom field
 
 Custom fields can be created in just a few steps. All you need is an interaction element
-(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview)
+(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview--page)
 functionality.
 
 ## Prerequisite: an interaction element
@@ -25,7 +25,7 @@ it has a tabindex=“0” applied.
 ## Connecting the interaction element to the field
 
 Now we want to integrate the slider in our form framework to enrich the user interface, get
-validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview).
+validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview--page).
 We start of by creating a component `<lion-slider>` that extends from `LionField`.
 Then we follow the steps below:
 
diff --git a/packages/form/README.md b/packages/form/README.md
index d4285f4b1b..7f53d55532 100644
--- a/packages/form/README.md
+++ b/packages/form/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form) for a live demo and documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form-overview--page) for a live demo and documentation
 
 ## How to use
 
diff --git a/packages/form/stories/overview.stories.mdx b/packages/form/stories/overview.stories.mdx
index 1c2cc6358b..8e349a9f2a 100644
--- a/packages/form/stories/overview.stories.mdx
+++ b/packages/form/stories/overview.stories.mdx
@@ -5,7 +5,7 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
 # Form
 
 `lion-form` is a webcomponent that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview).
+It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
 
 ```html
 <lion-form id="form">
@@ -21,12 +21,12 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
-- Registration mechanism for [form controls](?path=/docs/forms-system-overview)
+- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- Registration mechanism for [form controls](?path=/docs/forms-system-overview--page)
 - Accessible out of the box
 
 For more information about fields that are designed for lion-form, please read
-[Forms](?path=/docs/forms-form).
+[Forms](?path=/docs/forms-system-overview--page).
 
 ## Examples
 
diff --git a/packages/input-amount/README.md b/packages/input-amount/README.md
index bccb5c6eef..76f7b4dfb6 100644
--- a/packages/input-amount/README.md
+++ b/packages/input-amount/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-amount/stories/index.stories.mdx b/packages/input-amount/stories/index.stories.mdx
index d185c30eed..99b15c9344 100644
--- a/packages/input-amount/stories/index.stories.mdx
+++ b/packages/input-amount/stories/index.stories.mdx
@@ -31,13 +31,13 @@ If there are no valid characters in the input whatsoever, it will provide an err
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-system-overview)
+- Based on [lion-input](?path=/docs/forms-system-overview--page)
 - Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Can make use of number specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber
diff --git a/packages/input-date/README.md b/packages/input-date/README.md
index 07735557dc..04d5eda221 100644
--- a/packages/input-date/README.md
+++ b/packages/input-date/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-date/stories/index.stories.mdx b/packages/input-date/stories/index.stories.mdx
index 777b9c9977..f8b371fd82 100644
--- a/packages/input-date/stories/index.stories.mdx
+++ b/packages/input-date/stories/index.stories.mdx
@@ -25,11 +25,11 @@ import '../lion-input-date.js';
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input)
-- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
+- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate
diff --git a/packages/input-datepicker/README.md b/packages/input-datepicker/README.md
index ba0663d90e..914a956026 100644
--- a/packages/input-datepicker/README.md
+++ b/packages/input-datepicker/README.md
@@ -5,7 +5,7 @@ For an input field with a big range, such as `birthday-input`, a datepicker is n
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-datepicker/stories/index.stories.mdx b/packages/input-datepicker/stories/index.stories.mdx
index e582fe1965..6038adff9a 100644
--- a/packages/input-datepicker/stories/index.stories.mdx
+++ b/packages/input-datepicker/stories/index.stories.mdx
@@ -30,9 +30,9 @@ We encourage using the standard [lion-input-date](?path=/docs/form-component-inp
 - Input field with a datepicker to help to choose a date
 - Based on [lion-input-date](?path=/docs/form-component-input-date)
 - Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker
-- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate
diff --git a/packages/input-email/README.md b/packages/input-email/README.md
index 89be3f6e1f..fc21ad7e91 100644
--- a/packages/input-email/README.md
+++ b/packages/input-email/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-email/stories/index.stories.mdx b/packages/input-email/stories/index.stories.mdx
index c751dfee88..c135649e66 100644
--- a/packages/input-email/stories/index.stories.mdx
+++ b/packages/input-email/stories/index.stories.mdx
@@ -24,8 +24,8 @@ import '../lion-input-email.js';
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input)
-- Makes use of email [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## How to use
diff --git a/packages/input-iban/README.md b/packages/input-iban/README.md
index 12e8288031..cbc8f7587d 100644
--- a/packages/input-iban/README.md
+++ b/packages/input-iban/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-iban/stories/index.stories.mdx b/packages/input-iban/stories/index.stories.mdx
index d6d889d697..872e370f12 100644
--- a/packages/input-iban/stories/index.stories.mdx
+++ b/packages/input-iban/stories/index.stories.mdx
@@ -26,9 +26,9 @@ Its purpose is to provide a way for users to fill in an IBAN (International Bank
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input)
+- Based on [lion-input](?path=/docs/forms-input--default-story)
 - Default label in different languages
-- Makes use of IBAN specific [validate](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically
diff --git a/packages/input-range/README.md b/packages/input-range/README.md
index c906ad62db..c39a187789 100644
--- a/packages/input-range/README.md
+++ b/packages/input-range/README.md
@@ -7,7 +7,7 @@ Its purpose is to provide a way for users to select one value from a range of va
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-range/stories/index.stories.mdx b/packages/input-range/stories/index.stories.mdx
index 3959978ea8..5aaa41db8c 100644
--- a/packages/input-range/stories/index.stories.mdx
+++ b/packages/input-range/stories/index.stories.mdx
@@ -26,7 +26,7 @@ Its purpose is to provide a way for users to select one value from a range of va
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input).
+- Based on [lion-input](?path=/docs/forms-input--default-story).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
diff --git a/packages/input/README.md b/packages/input/README.md
index 0624fd7eca..b7fa2fbb05 100644
--- a/packages/input/README.md
+++ b/packages/input/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input/stories/index.stories.mdx b/packages/input/stories/index.stories.mdx
index 931a32df8c..b66f2f3566 100644
--- a/packages/input/stories/index.stories.mdx
+++ b/packages/input/stories/index.stories.mdx
@@ -22,7 +22,7 @@ import '../lion-input.js';
 
 ## Features
 
-- Based on [field](?path=/docs/forms-system-overview)
+- Based on [field](?path=/docs/forms-system-overview--page)
 - Extra visual elements can be added via `slots`
   - **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
     For example add an `sr-only` class to the label to make it visually hidden.
@@ -33,7 +33,7 @@ import '../lion-input.js';
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `read-only` to the native input.
-- Can make us of [validation](?path=/docs/forms-system-validate-system)
+- Can make us of [validation](?path=/docs/forms-validation-overview--page)
 
 ## How to use
 
@@ -195,7 +195,7 @@ In these cases a button with an icon is used.
 
 ## Using validation
 
-The input can be used with [validation](?path=/docs/forms-system-validate-system).
+The input can be used with [validation](?path=/docs/forms-validation-overview--page).
 On certain conditions, a feedback message can be shown if the input value is invalid.
 
 You can change the locale with the buttons below the field.
diff --git a/packages/intros/stories/lion-web-components.stories.mdx b/packages/intros/stories/lion-web-components.stories.mdx
index 90a54bfccc..ddd91c5d9d 100644
--- a/packages/intros/stories/lion-web-components.stories.mdx
+++ b/packages/intros/stories/lion-web-components.stories.mdx
@@ -40,9 +40,9 @@ If you need more details these are the actual npm packages we are publishing
 | Package                                                               | Version                                                                                                                              | Description                                            |
 | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
 | **-- Forms --**                                                       |                                                                                                                                      |                                                        |
-| [form](?path=/docs/forms-form--default-story)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     |
-| [field](?path=/docs/forms-system-overview--page)                      | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              |
-| [fieldset](?path=/docs/forms-fieldset--default-story)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  |
+| [form](?path=/docs/forms-form-overview--page)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     |
+| [field](?path=/docs/forms-system-overview--page)                | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              |
+| [fieldset](?path=/docs/forms-fieldset-overview--page)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  |
 | [validate](?path=/docs/form-system-validate-system--page)             | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate)                         | Validation for form components                         |
 | [checkbox](?path=/docs/forms-checkbox--default-story)                 | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox)                         | Checkbox form element                                  |
 | [checkbox-group](?path=/docs/forms-checkbox-group--default-story)     | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)       | Group of checkboxes                                    |
diff --git a/packages/localize/stories/10-intro.stories.mdx b/packages/localize/stories/10-intro.stories.mdx
index 91ca676188..25cd1d6bb0 100644
--- a/packages/localize/stories/10-intro.stories.mdx
+++ b/packages/localize/stories/10-intro.stories.mdx
@@ -23,7 +23,7 @@ Further examples can be seen at [Features Overview Demo](?path=/docs/localize-fe
 | --------------------------------------------------------------------- | --------------------------------------------- |
 | [Translate Text](?path=/docs/localize-translate-text--function-story) | Load and translate text in multiple languages |
 | [Format Numbers](?path=/docs/localize-numbers--formatting)            | Format numbers in multiple languages          |
-| [Format Dates](?path=/docs/localize-dates--formatting)                | Format dates in multiple languages            |
+| [Format Dates](?path=/docs/localize-dates--formatting)--formatting)                | Format dates in multiple languages            |
 
 ## How to use
 
diff --git a/packages/option/stories/index.stories.mdx b/packages/option/stories/index.stories.mdx
index c036cb59cd..bfd9de0803 100644
--- a/packages/option/stories/index.stories.mdx
+++ b/packages/option/stories/index.stories.mdx
@@ -6,7 +6,7 @@ import '../lion-option.js';
 
 # Option
 
-`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich)
+`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich--default-story)
 
 <Story name="Default">
   {html`
@@ -117,4 +117,4 @@ This is identical to `lion-checkbox`, `lion-radio` etc.
 
 This also explains the (intended) accessibility violation when viewing these demos in Canvas mode.
 
-For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich).
+For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich--default-story).
diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md
index 7fd9392731..801e9cc049 100644
--- a/packages/radio-group/README.md
+++ b/packages/radio-group/README.md
@@ -8,7 +8,7 @@ You should use [lion-radio](../radio/)'s inside this element.
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/radio-group/stories/index.stories.mdx b/packages/radio-group/stories/index.stories.mdx
index 3667d2358d..f696f3a91d 100644
--- a/packages/radio-group/stories/index.stories.mdx
+++ b/packages/radio-group/stories/index.stories.mdx
@@ -27,12 +27,12 @@ You should use `<lion-radio>`s inside this element.
 </lion-radio-group>
 ```
 
-- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
-- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select) instead
+- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
+- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
 
 ## Features
 
-Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
+Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
 
 - Get or set the checked value of the group:
   - modelValue (default) - `checkedValue()`
diff --git a/packages/select/README.md b/packages/select/README.md
index 8d848de3b2..e1871e4173 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/textarea/README.md b/packages/textarea/README.md
index efc818126b..bf70c7b24e 100644
--- a/packages/textarea/README.md
+++ b/packages/textarea/README.md
@@ -7,7 +7,7 @@ Its purpose is to provide a way for users to write text that is multiple lines l
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/validate/stories/Overview.stories.mdx b/packages/validate/stories/Overview.stories.mdx
index c9dd1c40b1..fc6d3e02e0 100644
--- a/packages/validate/stories/Overview.stories.mdx
+++ b/packages/validate/stories/Overview.stories.mdx
@@ -19,7 +19,7 @@ We could therefore say validation happens 'realtime'. This is aligned with the p
 
 Although validation happens realtime under the hood, displaying validity feedback in realtime may
 not always lead to the desired User Experience.
-Together with [interaction states](?path=/docs/form-system-interaction-states--interaction-states),
+Together with [interaction states](?path=/docs/forms-system-interaction-states--interaction-states),
 validity states can determine whether a validation message should be shown along the input field.
 
 ## Validators