@lion/ui 0.22.0 → 0.24.0

package/docs/fundamentals/rationales/TypeScript.md

@@ -2,7 +2,7 @@
 parts:
   - TypeScript
   - Rationales
-title: 'Rationales: TypeScript'
+title: 'TypeScript'
 eleventyNavigation:
   key: Rationales >> TypeScript
   title: TypeScript
@@ -10,7 +10,7 @@ eleventyNavigation:
   parent: Rationales
 ---
 
-# Rationales: TypeScript
+# TypeScript
 
 [TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript.
 
@@ -51,6 +51,66 @@ Lion uses [package.json export maps](https://nodejs.org/api/packages.html#export
 
 The export map works by defining explicit entry points for each package, mapping import paths to their actual file locations. For types, this means that when you import `@lion/ui/button.js`, TypeScript knows to look for the corresponding type definitions in the `dist-types` directory.
 
+## Subclass extension points and Lion 0.22
+
+`_focusableNode` is a protected getter in `FocusMixin`: subclasses can override it or
+access it through `this` and `super`. It is not a public DOM-query API. Lion 0.22 made
+the `LionField` and `LionListbox` overrides protected too; their earlier emitted
+declarations exposed them publicly, despite the protected mixin contract.
+
+For focusing a control, the supported public API is `control.focus()`, which delegates
+to its focusable node; `control.blur()` delegates similarly. This is not a replacement
+for every direct node access: event listeners, DOM inspection, focus options, and
+access to another component's internals need a separate downstream review. Subclass
+configuration remains supported without making the getter public.
+
+`slots` is a getter, both at runtime and in `SlotHost`. On TypeScript 4.7, intersecting
+a subclass constructor with another `Constructor<SlotHost>` can collapse the inherited
+getter into a property and reject a further getter override with `TS2611`. `SlotMixin`
+preserves the superclass type when its host is already present, matching its runtime
+deduplication; this allows extending `SlotMixin(LionSelectRich)` without that duplicate.
+
+Its overloads preserve an already-slotted base and describe a newly applied host
+separately. Unlike an unresolved conditional return type, this keeps a generic
+constructor recognizable when composing `ValidateMixin(SlotMixin(base))`. The
+newly applied host has one combined `LitElement & SlotHost` prototype rather than
+two intersected prototype declarations; base constructors and their static members
+remain part of the return type.
+
+`LionOption.styles` returns Lit's `CSSResultArray`, including nested style arrays.
+Subclasses may therefore return `[super.styles, additionalStyles]`, as supported
+by Lit at runtime, without flattening the inherited array solely for type checking.
+
+Downstream mixin signatures must also avoid reintroducing an already inherited
+`SlotHost`. For a mixin that **requires** a slotted base and only adds `FieldHost`
+members, the signature can retain those members without redeclaring the slot host:
+
+```ts
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LitElement } from 'lit';
+import type { SlotHost } from '@lion/ui/types/core.js';
+
+declare class FieldHost {
+  extraFieldOption: boolean;
+}
+
+declare function FieldMixin<T extends Constructor<LitElement & SlotHost>>(
+  base: T,
+): T & Constructor<FieldHost>;
+```
+
+Do not simply remove `SlotHost` from a mixin that must add slot support to an unslotted
+base, or drop other host members from its return type. Its signature must describe the
+actual composition. Neither `skipLibCheck` nor suppressing a downstream getter error
+corrects that signature.
+
+The consumer declaration gate (`npm run types-check-consumer --workspace @lion/ui`)
+checks the copied package's entry points, subclass extensions and JSDoc-typed generic
+mixin composition on the current compiler, plus the extension fixtures on pinned
+TypeScript 4.7.4. The older compiler is
+isolated in the private `test/typescript-legacy` workspace so it cannot replace the
+compiler used to build Lion.
+
 ## Type correction for JSDoc (no longer needed)
 
 Because Lion types its JavaScript with JSDoc rather than `.ts` files, older TypeScript

package/docs/fundamentals/rationales/accessibility.md

@@ -2,7 +2,7 @@
 parts:
   - Accessibility
   - Rationales
-title: 'Rationales: Accessibility'
+title: 'Accessibility'
 eleventyNavigation:
   key: Rationales >> Accessibility
   title: Accessibility
@@ -10,7 +10,7 @@ eleventyNavigation:
   parent: Rationales
 ---
 
-# Rationales: Accessibility
+# Accessibility
 
 In Lion accessibility is a first class citizen. That means accessibility is never an afterthought.
 
@@ -23,13 +23,13 @@ More on this topic can be found in the online panel discussion [Web Components,
 ## Shadow roots and accessibility
 
 Since our components and applications consist of multiple shadow roots that need to be able to reference each other, architecting accessible components takes extra strategy and planning.
-A practical example: all form controls inside a fieldset need to be able to lay accessible id relations to their parent (the fieldset). In other words, id relations should be cross component (which usually means cross shadow root). Scenarios like these require consistent architecture, allowing all form components to be interoperable. In general, light dom needs to be leveraged until a solution for cross root aria is available. For a deeper understanding of the topic, be sure to view these [slides about cross root aria](https://github.com/home/runner/work/lion/lion/_merged_assets/_static/crossRootAriaLion.pdf).
+A practical example: all form controls inside a fieldset need to be able to lay accessible id relations to their parent (the fieldset). In other words, id relations should be cross component (which usually means cross shadow root). Scenarios like these require consistent architecture, allowing all form components to be interoperable. In general, light dom needs to be leveraged until a solution for cross root aria is available. For a deeper understanding of the topic, be sure to view these [slides about cross root aria](https://github.com/home/runner/work/lion/lion/prev/_merged_assets/_static/crossRootAriaLion.pdf).
 
 ## Some details about the form system
 
 A huge part of Lion consists of its form system and components.
 
-This [presentation about accessible form components](https://github.com/home/runner/work/lion/lion/_merged_assets/_static/theoryOfFormsLion.pdf) explains how accesibility is built-in in all form components.
+This [presentation about accessible form components](https://github.com/home/runner/work/lion/lion/prev/_merged_assets/_static/theoryOfFormsLion.pdf) explains how accesibility is built-in in all form components.
 
 ## SlotMixin
 
@@ -37,4 +37,4 @@ Internally, we delegate all intricacies involved in managing light dom to SlotMi
 SlotMixin automatically mediates between light dom provided by the user ('public slots') and light dom provided by the component author ('private slots').
 Also, SlotMixin allows to hook into the reactive update loop of LitElement (automatically rerendering on property changes) and it automatically respects
 the scoped registry belonging to the shadow root.
-More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/core/SlotMixin.md)
+More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/core/SlotMixin.md)

package/docs/fundamentals/rationales/side-effects.md

@@ -2,7 +2,7 @@
 parts:
   - Side Effects
   - Rationales
-title: 'Rationales: Side Effects'
+title: 'Side Effects'
 eleventyNavigation:
   key: Rationales >> Side Effects
   title: Side Effects
@@ -10,7 +10,7 @@ eleventyNavigation:
   parent: Rationales
 ---
 
-# Rationales: Side Effects
+# Side Effects
 
 All our packages are side effect free due to the fact that es modules are always side effect free even when changing other es modules. Only code which accesses browser globals like `window`, `console` in the root of the module will be treated a side effect and always included.
 Everything else can be tree shaken by [rollup](https://rollupjs.org).

package/docs/fundamentals/rationales/versioning.md

@@ -2,7 +2,7 @@
 parts:
   - Versioning Lion
   - Rationales
-title: 'Rationales: Versioning Lion'
+title: 'Versioning Lion'
 eleventyNavigation:
   key: Rationales >> Versioning Lion
   title: Versioning Lion
@@ -10,7 +10,7 @@ eleventyNavigation:
   parent: Rationales
 ---
 
-# Rationales: Versioning Lion
+# Versioning Lion
 
 Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages.
 

package/docs/fundamentals/systems/core/SlotMixin.md

@@ -3,7 +3,7 @@ parts:
   - SlotMixin
   - Core
   - Systems
-title: 'Core: SlotMixin'
+title: 'SlotMixin'
 eleventyNavigation:
   key: Systems >> Core >> SlotMixin
   title: SlotMixin
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Core
 ---
 
-# Core: SlotMixin
+# SlotMixin
 
 The SlotMixin is made for solving accessibility challenges that inherently come with the usage of shadow dom.
 Until [AOM](https://wicg.github.io/aom/explainer.html) is in place, it is not possible to create relations between different shadow doms.
@@ -165,4 +165,4 @@ This will make sure that the slot provided by the user always takes precedence a
 
 ### Default slot
 
-As can be seen in the example of [SlotFunctionResults](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/core/#slotfunctionresults), '' can be used to add content to the default slot
+As can be seen in the example of [SlotFunctionResults](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/core/#slotfunctionresults), '' can be used to add content to the default slot

package/docs/fundamentals/systems/core/index.md

@@ -2,7 +2,7 @@
 parts:
   - Core
   - Systems
-title: 'Systems: Core'
+title: 'Core'
 eleventyNavigation:
   key: Systems >> Core
   title: Core
@@ -10,6 +10,6 @@ eleventyNavigation:
   parent: Systems
 ---
 
-# Systems: Core
+# Core
 
 -> go to Overview

package/docs/fundamentals/systems/core/overview.md

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Core
   - Systems
-title: 'Core: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Systems >> Core >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Core
 ---
 
-# Core: Overview
+# Overview
 
 The core package is mostly for in-depth usage.
 It handles the version of `lit-element` and `lit-html`.
@@ -28,7 +28,7 @@ import { LitElement, html, render } from 'lit-element';
 
 ## Features
 
-- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/core/#deduping-of-mixins)
+- [function to deduplicate mixins (dedupeMixin)](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/core/#deduping-of-mixins)
 - Mixin to handle disabled (DisabledMixin)
 - Mixin to handle disabled AND tabIndex (DisabledWithTabIndexMixin)
 - Mixin to manage auto-generated needed slot elements in light dom (SlotMixin)

package/docs/fundamentals/systems/form/formatting-and-parsing.md

@@ -3,7 +3,7 @@ parts:
   - Formatting and Parsing
   - Form
   - Systems
-title: 'Form: Formatting and Parsing'
+title: 'Formatting and Parsing'
 eleventyNavigation:
   key: Systems >> Form >> Formatting and Parsing
   title: Formatting and Parsing
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Form
 ---
 
-# Form: Formatting and Parsing
+# Formatting and Parsing
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -36,7 +36,7 @@ Our fields can automatically format/parse/serialize user input or an input set i
 
 Below are some concrete examples of implementations of formatters and parsers mimicking a (basic) amount input.
 
-> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-amount/overview.md).
+> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-amount/overview.md).
 > This comes with its own formatter, parser, serializer.
 
 ### Parsers & modelValue
@@ -243,16 +243,16 @@ Below we show three flow diagrams to show the flow of formatting, serializing an
 
 Where a user changes the input with their keyboard:
 
-![Standard flow](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
+![Standard flow](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
 
 ### Unparseable flow
 
 Where a user sets the input to something that is not parseable by the parser:
 
-![Unparseable flow](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
+![Unparseable flow](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
 
 ### Imperative / programmatic flow
 
 Where the developer sets the modelValue of the input programmatically:
 
-![Imperative flow](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')
+![Imperative flow](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')

package/docs/fundamentals/systems/form/index.md

@@ -2,7 +2,7 @@
 parts:
   - Form
   - Systems
-title: 'Systems: Form'
+title: 'Form'
 eleventyNavigation:
   key: Systems >> Form
   title: Form
@@ -10,6 +10,6 @@ eleventyNavigation:
   parent: Systems
 ---
 
-# Systems: Form
+# Form
 
 -> go to Overview

package/docs/fundamentals/systems/form/interaction-states.md

@@ -3,7 +3,7 @@ parts:
   - Interaction States
   - Form
   - Systems
-title: 'Form: Interaction States'
+title: 'Interaction States'
 eleventyNavigation:
   key: Systems >> Form >> Interaction States
   title: Interaction States
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Form
 ---
 
-# Form: Interaction States
+# Interaction States
 
 ```js script
 import { html, render } from '@mdjs/mdjs-preview';

package/docs/fundamentals/systems/form/model-value.md

@@ -3,7 +3,7 @@ parts:
   - ModelValue
   - Form
   - Systems
-title: 'Form: ModelValue'
+title: 'ModelValue'
 eleventyNavigation:
   key: Systems >> Form >> ModelValue
   title: ModelValue
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Form
 ---
 
-# Form: ModelValue
+# ModelValue
 
 The modelValue or model can be considered as the ‘aorta’ of our form system.
 It is the single source of truth; not only for the current state
@@ -34,7 +34,7 @@ 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](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/formatting-and-parsing.md)
+For more information about parsing and the Unparseable type, see [Formatting and Parsing](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/formatting-and-parsing.md)
 
 ### Event meta
 

package/docs/fundamentals/systems/form/overview.md

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Form
   - Systems
-title: 'Form: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Systems >> Form >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Form
 ---
 
-# Form: Overview
+# Overview
 
 This page should be used as a starting point when first using the Form System.
 It provides an overview of its essential building blocks and provides links to detailed explanations of most of its core concepts.
@@ -33,9 +33,9 @@ Fields (think of an input, textarea, select) are the actual form controls the en
 
 On top of this, they feature:
 
-- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
-- Advanced [validation](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/validate.md) possibilities.
-- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/interaction-states.md).
+- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
+- Advanced [validation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) possibilities.
+- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md).
 - Provision of labels and help texts in an easy, declarative manner.
 - Accessibility out of the box.
 - Advanced styling possibilities: map your own Design System to the internal HTML structure.
@@ -44,33 +44,33 @@ On top of this, they feature:
 
 ### Platform fields (wrappers)
 
-- [LionInput](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md), a wrapper for `<input>`.
-- [LionTextarea](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
-- [LionSelect](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/select/overview.md), a wrapper for `<select>`.
+- [LionInput](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md), a wrapper for `<input>`.
+- [LionTextarea](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
+- [LionSelect](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/select/overview.md), a wrapper for `<select>`.
 
 ### Custom fields (wrappers)
 
-Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
+Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
 
-- [LionCombobox](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/combobox/overview.md), a custom implementation of a combobox.
-- [LionDate](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
-- [LionDatepicker](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
-- [LionListbox](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/listbox/overview.md), a custom implementation of a listbox.
-- [LionInputAmount](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
-- [LionInputEmail](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
-- [LionInputIban](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
-- [LionInputRange](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
-- [LionInputStepper](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
-- [LionSelectRich](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
+- [LionCombobox](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/combobox/overview.md), a custom implementation of a combobox.
+- [LionDate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
+- [LionDatepicker](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
+- [LionListbox](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/listbox/overview.md), a custom implementation of a listbox.
+- [LionInputAmount](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
+- [LionInputEmail](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
+- [LionInputIban](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
+- [LionInputRange](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
+- [LionInputStepper](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
+- [LionSelectRich](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
 
 ### Choice Input Fields
 
 For form controls which return a `checked-state` you can use the `lion-choice-input` mixin. It is used in:
 
-- [LionCheckbox](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
+- [LionCheckbox](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
 - LionOption, an alternative for `<option>`.
-- [LionRadio](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
-- [LionSwitch](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/switch/overview.md), a custom implementation of a switch.
+- [LionRadio](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
+- [LionSwitch](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/switch/overview.md), a custom implementation of a switch.
 
 Which contains the following features:
 
@@ -82,14 +82,14 @@ Which contains the following features:
 
 Fieldsets are groups of fields. They can be considered fields on their own as well, since they partly share the normalized API via `FormControlMixin`. Fieldsets are the basis for:
 
-- [LionFieldset](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
-- [LionForm](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
-- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
-- [LionRadioGroup](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
+- [LionFieldset](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
+- [LionForm](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
+- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
+- [LionRadioGroup](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
 
 ## Other Resources
 
-- [Model Value](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/model-value.md)
-- [Formatting and parsing](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/formatting-and-parsing.md)
-- [Interaction states](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/interaction-states.md)
-- [Validation System](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/validate.md)
+- [Model Value](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/model-value.md)
+- [Formatting and parsing](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/formatting-and-parsing.md)
+- [Interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md)
+- [Validation System](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md)

package/docs/fundamentals/systems/form/styling.md

@@ -3,7 +3,7 @@ parts:
   - Styling
   - Form
   - Systems
-title: 'Form: Styling'
+title: 'Styling'
 eleventyNavigation:
   key: Systems >> Form >> Styling
   title: Styling
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Form
 ---
 
-# Form: Styling
+# Styling
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/fundamentals/systems/form/use-cases.md

@@ -3,7 +3,7 @@ parts:
   - Use Cases
   - Form
   - Systems
-title: 'Form: Use Cases'
+title: 'Use Cases'
 eleventyNavigation:
   key: Systems >> Form >> Use Cases
   title: Use Cases
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Form
 ---
 
-# Form: Use Cases
+# Use Cases
 
 This is a meta package to show interaction between various form elements.
 For usage and installation please see the appropriate packages.

package/docs/fundamentals/systems/form/validate.md

@@ -3,7 +3,7 @@ parts:
   - Validate
   - Form
   - Systems
-title: 'Form: Validate'
+title: 'Validate'
 eleventyNavigation:
   key: Systems >> Form >> Validate
   title: Validate
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Form
 ---
 
-# Form: Validate
+# Validate
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -70,7 +70,7 @@ Validation happens on every change of `modelValue`. A change in modelValue can b
 
 ## When validation feedback will be shown
 
-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](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/interaction-states.md),
+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](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md),
 validity states can determine whether a validation message should be shown along the input field.
 
 ## Assessing field validation state programmatically
@@ -245,7 +245,7 @@ export const requiredValidator = () => html`
 `;
 ```
 
-The default `Required` validation message is "Please, enter a(n) {fieldName}". In which the "fieldName" can be provided separately via the `fieldName` attribute, with a fallback to the label. See [override fieldname](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/#override-fieldname) for more information.
+The default `Required` validation message is "Please, enter a(n) {fieldName}". In which the "fieldName" can be provided separately via the `fieldName` attribute, with a fallback to the label. See [override fieldname](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/#override-fieldname) for more information.
 
 Specific required messages for a select and file-upload are created.
 

package/docs/fundamentals/systems/icon/index.md

@@ -2,7 +2,7 @@
 parts:
   - Icon
   - Systems
-title: 'Systems: Icon'
+title: 'Icon'
 eleventyNavigation:
   key: Systems >> Icon
   title: Icon
@@ -10,6 +10,6 @@ eleventyNavigation:
   parent: Systems
 ---
 
-# Systems: Icon
+# Icon
 
 -> go to Overview

package/docs/fundamentals/systems/icon/overview.md

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Icon
   - Systems
-title: 'Icon: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Systems >> Icon >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Icon
 ---
 
-# Icon: Overview
+# Overview
 
 The icon system provides a way of defining icon sets which are lazily loaded on demand when
 icons are rendered on the page. This way icon imports do not block the initial render of your

package/docs/fundamentals/systems/localize/dates.md

@@ -3,7 +3,7 @@ parts:
   - Format Dates
   - Localize
   - Systems
-title: 'Localize: Format Dates'
+title: 'Format Dates'
 eleventyNavigation:
   key: Systems >> Localize >> Format Dates
   title: Format Dates
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Localize
 ---
 
-# Localize: Format Dates
+# Format Dates
 
 ## Features
 

package/docs/fundamentals/systems/localize/index.md

@@ -2,7 +2,7 @@
 parts:
   - Localize
   - Systems
-title: 'Systems: Localize'
+title: 'Localize'
 eleventyNavigation:
   key: Systems >> Localize
   title: Localize
@@ -10,6 +10,6 @@ eleventyNavigation:
   parent: Systems
 ---
 
-# Systems: Localize
+# Localize
 
 -> go to Overview

package/docs/fundamentals/systems/localize/numbers.md

@@ -3,7 +3,7 @@ parts:
   - Format Numbers
   - Localize
   - Systems
-title: 'Localize: Format Numbers'
+title: 'Format Numbers'
 eleventyNavigation:
   key: Systems >> Localize >> Format Numbers
   title: Format Numbers
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Localize
 ---
 
-# Localize: Format Numbers
+# Format Numbers
 
 ## Features