From 8702294fb19da70a70ddadb1e9ed1b401ccc8d91 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Thu, 10 Nov 2022 11:43:45 -0500
Subject: [PATCH] fix(slider): add less visually effectacious style to the
 slider output when editable

---
 packages/slider/src/slider.css            | 11 ++++++++++-
 packages/slider/stories/slider.stories.ts | 18 ++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
index e2905ead8c..9a89a63b4a 100644
--- a/packages/slider/src/slider.css
+++ b/packages/slider/src/slider.css
@@ -80,7 +80,16 @@ sp-field-label {
 }
 
 :host([editable]) output {
-    opacity: 0;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: 0 -1px -1px 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
 }
 
 :host([disabled]) {
diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
index 338345354f..8c493bdf3e 100644
--- a/packages/slider/stories/slider.stories.ts
+++ b/packages/slider/stories/slider.stories.ts
@@ -438,6 +438,24 @@ export const Quiet = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 
+export const inPopover = (args: StoryArgs = {}): TemplateResult => {
+    return html`
+        <sp-popover open dialog style="min-width: 0">
+            <sp-slider
+                editable
+                hide-stepper
+                quiet
+                value="5"
+                step="0.5"
+                min="0"
+                max="20"
+                label="Intensity"
+                ...=${spreadProps(args)}
+            ></sp-slider>
+        </sp-popover>
+    `;
+};
+
 export const Indeterminate = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">