@lion/ui 0.24.0 → 0.26.0

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

@@ -1,215 +0,0 @@
----
-parts:
-  - Side Effects
-  - Rationales
-title: 'Side Effects'
-eleventyNavigation:
-  key: Rationales >> Side Effects
-  title: Side Effects
-  order: 10
-  parent: Rationales
----
-
-# 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).
-
-## Example
-
-In this example we will define a function to override an es module export.
-
-👉 `main.js`
-
-```js
-import { somethingElse, overlays } from './overlays.js';
-
-console.log(somethingElse);
-```
-
-👉 `overlays.js`
-
-```js
-class OverlayManager {}
-
-export let overlays = new OverlayManager();
-
-export function setOverlays(newOverlays) {
-  overlays = newOverlays;
-}
-
-export const somethingElse = 'something else';
-```
-
-### Example Result
-
-However having this function alone does not mean a side effect as rollup can tree shake it.
-
-See the code in [rollup repl][1].
-
-```js
-const somethingElse = 'something else';
-
-console.log(somethingElse);
-```
-
-## Example Override
-
-Let's add an es module which uses that override.
-
-👉 `main.js`
-
-```js
-import { somethingElse, overlays } from './overlays.js';
-import './override.js';
-
-console.log(somethingElse);
-
-// this will trigger loading of full overlays.js & override.js code
-// console.log(overlays.list);
-```
-
-👉 `override.js`
-
-```js
-import { setOverlays } from './overlays.js';
-
-setOverlays(new Object());
-```
-
-## Example Override Result
-
-It will still be fully tree shaken.
-
-See the code in [rollup repl][2].
-
-```js
-const somethingElse = 'something else';
-
-console.log(somethingElse);
-
-// this will trigger loading of full overlays.js & override.js code
-// console.log(overlays.list);
-```
-
-## Example Override Result Accessing
-
-ONLY if you actually access `overlays` it will include `overlays.js` & `override.js`.
-
-```js
-class OverlayManager {}
-
-let overlays = new OverlayManager();
-
-function setOverlays(newOverlays) {
-  overlays = newOverlays;
-}
-
-const somethingElse = 'something else';
-
-setOverlays(new Object());
-
-console.log(somethingElse);
-
-// this will trigger loading of full overlays.js & override.js code
-console.log(overlays.list);
-```
-
----
-
-## Comprehensive Example
-
-This time we have a separate controller which also accesses the `overlays`.
-
-👉 `main.js`
-
-```js
-import { somethingElse, setOverlays, overlays } from './overlays.js';
-import { OverlayController, somethingElse2 } from './OverlayController.js';
-
-// the following code will tree shake overlays away hence overlays is side effect free
-
-setOverlays(new Object());
-console.log(somethingElse);
-console.log(somethingElse2);
-
-//** The following will toggle importing of overlays */
-
-// 1. import overlays directly and access it
-// console.log(overlays.list);
-
-// 2. create an OverlayController which internally accesses overlays
-// const ctrl = new OverlayController();
-// console.log(ctrl.manager.list);
-```
-
-👉 `overlays.js`
-
-```js
-class OverlayManager {
-  constructor() {
-    this.list = [];
-  }
-  add(a) {
-    this.list.push(a);
-  }
-}
-
-export let overlays = new OverlayManager();
-
-export function setOverlays(newOverlays) {
-  overlays = newOverlays;
-}
-
-export const somethingElse = 'something else';
-
-// the following line is a side effect as it always will be included
-console.log('overlays side effect');
-```
-
-👉 `OverlayController.js`
-
-```js
-import { overlays } from './overlays.js';
-
-export class OverlayController {
-  constructor(config = {}, manager = overlays) {
-    this.manager = manager;
-    this.manager.add(this);
-  }
-}
-
-export const somethingElse2 = 'something else';
-```
-
-### Comprehensive Example Result
-
-Even with all these intertwined code rollup can tree shake it fully away.
-Again if you access the `overlays` or you start instantiating an `OverlaysController` it will include all the needed code.
-
-Be sure to see it for yourself in the [rollup repl][3].
-
-```js
-const somethingElse = 'something else';
-
-// the following line is a side effect as it always will be included
-console.log('overlays side effect');
-
-const somethingElse2 = 'something else';
-
-console.log(somethingElse);
-console.log(somethingElse2);
-
-//** The following will toggle importing of overlays */
-
-// 1. import overlays directly and access it
-// console.log(overlays.list);
-
-// 2. create an OverlayController which internally accesses overlays
-// const ctrl = new OverlayController();
-// console.log(ctrl.manager.list);
-```
-
-[1]: https://rollupjs.org/repl/?version=2.10.2&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMHNvbWV0aGluZ0Vsc2UlMkMlMjBvdmVybGF5cyUyMCU3RCUyMGZyb20lMjAnLiUyRm92ZXJsYXlzLmpzJyUzQiU1Q24lNUNuY29uc29sZS5sb2coc29tZXRoaW5nRWxzZSklM0IlMjIlMkMlMjJpc0VudHJ5JTIyJTNBdHJ1ZSU3RCUyQyU3QiUyMm5hbWUlMjIlM0ElMjJvdmVybGF5cy5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJjbGFzcyUyME92ZXJsYXlNYW5hZ2VyJTIwJTdCJTdEJTVDbiU1Q25leHBvcnQlMjBsZXQlMjBvdmVybGF5cyUyMCUzRCUyMG5ldyUyME92ZXJsYXlNYW5hZ2VyKCklM0IlNUNuJTVDbmV4cG9ydCUyMGZ1bmN0aW9uJTIwc2V0T3ZlcmxheXMobmV3T3ZlcmxheXMpJTIwJTdCJTVDbiU1Q3RvdmVybGF5cyUyMCUzRCUyMG5ld092ZXJsYXlzJTNCJTVDbiU3RCU1Q24lNUNuZXhwb3J0JTIwY29uc3QlMjBzb21ldGhpbmdFbHNlJTIwJTNEJTIwJ3NvbWV0aGluZyUyMGVsc2UnJTNCJTIyJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmVzJTIyJTJDJTIybmFtZSUyMiUzQSUyMm15QnVuZGxlJTIyJTJDJTIyYW1kJTIyJTNBJTdCJTIyaWQlMjIlM0ElMjIlMjIlN0QlMkMlMjJnbG9iYWxzJTIyJTNBJTdCJTdEJTdEJTJDJTIyZXhhbXBsZSUyMiUzQW51bGwlN0Q=
-[2]: https://rollupjs.org/repl/?version=2.10.2&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMHNvbWV0aGluZ0Vsc2UlMkMlMjBvdmVybGF5cyUyMCU3RCUyMGZyb20lMjAnLiUyRm92ZXJsYXlzLmpzJyUzQiU1Q25pbXBvcnQlMjAnLiUyRm92ZXJyaWRlLmpzJyUzQiU1Q24lNUNuY29uc29sZS5sb2coc29tZXRoaW5nRWxzZSklM0IlNUNuJTVDbiUyRiUyRiUyMHRoaXMlMjB3aWxsJTIwdHJpZ2dlciUyMGxvYWRpbmclMjBvZiUyMGZ1bGwlMjBvdmVybGF5cy5qcyUyMCUyNiUyMG92ZXJyaWRlLmpzJTIwY29kZSU1Q24lMkYlMkYlMjBjb25zb2xlLmxvZyhvdmVybGF5cy5saXN0KSUzQiUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMm92ZXJsYXlzLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmNsYXNzJTIwT3ZlcmxheU1hbmFnZXIlMjAlN0IlN0QlNUNuJTVDbmV4cG9ydCUyMGxldCUyMG92ZXJsYXlzJTIwJTNEJTIwbmV3JTIwT3ZlcmxheU1hbmFnZXIoKSUzQiU1Q24lNUNuZXhwb3J0JTIwZnVuY3Rpb24lMjBzZXRPdmVybGF5cyhuZXdPdmVybGF5cyklMjAlN0IlNUNuJTVDdG92ZXJsYXlzJTIwJTNEJTIwbmV3T3ZlcmxheXMlM0IlNUNuJTdEJTVDbiU1Q25leHBvcnQlMjBjb25zdCUyMHNvbWV0aGluZ0Vsc2UlMjAlM0QlMjAnc29tZXRoaW5nJTIwZWxzZSclM0IlMjIlN0QlMkMlN0IlMjJuYW1lJTIyJTNBJTIyb3ZlcnJpZGUuanMlMjIlMkMlMjJjb2RlJTIyJTNBJTIyaW1wb3J0JTIwJTdCJTIwc2V0T3ZlcmxheXMlMjAlN0QlMjBmcm9tJTIwJy4lMkZvdmVybGF5cy5qcyclM0IlNUNuJTVDbnNldE92ZXJsYXlzKG5ldyUyME9iamVjdCgpKSUzQiUyMiU3RCU1RCUyQyUyMm9wdGlvbnMlMjIlM0ElN0IlMjJmb3JtYXQlMjIlM0ElMjJlcyUyMiUyQyUyMm5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmFtZCUyMiUzQSU3QiUyMmlkJTIyJTNBJTIyJTIyJTdEJTJDJTIyZ2xvYmFscyUyMiUzQSU3QiU3RCU3RCUyQyUyMmV4YW1wbGUlMjIlM0FudWxsJTdE
-[3]: https://rollupjs.org/repl/?version=2.10.2&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMHNvbWV0aGluZ0Vsc2UlMkMlMjBzZXRPdmVybGF5cyUyQyUyMG92ZXJsYXlzJTIwJTdEJTIwZnJvbSUyMCcuJTJGb3ZlcmxheXMuanMnJTNCJTVDbmltcG9ydCUyMCU3QiUyME92ZXJsYXlDb250cm9sbGVyJTJDJTIwc29tZXRoaW5nRWxzZTIlMjAlN0QlMjBmcm9tJTIwJy4lMkZPdmVybGF5Q29udHJvbGxlci5qcyclM0IlNUNuJTVDbiUyRiUyRiUyMHRoZSUyMGZvbGxvd2luZyUyMGNvZGUlMjB3aWxsJTIwdHJlZSUyMHNoYWtlJTIwb3ZlcmxheXMlMjBhd2F5JTIwaGVuY2UlMjBvdmVybGF5cyUyMGlzJTIwc2lkZSUyMGVmZmVjdCUyMGZyZWUlMjAlNUNuJTVDbnNldE92ZXJsYXlzKG5ldyUyME9iamVjdCgpKSUzQiU1Q25jb25zb2xlLmxvZyhzb21ldGhpbmdFbHNlKSUzQiU1Q25jb25zb2xlLmxvZyhzb21ldGhpbmdFbHNlMiklM0IlNUNuJTVDbiUyRiUyRioqJTIwVGhlJTIwZm9sbG93aW5nJTIwd2lsbCUyMHRvZ2dsZSUyMGltcG9ydGluZyUyMG9mJTIwb3ZlcmxheXMlMjAqJTJGJTVDbiU1Q24lMkYlMkYlMjAxLiUyMGltcG9ydCUyMG92ZXJsYXlzJTIwZGlyZWN0bHklMjBhbmQlMjBhY2Nlc3MlMjBpdCU1Q24lMkYlMkYlMjBjb25zb2xlLmxvZyhvdmVybGF5cy5saXN0KSUzQiUyMCU1Q24lNUNuJTJGJTJGJTIwMi4lMjBjcmVhdGUlMjBhbiUyME92ZXJsYXlDb250cm9sbGVyJTIwd2hpY2glMjBpbnRlcm5hbGx5JTIwYWNjZXNzZXMlMjBvdmVybGF5cyU1Q24lMkYlMkYlMjBjb25zdCUyMGN0cmwlMjAlM0QlMjBuZXclMjBPdmVybGF5Q29udHJvbGxlcigpJTNCJTVDbiUyRiUyRiUyMGNvbnNvbGUubG9nKGN0cmwubWFuYWdlci5saXN0KSUzQiU1Q24lNUNuJTIyJTJDJTIyaXNFbnRyeSUyMiUzQXRydWUlN0QlMkMlN0IlMjJuYW1lJTIyJTNBJTIyb3ZlcmxheXMuanMlMjIlMkMlMjJjb2RlJTIyJTNBJTIyY2xhc3MlMjBPdmVybGF5TWFuYWdlciUyMCU3QiU1Q24lNUN0Y29uc3RydWN0b3IoKSUyMCU3QiU1Q24lNUN0JTVDdHRoaXMubGlzdCUyMCUzRCUyMCU1QiU1RCUzQiU1Q24lNUN0JTdEJTVDbiUyMCUyMGFkZChhKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjB0aGlzLmxpc3QucHVzaChhKSUzQiU1Q24lNUN0JTdEJTVDbiU3RCU1Q24lNUNuZXhwb3J0JTIwbGV0JTIwb3ZlcmxheXMlMjAlM0QlMjBuZXclMjBPdmVybGF5TWFuYWdlcigpJTNCJTVDbiU1Q25leHBvcnQlMjBmdW5jdGlvbiUyMHNldE92ZXJsYXlzKG5ld092ZXJsYXlzKSUyMCU3QiU1Q24lNUN0b3ZlcmxheXMlMjAlM0QlMjBuZXdPdmVybGF5cyUzQiU1Q24lN0QlNUNuJTVDbmV4cG9ydCUyMGNvbnN0JTIwc29tZXRoaW5nRWxzZSUyMCUzRCUyMCdzb21ldGhpbmclMjBlbHNlJyUzQiU1Q24lNUNuJTJGJTJGJTIwdGhlJTIwZm9sbG93aW5nJTIwbGluZSUyMGlzJTIwYSUyMHNpZGUlMjBlZmZlY3QlMjBhcyUyMGl0JTIwYWx3YXlzJTIwd2lsbCUyMGJlJTIwaW5jbHVkZWQlNUNuY29uc29sZS5sb2coJ292ZXJsYXlzJTIwc2lkZSUyMGVmZmVjdCcpJTNCJTIyJTJDJTIyaXNFbnRyeSUyMiUzQWZhbHNlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMk92ZXJsYXlDb250cm9sbGVyLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMG92ZXJsYXlzJTIwJTdEJTIwZnJvbSUyMCcuJTJGb3ZlcmxheXMuanMnJTNCJTVDbiU1Q25leHBvcnQlMjBjbGFzcyUyME92ZXJsYXlDb250cm9sbGVyJTIwJTdCJTVDbiUyMCUyMCUyMGNvbnN0cnVjdG9yKGNvbmZpZyUyMCUzRCUyMCU3QiU3RCUyQyUyMG1hbmFnZXIlMjAlM0QlMjBvdmVybGF5cyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTIwdGhpcy5tYW5hZ2VyJTIwJTNEJTIwbWFuYWdlciUzQiU1Q24lNUN0JTVDdCUyMHRoaXMubWFuYWdlci5hZGQodGhpcyklM0IlNUNuJTVDdCUyMCU3RCU1Q24lN0QlNUNuJTVDbmV4cG9ydCUyMGNvbnN0JTIwc29tZXRoaW5nRWxzZTIlMjAlM0QlMjAnc29tZXRoaW5nJTIwZWxzZSclM0IlMjIlN0QlNUQlMkMlMjJvcHRpb25zJTIyJTNBJTdCJTIyZm9ybWF0JTIyJTNBJTIyZXMlMjIlMkMlMjJuYW1lJTIyJTNBJTIybXlCdW5kbGUlMjIlMkMlMjJhbWQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMiUyMiU3RCUyQyUyMmdsb2JhbHMlMjIlM0ElN0IlN0QlN0QlMkMlMjJleGFtcGxlJTIyJTNBbnVsbCU3RA==

package/docs/fundamentals/rationales/versioning.md

@@ -1,47 +0,0 @@
----
-parts:
-  - Versioning Lion
-  - Rationales
-title: 'Versioning Lion'
-eleventyNavigation:
-  key: Rationales >> Versioning Lion
-  title: Versioning Lion
-  order: 20
-  parent: Rationales
----
-
-# 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.
-
-For example, `@lion/dialog` has a dependency on `@lion/overlays`.
-
-The way we now version those is with `^` carets, for example:
-
-```json
-{
-  "dependencies": {
-    "@lion/overlays": "^0.30.0"
-  }
-}
-```
-
-This means:
-
-- For versions >= 1.0.0, get the latest minor of a certain major, major upgrades may contain breaking changes
-- For versions < 1.0.0, get the latest patch of a certain minor, minor upgrades may contain breaking changes
-
-See also, [Semantic Versioning](https://semver.org/).
-
-In the past, we used to have fixed versioning, our rationale was as follows:
-
-> Given there is a subclasser that consumes lion and publishes their own component set, each installation of a certain version of that component set must have the exact same versions of lion installed, so that the experience of the end user is consistent.
-
-**However**, if semver is followed properly, users should never get the situation where they get diverging experiences, because that would only happen in a breaking change.
-Additionally, fixing the versions led to other problems:
-
-- Undedupable installations of the same package. If there are two installations of `@lion/ui/button` and one is installed as a dependency of another lion package, this installation will never be able to be deduped to another version, even if they.js're on the same minor. This is because the dependency is set to a fixed version, so NPM will see the two installations as incompatible and not dedupe them. For Lion, this can definitely lead to problems, especially with packages like `@lion/form-core`, `@lion/localize`, `@lion/overlays`, due to the singleton nature of some of the parts in those packages.
-- Importing directly from lion as an end user when consuming a subclasser package that uses lion under the hood is dangerous. This is because you will need to always match, **exactly**, the version that is installed by the subclasser package. This means syncing your lion version with the subclasser's installed lion version every time you upgrade.
-- Changesets will see (correctly) every bump in a `@lion` dependency as a semver-incompatible change for its `@lion` dependents and bump them as a result. This means a change to `@lion/core`, no matter how tiny, will bump almost every other `@lion` package "unnecessarily". This results in large changelogs that are mostly meaningless noise, hardly "human readable" which is the goal of changesets when used correctly.
-
-Given all this, we changed our approach to versioning and went back to using `^` carets in our versions and **our new recommendation is to depend on `@lion` with `^` carets**. This should prevent majority of undedupable installation problems our users were having, allow importing from `@lion` directly, more safely, make our changelogs cleaner and reduce our publishing bloat.

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

@@ -1,168 +0,0 @@
----
-parts:
-  - SlotMixin
-  - Core
-  - Systems
-title: 'SlotMixin'
-eleventyNavigation:
-  key: Systems >> Core >> SlotMixin
-  title: SlotMixin
-  order: 20
-  parent: Systems >> Core
----
-
-# 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.
-The need for this can occur in the following situations:
-
-- A user-defined slot. For instance:
-
-```html
-<my-input>
-  <div slot="help-text">Input description</div>
-</my-input>
-```
-
-The help text here needs to be connected to the input element that may live in shadow dom. The input needs to have `aria-describedby="help-text-id".`
-
-- An interplay of multiple nested web components. For instance:
-
-```html
-<my-fieldset>
-  <my-input><input aria-describedby="parent-msg" /></my-input>
-  <my-input><input aria-describedby="parent-msg" /></my-input>
-  <div id="parent-msg">Group errror message</div>
-</my-fieldset>
-```
-
-In the case above, all inputs need to be able to refer the error message of their parent.
-
-**In a nutshell**: SlotMixin helps you with everything related to rendering light dom (i.e. rendering to slots).
-You can build accessible ui components with ease, while delegating all edge cases to SlotMixin.
-
-Edge cases that SlotMixin solves:
-
-- **mediates** between light dom provided by the user ('public slots') and light dom provided by the component author ('private slots').
-- allows to hook into the reactive update loop of LitElement (**rerendering** on property changes)
-- respects the **scoped registry** belonging to the shadow root.
-
-## The api
-
-So, what does the api look like? SlotMixin can be used like this:
-
-```js
-class MyAccessibleControl extends SlotMixin(LitElement) {
-  get slots() {
-    return {
-      ...super.slots,
-      'public-element-slot': () => document.createElement('input'),
-      '_private-template-slot': () => html`<wc-rendered-to-light-dom></wc-rendered-to-light-dom>`,
-    };
-  }
-}
-```
-
-## SlotFunctionResults
-
-The `SlotFunctionResult` is the output of the functions provided in `get slots()`. It can output these four types, which are explained in detail below:
-
-```ts
-Element | TemplateResult | SlotRerenderObject | undefined;
-```
-
-Below configuration gives an example of all of them, after which we explain when each type should be used
-
-```js
-class MyAccessibleControl extends SlotMixin(LitElement) {
-  get slots() {
-    return {
-      ...super.slots,
-      // Element
-      'public-element-slot': () => document.createElement('input'),
-      // TemplateResult
-      '_private-template-slot': () => html`<wc-rendered-to-light-dom></wc-rendered-to-light-dom>`,
-      // SlotRerenderObject
-      'rerenderable-slot': () => {
-        return {
-          template: html`<w-c>${this.litProperty}</w-c>`,
-        };
-      },
-      // undefined (conditional slot)
-      '': () => {
-        if (conditionApplies) {
-          return html`<div>default slot</div>`;
-        }
-        return undefined;
-      },
-    };
-  }
-}
-```
-
-### Element
-
-For simple cases, an element can be returned. Use this when no web component is needed.
-
-### TemplateResult
-
-Return a TemplateResult when you need web components in your light dom. They will be automatically scoped correctly (to the scoped registry belonging to your shadowRoot)
-If your template needs to rerender as well, use a `SlotRerenderObject`.
-
-### SlotRerenderObject
-
-A `SlotRerenderObject` looks like this:
-
-```ts
-{
-  template: TemplateResult;
-  /**
-   * For backward compat with traditional light render methods,
-   * it might be needed to have slot contents available in `connectedCallback`.
-   * Only enable this for existing components that rely on light content availability in connectedCallback.
-   * For new components, please align with ReactiveElement/LitElement reactive cycle callbacks.
-   */
-  firstRenderOnConnected?: boolean;
-}
-```
-
-It is meant for complex templates that need rerenders and are bound to the [reactive update cycle](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle). The same lifecycle hooks (for instance `updated`) can be used as with templates rendered to the shadow root (via the regular render function).
-For rerendering to work predictably (no focus and other interaction issues), the slot will be created within a wrapper div.
-
-### Undefined
-
-Whether the slot should be rendered can be dependent on a global or instance configuration.
-When `undefined` or nothing (implicitly `undefined`) is returned, SlotMixin will not render the slot
-
-```js
-if (this.conditionApplies) {
-  // Here we can return `Element | TemplateResult | SlotRerenderObject`
-  return html`<div>default slot</div>`;
-}
-return undefined;
-```
-
-## Private and public slots
-
-Some elements provide a property/attribute api with a fallback to content projection as a means to provide more advanced html.
-For instance, a simple text label is provided like this:
-
-```html
-<my-input label="My label"></my-input>
-```
-
-A more advanced label (using html that can't be provided via a string) can be provided like this:
-
-```html
-<my-input>
-  <label slot="label"><my-icon aria-hidden="true"></my-icon>My label</label>
-</my-input>
-```
-
-In the property/attribute case, SlotMixin adds the `<label slot="label">` under the hood, **unless** the developer already provided the slot.
-This will make sure that the slot provided by the user always takes precedence and only one slot instance will be available in light dom per slot.
-
-### 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/api-table.md

@@ -1,43 +0,0 @@
----
-parts:
-  - API Table
-  - Core
-  - Systems
-title: 'Core: API Table'
-eleventyNavigation:
-  key: API Table >> Core >> Systems
-  title: API Table
-  order: 90
-  parent: Systems >> Core
----
-# Core: API Table
- 
-
-## class: `EventTargetShim`
-
-### Fields
-
-| Name                  | Privacy | Type | Default                        | Description | Inherited From |
-| --------------------- | ------- | ---- | ------------------------------ | ----------- | -------------- |
-| `addEventListener`    | public  |      | `delegatedAddEventListener`    |             |                |
-| `dispatchEvent`       | public  |      | `delegatedDispatchEvent`       |             |                |
-| `removeEventListener` | public  |      | `delegatedRemoveEventListener` |             |                |
-
-<hr/>
- 
-
-## class: `ScopedStylesController`
-
-### Fields
-
-| Name          | Privacy | Type | Default                                                             | Description | Inherited From |
-| ------------- | ------- | ---- | ------------------------------------------------------------------- | ----------- | -------------- |
-| `scopedClass` | public  |      | `` `${this.host.localName}-${Math.floor(Math.random() * 10000)}` `` |             |                |
-
-### Methods
-
-| Name            | Privacy | Description | Parameters | Return | Inherited From |
-| --------------- | ------- | ----------- | ---------- | ------ | -------------- |
-| `hostConnected` | public  |             |            |        |                |
-
-<hr/>

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

@@ -1,15 +0,0 @@
----
-parts:
-  - Core
-  - Systems
-title: 'Core'
-eleventyNavigation:
-  key: Systems >> Core
-  title: Core
-  order: 10
-  parent: Systems
----
-
-# Core
-
--> go to Overview

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

@@ -1,98 +0,0 @@
----
-parts:
-  - Overview
-  - Core
-  - Systems
-title: 'Overview'
-eleventyNavigation:
-  key: Systems >> Core >> Overview
-  title: Overview
-  order: 10
-  parent: Systems >> Core
----
-
-# Overview
-
-The core package is mostly for in-depth usage.
-It handles the version of `lit-element` and `lit-html`.
-
-To be sure a compatible version is used you should import it via this package.
-
-```js
-// DO
-import { LitElement, html, render } from 'lit';
-
-// DON'T
-import { LitElement, html, render } from 'lit-element';
-```
-
-## Features
-
-- [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)
-- Mixin to create scoped styles in LightDOM-using components (ScopedStylesMixin)
-
-> These features are not well documented - care to help out?
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { dedupeMixin, LitElement } from 'lit';
-```
-
-### Example
-
-```js
-const BaseMixin = dedupeMixin((superClass) => {
-  return class extends superClass { ... };
-});
-```
-
-## Deduping of mixins
-
-### Why is deduping of mixins necessary?
-
-Imagine you are developing web components and creating ES classes for Custom Elements. You have two generic mixins (let's say `M1` and `M2`) which require independently the same even more generic mixin (`BaseMixin`). `M1` and `M2` can be used independently, that means they have to inherit from `BaseMixin` also independently. But they can be also used in combination. Sometimes `M1` and `M2` are used in the same component and can mess up the inheritance chain if `BaseMixin` is applied twice.
-In other words, this may happen to the protoype chain `... -> M2 -> BaseMixin -> M1 -> BaseMixin -> ...`.
-
-An example of this may be a `LocalizeMixin` used across different components and mixins. Some mixins may need it and many components need it too and can not rely on other mixins to have it by default, so must inherit from it independently.
-
-The more generic the mixin is, the higher the chance of being applied more than once. As a mixin author you can't control how it is used, and can't always predict it. So as a safety measure it is always recommended to create deduping mixins.
-
-### Usage of dedupeMixin()
-
-This is an example of how to make a conventional ES mixin deduping.
-
-```js
-const BaseMixin = dedupeMixin((superClass) => {
-  return class extends superClass { ... };
-});
-
-// inherits from BaseMixin
-const M1 = dedupeMixin((superClass) => {
-  return class extends BaseMixin(superClass) { ... };
-});
-
-// inherits from BaseMixin
-const M2 = dedupeMixin((superClass) => {
-  return class extends BaseMixin(superClass) { ... };
-});
-
-// component inherits from M1
-// MyCustomElement -> M1 -> BaseMixin -> BaseCustomElement;
-class MyCustomElement extends M1(BaseCustomElement) { ... }
-
-// component inherits from M2
-// MyCustomElement -> M2 -> BaseMixin -> BaseCustomElement;
-class MyCustomElement extends M2(BaseCustomElement) { ... }
-
-// component inherits from both M1 and M2
-// MyCustomElement -> M2 -> M1 -> BaseMixin -> BaseCustomElement;
-class MyCustomElement extends M2(M1(BaseCustomElement)) { ... }
-```

package/docs/fundamentals/systems/form/api-table.md

@@ -1,40 +0,0 @@
----
-parts:
-  - API Table
-  - Form
-  - Systems
-title: 'Form: API Table'
-eleventyNavigation:
-  key: API Table >> Form >> Systems
-  title: API Table
-  order: 90
-  parent: Systems >> Form
----
-# Form: API Table
- 
-
-## class: `LionField`, `lion-field`
-
-### Fields
-
-| Name                     | Privacy   | Type | Default | Description | Inherited From |
-| ------------------------ | --------- | ---- | ------- | ----------- | -------------- |
-| `_feedbackConditionMeta` | protected |      |         |             |                |
-| `_focusableNode`         | protected |      |         |             |                |
-
-### Methods
-
-| Name                    | Privacy   | Description                                                                                    | Parameters   | Return | Inherited From |
-| ----------------------- | --------- | ---------------------------------------------------------------------------------------------- | ------------ | ------ | -------------- |
-| `clear`                 | public    | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) |              |        |                |
-| `reset`                 | public    | Resets modelValue to initial value.
Interaction states are cleared                         |              |        |                |
-| `resetInteractionState` | public    |                                                                                                |              |        |                |
-| `_onChange`             | protected | Dispatches custom bubble event                                                                 | `ev: Event=` |        |                |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             |                |
-
-<hr/>