@lion/ui 0.7.5 → 0.7.7

package/docs/fundamentals/systems/overlays/configuration.md

@@ -4,7 +4,7 @@
 import { html } from '@mdjs/mdjs-preview';
 import './assets/demo-el-using-overlaymixin.mjs';
 import './assets/applyDemoOverlayStyles.mjs';
-import { withDropdownConfig, withTooltipConfig } from '@lion/ui/overlays.js';
+import { withDropdownConfig, withModalDialogConfig, withTooltipConfig } from '@lion/ui/overlays.js';
 ```
 
 The `OverlayController` has many configuration options.
@@ -29,13 +29,13 @@ export const placementLocal = () => {
         border: 1px solid black;
       }
     </style>
-    <demo-el-using-overlaymixin .config=${placementModeLocalConfig}>
+    <demo-el-using-overlaymixin .config="${placementModeLocalConfig}">
       <button slot="invoker">Click me to open the local overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -51,13 +51,13 @@ export const placementLocal = () => {
 export const placementGlobal = () => {
   const placementModeGlobalConfig = { placementMode: 'global' };
   return html`
-    <demo-el-using-overlaymixin .config=${placementModeGlobalConfig}>
+    <demo-el-using-overlaymixin .config="${placementModeGlobalConfig}">
       <button slot="invoker">Click me to open the global overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -69,7 +69,7 @@ export const placementGlobal = () => {
 
 ## isTooltip (placementMode: 'local')
 
-As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
+As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
 
 - Dialogs have a modal option, tooltips don’t
 - Dialogs have interactive content, tooltips don’t
@@ -82,7 +82,7 @@ export const usingTooltipConfig = () => {
   const tooltipConfig = { ...withTooltipConfig() };
 
   return html`
-    <demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}>
+    <demo-el-using-overlaymixin id="tooltip" .config="${tooltipConfig}">
       <button slot="invoker">Hover me to open the tooltip!</button>
       <div slot="content" class="demo-overlay">Hello!</div>
     </demo-el-using-overlaymixin>
@@ -103,7 +103,7 @@ You use the feature on any type of overlay.
 export const trapsKeyboardFocus = () => {
   const trapsKeyboardFocusConfig = { ...withDropdownConfig(), trapsKeyboardFocus: true };
   return html`
-    <demo-el-using-overlaymixin .config=${trapsKeyboardFocusConfig}>
+    <demo-el-using-overlaymixin .config="${trapsKeyboardFocusConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         <div><a href="#">A focusable anchor</a></div>
@@ -111,7 +111,7 @@ export const trapsKeyboardFocus = () => {
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -129,13 +129,39 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
 export const hidesOnEsc = () => {
   const hidesOnEscConfig = { ...withDropdownConfig(), hidesOnEsc: true };
   return html`
-    <demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
+    <demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
+        >
+          ⨯
+        </button>
+      </div>
+    </demo-el-using-overlaymixin>
+  `;
+};
+```
+
+And how it works if `hidesOnEsc` is disabled. In most cases `hidesOnOutsideEsc` needs also to be set to `false`.
+
+```js preview-story
+export const hidesOnEscFalse = () => {
+  const hidesOnEscConfig = {
+    ...withModalDialogConfig(),
+    hidesOnEsc: false,
+    hidesOnOutsideEsc: false,
+  };
+  return html`
+    <demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
+      <button slot="invoker">Click me to open the overlay!</button>
+      <div slot="content" class="demo-overlay">
+        Hello! You can close this notification here:
+        <button
+          class="close-button"
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -153,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`
-    <demo-el-using-overlaymixin .config=${hidesOnEscConfig}>
+    <demo-el-using-overlaymixin .config="${hidesOnEscConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -177,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`
-    <demo-el-using-overlaymixin .config=${hidesOnOutsideClickConfig}>
+    <demo-el-using-overlaymixin .config="${hidesOnOutsideClickConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         <label for="myInput">Clicking this label should not trigger close</label>
         <input id="myInput" />
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -207,13 +233,13 @@ export const elementToFocusAfterHide = () => {
 
   const elementToFocusAfterHideConfig = { ...withDropdownConfig(), elementToFocusAfterHide: btn };
   return html`
-    <demo-el-using-overlaymixin .config=${elementToFocusAfterHideConfig}>
+    <demo-el-using-overlaymixin .config="${elementToFocusAfterHideConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -243,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`
-    <demo-el-using-overlaymixin .config=${hasBackdropConfig}>
+    <demo-el-using-overlaymixin .config="${hasBackdropConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -273,19 +299,19 @@ export const isBlocking = () => {
         This overlay gets closed when overlay B gets opened
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
       </div>
     </demo-el-using-overlaymixin>
-    <demo-el-using-overlaymixin .config=${isBlockingConfig}>
+    <demo-el-using-overlaymixin .config="${isBlockingConfig}">
       <button slot="invoker">Overlay B: open second</button>
       <div slot="content" class="demo-overlay demo-overlay--blocking">
         Overlay A is hidden... now close me and see overlay A again.
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -306,13 +332,13 @@ Boolean property. When true, prevents scrolling content that is outside of the `
 export const preventsScroll = () => {
   const preventsScrollConfig = { preventsScroll: true };
   return html`
-    <demo-el-using-overlaymixin .config=${preventsScrollConfig}>
+    <demo-el-using-overlaymixin .config="${preventsScrollConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -345,13 +371,13 @@ export const viewportConfig = () => {
     viewportConfig: { placement: 'bottom-left' },
   };
   return html`
-    <demo-el-using-overlaymixin .config=${viewportConfig}>
+    <demo-el-using-overlaymixin .config="${viewportConfig}">
       <button slot="invoker">Click me to open the overlay in the bottom left corner!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -374,7 +400,7 @@ Features:
 
 > Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
 > This also means that if you use the arrow feature, you are in charge of styling it properly, use the data-popper-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/components/tooltip/overview.md), where an arrow is set by default.
+> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/tooltip/overview.md), where an arrow is set by default.
 
 To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
 Here's a succinct overview of some often used popper properties:
@@ -425,13 +451,13 @@ export const popperConfig = () => {
         border: 1px solid black;
       }
     </style>
-    <demo-el-using-overlaymixin .config=${popperConfig}>
+    <demo-el-using-overlaymixin .config="${popperConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>

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

@@ -6,7 +6,7 @@ Manages their position on the screen relative to other elements, including other
 
 Its purpose is to make it easy to use our Overlay System declaratively. It can be easily extended where needed, to override event listeners and more.
 
-See [lion-dialog](../../../components/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/components/tooltip/overview.md) for example Web Component implementations using the Overlay System.
+See [lion-dialog](../../../components/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/tooltip/overview.md) for example Web Component implementations using the Overlay System.
 
 ## Features
 
@@ -18,9 +18,9 @@ See [lion-dialog](../../../components/dialog/overview.md) and [lion-tooltip](htt
 - lion-overlay web component:
   - Show content when clicking the invoker
   - Have a `.config` object to set or update the OverlayController's configuration
-- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/fundamentals/systems/overlays/use-cases.md#overlaysmanager), a global repository keeping track of all different types of overlays
-- [**OverlayController**](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/fundamentals/systems/overlays/use-cases.md#overlaycontroller), a single controller class for handling overlays
-- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/fundamentals/systems/overlays/use-cases.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
+- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/use-cases.md#overlaysmanager), a global repository keeping track of all different types of overlays
+- [**OverlayController**](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/use-cases.md#overlaycontroller), a single controller class for handling overlays
+- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/use-cases.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
 
 Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 
@@ -43,7 +43,7 @@ html`
     <div slot="content">
       This is an overlay
       <button
-        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+        @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
       >x</button>
     <div>
     <button slot="invoker">
@@ -110,4 +110,4 @@ class MyOverlayComponent extends OverlayMixin(LitElement) {
 
 ## Rationales
 
-Please check the [system rationals](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/fundamentals/systems/overlays/rationale.md) folder, where we go more in-depth.
+Please check the [system rationals](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/rationale.md) folder, where we go more in-depth.

package/docs/fundamentals/systems/overlays/use-cases.md

@@ -21,7 +21,7 @@ The overlay system allows to create different types of overlays like dialogs, to
 It's designed to be highly flexible, while still delivering sensible defaults.
 On top of this, the system was built having accessibility in mind.
 
-For a detailed rationale, please consult [Rationale](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/fundamentals/systems/overlays/rationale.md).
+For a detailed rationale, please consult [Rationale](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/rationale.md).
 
 ```js preview-story
 export const main = () => html`
@@ -29,7 +29,7 @@ export const main = () => html`
     <button slot="invoker">Click me to open the overlay!</button>
     <div slot="content" class="demo-overlay">
       Hello! You can close this notification here:
-      <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>
+      <button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">
         ⨯
       </button>
     </div>
@@ -67,7 +67,7 @@ Global refers to overlays where the content is positioned in a global root node
 
 Overlays can be configured in many ways to suit your needs. We go in-depth into each option in the Overlay System - Configuration chapter.
 
-We also export a few [preset configuration objects](https://github.com/ing-bank/lion/blob/b15d2aae1a8d40d3551822279e1a650633dba428/docs/fundamentals/systems/overlays/configuration.md).
+We also export a few [preset configuration objects](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/configuration.md).
 
 - withModalDialogConfig
 - withDropdownConfig
@@ -152,13 +152,13 @@ The easiest way is declarative. This can be achieved by adding a `<slot name="ba
 export const backdrop = () => {
   const responsiveModalDialogConfig = { ...withModalDialogConfig() };
   return html`
-    <demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}>
+    <demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
       <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -176,12 +176,12 @@ export const backdropImperative = () => {
   const backdropNode = document.createElement('demo-overlay-backdrop');
   const responsiveModalDialogConfig = { ...withModalDialogConfig(), backdropNode };
   return html`
-    <demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}>
+    <demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -231,13 +231,13 @@ Under the hood, the OverlayController listens to `animationend` event, only then
 export const backdropAnimation = () => {
   const responsiveModalDialogConfig = { ...withModalDialogConfig() };
   return html`
-    <demo-el-using-overlaymixin .config=${responsiveModalDialogConfig}>
+    <demo-el-using-overlaymixin .config="${responsiveModalDialogConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -262,7 +262,7 @@ export const responsiveSwitching = () => {
   const responsiveBottomSheetConfig = { ...withBottomSheetConfig() };
   return html`
     <demo-el-using-overlaymixin
-      .config=${responsiveBottomSheetConfig}
+      .config="${responsiveBottomSheetConfig}"
       @before-opened=${e => {
         if (window.innerWidth >= 600) {
           e.target.config = { ...withModalDialogConfig() };
@@ -275,7 +275,7 @@ export const responsiveSwitching = () => {
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -362,12 +362,12 @@ export const responsiveSwitching2 = () => {
     </select>
 
     <br />
-    <demo-el-using-overlaymixin ${ref(overlayRef)} .config=${getConfig(selectRef.value?.value)}>
+    <demo-el-using-overlaymixin ${ref(overlayRef)} .config="${getConfig(selectRef.value?.value)}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -401,13 +401,13 @@ export const openedState = () => {
     <demo-el-using-overlaymixin
       ${ref(myRefs.overlay)}
       .opened="${appState.opened}"
-      @opened-changed=${onOpenClosed}
+      @opened-changed="${onOpenClosed}"
     >
       <button slot="invoker">Overlay</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -448,8 +448,8 @@ export const interceptingOpenClose = () => {
     </button>
     <demo-el-using-overlaymixin
       ${ref(myRefs.overlay)}
-      @before-closed=${intercept}
-      @before-opened=${intercept}
+      @before-closed="${intercept}"
+      @before-opened="${intercept}"
     >
       <button
         slot="invoker"
@@ -460,7 +460,7 @@ export const interceptingOpenClose = () => {
       </button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
-        <button @click=${() => (myRefs.overlay.value.opened = false)}>⨯</button>
+        <button @click="${() => (myRefs.overlay.value.opened = false)}">⨯</button>
       </div>
     </demo-el-using-overlaymixin>
   `;
@@ -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`
-    <demo-el-using-overlaymixin .config=${hasBackdropConfig}>
+    <demo-el-using-overlaymixin .config="${hasBackdropConfig}">
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
         <br />
-        <button @click=${e => (document.querySelector('#secondOverlay').opened = true)}>
+        <button @click="${e => (document.querySelector('#secondOverlay').opened = true)}">
           Click me to open another overlay which is blocking
         </button>
       </div>
     </demo-el-using-overlaymixin>
     <demo-el-using-overlaymixin
       id="secondOverlay"
-      .config=${{ ...withModalDialogConfig(), hasBackdrop: true, isBlocking: true }}
+      .config="${{ ...withModalDialogConfig(), hasBackdrop: true, isBlocking: true }}"
     >
       <div slot="content" class="demo-overlay demo-overlay--second">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -580,13 +580,13 @@ Here is the example below
 export const localBackdrop = () => {
   const localBackdropConfig = { ...withDropdownConfig() };
   return html`
-    <demo-el-using-overlaymixin .config=${localBackdropConfig}>
+    <demo-el-using-overlaymixin .config="${localBackdropConfig}">
       <demo-overlay-backdrop slot="backdrop"></demo-overlay-backdrop>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -611,7 +611,7 @@ export const nestedOverlays = () => {
           <div slot="content" id="nestedContent" class="demo-overlay">
             Nested content
             <button
-              @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+              @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
             >
               ⨯
             </button>
@@ -619,7 +619,7 @@ export const nestedOverlays = () => {
           <button slot="invoker" id="nestedInvoker">nested invoker button</button>
         </demo-el-using-overlaymixin>
         <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -684,15 +684,15 @@ export const LocalWithArrow = () => {
         <button slot="invoker">Top</button>
         <div slot="content">This is a tooltip with an arrow</div>
       </arrow-example>
-      <arrow-example .config=${placementRightConfig}>
+      <arrow-example .config="${placementRightConfig}">
         <button slot="invoker">Right</button>
         <div slot="content">This is a tooltip with an arrow</div>
       </arrow-example>
-      <arrow-example .config=${placementBottomConfig}>
+      <arrow-example .config="${placementBottomConfig}">
         <button slot="invoker">Bottom</button>
         <div slot="content">This is a tooltip with an arrow</div>
       </arrow-example>
-      <arrow-example .config=${placementLeftConfig}>
+      <arrow-example .config="${placementLeftConfig}">
         <button slot="invoker">Left</button>
         <div slot="content">This is a tooltip with an arrow</div>
       </arrow-example>

package/docs/fundamentals/tools/ajax/use-cases.md

@@ -52,8 +52,8 @@ export const getRequest = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
-    <button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
+    <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
+    <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
     ${actionLogger}
   `;
 };
@@ -101,8 +101,8 @@ export const getJsonRequest = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
-    <button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
+    <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
+    <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
     ${actionLogger}
   `;
 };
@@ -151,7 +151,7 @@ export const errorHandling = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${fetchHandler}>Fetch</button>
+    <button @click="${fetchHandler}">Fetch</button>
     ${actionLogger}
   `;
 };
@@ -239,8 +239,8 @@ export const cache = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
-    <button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
+    <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
+    <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
     ${actionLogger}
   `;
 };
@@ -274,8 +274,8 @@ export const cacheActionOptions = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${() => fetchHandler('pabu')}>Fetch Pabu</button>
-    <button @click=${() => fetchHandler('naga')}>Fetch Naga</button>
+    <button @click="${() => fetchHandler('pabu')}">Fetch Pabu</button>
+    <button @click="${() => fetchHandler('naga')}">Fetch Naga</button>
     ${actionLogger}
   `;
 };
@@ -321,7 +321,7 @@ export const cacheMaxAge = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${fetchHandler}>Fetch Pabu</button>
+    <button @click="${fetchHandler}">Fetch Pabu</button>
     ${actionLogger}
   `;
 };
@@ -355,8 +355,8 @@ export const changeCacheIdentifier = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${fetchHandler}>Fetch Pabu</button>
-    <button @click=${changeUserHandler}>Change user</button>
+    <button @click="${fetchHandler}">Fetch Pabu</button>
+    <button @click="${changeUserHandler}">Change user</button>
     ${actionLogger}
   `;
 };
@@ -392,10 +392,10 @@ export const nonGETRequest = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${() => fetchHandler('pabu', 'GET')}>GET Pabu</button>
-    <button @click=${() => fetchHandler('pabu', 'PATCH')}>PATCH Pabu</button>
-    <button @click=${() => fetchHandler('naga', 'GET')}>GET Naga</button>
-    <button @click=${() => fetchHandler('naga', 'PATCH')}>PATCH Naga</button>
+    <button @click="${() => fetchHandler('pabu', 'GET')}">GET Pabu</button>
+    <button @click="${() => fetchHandler('pabu', 'PATCH')}">PATCH Pabu</button>
+    <button @click="${() => fetchHandler('naga', 'GET')}">GET Naga</button>
+    <button @click="${() => fetchHandler('naga', 'PATCH')}">PATCH Naga</button>
     ${actionLogger}
   `;
 };
@@ -446,10 +446,10 @@ export const invalidateRules = () => {
         --sb-action-logger-max-height: 300px;
       }
     </style>
-    <button @click=${() => fetchHandler('pabu', 'GET')}>GET Pabu</button>
-    <button @click=${() => fetchHandler('pabu', 'PATCH')}>PATCH Pabu</button>
-    <button @click=${() => fetchHandler('naga', 'GET')}>GET Naga</button>
-    <button @click=${() => fetchHandler('naga', 'PATCH')}>PATCH Naga</button>
+    <button @click="${() => fetchHandler('pabu', 'GET')}">GET Pabu</button>
+    <button @click="${() => fetchHandler('pabu', 'PATCH')}">PATCH Pabu</button>
+    <button @click="${() => fetchHandler('naga', 'GET')}">GET Naga</button>
+    <button @click="${() => fetchHandler('naga', 'PATCH')}">PATCH Naga</button>
     ${actionLogger}
   `;
 };

package/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`
     <button
-      @click=${e => e.target.parentElement.querySelector(`#logger-${uid}`).log('Hello, World!')}
+      @click="${e => e.target.parentElement.querySelector(`#logger-${uid}`).log('Hello, World!')}"
     >
       Log
     </button>
-    <sb-action-logger id="logger-${uid}" .title=${'Hello World'}></sb-action-logger>
+    <sb-action-logger id="logger-${uid}" .title="${'Hello World'}"></sb-action-logger>
   `;
 };
 ```
 
 ```html
-<sb-action-logger .title=${'Hello World'}></sb-action-logger>
+<sb-action-logger .title="${'Hello World'}"></sb-action-logger>
 ```
 
 ## Rationale