diff --git a/docs/components/button/use-cases.md b/docs/components/button/use-cases.md index 8ba83e0b9..e2e45ee9d 100644 --- a/docs/components/button/use-cases.md +++ b/docs/components/button/use-cases.md @@ -62,10 +62,10 @@ export const withinForm = () => html` - console.log('click submit handler', ev.target)} + Submit - console.log('click reset handler', ev.target)} + Reset diff --git a/docs/components/calendar/use-cases.md b/docs/components/calendar/use-cases.md index 1e5606936..a0ef3a79d 100644 --- a/docs/components/calendar/use-cases.md +++ b/docs/components/calendar/use-cases.md @@ -21,7 +21,7 @@ export const selectedDate = () => html` max-width: 500px; } - + `; ``` @@ -160,7 +160,7 @@ export const disabledDates = () => html` day.getDay() === 6 || day.getDay() === 0} + .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}" > `; ``` @@ -183,7 +183,7 @@ export const combinedDisabledDates = () => { day.getDay() === 6 || day.getDay() === 0} + .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}" .minDate="${new Date()}" .maxDate="${maxDate}" > @@ -215,7 +215,7 @@ export const findingEnabledDates = () => { day.getDay() === 6 || day.getDay() === 0} + .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}" > - - diff --git a/docs/components/combobox/extensions.md b/docs/components/combobox/extensions.md index 51cec220f..36cbf1650 100644 --- a/docs/components/combobox/extensions.md +++ b/docs/components/combobox/extensions.md @@ -20,11 +20,11 @@ easily from an extended Lion component, just by: ```js preview-story export const MaterialDesign = () => html` - Apple - Artichoke - Asparagus - Banana - Beets + Apple + Artichoke + Asparagus + Banana + Beets `; ``` @@ -34,11 +34,11 @@ export const MaterialDesign = () => html` ```js preview-story export const Github = () => html` - master - develop - release - feat/abc - feat/xyz123 + master + develop + release + feat/abc + feat/xyz123 `; ``` @@ -62,7 +62,7 @@ export const Whatsapp = () => { is-user-text is-user-text-read image="${obamaImgUrl}" - .choiceValue=${'Barack Obama'} + .choiceValue="${'Barack Obama'}" > { time="14:59" is-user-text image="${trumpImgUrl}" - .choiceValue=${'Donald Trump'} + .choiceValue="${'Donald Trump'}" > `; @@ -114,35 +114,35 @@ export const GoogleSearch = () => { href="https://www.google.com/search?query=apple" target="_blank" rel="noopener noreferrer" - .choiceValue=${'Apple'} + .choiceValue="${'Apple'}" >Apple Artichoke Asparagus Banana Beets diff --git a/docs/components/combobox/use-cases.md b/docs/components/combobox/use-cases.md index d213efb39..36bc75d29 100644 --- a/docs/components/combobox/use-cases.md +++ b/docs/components/combobox/use-cases.md @@ -34,7 +34,7 @@ When `requireOptionMatch` is set to false the textbox is leading, with the listb ```js preview-story export const optionMatch = () => html` - + ${lazyRender( listboxData.map(entry => html` ${entry} `), )} @@ -243,7 +243,7 @@ export const multipleChoice = () => html` ${lazyRender( listboxData.map( (entry, i) => html` - ${entry} + `, ), )} @@ -258,7 +258,7 @@ Alternatively, the multi-choice flag can be combined with .requireMultipleMatch= ```js preview-story export const multipleCustomizableChoice = () => html` - + html` ${lazyRender( listboxData.map( (entry, i) => html` - ${entry} + `, ), )} @@ -282,7 +282,7 @@ By default the a check is made which makes sure the value matches an option. Thi ```js preview-story export const validation = () => html` - + ${lazyRender( listboxData.map(entry => html` ${entry} `), )} diff --git a/docs/components/dialog/overview.md b/docs/components/dialog/overview.md index f4db20562..47aaab650 100644 --- a/docs/components/dialog/overview.md +++ b/docs/components/dialog/overview.md @@ -21,7 +21,7 @@ export const main = () => html` Hello! You can close this dialog here: diff --git a/docs/components/dialog/src/slots-dialog-content.js b/docs/components/dialog/src/slots-dialog-content.js index 6b481427d..3edc961ac 100644 --- a/docs/components/dialog/src/slots-dialog-content.js +++ b/docs/components/dialog/src/slots-dialog-content.js @@ -24,7 +24,7 @@ class SlotsDialogContent extends LitElement {
- + `; } } diff --git a/docs/components/dialog/src/styled-dialog-content.js b/docs/components/dialog/src/styled-dialog-content.js index 799dae2e8..19b2c35ef 100644 --- a/docs/components/dialog/src/styled-dialog-content.js +++ b/docs/components/dialog/src/styled-dialog-content.js @@ -30,7 +30,7 @@ class StyledDialogContent extends LitElement {

Look how nice this dialog looks!

- + `; } } diff --git a/docs/components/dialog/use-cases.md b/docs/components/dialog/use-cases.md index 22aed2123..23441f4ef 100644 --- a/docs/components/dialog/use-cases.md +++ b/docs/components/dialog/use-cases.md @@ -16,7 +16,7 @@ import './src/slots-dialog-content.js';
This is a dialog - +
@@ -35,7 +35,7 @@ export const placementOverrides = () => { Hello! You can close this notification here: @@ -88,7 +88,7 @@ export const otherOverrides = () => { Hello! You can close this dialog here: diff --git a/docs/components/drawer/use-cases.md b/docs/components/drawer/use-cases.md index 4ca44531d..a26a4cb08 100644 --- a/docs/components/drawer/use-cases.md +++ b/docs/components/drawer/use-cases.md @@ -125,9 +125,9 @@ export const methods = ({ shadowRoot }) => html` ${demoStyle}
- - - + + +
diff --git a/docs/components/fieldset/overview.md b/docs/components/fieldset/overview.md index d835cf0cf..55150b0ac 100644 --- a/docs/components/fieldset/overview.md +++ b/docs/components/fieldset/overview.md @@ -12,8 +12,8 @@ A web component that can be used to group multiple input fields or other fieldse ```js preview-story export const main = () => html` - - + + `; ``` diff --git a/docs/components/fieldset/use-cases.md b/docs/components/fieldset/use-cases.md index 2aa181fe0..05b06e40a 100644 --- a/docs/components/fieldset/use-cases.md +++ b/docs/components/fieldset/use-cases.md @@ -16,9 +16,9 @@ The fieldset's modelValue is an `Object` containing properties where the key is ```js preview-story export const data = () => html` - - - @@ -38,14 +38,14 @@ export const disabled = () => { } return html` - - + + - - + + - + `; }; ``` @@ -59,18 +59,18 @@ export const nestingFieldsets = () => html`
Personal data
- - + + - + - -
- @@ -168,7 +168,7 @@ export const validatingMultipleFieldsets = () => { } }; return html` - + diff --git a/docs/components/form/overview.md b/docs/components/form/overview.md index 6d08d6860..886545a70 100644 --- a/docs/components/form/overview.md +++ b/docs/components/form/overview.md @@ -21,10 +21,10 @@ export const main = () => { }); }; return html` - -
ev.preventDefault()}> - - + + + +
diff --git a/docs/components/form/use-cases.md b/docs/components/form/use-cases.md index d8f7f895f..c466de5ff 100644 --- a/docs/components/form/use-cases.md +++ b/docs/components/form/use-cases.md @@ -39,8 +39,8 @@ export const formSubmit = () => { ev.target.previousElementSibling.submit(); }; return html` - -
ev.preventDefault()}> + + {
- + `; }; ``` diff --git a/docs/components/input-amount/use-cases.md b/docs/components/input-amount/use-cases.md index a2d615c4c..28cae1a5f 100644 --- a/docs/components/input-amount/use-cases.md +++ b/docs/components/input-amount/use-cases.md @@ -16,7 +16,7 @@ It will accept negative numbers with a minus symbol. ```js preview-story export const negativeNumber = () => html` - + `; ``` @@ -26,7 +26,7 @@ You can optionally set a currency label with the `currency` attribute, which is ```js preview-story export const currencySuffix = () => html` - + `; ``` @@ -43,7 +43,7 @@ export const forceLocale = () => { label="Price" currency="JOD" .locale="nl-NL" - .modelValue=${123456.78} + .modelValue="${123456.78}" > `; }; @@ -66,7 +66,7 @@ Separator characters include: import { preprocessAmount } from '@lion/ui/input-amount.js'; export const forceDigits = () => html` - + `; ``` @@ -81,7 +81,7 @@ export const faultyPrefilled = () => html` `; ``` @@ -96,11 +96,11 @@ export const noDecimals = () => html` `; diff --git a/docs/components/input-date/use-cases.md b/docs/components/input-date/use-cases.md index 6fc04b327..e6ecee6d9 100644 --- a/docs/components/input-date/use-cases.md +++ b/docs/components/input-date/use-cases.md @@ -12,7 +12,7 @@ import '@lion/ui/define/lion-input-date.js'; ```js preview-story export const isADate = () => html` - + `; ``` @@ -25,8 +25,8 @@ export const withMinimumDate = () => { `; @@ -42,8 +42,8 @@ export const withMaximumDate = () => { `; }; @@ -57,8 +57,8 @@ export const withMinimumAndMaximumDate = () => { return html`
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate( @@ -77,7 +77,7 @@ export const faultyPrefilled = () => html` `; ``` diff --git a/docs/components/input-datepicker/use-cases.md b/docs/components/input-datepicker/use-cases.md index 6e98f8aab..1b252f737 100644 --- a/docs/components/input-datepicker/use-cases.md +++ b/docs/components/input-datepicker/use-cases.md @@ -17,8 +17,8 @@ Below are examples of different validators for dates. export const minimumAndMaximumDate = () => html`
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate( @@ -36,8 +36,8 @@ export const disableSpecificDates = () => html` d.getDate() === 15)]} + .modelValue="${new Date('2023/06/15')}" + .validators="${[new IsDateDisabled(d => d.getDate() === 15)]}" > `; ``` @@ -53,7 +53,7 @@ export const calendarHeading = () => html` `; ``` diff --git a/docs/components/input-email/use-cases.md b/docs/components/input-email/use-cases.md index 5f98e8d79..01e505512 100644 --- a/docs/components/input-email/use-cases.md +++ b/docs/components/input-email/use-cases.md @@ -14,7 +14,7 @@ Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed ```js preview-story export const faultyPrefilled = () => html` - + `; ``` @@ -39,8 +39,8 @@ export const customValidator = () => { } return html` `; diff --git a/docs/components/input-iban/use-cases.md b/docs/components/input-iban/use-cases.md index 786b6df41..03d75c6ee 100644 --- a/docs/components/input-iban/use-cases.md +++ b/docs/components/input-iban/use-cases.md @@ -11,7 +11,7 @@ import '@lion/ui/define/lion-input-iban.js'; ```js preview-story export const prefilled = () => html` - + `; ``` @@ -20,7 +20,7 @@ export const prefilled = () => html` ```js preview-story export const faultyPrefilled = () => html` @@ -39,8 +39,8 @@ export const countryRestrictions = () => { loadDefaultFeedbackMessages(); return html` @@ -58,8 +58,8 @@ export const countryRestrictionsMultiple = () => { loadDefaultFeedbackMessages(); return html` @@ -88,8 +88,8 @@ export const blacklistedCountry = () => { loadDefaultFeedbackMessages(); return html` diff --git a/docs/components/input-tel-dropdown/extensions.md b/docs/components/input-tel-dropdown/extensions.md index 6c683536e..8b89196e5 100644 --- a/docs/components/input-tel-dropdown/extensions.md +++ b/docs/components/input-tel-dropdown/extensions.md @@ -22,7 +22,7 @@ export const IntlInputTelDropdown = () => { return html` { { { ${ref(inputTel)} label="Format strategy" help-text="Choose a strategy above" - .modelValue=${'+46707123456'} + .modelValue="${'+46707123456'}" format-strategy="national" name="phoneNumber" > @@ -243,7 +243,7 @@ export const formatCountryCodeStyle = () => { ${ref(inputTel)} label="Format strategy" help-text="Choose a strategy above" - .modelValue=${'+46707123456'} + .modelValue="${'+46707123456'}" format-country-code-style="parentheses" name="phoneNumber" > @@ -268,7 +268,7 @@ export const liveFormat = () => { html` ```js preview-story export const prefilled = () => html` - + `; ``` @@ -61,7 +61,7 @@ This field **will still be included** in the parent fieldset or form's `serializ ```js preview-story export const readOnly = () => html` - + `; ``` @@ -73,6 +73,6 @@ This field **will not be included** in the parent fieldset or form's `serialized ```js preview-story export const disabled = () => html` - + `; ``` diff --git a/docs/components/listbox/overview.md b/docs/components/listbox/overview.md index 3708b2a62..6a0a6f8c7 100644 --- a/docs/components/listbox/overview.md +++ b/docs/components/listbox/overview.md @@ -15,11 +15,11 @@ import '@lion/ui/define/lion-option.js'; ```js preview-story export const main = () => html` - Apple - Artichoke - Asparagus - Banana - Beets + Apple + Artichoke + Asparagus + Banana + Beets `; ``` diff --git a/docs/components/listbox/use-cases.md b/docs/components/listbox/use-cases.md index 4e11379b3..4221ca47a 100644 --- a/docs/components/listbox/use-cases.md +++ b/docs/components/listbox/use-cases.md @@ -21,16 +21,16 @@ This will: ```html preview-story - Apple - Artichoke - Asparagus - Banana - Beets - Bell pepper - Broccoli - Brussels sprout - Cabbage - Carrot + Apple + Artichoke + Asparagus + Banana + Beets + Bell pepper + Broccoli + Brussels sprout + Cabbage + Carrot ``` @@ -42,16 +42,16 @@ By default, `orientation="vertical"` is set, which enables up and down arrow key ```html preview-story - Apple - Artichoke - Asparagus - Banana - Beets - Bell pepper - Broccoli - Brussels sprout - Cabbage - Carrot + Apple + Artichoke + Asparagus + Banana + Beets + Bell pepper + Broccoli + Brussels sprout + Cabbage + Carrot ``` @@ -64,16 +64,16 @@ With `multiple-choice` flag configured, multiple options can be checked. orientation="horizontal" multiple-choice > - Apple - Artichoke - Asparagus - Banana - Beets - Bell pepper - Broccoli - Brussels sprout - Cabbage - Carrot + Apple + Artichoke + Asparagus + Banana + Beets + Bell pepper + Broccoli + Brussels sprout + Cabbage + Carrot ``` @@ -86,16 +86,16 @@ See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_foll ```html preview-story - Apple - Artichoke - Asparagus - Banana - Beets - Bell pepper - Broccoli - Brussels sprout - Cabbage - Carrot + Apple + Artichoke + Asparagus + Banana + Beets + Bell pepper + Broccoli + Brussels sprout + Cabbage + Carrot ``` @@ -105,16 +105,16 @@ See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_foll ```html preview-story - Apple - Artichoke - Asparagus - Banana - Beets - Bell pepper - Broccoli - Brussels sprout - Cabbage - Carrot + Apple + Artichoke + Asparagus + Banana + Beets + Bell pepper + Broccoli + Brussels sprout + Cabbage + Carrot ``` @@ -124,16 +124,16 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel ```html preview-story - Apple - Artichoke - Asparagus - Banana - Beets - Bell pepper - Broccoli - Brussels sprout - Cabbage - Carrot + Apple + Artichoke + Asparagus + Banana + Beets + Bell pepper + Broccoli + Brussels sprout + Cabbage + Carrot ``` diff --git a/docs/components/pagination/use-cases.md b/docs/components/pagination/use-cases.md index c917b2c56..ed6015a10 100644 --- a/docs/components/pagination/use-cases.md +++ b/docs/components/pagination/use-cases.md @@ -52,17 +52,17 @@ export const methods = ({ shadowRoot }) => { }} >
- - +

- - + +

-
diff --git a/docs/components/radio-group/overview.md b/docs/components/radio-group/overview.md index 761d6e593..19febaab2 100644 --- a/docs/components/radio-group/overview.md +++ b/docs/components/radio-group/overview.md @@ -13,9 +13,9 @@ import '@lion/ui/define/lion-radio.js'; ```js preview-story export const main = () => html` - - - + + + `; ``` diff --git a/docs/components/radio-group/use-cases.md b/docs/components/radio-group/use-cases.md index 732320ada..b1417e1fb 100644 --- a/docs/components/radio-group/use-cases.md +++ b/docs/components/radio-group/use-cases.md @@ -33,9 +33,9 @@ You can pre-select an option by adding the checked attribute to the selected `li ```js preview-story export const preSelect = () => html` - - - + + + `; ``` @@ -47,9 +47,9 @@ You can disable a specific `lion-radio` option by adding the `disabled` attribut ```js preview-story export const disabledRadio = () => html` - - - + + + `; ``` @@ -59,9 +59,9 @@ You can do the same thing for the entire group by setting the `disabled` attribu ```js preview-story export const disabledGroup = () => html` - - - + + + `; ``` @@ -73,17 +73,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co ```js preview-story export const label = () => html` - + - + - + @@ -101,17 +101,17 @@ export const helpText = () => html` @@ -130,9 +130,9 @@ export const event = ({ shadowRoot }) => html` @model-value-changed=${ev => (ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)} > - - - + + +
Selected dinosaur: N/A diff --git a/docs/components/select-rich/overview.md b/docs/components/select-rich/overview.md index ff732e905..1a8bda4a5 100644 --- a/docs/components/select-rich/overview.md +++ b/docs/components/select-rich/overview.md @@ -14,9 +14,9 @@ import '@lion/ui/define/lion-option.js'; ```html preview-story - Red - Hotpink - Blue + Red + Hotpink + Blue ``` diff --git a/docs/components/select-rich/use-cases.md b/docs/components/select-rich/use-cases.md index dfc910704..fa573fe5f 100644 --- a/docs/components/select-rich/use-cases.md +++ b/docs/components/select-rich/use-cases.md @@ -67,7 +67,7 @@ export const manyOptionsWithScrolling = () => {

I am green

 - +

I am blue

 @@ -84,9 +84,9 @@ The readonly attribute is delegated to the invoker for disabling opening the ove ```html preview-story - Red - Hotpink - Teal + Red + Hotpink + Teal ``` @@ -98,19 +98,19 @@ If you disable the entire select, the disabled attribute is also delegated to th ```html preview-story - Red - Hotpink - Teal + Red + Hotpink + Teal ``` ```html preview-story - Red - Blue - Hotpink - Green - Teal + Red + Blue + Hotpink + Green + Teal ``` @@ -134,8 +134,8 @@ export const renderOptions = ({ shadowRoot }) => { ); } return html` - - ${objs.map(obj => html` ${obj.label} `)} + + ${objs.map(obj => html`

Full value:


@@ -152,14 +152,14 @@ This changes the keyboard interaction.
 
 ```html preview-story
 
-  Red
-  Hotpink
-  Teal
+  Red
+  Hotpink
+  Teal
 
 
-  Red
-  Hotpink
-  Teal
+  Red
+  Hotpink
+  Teal
 
 ```
 
@@ -199,9 +199,9 @@ export const checkedIndexAndValue = ({ shadowRoot }) => html`
     Console log checked index and value
   
   
-    Red
-    Hotpink
-    Teal
+    Red
+    Hotpink
+    Teal
   
 `;
 ```
@@ -223,9 +223,9 @@ For this you can use `has-no-default-selected` attribute.
 
 ```html preview-story
   
-    Red
-    Hotpink
-    Teal
+    Red
+    Hotpink
+    Teal
   
 ```
 
@@ -238,7 +238,7 @@ If there is a single option rendered, then `singleOption` property is set to `tr
 
 ```html preview-story
 
-  Red
+  Red
 
 ```
 
@@ -259,12 +259,12 @@ class SingleOptionRemoveAdd extends LitElement {
 
   render() {
     return html`
-      
-      
+      
+      
       
         
           ${this.options.map(
-            option => html` ${option} `,
+            option => html`  `,
           )}
         
       
diff --git a/docs/components/select/use-cases.md b/docs/components/select/use-cases.md
index 5961c654b..c7ef2f300 100644
--- a/docs/components/select/use-cases.md
+++ b/docs/components/select/use-cases.md
@@ -13,7 +13,7 @@ loadDefaultFeedbackMessages();
 You can preselect an option by setting the property modelValue.
 
 ```html preview-story
-
+
   
@@ -162,7 +162,7 @@ export const main = () => {
         

           Submit
            ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
+            @click="${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
             >Reset
         

diff --git a/docs/fundamentals/systems/form/validate.md b/docs/fundamentals/systems/form/validate.md
index 14ddef53c..a9cd7b6f8 100644
--- a/docs/fundamentals/systems/form/validate.md
+++ b/docs/fundamentals/systems/form/validate.md
@@ -211,11 +211,11 @@ export const defaultValidationMessages = () => {
       .validators="${[new Required(), new MinLength(4)]}"
       .modelValue="${'foo'}"
     >
-    
-    
-    
-    
-    
+    
+    
+    
+    
+    
   `;
 };
 ```
@@ -228,7 +228,7 @@ The required validator can be put onto every form field element and will make su
 
 ```js preview-story
 export const requiredValidator = () => html`
-  
+  
 `;
 ```
 
@@ -243,28 +243,28 @@ Useful on input elements it allows to define how many characters can be entered.
 ```js preview-story
 export const stringValidators = () => html`
   
   
   
   
   Rocks" is in this input #LionRocks'}
+    .validators="${[new Pattern(/#LionRocks/)]}"
+    .modelValue="${'regex checks if "#LionRocks" is in this input #LionRocks'}"
     label="Pattern"
   >
 `;
@@ -314,23 +314,23 @@ export const dateValidators = () => {
   const tomorrow = new Date(year, month, day + 1);
   return html`
     
     
     
     
   `;
@@ -476,11 +476,11 @@ export const checkboxValidation = () => {
       id="scientists"
       name="scientists[]"
       label="Favorite scientists"
-      .validators=${[new Required()]}
+      .validators="${[new Required()]}"
     >
-      
-      
-      
+      
+      
+      
     
     
   `;
@@ -512,11 +512,11 @@ export const checkboxValidationAdvanced = () => {
       name="scientists2[]"
       label="Favorite scientists"
       help-text="You should have at least 2 of those"
-      .validators=${[new Required(), new HasMinTwoChecked()]}
+      .validators="${[new Required(), new HasMinTwoChecked()]}"
     >
-      
-      
-      
+      
+      
+      
     
     
   `;
@@ -536,10 +536,10 @@ export const radioValidation = () => {
       id="dinos1"
       name="dinos1"
       label="Favourite dinosaur"
-      .validators=${[new Required()]}
+      .validators="${[new Required()]}"
     >
-      
-      
+      
+      
       
     
     
@@ -575,11 +575,11 @@ export const radioValidationAdvanced = () => {
       id="dinos2"
       name="dinos2"
       label="Favourite dinosaur"
-      .validators=${[new Required(), new IsBrontosaurus()]}
+      .validators="${[new Required(), new IsBrontosaurus()]}"
     >
-      
-      
-      
+      
+      
+      
     
     
   `;
@@ -593,12 +593,12 @@ Validation can be used as normal, below is an example of a combobox with a `Requ
 ```js preview-story
 export const validationCombobox = () => html`
   
-    Rocky
-    Rocky II
-    Rocky III
-    Rocky IV
-    Rocky V
-    Rocky Balboa
+    Rocky
+    Rocky II
+    Rocky III
+    Rocky IV
+    Rocky V
+    Rocky Balboa
   
 `;
 ```
@@ -762,8 +762,8 @@ According to the W3C specs, Disabled fields should not be validated. Therefore i
 export const disabledInputsValidation = () => html`
   
 `;
@@ -840,7 +840,7 @@ export const backendValidation = () => {
         opacity: 0.5;
       }
     
-    
+    
       

          {
     const response = await fetch(
-      `https://api.example.com/?namespace=my-hello-component&locale=${locale}`,
+      `https://api.example.com/?namespace=my-hello-component&locale="${locale}"`,
     );
     return response.json(); // resolves to the JSON object `{ greeting: 'Hallo {name}!' }`
   },
@@ -133,7 +133,7 @@ And this is there the second option comes in handy.
 ```js
 // using the regexp to match all component names staring with 'my-'
 localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => {
-  const response = await fetch(`https://api.example.com/?namespace=${namespace}&locale=${locale}`);
+  const response = await fetch(`https://api.example.com/?namespace="${namespace}&locale=${locale}"`);
   return response.json();
 });
 
@@ -302,14 +302,14 @@ This is sort of a router for the data and is typically needed to fetch it from a
 // for one specific component
 localize.setupNamespaceLoader('my-hello-component', async locale => {
   const response = await fetch(
-    `https://api.example.com/?namespace=my-hello-component&locale=${locale}`,
+    `https://api.example.com/?namespace=my-hello-component&locale="${locale}"`,
   );
   return response.json();
 });
 
 // for all components which have a prefix in their names
 localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => {
-  const response = await fetch(`https://api.example.com/?namespace=${namespace}&locale=${locale}`);
+  const response = await fetch(`https://api.example.com/?namespace="${namespace}&locale=${locale}"`);
   return response.json();
 });
 ```
diff --git a/docs/fundamentals/systems/overlays/_configuration-positioning.md b/docs/fundamentals/systems/overlays/_configuration-positioning.md
index 4125d9a75..8cdbb2838 100644
--- a/docs/fundamentals/systems/overlays/_configuration-positioning.md
+++ b/docs/fundamentals/systems/overlays/_configuration-positioning.md
@@ -59,13 +59,13 @@ The `placementMode` property determines the positioning of the `contentNode`:
 export const placementLocal = () => {
   const placementModeLocalConfig = { placementMode: 'local' };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -81,13 +81,13 @@ export const placementLocal = () => {
 export const placementGlobal = () => {
   const placementModeGlobalConfig = { placementMode: 'global' };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
diff --git a/docs/fundamentals/systems/overlays/assets/umbrella-form.js b/docs/fundamentals/systems/overlays/assets/umbrella-form.js
index 0d4607bda..b6e690548 100644
--- a/docs/fundamentals/systems/overlays/assets/umbrella-form.js
+++ b/docs/fundamentals/systems/overlays/assets/umbrella-form.js
@@ -79,24 +79,24 @@ export class UmbrellaForm extends LitElement {
             name="checkers"
             .validators="${[new Required()]}"
           >
-            
-            
-            
+            
+            
+            
           
           
-            
-            
-            
+            
+            
+            
           
           
             
-              Red
-              Hotpink
-              Teal
+              Red
+              Hotpink
+              Teal
             
           
           
diff --git a/docs/fundamentals/systems/overlays/configuration.md b/docs/fundamentals/systems/overlays/configuration.md
index f34c9b05b..ec7b91e4a 100644
--- a/docs/fundamentals/systems/overlays/configuration.md
+++ b/docs/fundamentals/systems/overlays/configuration.md
@@ -29,13 +29,13 @@ export const placementLocal = () => {
         border: 1px solid black;
       }
     
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -51,13 +51,13 @@ export const placementLocal = () => {
 export const placementGlobal = () => {
   const placementModeGlobalConfig = { placementMode: 'global' };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -82,7 +82,7 @@ export const usingTooltipConfig = () => {
   const tooltipConfig = { ...withTooltipConfig() };
 
   return html`
-    
+    
       
       
Hello!

     
@@ -103,7 +103,7 @@ You use the feature on any type of overlay.
 export const trapsKeyboardFocus = () => {
   const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true };
   return html`
-    
+    
       
       

         
@@ -111,7 +111,7 @@ export const trapsKeyboardFocus = () => {
         Hello! You can close this notification here:
         
@@ -129,13 +129,13 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
 export const hidesOnEsc = () => {
   const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -155,13 +155,13 @@ export const hidesOnEscFalse = () => {
     hidesOnOutsideEsc: false,
   };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -179,13 +179,13 @@ Boolean property. When enabled allows closing the overlay on ESC key, even when
 export const hidesOnOutsideEsc = () => {
   const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnOutsideEsc: true };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -203,14 +203,14 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
 export const hidesOnOutsideClick = () => {
   const hidesOnOutsideClickConfig = { ...withDropdownConfig(), hidesOnOutsideClick: true };
   return html`
-    
+    
       
       

         
         
         
@@ -233,13 +233,13 @@ export const elementToFocusAfterHide = () => {
 
   const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -269,13 +269,13 @@ This currently only supports CSS Animations, because it relies on the `animation
 export const hasBackdrop = () => {
   const hasBackdropConfig = { ...withDropdownConfig(), hasBackdrop: true };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -299,19 +299,19 @@ export const isBlocking = () => {
         This overlay gets closed when overlay B gets opened
         
       

     
-    
+    
       
       

         Overlay A is hidden... now close me and see overlay A again.
         
@@ -332,13 +332,13 @@ Boolean property. When true, prevents scrolling content that is outside of the `
 export const preventsScroll = () => {
   const preventsScrollConfig = { preventsScroll: true };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -371,13 +371,13 @@ export const viewportConfig = () => {
     viewportConfig: { placement: 'bottom-left' },
   };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -451,13 +451,13 @@ export const popperConfig = () => {
         border: 1px solid black;
       }
     
-    
+    
       
       

         Hello! You can close this notification here:
         
diff --git a/docs/fundamentals/systems/overlays/overview.md b/docs/fundamentals/systems/overlays/overview.md
index 560255c91..08970848d 100644
--- a/docs/fundamentals/systems/overlays/overview.md
+++ b/docs/fundamentals/systems/overlays/overview.md
@@ -43,7 +43,7 @@ html`
     

       This is an overlay
       
     

     
     

       Hello! You can close this notification here:
-      
     

@@ -152,13 +152,13 @@ The easiest way is declarative. This can be achieved by adding a `
       
       
       

         Hello! You can close this notification here:
         
@@ -176,12 +176,12 @@ export const backdropImperative = () => {
   const backdropNode = document.createElement('demo-overlay-backdrop');
   const responsiveModalDialogConfig = { ...withModalDialogConfig(), backdropNode };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -231,13 +231,13 @@ Under the hood, the OverlayController listens to `animationend` event, only then
 export const backdropAnimation = () => {
   const responsiveModalDialogConfig = { ...withModalDialogConfig() };
   return html`
-    
+    
       
       
       

         Hello! You can close this notification here:
         
@@ -262,7 +262,7 @@ export const responsiveSwitching = () => {
   const responsiveBottomSheetConfig = { ...withBottomSheetConfig() };
   return html`
      {
         if (window.innerWidth >= 600) {
           e.target.config = { ...withModalDialogConfig() };
@@ -275,7 +275,7 @@ export const responsiveSwitching = () => {
       

         Hello! You can close this notification here:
         
@@ -362,12 +362,12 @@ export const responsiveSwitching2 = () => {
     
 
     

-    
+    
       
       

         Hello! You can close this notification here:
         
@@ -401,13 +401,13 @@ export const openedState = () => {
     
       
       

         Hello! You can close this notification here:
         
@@ -448,8 +448,8 @@ export const interceptingOpenClose = () => {
     
     
       
       

         Hello! You can close this notification here:
-        
+        
       

     
   `;
@@ -538,29 +538,29 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
 export const overlayManager = () => {
   const hasBackdropConfig = { ...withModalDialogConfig(), hasBackdrop: true };
   return html`
-    
+    
       
       

         Hello! You can close this notification here:
         
         

-        
       

     
     
       

         Hello! You can close this notification here:
         
@@ -580,13 +580,13 @@ Here is the example below
 export const localBackdrop = () => {
   const localBackdropConfig = { ...withDropdownConfig() };
   return html`
-    
+    
       
       
       

         Hello! You can close this notification here:
         
@@ -611,7 +611,7 @@ export const nestedOverlays = () => {
           

             Nested content
             
@@ -619,7 +619,7 @@ export const nestedOverlays = () => {
           
         
         
@@ -684,15 +684,15 @@ export const LocalWithArrow = () => {
         
         
This is a tooltip with an arrow

       
-      
+      
         
         
This is a tooltip with an arrow

       
-      
+      
         
         
This is a tooltip with an arrow

       
-      
+      
         
         
This is a tooltip with an arrow

       
diff --git a/docs/fundamentals/tools/ajax/use-cases.md b/docs/fundamentals/tools/ajax/use-cases.md
index f6a6820b5..225df29ee 100644
--- a/docs/fundamentals/tools/ajax/use-cases.md
+++ b/docs/fundamentals/tools/ajax/use-cases.md
@@ -52,8 +52,8 @@ export const getRequest = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
-    
+    
+    
     ${actionLogger}
   `;
 };
@@ -101,8 +101,8 @@ export const getJsonRequest = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
-    
+    
+    
     ${actionLogger}
   `;
 };
@@ -151,7 +151,7 @@ export const errorHandling = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
+    
     ${actionLogger}
   `;
 };
@@ -239,8 +239,8 @@ export const cache = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
-    
+    
+    
     ${actionLogger}
   `;
 };
@@ -274,8 +274,8 @@ export const cacheActionOptions = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
-    
+    
+    
     ${actionLogger}
   `;
 };
@@ -321,7 +321,7 @@ export const cacheMaxAge = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
+    
     ${actionLogger}
   `;
 };
@@ -355,8 +355,8 @@ export const changeCacheIdentifier = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
-    
+    
+    
     ${actionLogger}
   `;
 };
@@ -392,10 +392,10 @@ export const nonGETRequest = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
-    
-    
-    
+    
+    
+    
+    
     ${actionLogger}
   `;
 };
@@ -446,10 +446,10 @@ export const invalidateRules = () => {
         --sb-action-logger-max-height: 300px;
       }
     
-    
-    
-    
-    
+    
+    
+    
+    
     ${actionLogger}
   `;
 };
diff --git a/docs/fundamentals/tools/helpers/action-logger.md b/docs/fundamentals/tools/helpers/action-logger.md
index 61941bd99..d9e6d3e4d 100644
--- a/docs/fundamentals/tools/helpers/action-logger.md
+++ b/docs/fundamentals/tools/helpers/action-logger.md
@@ -112,17 +112,17 @@ export const customTitle = () => {
   const uid = Math.random().toString(36).substr(2, 10);
   return html`
     
-    
+    
   `;
 };
 ```
 
 ```html
-
+
 ```
 
 ## Rationale
diff --git a/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js b/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
index 671075191..ab205948f 100644
--- a/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
+++ b/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js
@@ -71,7 +71,7 @@ class DemoApp extends LitElement {
       
Demo App