Merge pull request #1168 from ing-bank/fix/minimise-deps

fix: minimise deps by moving integration demos to integration packages

.changeset/forty-feet-talk.md

@@ -0,0 +1,20 @@
+---
+'@lion/checkbox-group': patch
+'@lion/combobox': patch
+'@lion/fieldset': patch
+'@lion/form': patch
+'@lion/form-core': patch
+'@lion/form-integrations': patch
+'@lion/input': patch
+'@lion/input-amount': patch
+'@lion/input-range': patch
+'@lion/input-stepper': patch
+'@lion/listbox': patch
+'@lion/radio-group': patch
+'@lion/select': patch
+'@lion/select-rich': patch
+'@lion/textarea': patch
+'@lion/validate-messages': patch
+---
+
+Minimise dependencies by removing integration demos to form-integrations and form-core packages.

packages/checkbox-group/README.md

@@ -10,15 +10,12 @@ Its purpose is to provide a way for users to check **multiple** options amongst
 ```js script
 import { html } from '@lion/core';
 import { Required, Validator } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import './lion-checkbox-group.js';
 import './lion-checkbox.js';
 
 export default {
   title: 'Forms/Checkbox Group',
 };
-
-loadDefaultFeedbackMessages();
 ```
 
 ```js story
@@ -119,71 +116,6 @@ export const disabled = () => html`
 `;
 ```
 
-### Validation
-
-You can apply validation to the `<lion-checkbox-group>`, similar to how you would do so in any fieldset.
-The interaction states of the `<lion-checkbox-group>` are evaluated in order to hide or show feedback messages.
-
-```js preview-story
-export const validation = () => {
-  const validate = () => {
-    const checkboxGroup = document.querySelector('#scientists');
-    checkboxGroup.submitted = !checkboxGroup.submitted;
-  };
-  return html`
-    <lion-checkbox-group
-      id="scientists"
-      name="scientists[]"
-      label="Favorite scientists"
-      .validators=${[new Required()]}
-    >
-      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
-    </lion-checkbox-group>
-    <button @click="${() => validate()}">Validate</button>
-  `;
-};
-```
-
-### Validation advanced
-
-Below is a more advanced validator on the group that evaluates the children checkboxes' checked states.
-
-```js preview-story
-export const validationAdvanced = () => {
-  class HasMinTwoChecked extends Validator {
-    execute(value) {
-      return value.length < 2;
-    }
-    static get validatorName() {
-      return 'HasMinTwoChecked';
-    }
-    static async getMessage() {
-      return 'You need to select at least 2 values.';
-    }
-  }
-  const validate = () => {
-    const checkboxGroup = document.querySelector('#scientists2');
-    checkboxGroup.submitted = !checkboxGroup.submitted;
-  };
-  return html`
-    <lion-checkbox-group
-      id="scientists2"
-      name="scientists[]"
-      label="Favorite scientists"
-      help-text="You should have at least 2 of those"
-      .validators=${[new Required(), new HasMinTwoChecked()]}
-    >
-      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
-    </lion-checkbox-group>
-    <button @click="${() => validate()}">Validate</button>
-  `;
-};
-```
-
 ### Help text
 
 You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.

packages/checkbox-group/package.json

@@ -35,10 +35,8 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/fieldset": "0.15.12",
     "@lion/form-core": "0.6.14",
-    "@lion/input": "0.10.12",
+    "@lion/input": "0.10.12"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "checkbox-group",

packages/combobox/README.md

@@ -15,7 +15,6 @@ availability of the popup.
 ```js script
 import { html } from '@lion/core';
 import { Required } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { listboxData } from '@lion/listbox/docs/listboxData.js';
 import '@lion/listbox/lion-option.js';
 import './lion-combobox.js';
@@ -284,35 +283,6 @@ export const invokerButton = () => html`
 `;
 ```
 
-## Validation
-
-Validation can be used as normal, below is an example of a combobox with a `Required` validator.
-
-```js preview-story
-export const validation = () => {
-  loadDefaultFeedbackMessages();
-  Required.getMessage = () => 'Please enter a value';
-  return html`
-    <lion-form>
-      <form>
-        <lion-combobox
-          .validators="${[new Required()]}"
-          name="favoriteMovie"
-          label="Favorite movie"
-        >
-          <lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
-          <lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
-          <lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
-          <lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
-          <lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
-          <lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
-        </lion-combobox>
-      </form>
-    </lion-form>
-  `;
-};
-```
-
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.

packages/combobox/package.json

@@ -45,8 +45,7 @@
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
     "@lion/listbox": "0.3.12",
-    "@lion/overlays": "0.22.8",
+    "@lion/overlays": "0.22.8"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "combobox",

packages/fieldset/README.md

@@ -6,7 +6,6 @@
 import { html } from '@lion/core';
 import '@lion/input/lion-input.js';
 import { localize } from '@lion/localize';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { MinLength, Validator, Required } from '@lion/form-core';
 import './lion-fieldset.js';
 import './docs/helpers/demo-fieldset-child.js';

packages/fieldset/package.json

@@ -35,8 +35,7 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14",
+    "@lion/form-core": "0.6.14"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "fieldset",

packages/form-core/docs/validate/README.md

@@ -5,15 +5,13 @@
 ```js script
 import { html } from '@lion/core';
 import { LionInput } from '@lion/input';
-import { Required, IsString, MaxLength, DefaultSuccess, Validator } from '@lion/form-core';
+import { Required, IsString, MaxLength, DefaultSuccess, Validator } from '../../index.js';
 
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
 export default {
   title: 'Forms/Validation/Overview',
 };
-
-loadDefaultFeedbackMessages();
 ```
 
 ## Features
@@ -109,3 +107,31 @@ Retrieving validity states is as easy as checking for:
 ```js
 myInitialsInput.hasFeedbackFor.include('error');
 ```
+
+## Default Validation Messages
+
+Lion comes with a set of localized messages for default Validators.
+Once the method `loadDefaultFeedbackMessages` is called, it will make sure that all validators provided in `@lion/form-core` will have a default error message.
+It uses the `@lion/localize` system to provide these translations and has support for more than 15 locales.
+
+```bash
+npm i --save @lion/validate-messages
+```
+
+```js
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
+```
+
+```js preview-story
+export const defaultValidationMessages = () => {
+  loadDefaultFeedbackMessages();
+  return html`
+    <lion-input
+      name="value"
+      label="Value"
+      .fieldName="${'value'}"
+      .validators="${[new Required()]}"
+    ></lion-input>
+  `;
+};
+```

packages/form-core/index.js

@@ -6,6 +6,7 @@ export { LionField } from './src/LionField.js';
 export { FormRegisteringMixin } from './src/registration/FormRegisteringMixin.js';
 export { FormRegistrarMixin } from './src/registration/FormRegistrarMixin.js';
 export { FormRegistrarPortalMixin } from './src/registration/FormRegistrarPortalMixin.js';
+export { NativeTextFieldMixin } from './src/NativeTextFieldMixin.js';
 export { FormControlsCollection } from './src/registration/FormControlsCollection.js';
 
 // validate

packages/form-core/package.json

@@ -35,7 +35,6 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/input": "0.10.12",
     "@lion/localize": "0.15.3"
   },
   "keywords": [

packages/form-core/src/form-group/FormGroupMixin.js

@@ -1,5 +1,4 @@
-import { dedupeMixin, html, SlotMixin } from '@lion/core';
+import { dedupeMixin, html, SlotMixin, DisabledMixin } from '@lion/core';
-import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
 import { FormControlMixin } from '../FormControlMixin.js';
 import { FormControlsCollection } from '../registration/FormControlsCollection.js';
 import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';

packages/form-integrations/docs/17-validation-examples.md

@@ -13,10 +13,27 @@ while for a checkbox group it means at least one checkbox needs to be checked.
 import { html } from '@lion/core';
 /* eslint-disable import/no-extraneous-dependencies */
 import { LionInput } from '@lion/input';
+import '@lion/checkbox-group/lion-checkbox-group.js';
+import '@lion/checkbox-group/lion-checkbox.js';
+import '@lion/combobox/lion-combobox.js';
+import '@lion/fieldset/lion-fieldset.js';
+import '@lion/form/lion-form.js';
 import '@lion/input-amount/lion-input-amount.js';
 import '@lion/input-date/lion-input-date.js';
+import '@lion/input-datepicker/lion-input-datepicker.js';
 import '@lion/input-email/lion-input-email.js';
+import '@lion/input-iban/lion-input-iban.js';
+import '@lion/input-range/lion-input-range.js';
+import '@lion/input-stepper/lion-input-stepper.js';
 import '@lion/input/lion-input.js';
+import '@lion/listbox/lion-listbox.js';
+import '@lion/listbox/lion-option.js';
+import '@lion/listbox/lion-options.js';
+import '@lion/radio-group/lion-radio-group.js';
+import '@lion/radio-group/lion-radio.js';
+import '@lion/select/lion-select.js';
+import '@lion/select-rich/lion-select-rich.js';
+import '@lion/textarea/lion-textarea.js';
 import {
   DefaultSuccess,
   EqualsLength,
@@ -36,7 +53,7 @@ import {
   Validator,
   Pattern,
 } from '@lion/form-core';
-
+import { localize } from '@lion/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
 export default {
@@ -83,6 +100,11 @@ export const stringValidators = () => html`
     .modelValue=${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}
     label="Pattern"
   ></lion-input>
+  <button @click=${() => (localize.locale = 'de-DE')}>DE</button>
+  <button @click=${() => (localize.locale = 'en-GB')}>EN</button>
+  <button @click=${() => (localize.locale = 'fr-FR')}>FR</button>
+  <button @click=${() => (localize.locale = 'nl-NL')}>NL</button>
+  <button @click=${() => (localize.locale = 'zh-CN')}>CN</button>
 `;
 ```
 
@@ -165,6 +187,152 @@ export const emailValidator = () => html`
 `;
 ```
 
+## Checkbox Validator
+
+You can apply validation to the `<lion-checkbox-group>`, similar to how you would do so in any fieldset.
+The interaction states of the `<lion-checkbox-group>` are evaluated in order to hide or show feedback messages.
+
+```js preview-story
+export const checkboxValidation = () => {
+  const validate = () => {
+    const checkboxGroup = document.querySelector('#scientists');
+    checkboxGroup.submitted = !checkboxGroup.submitted;
+  };
+  return html`
+    <lion-checkbox-group
+      id="scientists"
+      name="scientists[]"
+      label="Favorite scientists"
+      .validators=${[new Required()]}
+    >
+      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
+      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+    </lion-checkbox-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
+
+Below is a more advanced validator on the group that evaluates the children checkboxes' checked states.
+
+```js preview-story
+export const checkboxValidationAdvanced = () => {
+  class HasMinTwoChecked extends Validator {
+    execute(value) {
+      return value.length < 2;
+    }
+    static get validatorName() {
+      return 'HasMinTwoChecked';
+    }
+    static async getMessage() {
+      return 'You need to select at least 2 values.';
+    }
+  }
+  const validate = () => {
+    const checkboxGroup = document.querySelector('#scientists2');
+    checkboxGroup.submitted = !checkboxGroup.submitted;
+  };
+  return html`
+    <lion-checkbox-group
+      id="scientists2"
+      name="scientists[]"
+      label="Favorite scientists"
+      help-text="You should have at least 2 of those"
+      .validators=${[new Required(), new HasMinTwoChecked()]}
+    >
+      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
+      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+    </lion-checkbox-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
+
+## Radio Validator
+
+```js preview-story
+export const radioValidation = () => {
+  const validate = () => {
+    const radioGroup = document.querySelector('#dinos');
+    radioGroup.submitted = !radioGroup.submitted;
+  };
+  return html`
+    <lion-radio-group
+      id="dinos"
+      name="dinos_8"
+      label="Favourite dinosaur"
+      .validators=${[new Required()]}
+    >
+      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+      <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
+    </lion-radio-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
+
+You can also create a validator that validates whether a certain option is checked.
+
+```js preview-story
+export const radioValidationAdvanced = () => {
+  class IsBrontosaurus extends Validator {
+    static get validatorName() {
+      return 'IsBrontosaurus';
+    }
+    execute(value) {
+      let showFeedback = false;
+      if (value !== 'brontosaurus') {
+        showFeedback = true;
+      }
+      return showFeedback;
+    }
+    static async getMessage() {
+      return 'You need to select "brontosaurus"';
+    }
+  }
+  const validate = () => {
+    const radioGroup = document.querySelector('#dinosTwo');
+    radioGroup.submitted = !radioGroup.submitted;
+  };
+  return html`
+    <lion-radio-group
+      id="dinosTwo"
+      name="dinosTwo"
+      label="Favourite dinosaur"
+      .validators=${[new Required(), new IsBrontosaurus()]}
+    >
+      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+    </lion-radio-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
+
+## Combobox
+
+Validation can be used as normal, below is an example of a combobox with a `Required` validator.
+
+```js preview-story
+export const validationCombobox = () => {
+  Required.getMessage = () => 'Please enter a value';
+  return html`
+    <lion-combobox .validators="${[new Required()]}" name="favoriteMovie" label="Favorite movie">
+      <lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
+      <lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
+      <lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
+      <lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
+      <lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
+      <lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
+    </lion-combobox>
+  `;
+};
+```
+
 ## Validation Types
 
 When defining your own component you can decide to allow for multiple types of validation.
@@ -469,6 +637,17 @@ export const FormValidationReset = () => html`
           <option value="3">Drop down for what?</option>
         </select>
       </lion-select>
+      <lion-select-rich
+        id="color"
+        name="color"
+        label="Favorite color"
+        .validators="${[new Required()]}"
+      >
+        <lion-option .choiceValue=${null}>select a color</lion-option>
+        <lion-option .choiceValue=${'red'}>Red</lion-option>
+        <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
+        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+      </lion-select-rich>
       <lion-input-range
         name="range"
         min="1"
@@ -478,6 +657,14 @@ export const FormValidationReset = () => html`
         step="0.1"
         label="Input range"
       ></lion-input-range>
+      <lion-input-stepper
+        min="100"
+        max="500"
+        name="value"
+        step="100"
+        label="Number"
+        .validators="${[new Required()]}"
+      ></lion-input-stepper>
       <lion-checkbox-group
         name="terms[]"
         .validators="${[

packages/form-integrations/package.json

@@ -35,20 +35,25 @@
   "dependencies": {
     "@lion/button": "0.8.7",
     "@lion/checkbox-group": "0.12.12",
+    "@lion/combobox": "0.1.16",
     "@lion/core": "0.13.6",
     "@lion/fieldset": "0.15.12",
     "@lion/form": "0.7.12",
     "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12",
+    "@lion/input-amount": "0.8.12",
     "@lion/input-date": "0.8.12",
     "@lion/input-datepicker": "0.18.11",
     "@lion/input-email": "0.9.12",
     "@lion/input-iban": "0.11.2",
     "@lion/input-range": "0.5.12",
+    "@lion/input-stepper": "0.1.13",
+    "@lion/listbox": "0.3.12",
     "@lion/localize": "0.15.3",
     "@lion/radio-group": "0.12.12",
     "@lion/select": "0.8.12",
     "@lion/select-rich": "0.21.20",
+    "@lion/switch": "0.12.12",
     "@lion/textarea": "0.8.12",
     "@lion/validate-messages": "0.3.12"
   },

packages/form/README.md

@@ -4,25 +4,12 @@
 It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
 
 ```js script
-import { html } from '@lion/core';
-import '@lion/input/lion-input.js';
-import './lion-form.js';
-
 export default {
   title: 'Forms/Form/Overview',
 };
 ```
 
-```js story
+For a full demo of forms integrated with other lion field components, see [features overview](?path=/docs/forms-features-overview--main)
-export const main = () => html`
-  <lion-form id="form">
-    <form>
-      <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-      <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-    </form>
-  </lion-form>
-`;
-```
 
 ## Features
 
@@ -46,15 +33,3 @@ npm i --save @lion/form
 ```js
 import '@lion/form/lion-form.js';
 ```
-
-### Example
-
-```html
-<lion-form>
-  <form>
-    <lion-fieldset name="fullName">
-      <lion-input label="First Name" name="firstName"></lion-input>
-    </lion-fieldset>
-  </form>
-</lion-form>
-```

packages/form/package.json

@@ -33,9 +33,7 @@
     "lion-form.js"
   ],
   "dependencies": {
-    "@lion/core": "0.13.6",
+    "@lion/fieldset": "0.15.12"
-    "@lion/fieldset": "0.15.12",
-    "@lion/input": "0.10.12"
   },
   "keywords": [
     "form",

packages/input-amount/README.md

@@ -113,7 +113,7 @@ export const faultyPrefilled = () => html`
 
 ### Modifying the amount of decimals
 
-You can override certain formatting options similar to how you would do this when using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank">Intl NumberFormat</a>.
+You can override certain formatting options similar to how you would do this when using [Intl NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).
 This example shows formatting to whole numbers.
 
 ```js preview-story

packages/input-range/src/LionInputRange.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { css, html, unsafeCSS } from '@lion/core';
 import { LionInput } from '@lion/input';
-import { formatNumber, LocalizeMixin } from '@lion/localize';
+import { formatNumber } from '@lion/localize';
 
 /**
  * @typedef {import('@lion/core').CSSResult} CSSResult
@@ -12,8 +12,8 @@ import { formatNumber, LocalizeMixin } from '@lion/localize';
  *
  * @customElement `lion-input-range`
  */
-// @ts-expect-error https://github.com/microsoft/TypeScript/issues/40110 + false positive for incompatible static get properties. Lit-element merges super properties already for you.
+// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
-export class LionInputRange extends LocalizeMixin(LionInput) {
+export class LionInputRange extends LionInput {
   static get properties() {
     return {
       min: {

packages/input-stepper/README.md

@@ -4,7 +4,6 @@
 
 ```js script
 import { html } from '@lion/core';
-import '@lion/form/lion-form.js';
 import './lion-input-stepper.js';
 
 export default {
@@ -87,50 +86,3 @@ export const range = () => html`
   <lion-input-stepper min="200" max="500" name="value" step="100" value="200"></lion-input-stepper>
 `;
 ```
-
-#### Validation
-
-Only numbers are allowed in the field.
-
-```js preview-story
-export const validation = () => html`
-  <p>
-    <strong>Min:</strong> 100, <strong>Max:</strong> 500, <strong>Step:</strong> 100,
-    <strong>Value:</strong> Test
-  </p>
-  <lion-input-stepper min="100" max="500" name="value" step="100" value="Test"></lion-input-stepper>
-`;
-```
-
-#### Form
-
-```js preview-story
-export const usingForm = () => html`
-  <lion-form
-    @submit=${e => {
-      console.log(e.target.serializedValue);
-      const code = document.getElementById('code');
-      code.style = 'background-color:#DEDEDE;padding:12px;';
-      code.innerHTML = `<code>${JSON.stringify(e.target.serializedValue, null, 4)}</code>`;
-    }}
-  >
-    <form>
-      <lion-input name="fullname" label="Full name"></lion-input>
-      <br />
-      <lion-input-stepper min="0" max="5" name="count">
-        <label slot="label">RSVP</label>
-        <div slot="help-text">Max. 5 guests</div>
-      </lion-input-stepper>
-      <br />
-      <lion-button raised>Submit</lion-button>
-      <lion-button
-        type="button"
-        raised
-        @click=${ev => ev.currentTarget.parentElement.parentElement.resetGroup()}
-        >Reset</lion-button
-      >
-    </form>
-  </lion-form>
-  <pre id="code"></pre>
-`;
-```

packages/input-stepper/package.json

@@ -34,7 +34,6 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form": "0.7.12",
     "@lion/form-core": "0.6.14",
     "@lion/input": "0.10.12"
   },

packages/input/README.md

@@ -4,10 +4,6 @@
 
 ```js script
 import { html } from '@lion/core';
-import { MaxLength } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-
-import { localize } from '@lion/localize';
 
 import './lion-input.js';
 
@@ -179,29 +175,3 @@ export const after = () => html`
   </lion-input>
 `;
 ```
-
-## Using validation
-
-The input can be used with [validation](?path=/docs/forms-validation-overview--page).
-On certain conditions, a feedback message can be shown if the input value is invalid.
-
-You can change the locale with the buttons below the field.
-Our default validators come with default translations already.
-
-```js preview-story
-export const validation = () => {
-  loadDefaultFeedbackMessages();
-  return html`
-    <lion-input
-      label="Value"
-      .modelValue=${'Too long input'}
-      .validators=${[new MaxLength(5)]}
-    ></lion-input>
-    <button @click=${() => (localize.locale = 'de-DE')}>DE</button>
-    <button @click=${() => (localize.locale = 'en-GB')}>EN</button>
-    <button @click=${() => (localize.locale = 'fr-FR')}>FR</button>
-    <button @click=${() => (localize.locale = 'nl-NL')}>NL</button>
-    <button @click=${() => (localize.locale = 'zh-CN')}>CN</button>
-  `;
-};
-```

packages/input/package.json

@@ -33,9 +33,7 @@
     "lion-input.js"
   ],
   "dependencies": {
-    "@lion/form-core": "0.6.14",
+    "@lion/form-core": "0.6.14"
-    "@lion/localize": "0.15.3",
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "input",

packages/listbox/README.md

@@ -8,8 +8,6 @@ multiple options to be selected is a multi-select listbox.
 
 ```js script
 import { html } from '@lion/core';
-import { Required } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { listboxData } from './docs/listboxData.js';
 import './lion-option.js';
 import './lion-listbox.js';

packages/listbox/package.json

@@ -36,8 +36,7 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14",
+    "@lion/form-core": "0.6.14"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "form",

packages/radio-group/README.md

@@ -6,8 +6,6 @@ You should use `<lion-radio>`s inside this element.
 
 ```js script
 import { html } from '@lion/core';
-import { Required, Validator } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
 import './lion-radio-group.js';
 import './lion-radio.js';
@@ -15,8 +13,6 @@ import './lion-radio.js';
 export default {
   title: 'Forms/Radio Group',
 };
-
-loadDefaultFeedbackMessages();
 ```
 
 ```js preview-story
@@ -118,69 +114,6 @@ export const disabledGroup = () => html`
 `;
 ```
 
-### Validation
-
-```js preview-story
-export const validation = () => {
-  const validate = () => {
-    const radioGroup = document.querySelector('#dinos');
-    radioGroup.submitted = !radioGroup.submitted;
-  };
-  return html`
-    <lion-radio-group
-      id="dinos"
-      name="dinos_8"
-      label="Favourite dinosaur"
-      .validators=${[new Required()]}
-    >
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-      <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-    </lion-radio-group>
-    <button @click="${() => validate()}">Validate</button>
-  `;
-};
-```
-
-You can also create a validator that validates whether a certain option is checked.
-
-```js preview-story
-export const validateItem = () => {
-  class IsBrontosaurus extends Validator {
-    static get validatorName() {
-      return 'IsBrontosaurus';
-    }
-    execute(value) {
-      let showFeedback = false;
-      if (value !== 'brontosaurus') {
-        showFeedback = true;
-      }
-      return showFeedback;
-    }
-    static async getMessage() {
-      return 'You need to select "brontosaurus"';
-    }
-  }
-  const validate = () => {
-    const radioGroup = document.querySelector('#dinosTwo');
-    radioGroup.submitted = !radioGroup.submitted;
-  };
-  return html`
-    <lion-radio-group
-      id="dinosTwo"
-      name="dinosTwo"
-      label="Favourite dinosaur"
-      .validators=${[new Required(), new IsBrontosaurus()]}
-    >
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-    </lion-radio-group>
-    <button @click="${() => validate()}">Validate</button>
-  `;
-};
-```
-
 ### Help text
 
 You can add help text on each checkbox with `help-text` attribute on the `<lion-radio>`.

packages/radio-group/package.json

@@ -36,8 +36,7 @@
   "dependencies": {
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
-    "@lion/input": "0.10.12",
+    "@lion/input": "0.10.12"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "lion",

packages/select-rich/README.md

@@ -10,8 +10,6 @@ Its implementation is based on the following Design pattern:
 
 ```js script
 import { LitElement, html } from '@lion/core';
-import { Required } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
 import '@lion/listbox/lion-option.js';
 import '@lion/listbox/lion-options.js';
@@ -20,7 +18,6 @@ import './lion-select-rich.js';
 export default {
   title: 'Forms/Select Rich',
 };
-loadDefaultFeedbackMessages();
 ```
 
 ```js preview-story
@@ -168,29 +165,6 @@ export const disabledOption = () => html`
 `;
 ```
 
-### Validation
-
-Validation can be used on this field as well, same as with other fields. Below is an example with required.
-It can be triggered by opening the select and selecting a valid option, then selecting the first option again, of which the `modelValue` is `null`.
-
-```js preview-story
-export const validation = () => {
-  return html`
-    <lion-select-rich
-      id="color"
-      name="color"
-      label="Favorite color"
-      .validators="${[new Required()]}"
-    >
-      <lion-option .choiceValue=${null}>select a color</lion-option>
-      <lion-option .choiceValue=${'red'}>Red</lion-option>
-      <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
-      <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-    </lion-select-rich>
-  `;
-};
-```
-
 ### Render options
 
 The choiceValue can also be a complex value like an Object.
@@ -304,8 +278,6 @@ However, this allows the user to explicitly select this option.
 Often, you may want a placeholder that appears initially, but cannot be selected explicitly by the user.
 For this you can use `has-no-default-selected` attribute.
 
-Both methods work with the `Required` validator.
-
 ```js preview-story
 export const noDefaultSelection = () => html`
   <lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>

packages/select-rich/package.json

@@ -38,8 +38,7 @@
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
     "@lion/listbox": "0.3.12",
-    "@lion/overlays": "0.22.8",
+    "@lion/overlays": "0.22.8"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "field",

packages/select-rich/src/LionSelectInvoker.js

@@ -1,4 +1,4 @@
-import { LionButton } from '@lion/button/src/LionButton.js';
+import { LionButton } from '@lion/button';
 import { css, html } from '@lion/core';
 
 /**

packages/select/README.md

@@ -9,15 +9,12 @@ usability for keyboard and screen reader users.
 
 ```js script
 import { html } from '@lion/core';
-import { Required } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
 import './lion-select.js';
 
 export default {
   title: 'Forms/Select',
 };
-loadDefaultFeedbackMessages();
 ```
 
 ```js preview-story
@@ -105,26 +102,3 @@ export const disabledSelect = () => html`
   </lion-select>
 `;
 ```
-
-### Validation
-
-```js preview-story
-export const validation = () => {
-  const validate = () => {
-    const select = document.querySelector('#color');
-    select.submitted = !select.submitted;
-  };
-  return html`
-    <lion-select id="color" name="color" .validators="${[new Required()]}">
-      <label slot="label">Favorite color</label>
-      <select slot="input">
-        <option selected hidden value>Please select</option>
-        <option value="red">Red</option>
-        <option value="hotpink">Hotpink</option>
-        <option value="teal">Teal</option>
-      </select>
-    </lion-select>
-    <button @click="${() => validate()}">Validate</button>
-  `;
-};
-```

packages/select/package.json

@@ -34,8 +34,7 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14",
+    "@lion/form-core": "0.6.14"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "lion",

packages/textarea/README.md

@@ -5,16 +5,12 @@ Its purpose is to provide a way for users to write text that is multiple lines l
 
 ```js script
 import { html } from '@lion/core';
-import { MaxLength, MinLength, Required } from '@lion/form-core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 
 import './lion-textarea.js';
 
 export default {
   title: 'Forms/Textarea',
 };
-
-loadDefaultFeedbackMessages();
 ```
 
 ```js preview-story
@@ -106,22 +102,6 @@ export const nonGrowing = () => html`
 `;
 ```
 
-### Validation
-
-The textarea can have validation.
-
-```js preview-story
-export const validation = () => {
-  return html`
-    <lion-textarea
-      .validators="${[new Required(), new MinLength(10), new MaxLength(400)]}"
-      label="String"
-      .modelValue="${'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
-    ></lion-textarea>
-  `;
-};
-```
-
 ### Intersection Observer
 
 It could be that your textarea is inside a hidden container, for example for a dialog or accordion or tabs.

packages/textarea/package.json

@@ -35,7 +35,6 @@
   "dependencies": {
     "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
-    "@lion/validate-messages": "0.3.12",
     "@types/autosize": "^3.0.7",
     "autosize": "4.0.2"
   },

packages/textarea/src/LionTextarea.js

@@ -1,9 +1,8 @@
 /* eslint-disable max-classes-per-file */
 // @ts-expect-error https://github.com/jackmoore/autosize/pull/384 wait for this, then we can switch to just 'autosize'; and then types will work!
 import autosize from 'autosize/src/autosize.js';
-import { LionField } from '@lion/form-core';
+import { LionField, NativeTextFieldMixin } from '@lion/form-core';
 import { css } from '@lion/core';
-import { NativeTextFieldMixin } from '@lion/form-core/src/NativeTextFieldMixin';
 
 class LionFieldWithTextArea extends LionField {
   /**

packages/validate-messages/README.md

@@ -1,45 +0,0 @@
-# Validation Messages
-
-A set of localized messages for default Validators. One method `loadDefaultFeedbackMessages` is
-called, it will make sure that all validators provided in `@lion/form-core` will have a default
-error message.
-It uses the `@lion/localize` system to provide these translations and has support for more than
-15 locales.
-
-```js script
-import { html } from '@lion/core';
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-import { Required } from '@lion/form-core';
-import '@lion/form-core/lion-field.js';
-
-loadDefaultFeedbackMessages();
-
-export default {
-  title: 'Forms/ValidateMessages',
-};
-```
-
-```js preview-story
-export const main = () =>
-  html`
-    <lion-field name="value" label="label" fieldName="value" .validators="${[new Required()]}"
-      ><input slot="input"
-    /></lion-field>
-  `;
-```
-
-## Features
-
-- Sets default error messages for validators supported by `@lion/form-core`
-
-## How to use
-
-### Installation
-
-```bash
-npm i --save @lion/validate-messages
-```
-
-```js
-import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
-```

packages/validate-messages/package.json

@@ -30,10 +30,8 @@
     "test": "cd ../../ && npm run test:browser -- --group validate-messages"
   },
   "dependencies": {
-    "@lion/core": "0.13.6",
     "@lion/form-core": "0.6.14",
-    "@lion/localize": "0.15.3",
+    "@lion/localize": "0.15.3"
-    "@lion/validate-messages": "0.3.12"
   },
   "keywords": [
     "feedback",