From 9b9db3dde4b1aa3d4cce1de7d28dd92dec3944a5 Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Thu, 24 Dec 2020 10:42:44 +0100
Subject: [PATCH 1/3] fix(select-rich): add workaround invoker width when
 inside overlay

---
 .changeset/angry-snails-repeat.md             | 5 +++++
 packages/select-rich/src/LionSelectInvoker.js | 1 +
 packages/select-rich/src/LionSelectRich.js    | 9 ++++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/angry-snails-repeat.md

diff --git a/.changeset/angry-snails-repeat.md b/.changeset/angry-snails-repeat.md
new file mode 100644
index 000000000..a48a0a08b
--- /dev/null
+++ b/.changeset/angry-snails-repeat.md
@@ -0,0 +1,5 @@
+---
+'@lion/select-rich': patch
+---
+
+add workarround and todo for align select-rich invoker width with options if its inside an overlay
diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js
index 6987f27a5..bb447d027 100644
--- a/packages/select-rich/src/LionSelectInvoker.js
+++ b/packages/select-rich/src/LionSelectInvoker.js
@@ -21,6 +21,7 @@ export class LionSelectInvoker extends LionButton {
 
         #content-wrapper {
           position: relative;
+          pointer-events: none;
         }
       `,
     ];
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index 83e0b1624..1b126b5e6 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -388,7 +388,14 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       this._overlayCtrl.content.style.minWidth = 'auto';
       this._overlayCtrl.content.style.width = 'auto';
       const contentWidth = this._overlayCtrl.content.getBoundingClientRect().width;
-      this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
+      /**
+       * TODO when inside an overlay the current solution doesn't work.
+       * Since that dialog is still hidden, open and close the select-rich
+       * doesn't have any effect so the contentWidth returns 0
+       */
+      if (contentWidth > 0) {
+        this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
+      }
       this._overlayCtrl.content.style.display = initContentDisplay;
       this._overlayCtrl.content.style.minWidth = initContentMinWidth;
       this._overlayCtrl.content.style.width = initContentWidth;

From 03100f6b1ebf448f4b99fd03ceb295205a784985 Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Thu, 24 Dec 2020 10:44:31 +0100
Subject: [PATCH 2/3] chore(form-integrations): add input-datepicker to dialog
 demo

Co-authored-by: jorenbroekema <Joren.Broekema@ing.com>
---
 .../docs/60-dialog-integration.md             | 35 +++++++++++++++----
 packages/select-rich/src/LionSelectInvoker.js |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/form-integrations/docs/60-dialog-integration.md b/packages/form-integrations/docs/60-dialog-integration.md
index cbbf058b7..9234f6a67 100644
--- a/packages/form-integrations/docs/60-dialog-integration.md
+++ b/packages/form-integrations/docs/60-dialog-integration.md
@@ -5,8 +5,8 @@
 ```js script
 import { html } from 'lit-html';
 import '@lion/dialog/lion-dialog.js';
+import '@lion/input-datepicker';
 import '@lion/select-rich/lion-select-rich.js';
-import '@lion/listbox/lion-options.js';
 import '@lion/listbox/lion-option.js';
 
 export default {
@@ -14,19 +14,19 @@ export default {
 };
 ```
 
+## Select Rich
+
 Opening a Rich Select inside a dialog
 
 ```js story
-export const main = () => html`
+export const selectRich = () => html`
   <lion-dialog>
     <button slot="invoker">Open Dialog</button>
     <div slot="content">
       <lion-select-rich name="favoriteColor" label="Favorite color">
-        <lion-options slot="input">
-          <lion-option .choiceValue=${'red'}>Red</lion-option>
-          <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-          <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-        </lion-options>
+        <lion-option .choiceValue=${'red'}>Red</lion-option>
+        <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
+        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
       </lion-select-rich>
       <button
         class="close-button"
@@ -38,3 +38,24 @@ export const main = () => html`
   </lion-dialog>
 `;
 ```
+
+## Input Datepicker
+
+Opening a Input Datepicker inside a dialog
+
+```js story
+export const inputDatepicker = () => html`
+  <lion-dialog>
+    <button slot="invoker">Open Dialog</button>
+    <div slot="content">
+      <lion-input-datepicker></lion-input-datepicker>
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </lion-dialog>
+`;
+```
diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js
index bb447d027..a6c6f0418 100644
--- a/packages/select-rich/src/LionSelectInvoker.js
+++ b/packages/select-rich/src/LionSelectInvoker.js
@@ -17,11 +17,11 @@ export class LionSelectInvoker extends LionButton {
       css`
         :host {
           justify-content: space-between;
+          align-items: center;
         }
 
         #content-wrapper {
           position: relative;
-          pointer-events: none;
         }
       `,
     ];

From 718843e5ba6d74d2171a15c2f1802921172b0950 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Wed, 6 Jan 2021 17:33:51 +0100
Subject: [PATCH 3/3] fix(button): set user-select to none to make btn text not
 selectable

---
 .changeset/tiny-eyes-burn.md      | 5 +++++
 packages/button/src/LionButton.js | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/tiny-eyes-burn.md

diff --git a/.changeset/tiny-eyes-burn.md b/.changeset/tiny-eyes-burn.md
new file mode 100644
index 000000000..ccfd10e6e
--- /dev/null
+++ b/.changeset/tiny-eyes-burn.md
@@ -0,0 +1,5 @@
+---
+'@lion/button': patch
+---
+
+Set user-select to none on button, so that the inner text is not selectable.
diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index ab5526669..4482ba5f0 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -61,6 +61,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
           padding: 8px; /* padding to fix with min-height */
           outline: none; /* focus style handled below */
           cursor: default; /* /* we should always see the default arrow, never a caret */
+          user-select: none;
         }
 
         :host::before {