@lion/ui 0.14.3 → 0.15.1

package/docs/components/accordion/index.md

@@ -1,7 +1,7 @@
 ---
+title: Accordion
 parts:
   - Accordion
-title: Accordion
 eleventyNavigation:
   key: Accordion
   order: 0

package/docs/components/accordion/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Accordion: Overview'
 parts:
   - Accordion
   - Overview
-title: 'Accordion: Overview'
 eleventyNavigation:
   key: 'Accordion: Overview'
   order: 10

package/docs/components/accordion/reference.md

@@ -1,8 +1,8 @@
 ---
+title: 'Accordion: Reference'
 parts:
   - Accordion
   - Reference
-title: 'Accordion: Reference'
 eleventyNavigation:
   key: 'Accordion: Reference'
   order: 30

package/docs/components/accordion/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Accordion: Use Cases'
 parts:
   - Accordion
   - Use Cases
-title: 'Accordion: Use Cases'
 eleventyNavigation:
   key: 'Accordion: Use Cases'
   order: 20

package/docs/components/button/{extensions/bootstrap-button.mjs → assets/bootstrap-button.js}

@@ -18,8 +18,9 @@ export class BootstrapButton extends LionButton {
         --bs-border-radius: 0.375rem;
         --bs-border-width: 1px;
 
-        --bs-btn-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
-          'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        --bs-btn-font-family:
+          system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
+          'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
           'Segoe UI Symbol', 'Noto Color Emoji';
         margin: 0.25rem 0.125rem;
 
@@ -34,7 +35,8 @@ export class BootstrapButton extends LionButton {
         --bs-btn-border-color: transparent;
         --bs-btn-border-radius: var(--bs-border-radius);
         --bs-btn-hover-border-color: transparent;
-        --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+        --bs-btn-box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
         --bs-btn-disabled-opacity: 0.65;
         --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
         display: inline-block;
@@ -54,8 +56,11 @@ export class BootstrapButton extends LionButton {
         border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
         border-radius: var(--bs-btn-border-radius);
         background-color: var(--bs-btn-bg);
-        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        transition:
+          color 0.15s ease-in-out,
+          background-color 0.15s ease-in-out,
+          border-color 0.15s ease-in-out,
+          box-shadow 0.15s ease-in-out;
         text-transform: none;
       }
 

package/docs/components/button/examples.md

@@ -1,8 +1,8 @@
 ---
+title: 'Button: Examples'
 parts:
   - Button
   - Examples
-title: 'Button: Examples'
 eleventyNavigation:
   key: 'Button: Examples'
   order: 30

package/docs/components/button/extensions.md

@@ -1,8 +1,8 @@
 ---
+title: 'Button: Extensions'
 parts:
   - Button
   - Extensions
-title: 'Button: Extensions'
 eleventyNavigation:
   key: 'Button: Extensions'
   order: 90
@@ -14,7 +14,7 @@ eleventyNavigation:
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
-import './extensions/bootstrap-button.mjs';
+import './assets/bootstrap-button.js';
 ```
 
 ## Bootstrap button

package/docs/components/button/index.md

@@ -1,11 +1,11 @@
 ---
+title: Button
 parts:
   - Button
-title: Button
 eleventyNavigation:
   key: Button
-  order: 10
   title: Button
+  order: 10
 ---
 
 # Button

package/docs/components/button/overview.md

@@ -1,13 +1,13 @@
 ---
+title: 'Button: Overview'
 parts:
-  - Button
   - Overview
-title: 'Button: Overview'
+  - Button
 eleventyNavigation:
-  key: 'Button: Overview'
+  key: Button >> Overview
+  title: Overview
   order: 10
   parent: Button
-  title: Overview
 ---
 
 # Button: Overview

package/docs/components/button/use-cases.md

@@ -1,13 +1,13 @@
 ---
+title: 'Button: Use Cases'
 parts:
-  - Button
   - Use Cases
-title: 'Button: Use Cases'
+  - Button
 eleventyNavigation:
-  key: 'Button: Use Cases'
+  key: Button >> Use Cases
+  title: Use Cases
   order: 20
   parent: Button
-  title: Use Cases
 ---
 
 # Button: Use Cases
@@ -74,10 +74,10 @@ export const withinForm = () => html`
     <input id="firstNameId" name="firstName" />
     <label for="lastNameId">Last name</label>
     <input id="lastNameId" name="lastName" />
-    <lion-button-submit @click="${ev => console.log('click submit handler', ev.target)}"
+    <lion-button-submit @click=${ev => console.log('click submit handler', ev.target)}
       >Submit</lion-button-submit
     >
-    <lion-button-reset @click="${ev => console.log('click reset handler', ev.target)}"
+    <lion-button-reset @click=${ev => console.log('click reset handler', ev.target)}
       >Reset</lion-button-reset
     >
   </form>

package/docs/components/calendar/index.md

@@ -1,7 +1,7 @@
 ---
+title: Calendar
 parts:
   - Calendar
-title: Calendar
 eleventyNavigation:
   key: Calendar
   order: 10

package/docs/components/calendar/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Calendar: Overview'
 parts:
   - Calendar
   - Overview
-title: 'Calendar: Overview'
 eleventyNavigation:
   key: 'Calendar: Overview'
   order: 10

package/docs/components/calendar/use-cases.md

@@ -1,11 +1,11 @@
 ---
+title: 'Calendar: Use Cases'
 parts:
   - Calendar
   - Use Cases
-title: 'Calendar: Use Cases'
 eleventyNavigation:
   key: 'Calendar: Use Cases'
-  order: 20
+  order: 0
   parent: Calendar
   title: Use Cases
 ---

package/docs/components/checkbox-group/index.md

@@ -1,7 +1,7 @@
 ---
+title: Checkbox Group
 parts:
   - Checkbox Group
-title: Checkbox Group
 eleventyNavigation:
   key: Checkbox Group
   order: 10

package/docs/components/checkbox-group/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Checkbox Group: Overview'
 parts:
   - Checkbox Group
   - Overview
-title: 'Checkbox Group: Overview'
 eleventyNavigation:
   key: 'Checkbox Group: Overview'
   order: 10
@@ -31,11 +31,11 @@ import '@lion/ui/define/lion-checkbox.js';
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/form/overview.md)'s serialization result.
+> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation

package/docs/components/checkbox-group/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Checkbox Group: Use Cases'
 parts:
   - Checkbox Group
   - Use Cases
-title: 'Checkbox Group: Use Cases'
 eleventyNavigation:
   key: 'Checkbox Group: Use Cases'
   order: 20

package/docs/components/collapsible/examples.md

@@ -1,8 +1,8 @@
 ---
+title: 'Collapsible: Examples'
 parts:
   - Collapsible
   - Examples
-title: 'Collapsible: Examples'
 eleventyNavigation:
   key: 'Collapsible: Examples'
   order: 30

package/docs/components/collapsible/index.md

@@ -1,7 +1,7 @@
 ---
+title: Collapsible
 parts:
   - Collapsible
-title: Collapsible
 eleventyNavigation:
   key: Collapsible
   order: 10

package/docs/components/collapsible/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Collapsible: Overview'
 parts:
   - Collapsible
   - Overview
-title: 'Collapsible: Overview'
 eleventyNavigation:
   key: 'Collapsible: Overview'
   order: 10
@@ -34,7 +34,7 @@ export const main = () => html`
 ## Features
 
 - Use `opened` attribute or `toggle()` method to render default open.
-- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/button/overview.md) or native `button` with custom styling.
+- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/button/overview.md) or native `button` with custom styling.
 - Observe the state with the help of `@opened-changed` event.
 - `show()` and `hide()` are helper methods to hide or show the content from outside.
 

package/docs/components/collapsible/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Collapsible: Use Cases'
 parts:
   - Collapsible
   - Use Cases
-title: 'Collapsible: Use Cases'
 eleventyNavigation:
   key: 'Collapsible: Use Cases'
   order: 20

package/docs/components/combobox/extensions.md

@@ -1,8 +1,8 @@
 ---
+title: 'Combobox: Extensions'
 parts:
   - Combobox
   - Extensions
-title: 'Combobox: Extensions'
 eleventyNavigation:
   key: 'Combobox: Extensions'
   order: 30
@@ -59,6 +59,7 @@ export const Github = () => html`
 
 ```js preview-story
 export const Whatsapp = () => {
+  // in Rocket this is resolved based on the URL, in astro this is resolved based on filesystem (or is it?)
   const obamaImgUrl = new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href;
   const trumpImgUrl = new URL('../src/wa-combobox/assets/trump.jpeg', import.meta.url).href;
   const bidenImgUrl = new URL('../src/wa-combobox/assets/biden.jpeg', import.meta.url).href;

package/docs/components/combobox/index.md

@@ -1,7 +1,7 @@
 ---
+title: Combobox
 parts:
   - Combobox
-title: Combobox
 eleventyNavigation:
   key: Combobox
   order: 10

package/docs/components/combobox/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Combobox: Overview'
 parts:
   - Combobox
   - Overview
-title: 'Combobox: Overview'
 eleventyNavigation:
   key: 'Combobox: Overview'
   order: 10
@@ -46,7 +46,7 @@ export const main = () => html`
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/combobox/extensions.md)
 
 ## Features
 

package/docs/components/combobox/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Combobox: Use Cases'
 parts:
   - Combobox
   - Use Cases
-title: 'Combobox: Use Cases'
 eleventyNavigation:
   key: 'Combobox: Use Cases'
   order: 20
@@ -558,4 +558,4 @@ export const complexObjectChoiceValue = () =>
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/listbox/overview.md) for more information.

package/docs/components/dialog/index.md

@@ -1,7 +1,7 @@
 ---
+title: Dialog
 parts:
   - Dialog
-title: Dialog
 eleventyNavigation:
   key: Dialog
   order: 20

package/docs/components/dialog/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Dialog: Overview'
 parts:
   - Dialog
   - Overview
-title: 'Dialog: Overview'
 eleventyNavigation:
   key: 'Dialog: Overview'
   order: 10
@@ -66,6 +66,6 @@ import '@lion/ui/define/lion-dialog.js';
 ## Changing the configuration
 
 You can use the `.config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/overlays/configuration.md).
+The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/overlays/configuration.md).
 
 The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.

package/docs/components/dialog/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Dialog: Use Cases'
 parts:
   - Dialog
   - Use Cases
-title: 'Dialog: Use Cases'
 eleventyNavigation:
   key: 'Dialog: Use Cases'
   order: 20

package/docs/components/drawer/index.md

@@ -1,7 +1,7 @@
 ---
+title: Drawer
 parts:
   - Drawer
-title: Drawer
 eleventyNavigation:
   key: Drawer
   order: 20

package/docs/components/drawer/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Drawer: Overview'
 parts:
   - Drawer
   - Overview
-title: 'Drawer: Overview'
 eleventyNavigation:
   key: 'Drawer: Overview'
   order: 10

package/docs/components/drawer/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Drawer: Use Cases'
 parts:
   - Drawer
   - Use Cases
-title: 'Drawer: Use Cases'
 eleventyNavigation:
   key: 'Drawer: Use Cases'
   order: 20

package/docs/components/fieldset/index.md

@@ -1,7 +1,7 @@
 ---
+title: Fieldset
 parts:
   - Fieldset
-title: Fieldset
 eleventyNavigation:
   key: Fieldset
   order: 20

package/docs/components/fieldset/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Fieldset: Overview'
 parts:
   - Fieldset
   - Overview
-title: 'Fieldset: Overview'
 eleventyNavigation:
   key: 'Fieldset: Overview'
   order: 10
@@ -32,9 +32,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -43,8 +43,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](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

package/docs/components/fieldset/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Fieldset: Use Cases'
 parts:
   - Fieldset
   - Use Cases
-title: 'Fieldset: Use Cases'
 eleventyNavigation:
   key: 'Fieldset: Use Cases'
   order: 20

package/docs/components/form/index.md

@@ -1,7 +1,7 @@
 ---
+title: Form
 parts:
   - Form
-title: Form
 eleventyNavigation:
   key: Form
   order: 20

package/docs/components/form/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Form: Overview'
 parts:
   - Form
   - Overview
-title: 'Form: Overview'
 eleventyNavigation:
   key: 'Form: Overview'
   order: 10
@@ -20,7 +20,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => {
@@ -49,11 +49,11 @@ export const main = () => {
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

package/docs/components/form/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Form: Use Cases'
 parts:
   - Form
   - Use Cases
-title: 'Form: Use Cases'
 eleventyNavigation:
   key: 'Form: Use Cases'
   order: 20
@@ -26,7 +26,7 @@ import '@lion/ui/define/lion-form.js';
 To submit a form, use a regular `<button>` (or `<lion-button-submit>`) somewhere inside the native `<form>`. Then, add a `submit` handler on the `<lion-form>`. You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.
 
 Another example is checking if the form has errors, and focusing the first field with a validation error.
-To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/form/validate.md).
+To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/validate.md).
 
 To fire a submit from JavaScript, select the `<lion-form>` element and call `.submit()`.
 
@@ -128,7 +128,7 @@ export const prefilledData = () => {
 };
 ```
 
-Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/form/formatting-and-parsing.md).
+Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/formatting-and-parsing.md).
 
 ## Sub forms
 

package/docs/components/icon/index.md

@@ -1,7 +1,7 @@
 ---
+title: Icon
 parts:
   - Icon
-title: Icon
 eleventyNavigation:
   key: Icon
   order: 20

package/docs/components/icon/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Icon: Overview'
 parts:
   - Icon
   - Overview
-title: 'Icon: Overview'
 eleventyNavigation:
   key: 'Icon: Overview'
   order: 10

package/docs/components/icon/use-cases.md

@@ -1,8 +1,8 @@
 ---
+title: 'Icon: Use Cases'
 parts:
   - Icon
   - Use Cases
-title: 'Icon: Use Cases'
 eleventyNavigation:
   key: 'Icon: Use Cases'
   order: 20
@@ -20,25 +20,12 @@ import './assets/iconset-misc.js';
 import * as spaceSet from './assets/iconset-space.js';
 
 import '@lion/ui/define/lion-icon.js';
-
-icons.addIconResolver('lion', (iconset, name) => {
-  switch (iconset) {
-    case 'bugs':
-      return import('./assets/iconset-bugs.js').then(module => module[name]);
-    case 'space':
-      return import('./assets/iconset-space.js').then(module => module[name]);
-    case 'misc':
-      return import('./assets/iconset-misc.js').then(module => module[name]);
-    default:
-      throw new Error(`Unknown iconset ${iconset}`);
-  }
-});
 ```
 
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/b80c6f41b02bf4dbee5f93ff16a451507cc11b04/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

package/docs/components/index.md

@@ -1,7 +1,7 @@
 ---
+title: Components
 parts:
   - Components
-title: Components
 eleventyNavigation:
   key: Components
   order: 40

package/docs/components/input/index.md

@@ -1,7 +1,7 @@
 ---
+title: Input
 parts:
   - Input
-title: Input
 eleventyNavigation:
   key: Input
   order: 20