fix: update links in stories

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
 

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
 

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
 

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
 

packages/form-system/stories/10-intro.stories.mdx

@@ -6,20 +6,21 @@ 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
 
 For a more in depth description look into the [Form System Overview](?path=/docs/forms-system-overview--page).
 
 ## 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            |

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)

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)

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:
 

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
 

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
 

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
 

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

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
 

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

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
 

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

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
 

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

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
 

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

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
 

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`.

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
 

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.