From 5302ec89a2786ec3ef0a74afe048aa7b7e627df1 Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Wed, 6 Jan 2021 15:08:35 +0100 Subject: [PATCH] fix: minimise deps by moving integration demos to integration packages --- .changeset/forty-feet-talk.md | 20 ++ packages/checkbox-group/README.md | 68 ------- packages/checkbox-group/package.json | 4 +- packages/combobox/README.md | 30 --- packages/combobox/package.json | 3 +- packages/fieldset/README.md | 1 - packages/fieldset/package.json | 3 +- packages/form-core/docs/validate/README.md | 32 ++- packages/form-core/index.js | 1 + packages/form-core/package.json | 1 - .../src/form-group/FormGroupMixin.js | 3 +- .../docs/17-validation-examples.md | 189 +++++++++++++++++- packages/form-integrations/package.json | 5 + packages/form/README.md | 27 +-- packages/form/package.json | 4 +- packages/input-amount/README.md | 2 +- packages/input-range/src/LionInputRange.js | 6 +- packages/input-stepper/README.md | 48 ----- packages/input-stepper/package.json | 1 - packages/input/README.md | 30 --- packages/input/package.json | 4 +- packages/listbox/README.md | 2 - packages/listbox/package.json | 3 +- packages/radio-group/README.md | 67 ------- packages/radio-group/package.json | 3 +- packages/select-rich/README.md | 28 --- packages/select-rich/package.json | 3 +- packages/select-rich/src/LionSelectInvoker.js | 2 +- packages/select/README.md | 26 --- packages/select/package.json | 3 +- packages/textarea/README.md | 20 -- packages/textarea/package.json | 1 - packages/textarea/src/LionTextarea.js | 3 +- packages/validate-messages/README.md | 45 ----- packages/validate-messages/package.json | 4 +- 35 files changed, 261 insertions(+), 431 deletions(-) create mode 100644 .changeset/forty-feet-talk.md delete mode 100644 packages/validate-messages/README.md diff --git a/.changeset/forty-feet-talk.md b/.changeset/forty-feet-talk.md new file mode 100644 index 000000000..d7330b639 --- /dev/null +++ b/.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. diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md index ed611ed5a..5584c8c29 100644 --- a/packages/checkbox-group/README.md +++ b/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 ``, similar to how you would do so in any fieldset. -The interaction states of the `` 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` - - - - - - - `; -}; -``` - -### 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` - - - - - - - `; -}; -``` - ### Help text You can add help text on each checkbox with `help-text` attribute on the ``. diff --git a/packages/checkbox-group/package.json b/packages/checkbox-group/package.json index 6ac66487e..6337698d5 100644 --- a/packages/checkbox-group/package.json +++ b/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/validate-messages": "0.3.12" + "@lion/input": "0.10.12" }, "keywords": [ "checkbox-group", diff --git a/packages/combobox/README.md b/packages/combobox/README.md index 20bc39cee..0721a0526 100644 --- a/packages/combobox/README.md +++ b/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` - -
- - Rocky - Rocky II - Rocky III - Rocky IV - Rocky V - Rocky Balboa - -
- - `; -}; -``` - ## Listbox compatibility All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well. diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 93c2239bd..f89b6b05c 100644 --- a/packages/combobox/package.json +++ b/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/validate-messages": "0.3.12" + "@lion/overlays": "0.22.8" }, "keywords": [ "combobox", diff --git a/packages/fieldset/README.md b/packages/fieldset/README.md index 88d671fdc..04a386ecc 100644 --- a/packages/fieldset/README.md +++ b/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'; diff --git a/packages/fieldset/package.json b/packages/fieldset/package.json index efc37858b..4fab5ea5a 100644 --- a/packages/fieldset/package.json +++ b/packages/fieldset/package.json @@ -35,8 +35,7 @@ ], "dependencies": { "@lion/core": "0.13.6", - "@lion/form-core": "0.6.14", - "@lion/validate-messages": "0.3.12" + "@lion/form-core": "0.6.14" }, "keywords": [ "fieldset", diff --git a/packages/form-core/docs/validate/README.md b/packages/form-core/docs/validate/README.md index cce7a462c..1c7295574 100644 --- a/packages/form-core/docs/validate/README.md +++ b/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` + + `; +}; +``` diff --git a/packages/form-core/index.js b/packages/form-core/index.js index fc1db61f0..e48c7f5d1 100644 --- a/packages/form-core/index.js +++ b/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 diff --git a/packages/form-core/package.json b/packages/form-core/package.json index 7608a6cfb..357b90e2e 100644 --- a/packages/form-core/package.json +++ b/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": [ diff --git a/packages/form-core/src/form-group/FormGroupMixin.js b/packages/form-core/src/form-group/FormGroupMixin.js index 4ceb1dbce..a6005b444 100644 --- a/packages/form-core/src/form-group/FormGroupMixin.js +++ b/packages/form-core/src/form-group/FormGroupMixin.js @@ -1,5 +1,4 @@ -import { dedupeMixin, html, SlotMixin } from '@lion/core'; -import { DisabledMixin } from '@lion/core/src/DisabledMixin.js'; +import { dedupeMixin, html, SlotMixin, DisabledMixin } from '@lion/core'; import { FormControlMixin } from '../FormControlMixin.js'; import { FormControlsCollection } from '../registration/FormControlsCollection.js'; import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js'; diff --git a/packages/form-integrations/docs/17-validation-examples.md b/packages/form-integrations/docs/17-validation-examples.md index 92b22ace3..200c328d6 100644 --- a/packages/form-integrations/docs/17-validation-examples.md +++ b/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 "#LionRocks" is in this input #LionRocks'} label="Pattern" > + + + + + `; ``` @@ -165,6 +187,152 @@ export const emailValidator = () => html` `; ``` +## Checkbox Validator + +You can apply validation to the ``, similar to how you would do so in any fieldset. +The interaction states of the `` 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` + + + + + + + `; +}; +``` + +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` + + + + + + + `; +}; +``` + +## Radio Validator + +```js preview-story +export const radioValidation = () => { + const validate = () => { + const radioGroup = document.querySelector('#dinos'); + radioGroup.submitted = !radioGroup.submitted; + }; + return html` + + + + + + + `; +}; +``` + +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` + + + + + + + `; +}; +``` + +## 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` + + Rocky + Rocky II + Rocky III + Rocky IV + Rocky V + Rocky Balboa + + `; +}; +``` + ## 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` + + select a color + Red + Hotpink + Teal + html` step="0.1" label="Input range" > + html` - -
- - -
- -`; -``` +For a full demo of forms integrated with other lion field components, see [features overview](?path=/docs/forms-features-overview--main) ## Features @@ -46,15 +33,3 @@ npm i --save @lion/form ```js import '@lion/form/lion-form.js'; ``` - -### Example - -```html - -
- - - -
- -``` diff --git a/packages/form/package.json b/packages/form/package.json index 29aff3189..6cf99c96f 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -33,9 +33,7 @@ "lion-form.js" ], "dependencies": { - "@lion/core": "0.13.6", - "@lion/fieldset": "0.15.12", - "@lion/input": "0.10.12" + "@lion/fieldset": "0.15.12" }, "keywords": [ "form", diff --git a/packages/input-amount/README.md b/packages/input-amount/README.md index 8e4b0816d..ba8b733bd 100644 --- a/packages/input-amount/README.md +++ b/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 Intl NumberFormat. +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 diff --git a/packages/input-range/src/LionInputRange.js b/packages/input-range/src/LionInputRange.js index a33471025..1b9cc5bd0 100644 --- a/packages/input-range/src/LionInputRange.js +++ b/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. -export class LionInputRange extends LocalizeMixin(LionInput) { +// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. +export class LionInputRange extends LionInput { static get properties() { return { min: { diff --git a/packages/input-stepper/README.md b/packages/input-stepper/README.md index 28c1cc318..72f983bfe 100644 --- a/packages/input-stepper/README.md +++ b/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` `; ``` - -#### Validation - -Only numbers are allowed in the field. - -```js preview-story -export const validation = () => html` -

- Min: 100, Max: 500, Step: 100, - Value: Test -

- -`; -``` - -#### Form - -```js preview-story -export const usingForm = () => html` - { - console.log(e.target.serializedValue); - const code = document.getElementById('code'); - code.style = 'background-color:#DEDEDE;padding:12px;'; - code.innerHTML = `${JSON.stringify(e.target.serializedValue, null, 4)}`; - }} - > -
- -
- - -
Max. 5 guests
- -
- Submit - ev.currentTarget.parentElement.parentElement.resetGroup()} - >Reset -
- - 

-`;
-```
diff --git a/packages/input-stepper/package.json b/packages/input-stepper/package.json
index f59ad25e8..93fe8f83c 100644
--- a/packages/input-stepper/package.json
+++ b/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"
   },
diff --git a/packages/input/README.md b/packages/input/README.md
index 2aa379d43..f50dc9c85 100644
--- a/packages/input/README.md
+++ b/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`
   
 `;
 ```
-
-## 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`
-    
-    
-    
-    
-    
-    
-  `;
-};
-```
diff --git a/packages/input/package.json b/packages/input/package.json
index efa33e888..bc4aecbfd 100644
--- a/packages/input/package.json
+++ b/packages/input/package.json
@@ -33,9 +33,7 @@
     "lion-input.js"
   ],
   "dependencies": {
-    "@lion/form-core": "0.6.14",
-    "@lion/localize": "0.15.3",
-    "@lion/validate-messages": "0.3.12"
+    "@lion/form-core": "0.6.14"
   },
   "keywords": [
     "input",
diff --git a/packages/listbox/README.md b/packages/listbox/README.md
index befcade63..97a32ed71 100644
--- a/packages/listbox/README.md
+++ b/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';
diff --git a/packages/listbox/package.json b/packages/listbox/package.json
index a61781e4a..cad11095b 100644
--- a/packages/listbox/package.json
+++ b/packages/listbox/package.json
@@ -36,8 +36,7 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14",
-    "@lion/validate-messages": "0.3.12"
+    "@lion/form-core": "0.6.14"
   },
   "keywords": [
     "form",
diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md
index 39d5f2749..c2d1e38a8 100644
--- a/packages/radio-group/README.md
+++ b/packages/radio-group/README.md
@@ -6,8 +6,6 @@ You should use ``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`
-    
-      
-      
-      
-    
-    
-  `;
-};
-```
-
-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`
-    
-      
-      
-      
-    
-    
-  `;
-};
-```
-
 ### Help text
 
 You can add help text on each checkbox with `help-text` attribute on the ``.
diff --git a/packages/radio-group/package.json b/packages/radio-group/package.json
index c76300b5a..0f58aee0b 100644
--- a/packages/radio-group/package.json
+++ b/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/validate-messages": "0.3.12"
+    "@lion/input": "0.10.12"
   },
   "keywords": [
     "lion",
diff --git a/packages/select-rich/README.md b/packages/select-rich/README.md
index 1f69b6f43..9b4a03920 100644
--- a/packages/select-rich/README.md
+++ b/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`
-    
-      select a color
-      Red
-      Hotpink
-      Teal
-    
-  `;
-};
-```
-
 ### 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`
   
diff --git a/packages/select-rich/package.json b/packages/select-rich/package.json
index 1d6de93e7..2de5e64d4 100644
--- a/packages/select-rich/package.json
+++ b/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/validate-messages": "0.3.12"
+    "@lion/overlays": "0.22.8"
   },
   "keywords": [
     "field",
diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js
index 6987f27a5..43b12a2fb 100644
--- a/packages/select-rich/src/LionSelectInvoker.js
+++ b/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';
 
 /**
diff --git a/packages/select/README.md b/packages/select/README.md
index 937befbaf..248caaf5e 100644
--- a/packages/select/README.md
+++ b/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`
   
 `;
 ```
-
-### Validation
-
-```js preview-story
-export const validation = () => {
-  const validate = () => {
-    const select = document.querySelector('#color');
-    select.submitted = !select.submitted;
-  };
-  return html`
-    
-      
-      
-    
-    
-  `;
-};
-```
diff --git a/packages/select/package.json b/packages/select/package.json
index beddb0f44..232a8b7e0 100644
--- a/packages/select/package.json
+++ b/packages/select/package.json
@@ -34,8 +34,7 @@
   ],
   "dependencies": {
     "@lion/core": "0.13.6",
-    "@lion/form-core": "0.6.14",
-    "@lion/validate-messages": "0.3.12"
+    "@lion/form-core": "0.6.14"
   },
   "keywords": [
     "lion",
diff --git a/packages/textarea/README.md b/packages/textarea/README.md
index ca50750a4..7024d0c9b 100644
--- a/packages/textarea/README.md
+++ b/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`
-    
-  `;
-};
-```
-
 ### Intersection Observer
 
 It could be that your textarea is inside a hidden container, for example for a dialog or accordion or tabs.
diff --git a/packages/textarea/package.json b/packages/textarea/package.json
index 169e69916..75fe6b9cf 100644
--- a/packages/textarea/package.json
+++ b/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"
   },
diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js
index 6228fbabc..f9f9726cd 100644
--- a/packages/textarea/src/LionTextarea.js
+++ b/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 {
   /**
diff --git a/packages/validate-messages/README.md b/packages/validate-messages/README.md
deleted file mode 100644
index 43d80832e..000000000
--- a/packages/validate-messages/README.md
+++ /dev/null
@@ -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`
-    
-  `;
-```
-
-## 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';
-```
diff --git a/packages/validate-messages/package.json b/packages/validate-messages/package.json
index 57862ca3c..749ef4628 100644
--- a/packages/validate-messages/package.json
+++ b/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/validate-messages": "0.3.12"
+    "@lion/localize": "0.15.3"
   },
   "keywords": [
     "feedback",