npm - @lion/ui - Versions diffs - 0.23.0 → 0.24.0 - Mend

@lion/ui 0.23.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

package/docs/components/radio-group/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Radio Group: Overview'
+title: 'Overview'
 parts:
   - Radio Group
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Radio Group: Overview
+# Overview
 A web component that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
@@ -32,12 +32,12 @@ export const main = () => html`
 `;
 ```
-- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/form/overview.md)'s serialization result.
-- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/select/overview.md) instead.
+- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/form/overview.md)'s serialization result.
+- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/select/overview.md) instead.
 ## Features
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/fieldset/overview.md), it has all the features a fieldset has.
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/fieldset/overview.md), it has all the features a fieldset has.
 - Get or set the checked value of the group:
   - modelValue (default) - `checkedValue()`

package/docs/components/radio-group/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Radio Group: Use Cases'
+title: 'Use Cases'
 parts:
   - Radio Group
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Radio Group: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/select/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Select: Overview'
+title: 'Overview'
 parts:
   - Select
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Select: Overview
+# Overview
 A web component that works as a wrapper around the native `select`.

package/docs/components/select/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Select: Use Cases'
+title: 'Use Cases'
 parts:
   - Select
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Select: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -65,7 +65,7 @@ Or by setting the `disabled` attribute on the entire `lion-select` field.
 ## Validation
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md).
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md).
 ## Rendering and updating select options

package/docs/components/select-rich/examples.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Select Rich: Examples'
+title: 'Examples'
 parts:
   - Select Rich
   - Examples
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Examples
 ---
-# Select Rich: Examples
+# Examples
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/select-rich/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Select Rich: Overview'
+title: 'Overview'
 parts:
   - Select Rich
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Select Rich: Overview
+# Overview
 This web component is a 'rich' version of the native `<select>` element.
 It allows providing fully customized options and a fully customized invoker button and is meant to be used whenever the native `<select>` doesn't provide enough styling, theming or user interaction opportunities.

package/docs/components/select-rich/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Select Rich: Use Cases'
+title: 'Use Cases'
 parts:
   - Select Rich
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Select Rich: Use Cases
+# Use Cases
 ```js script
 import { LitElement, html } from '@mdjs/mdjs-preview';
@@ -29,7 +29,7 @@ You can set the full `modelValue` for each option, which includes the checked pr
 ```
 Note, when rendering with the help of the `cache` function imported from `lit/directives/cache.js`, setting model by
-the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
+the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
 ### Setting model by the `choiceValue` property
@@ -328,7 +328,7 @@ LionSelectRich will give it acces to:
 - LionSelectRich itself, via `.hostElement`
 Code of an advanced custom invoker is shown below (this is the code for the
-invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/select-rich/examples.md)).
+invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/select-rich/examples.md)).
 The invoker is usually added in the invoker slot of the LionSelectRich subclass.
 However, it would also be possible for an application developer to provide the invoker
 by putting it in light dom:

package/docs/components/steps/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Steps: Overview'
+title: 'Overview'
 parts:
   - Steps
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Steps: Overview
+# Overview
 A web component that can be used to break a single goal down into dependable sub-tasks.

package/docs/components/steps/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Steps: Use Cases'
+title: 'Use Cases'
 parts:
   - Steps
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Steps: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/switch/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Switch: Overview'
+title: 'Overview'
 parts:
   - Switch
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Switch: Overview
+# Overview
 <p class="lion-paragraph--emphasis">The Switch is used to toggle a property or feature on or off.</p>

package/docs/components/switch/reference.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Switch: Reference'
+title: 'Reference'
 parts:
   - Switch
   - Reference
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Reference
 ---
-# Switch: Reference
+# Reference
 <p class="lion-paragraph--emphasis">Everything you need to re-use the switch.</p>

package/docs/components/switch/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Switch: Use Cases'
+title: 'Use Cases'
 parts:
   - Switch
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Switch: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/tabs/examples.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Tabs: Examples'
+title: 'Examples'
 parts:
   - Tabs
   - Examples
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Examples
 ---
-# Tabs: Examples
+# Examples
 ```js script
 import { LitElement, html } from '@mdjs/mdjs-preview';
@@ -21,7 +21,7 @@ import './src/lea-tab-panel.js';
 ## Lea Tabs
-Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/blog/ing-open-sources-lion.md).
+Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/blog/ing-open-sources-lion.md).
 ```js preview-story
 export const main = () => html`

package/docs/components/tabs/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Tabs: Overview'
+title: 'Overview'
 parts:
   - Tabs
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Tabs: Overview
+# Overview
 A web component that allows users to quickly move between a small number of equally important views.

package/docs/components/tabs/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Tabs: Use Cases'
+title: 'Use Cases'
 parts:
   - Tabs
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Tabs: Use Cases
+# Use Cases
 ```js script
 import { LitElement, html } from '@mdjs/mdjs-preview';

package/docs/components/textarea/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Textarea: Overview'
+title: 'Overview'
 parts:
   - Textarea
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Textarea: Overview
+# Overview
 A webcomponent that enhances the functionality of the native `<input type="textarea">` element.
 Its purpose is to provide a way for users to write text that is multiple lines long.

package/docs/components/textarea/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Textarea: Use Cases'
+title: 'Use Cases'
 parts:
   - Textarea
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Textarea: Use Cases
+# Use Cases
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/tooltip/examples.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Tooltip: Examples'
+title: 'Examples'
 parts:
   - Tooltip
   - Examples
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Examples
 ---
-# Tooltip: Examples
+# Examples
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/tooltip/overview.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Tooltip: Overview'
+title: 'Overview'
 parts:
   - Tooltip
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
-# Tooltip: Overview
+# Overview
 A web component used for basic popups on hover.
 Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.

package/docs/components/tooltip/use-cases.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: 'Tooltip: Use Cases'
+title: 'Use Cases'
 parts:
   - Tooltip
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
-# Tooltip: Use Cases
+# Use Cases
 ```js script
 import { css, html } from '@mdjs/mdjs-preview';

package/docs/fundamentals/index.md CHANGED Viewed

@@ -9,11 +9,11 @@ Here you find more details about what we offer.
 Let's see what each section describes.
-1. [Systems](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/core/overview.md) <br>
+1. [Systems](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/core/overview.md) <br>
    These are the fundamental systems that power all of our components.
-2. [Tools](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/tools/helpers/overview.md) <br>
+2. [Tools](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/tools/helpers/overview.md) <br>
    Frontend Tools useful for web development but are not visual and therefore are not components.
-3. [Node Tools](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
+3. [Node Tools](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
    Node tools to analyse the code and for extending the documentation.
-4. [Rationales](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/rationales/side-effects.md) <br>
+4. [Rationales](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/rationales/side-effects.md) <br>
    The reasoning behind some of our decisions.

package/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md CHANGED Viewed

@@ -2,7 +2,7 @@
 parts:
   - Babel Extend Docs
   - Node Tools
-title: 'Node Tools: Babel Extend Docs'
+title: 'Babel Extend Docs'
 eleventyNavigation:
   key: Node Tools >> Babel Extend Docs
   title: Babel Extend Docs
@@ -10,4 +10,4 @@ eleventyNavigation:
   parent: Node Tools
 ---
-# Node Tools: Babel Extend Docs
+# Babel Extend Docs

package/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md CHANGED Viewed

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Babel Extend Docs
   - Node Tools
-title: 'Babel Extend Docs: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Node Tools >> Babel Extend Docs >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Node Tools >> Babel Extend Docs
 ---
-# Babel Extend Docs: Overview
+# Overview
 A plugin which rewrites imports and templates according to a configuration.
 This enables the reuse of existing documentation from source packages while still using your extensions code.

package/docs/fundamentals/node-tools/providence-analytics/index.md CHANGED Viewed

@@ -2,7 +2,7 @@
 parts:
   - Providence Analytics
   - Node Tools
-title: 'Node Tools: Providence Analytics'
+title: 'Providence Analytics'
 eleventyNavigation:
   key: Node Tools >> Providence Analytics
   title: Providence Analytics
@@ -10,4 +10,4 @@ eleventyNavigation:
   parent: Node Tools
 ---
-# Node Tools: Providence Analytics
+# Providence Analytics

package/docs/fundamentals/node-tools/providence-analytics/overview.md CHANGED Viewed

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Providence Analytics
   - Node Tools
-title: 'Providence Analytics: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Node Tools >> Providence Analytics >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Node Tools >> Providence Analytics
 ---
-# Providence Analytics: Overview
+# Overview
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/fundamentals/node-tools/publish-docs/index.md CHANGED Viewed

@@ -2,7 +2,7 @@
 parts:
   - Publish Docs
   - Node Tools
-title: 'Node Tools: Publish Docs'
+title: 'Publish Docs'
 eleventyNavigation:
   key: Node Tools >> Publish Docs
   title: Publish Docs
@@ -10,4 +10,4 @@ eleventyNavigation:
   parent: Node Tools
 ---
-# Node Tools: Publish Docs
+# Publish Docs

package/docs/fundamentals/node-tools/publish-docs/overview.md CHANGED Viewed

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Publish Docs
   - Node Tools
-title: 'Publish Docs: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Node Tools >> Publish Docs >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Node Tools >> Publish Docs
 ---
-# Publish Docs: Overview
+# Overview
 A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
@@ -44,7 +44,7 @@ For a Mono Repository
    ```md
    # My Pkg
-   [=> See Source <=](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/docs/deep/dir/overview.md)
+   [=> See Source <=](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/docs/deep/dir/overview.md)
    ```
 ## CLI flags
@@ -74,7 +74,7 @@ Bring the `overview.md` in a docs folder along.
 👉 `packages/[my-package]/docs/overview.md`
 ```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/docs/deep/dir/overview.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/docs/deep/dir/overview.md)
 ```
 Add a `use-cases.md`
@@ -82,7 +82,7 @@ Add a `use-cases.md`
 👉 `packages/[my-package]/docs/use-cases.md`
 ```md
-[=> See Source <=](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/docs/deep/dir/use-cases.md)
+[=> See Source <=](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/docs/deep/dir/use-cases.md)
 ```
 So you will end up with something like this in your package.

package/docs/fundamentals/node-tools/remark-extend/index.md CHANGED Viewed

@@ -2,7 +2,7 @@
 parts:
   - Remark Extend
   - Node Tools
-title: 'Node Tools: Remark Extend'
+title: 'Remark Extend'
 eleventyNavigation:
   key: Node Tools >> Remark Extend
   title: Remark Extend
@@ -10,4 +10,4 @@ eleventyNavigation:
   parent: Node Tools
 ---
-# Node Tools: Remark Extend
+# Remark Extend

package/docs/fundamentals/node-tools/remark-extend/overview.md CHANGED Viewed

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Remark Extend
   - Node Tools
-title: 'Remark Extend: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Node Tools >> Remark Extend >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Node Tools >> Remark Extend
 ---
-# Remark Extend: Overview
+# Overview
 A plugin for remark to extend markdown by importing from source files.

package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md CHANGED Viewed

@@ -2,7 +2,7 @@
 parts:
   - Extend Docs
   - Node Tools
-title: 'Node Tools: Extend Docs'
+title: 'Extend Docs'
 eleventyNavigation:
   key: Node Tools >> Extend Docs
   title: Extend Docs
@@ -10,4 +10,4 @@ eleventyNavigation:
   parent: Node Tools
 ---
-# Node Tools: Extend Docs
+# Extend Docs

package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md CHANGED Viewed

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Extend Docs
   - Node Tools
-title: 'Extend Docs: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Node Tools >> Extend Docs >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Node Tools >> Extend Docs
 ---
-# Extend Docs: Overview
+# Overview
 When maintaining your own extension layer of lion you most likely want to maintain a similar documentation.
 Copying and rewriting imports/tags the markdown files works but also means that whenever something change you need copy and rewrite again.
@@ -20,7 +20,7 @@ To do this automatically you can use this preset for [rocket](https://rocket.mod
 ## Features
-- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/node-tools/remark-extend/overview.md)
+- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/node-tools/remark-extend/overview.md)
 - Renames named imports and all it's usage
 - Adjusts import paths
 - Replace tags in template literals
@@ -51,7 +51,7 @@ export default {
 ## Reusing documentation
-To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/node-tools/remark-extend/overview.md).
+To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/node-tools/remark-extend/overview.md).
 As an example you can create `docs/components/tabs/overview.md`.