From da9debd6e1648f0efdd61d61f691ce54e91f302c Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Mon, 7 Aug 2023 14:07:49 -0400
Subject: [PATCH 1/9] Update rewriteStyleSheet.test.ts

---
 src/preview/rewriteStyleSheet.test.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/preview/rewriteStyleSheet.test.ts b/src/preview/rewriteStyleSheet.test.ts
index 6ab1d75..5e653a2 100644
--- a/src/preview/rewriteStyleSheet.test.ts
+++ b/src/preview/rewriteStyleSheet.test.ts
@@ -42,7 +42,7 @@ describe("rewriteStyleSheet", () => {
   it("adds alternative selector targeting an ancestor", () => {
     const sheet = new Sheet("a:hover { color: red }")
     rewriteStyleSheet(sheet as any)
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover a")
   })
 
   it("does not add .pseudo-<class> to pseudo-class, which does not support classes", () => {
@@ -56,8 +56,8 @@ describe("rewriteStyleSheet", () => {
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-hover")
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-focus")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover a")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-focus a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-focus a")
   })
 
   it("keeps non-pseudo selectors as-is", () => {
@@ -71,7 +71,7 @@ describe("rewriteStyleSheet", () => {
     const sheet = new Sheet("a:hover:focus { color: red }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-hover.pseudo-focus")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover.pseudo-focus a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover.pseudo-ancestor-focus a")
   })
 
   it("supports combined pseudo selectors with classes", () => {
@@ -79,7 +79,7 @@ describe("rewriteStyleSheet", () => {
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain(".hiOZqY:hover")
     expect(sheet.cssRules[0].selectorText).toContain(".hiOZqY.pseudo-hover")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover .hiOZqY")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover .hiOZqY")
   })
 
   it('supports ":host"', () => {
@@ -115,10 +115,10 @@ describe("rewriteStyleSheet", () => {
     expect(sheet.cssRules[1].selectorText).toContain(".test")
     expect(sheet.cssRules[2].selectorText).toContain(".test:hover")
     expect(sheet.cssRules[2].selectorText).toContain(".test.pseudo-hover")
-    expect(sheet.cssRules[2].selectorText).toContain(".pseudo-hover .test")
+    expect(sheet.cssRules[2].selectorText).toContain(".pseudo-ancestor-hover .test")
     expect(sheet.cssRules[3].selectorText).toContain(".test2:hover")
     expect(sheet.cssRules[3].selectorText).toContain(".test2.pseudo-hover")
-    expect(sheet.cssRules[3].selectorText).toContain(".pseudo-hover .test2")
+    expect(sheet.cssRules[3].selectorText).toContain(".pseudo-ancestor-hover .test2")
 
   })
 })

From ae9cbf6efa5036afd6db911f6de8d4840911bea1 Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Mon, 7 Aug 2023 14:18:31 -0400
Subject: [PATCH 2/9] TDD story

---
 stories/Button.stories.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 2444775..62ac390 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -86,3 +86,20 @@ DirectSelector.parameters = {
     active: ["[data-active]"],
   },
 }
+
+export const DirectSelectorParentDoesNotAffectDescendants = () => (
+  <>
+    <Button data-hover>Hovered 1</Button>
+
+    <div data-hover>
+      <Button>Not Hovered 1 </Button>
+      <Button>Not Hovered 2</Button>
+    </div>
+  </>
+)
+
+DirectSelectorParentDoesNotAffectDescendants.parameters = {
+  pseudo: {
+    hover: ["[data-hover]"],
+  },
+}
\ No newline at end of file

From e98954dcc3ada5346deefe8722efdafc17411dd1 Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Mon, 7 Aug 2023 14:20:10 -0400
Subject: [PATCH 3/9] differentiate pseudo classes written due to boolean vs
 selector

---
 src/constants.ts                 |  9 +++++++++
 src/preview/rewriteStyleSheet.ts |  4 ++--
 src/preview/withPseudoState.ts   |  2 +-
 stories/Button.stories.js        | 14 +++++++-------
 stories/grid.css                 | 14 +++++++-------
 5 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index 00a71a1..b534859 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -17,6 +17,15 @@ export const PSEUDO_STATES = {
   visited: "visited",
   link: "link",
   target: "target",
+  "ancestor-hover": "ancestor-hover",
+  "ancestor-active": "ancestor-active",
+  "ancestor-focusVisible": "ancestor-focus-visible",
+  "ancestor-focusWithin": "ancestor-focus-within",
+  "ancestor-focus": "ancestor-focus", // must come after its alternatives
+  "ancestor-visited": "ancestor-visited",
+  "ancestor-link": "ancestor-link",
+  "ancestor-target": "ancestor-target",
+  
 } as const
 
 export type PseudoState = keyof typeof PSEUDO_STATES
diff --git a/src/preview/rewriteStyleSheet.ts b/src/preview/rewriteStyleSheet.ts
index 3bde4b6..720b264 100644
--- a/src/preview/rewriteStyleSheet.ts
+++ b/src/preview/rewriteStyleSheet.ts
@@ -43,8 +43,8 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado
         }
 
         const ancestorSelector = shadowRoot
-          ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}`
-          : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`
+          ? `:host(${states.map((s) => `.pseudo-ancestor-${s}`).join("")}) ${plainSelector}`
+          : `${states.map((s) => `.pseudo-ancestor-${s}`).join("")} ${plainSelector}`
 
         return [selector, classSelector, ancestorSelector].filter(
           (selector) => selector && !selector.includes(":not()")
diff --git a/src/preview/withPseudoState.ts b/src/preview/withPseudoState.ts
index cce21e4..e08507a 100644
--- a/src/preview/withPseudoState.ts
+++ b/src/preview/withPseudoState.ts
@@ -37,7 +37,7 @@ const applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {})
   ;(Object.entries(parameter || {}) as [PseudoState, any]).forEach(([state, value]) => {
     if (typeof value === "boolean") {
       // default API - applying pseudo class to root element.
-      if (value) add(rootElement, state)
+      if (value) add(rootElement, `ancestor-${state}` as PseudoState)
     } else if (typeof value === "string") {
       // explicit selectors API - applying pseudo class to a specific element
       rootElement.querySelectorAll(value).forEach((el) => add(el, state))
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 62ac390..1361ad6 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -15,25 +15,25 @@ export const All = () => (
     <div>
       <Button>Normal</Button>
     </div>
-    <div className="pseudo-hover">
+    <div className="pseudo-ancestor-hover">
       <Button>Hover</Button>
     </div>
-    <div className="pseudo-focus">
+    <div className="pseudo-ancestor-focus">
       <Button>Focus</Button>
     </div>
-    <div className="pseudo-active">
+    <div className="pseudo-ancestor-active">
       <Button>Active</Button>
     </div>
-    <div className="pseudo-hover pseudo-focus">
+    <div className="pseudo-ancestor-hover pseudo-ancestor-focus">
       <Button>Hover Focus</Button>
     </div>
-    <div className="pseudo-hover pseudo-active">
+    <div className="pseudo-ancestor-hover pseudo-ancestor-active">
       <Button>Hover Active</Button>
     </div>
-    <div className="pseudo-focus pseudo-active">
+    <div className="pseudo-ancestor-focus pseudo-ancestor-active">
       <Button>Focus Active</Button>
     </div>
-    <div className="pseudo-hover pseudo-focus pseudo-active">
+    <div className="pseudo-ancestor-hover pseudo-ancestor-focus pseudo-ancestor-active">
       <Button>Hover Focus Active</Button>
     </div>
   </div>
diff --git a/stories/grid.css b/stories/grid.css
index a18115f..5c517bd 100644
--- a/stories/grid.css
+++ b/stories/grid.css
@@ -12,37 +12,37 @@
   grid-area: normal;
   justify-self: center;
 }
-.story-grid > .pseudo-hover,
+.story-grid > .pseudo-ancestor-hover,
 .story-grid > [data-hover] {
   grid-area: hover;
   justify-self: right;
 }
-.story-grid > .pseudo-focus,
+.story-grid > .pseudo-ancestor-focus,
 .story-grid > [data-focus] {
   grid-area: focus;
   justify-self: center;
 }
-.story-grid > .pseudo-active,
+.story-grid > .pseudo-ancestor-active,
 .story-grid > [data-active] {
   grid-area: active;
   justify-self: left;
 }
-.story-grid > .pseudo-hover.pseudo-focus,
+.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus,
 .story-grid > [data-hover][data-focus] {
   grid-area: hover-focus;
   justify-self: right;
 }
-.story-grid > .pseudo-hover.pseudo-active,
+.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-active,
 .story-grid > [data-hover][data-active] {
   grid-area: hover-active;
   justify-self: center;
 }
-.story-grid > .pseudo-focus.pseudo-active,
+.story-grid > .pseudo-ancestor-focus.pseudo-ancestor-active,
 .story-grid > [data-focus][data-active] {
   grid-area: focus-active;
   justify-self: left;
 }
-.story-grid > .pseudo-hover.pseudo-focus.pseudo-active,
+.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus.pseudo-ancestor-active,
 .story-grid > [data-hover][data-focus][data-active] {
   grid-area: hover-focus-active;
   justify-self: center;

From 9b305fd9a69ea825a05c49942c723c868c491096 Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Mon, 7 Aug 2023 14:27:59 -0400
Subject: [PATCH 4/9] Update Button.stories.js

---
 stories/Button.stories.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 1361ad6..645bcc3 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -89,9 +89,9 @@ DirectSelector.parameters = {
 
 export const DirectSelectorParentDoesNotAffectDescendants = () => (
   <>
-    <Button data-hover>Hovered 1</Button>
+    <Button id='foo'>Hovered 1</Button>
 
-    <div data-hover>
+    <div id='foo'>
       <Button>Not Hovered 1 </Button>
       <Button>Not Hovered 2</Button>
     </div>
@@ -100,6 +100,6 @@ export const DirectSelectorParentDoesNotAffectDescendants = () => (
 
 DirectSelectorParentDoesNotAffectDescendants.parameters = {
   pseudo: {
-    hover: ["[data-hover]"],
+    hover: ["#foo"],
   },
 }
\ No newline at end of file

From e3e2ebd1882a7a6b512e5a901942b1e54692ab83 Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Wed, 9 Aug 2023 09:19:37 -0400
Subject: [PATCH 5/9] rename to all and don't add "-all" to dropdown

f
---
 src/constants.ts                      |  9 ---------
 src/preview/rewriteStyleSheet.test.ts | 14 +++++++-------
 src/preview/rewriteStyleSheet.ts      |  4 ++--
 src/preview/withPseudoState.ts        | 16 +++++++++++++---
 stories/Button.stories.js             | 14 +++++++-------
 stories/Input.stories.js              |  6 +++---
 stories/ShadowRoot.stories.js         | 14 +++++++-------
 stories/grid.css                      | 14 +++++++-------
 8 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index b534859..00a71a1 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -17,15 +17,6 @@ export const PSEUDO_STATES = {
   visited: "visited",
   link: "link",
   target: "target",
-  "ancestor-hover": "ancestor-hover",
-  "ancestor-active": "ancestor-active",
-  "ancestor-focusVisible": "ancestor-focus-visible",
-  "ancestor-focusWithin": "ancestor-focus-within",
-  "ancestor-focus": "ancestor-focus", // must come after its alternatives
-  "ancestor-visited": "ancestor-visited",
-  "ancestor-link": "ancestor-link",
-  "ancestor-target": "ancestor-target",
-  
 } as const
 
 export type PseudoState = keyof typeof PSEUDO_STATES
diff --git a/src/preview/rewriteStyleSheet.test.ts b/src/preview/rewriteStyleSheet.test.ts
index 5e653a2..1788ad5 100644
--- a/src/preview/rewriteStyleSheet.test.ts
+++ b/src/preview/rewriteStyleSheet.test.ts
@@ -42,7 +42,7 @@ describe("rewriteStyleSheet", () => {
   it("adds alternative selector targeting an ancestor", () => {
     const sheet = new Sheet("a:hover { color: red }")
     rewriteStyleSheet(sheet as any)
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover-all a")
   })
 
   it("does not add .pseudo-<class> to pseudo-class, which does not support classes", () => {
@@ -56,8 +56,8 @@ describe("rewriteStyleSheet", () => {
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-hover")
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-focus")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover a")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-focus a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover-all a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-focus-all a")
   })
 
   it("keeps non-pseudo selectors as-is", () => {
@@ -71,7 +71,7 @@ describe("rewriteStyleSheet", () => {
     const sheet = new Sheet("a:hover:focus { color: red }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-hover.pseudo-focus")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover.pseudo-ancestor-focus a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hove-allr.pseudo-focus-all a")
   })
 
   it("supports combined pseudo selectors with classes", () => {
@@ -79,7 +79,7 @@ describe("rewriteStyleSheet", () => {
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain(".hiOZqY:hover")
     expect(sheet.cssRules[0].selectorText).toContain(".hiOZqY.pseudo-hover")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover .hiOZqY")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover-all .hiOZqY")
   })
 
   it('supports ":host"', () => {
@@ -115,10 +115,10 @@ describe("rewriteStyleSheet", () => {
     expect(sheet.cssRules[1].selectorText).toContain(".test")
     expect(sheet.cssRules[2].selectorText).toContain(".test:hover")
     expect(sheet.cssRules[2].selectorText).toContain(".test.pseudo-hover")
-    expect(sheet.cssRules[2].selectorText).toContain(".pseudo-ancestor-hover .test")
+    expect(sheet.cssRules[2].selectorText).toContain(".pseudo-hover-all .test")
     expect(sheet.cssRules[3].selectorText).toContain(".test2:hover")
     expect(sheet.cssRules[3].selectorText).toContain(".test2.pseudo-hover")
-    expect(sheet.cssRules[3].selectorText).toContain(".pseudo-ancestor-hover .test2")
+    expect(sheet.cssRules[3].selectorText).toContain(".pseudo-hover-all .test2")
 
   })
 })
diff --git a/src/preview/rewriteStyleSheet.ts b/src/preview/rewriteStyleSheet.ts
index 720b264..30d9af5 100644
--- a/src/preview/rewriteStyleSheet.ts
+++ b/src/preview/rewriteStyleSheet.ts
@@ -43,8 +43,8 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado
         }
 
         const ancestorSelector = shadowRoot
-          ? `:host(${states.map((s) => `.pseudo-ancestor-${s}`).join("")}) ${plainSelector}`
-          : `${states.map((s) => `.pseudo-ancestor-${s}`).join("")} ${plainSelector}`
+          ? `:host(${states.map((s) => `.pseudo-${s}-all`).join("")}) ${plainSelector}`
+          : `${states.map((s) => `.pseudo-${s}-all`).join("")} ${plainSelector}`
 
         return [selector, classSelector, ancestorSelector].filter(
           (selector) => selector && !selector.includes(":not()")
diff --git a/src/preview/withPseudoState.ts b/src/preview/withPseudoState.ts
index e08507a..f04c796 100644
--- a/src/preview/withPseudoState.ts
+++ b/src/preview/withPseudoState.ts
@@ -25,7 +25,10 @@ const shadowHosts = new Set<Element>()
 // Drops any existing pseudo state classnames that carried over from a previously viewed story
 // before adding the new classnames. We use forEach for IE compatibility.
 const applyClasses = (element: Element, classnames: Set<string>) => {
-  Object.values(PSEUDO_STATES).forEach((state) => element.classList.remove(`pseudo-${state}`))
+  Object.values(PSEUDO_STATES).forEach((state) => {
+    element.classList.remove(`pseudo-${state}`)
+    element.classList.remove(`pseudo-${state}-all`)
+  })
   classnames.forEach((classname) => element.classList.add(classname))
 }
 
@@ -37,7 +40,7 @@ const applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {})
   ;(Object.entries(parameter || {}) as [PseudoState, any]).forEach(([state, value]) => {
     if (typeof value === "boolean") {
       // default API - applying pseudo class to root element.
-      if (value) add(rootElement, `ancestor-${state}` as PseudoState)
+      if (value) add(rootElement, `${state}-all` as PseudoState)
     } else if (typeof value === "string") {
       // explicit selectors API - applying pseudo class to a specific element
       rootElement.querySelectorAll(value).forEach((el) => add(el, state))
@@ -49,7 +52,14 @@ const applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {})
 
   map.forEach((states, target) => {
     const classnames = new Set<string>()
-    states.forEach((key) => PSEUDO_STATES[key] && classnames.add(`pseudo-${PSEUDO_STATES[key]}`))
+    states.forEach((key) => {
+      const keyWithoutAll = key.replace('-all', '') as PseudoState
+      if (PSEUDO_STATES[key]) {
+        classnames.add(`pseudo-${PSEUDO_STATES[key]}`)
+      } else if (PSEUDO_STATES[keyWithoutAll]) {
+        classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`)
+      }
+    })
     applyClasses(target, classnames)
   })
 }
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 645bcc3..27daba5 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -15,25 +15,25 @@ export const All = () => (
     <div>
       <Button>Normal</Button>
     </div>
-    <div className="pseudo-ancestor-hover">
+    <div className="pseudo-hover-all">
       <Button>Hover</Button>
     </div>
-    <div className="pseudo-ancestor-focus">
+    <div className="pseudo-focus-all">
       <Button>Focus</Button>
     </div>
-    <div className="pseudo-ancestor-active">
+    <div className="pseudo-active-all">
       <Button>Active</Button>
     </div>
-    <div className="pseudo-ancestor-hover pseudo-ancestor-focus">
+    <div className="pseudo-hover-all pseudo-focus-all">
       <Button>Hover Focus</Button>
     </div>
-    <div className="pseudo-ancestor-hover pseudo-ancestor-active">
+    <div className="pseudo-hover-all pseudo-active-all">
       <Button>Hover Active</Button>
     </div>
-    <div className="pseudo-ancestor-focus pseudo-ancestor-active">
+    <div className="pseudo-focus-all pseudo-active-all">
       <Button>Focus Active</Button>
     </div>
-    <div className="pseudo-ancestor-hover pseudo-ancestor-focus pseudo-ancestor-active">
+    <div className="pseudo-hover-all pseudo-focus-all pseudo-ancestor-active">
       <Button>Hover Focus Active</Button>
     </div>
   </div>
diff --git a/stories/Input.stories.js b/stories/Input.stories.js
index c0562d3..704e4a1 100644
--- a/stories/Input.stories.js
+++ b/stories/Input.stories.js
@@ -15,13 +15,13 @@ export const All = () => (
     <div>
       <Input defaultValue="Normal" />
     </div>
-    <div className="pseudo-hover">
+    <div className="pseudo-hover-all">
       <Input defaultValue="Hover" />
     </div>
-    <div className="pseudo-focus">
+    <div className="pseudo-focus-all">
       <Input defaultValue="Focus" />
     </div>
-    <div className="pseudo-hover pseudo-focus">
+    <div className="pseudo-hover-all pseudo-focus-all">
       <Input defaultValue="Hover Focus" />
     </div>
   </div>
diff --git a/stories/ShadowRoot.stories.js b/stories/ShadowRoot.stories.js
index 9882c54..b0953c2 100644
--- a/stories/ShadowRoot.stories.js
+++ b/stories/ShadowRoot.stories.js
@@ -15,25 +15,25 @@ export const All = () => (
     <div>
       <ShadowRoot label="Normal" />
     </div>
-    <div className="pseudo-hover">
+    <div className="pseudo-hover-all">
       <ShadowRoot label="Hover" />
     </div>
-    <div className="pseudo-focus">
+    <div className="pseudo-focus-all">
       <ShadowRoot label="Focus" />
     </div>
-    <div className="pseudo-active">
+    <div className="pseudo-active-all">
       <ShadowRoot label="Active" />
     </div>
-    <div className="pseudo-hover pseudo-focus">
+    <div className="pseudo-hover-all pseudo-focus-all">
       <ShadowRoot label="Hover Focus" />
     </div>
-    <div className="pseudo-hover pseudo-active">
+    <div className="pseudo-hover-all pseudo-active-all">
       <ShadowRoot label="Hover Active" />
     </div>
-    <div className="pseudo-focus pseudo-active">
+    <div className="pseudo-focus-all pseudo-active-all">
       <ShadowRoot label="Focus Active" />
     </div>
-    <div className="pseudo-hover pseudo-focus pseudo-active">
+    <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
       <ShadowRoot label="Hover Focus Active" />
     </div>
   </div>
diff --git a/stories/grid.css b/stories/grid.css
index 5c517bd..a36c7bf 100644
--- a/stories/grid.css
+++ b/stories/grid.css
@@ -12,37 +12,37 @@
   grid-area: normal;
   justify-self: center;
 }
-.story-grid > .pseudo-ancestor-hover,
+.story-grid > .pseudo-hover-all,
 .story-grid > [data-hover] {
   grid-area: hover;
   justify-self: right;
 }
-.story-grid > .pseudo-ancestor-focus,
+.story-grid > .pseudo-focus-all,
 .story-grid > [data-focus] {
   grid-area: focus;
   justify-self: center;
 }
-.story-grid > .pseudo-ancestor-active,
+.story-grid > .pseudo-active-all,
 .story-grid > [data-active] {
   grid-area: active;
   justify-self: left;
 }
-.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus,
+.story-grid > .pseudo-hover-all.pseudo-focus-all,
 .story-grid > [data-hover][data-focus] {
   grid-area: hover-focus;
   justify-self: right;
 }
-.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-active,
+.story-grid > .pseudo-hover-all.pseudo-active-all,
 .story-grid > [data-hover][data-active] {
   grid-area: hover-active;
   justify-self: center;
 }
-.story-grid > .pseudo-ancestor-focus.pseudo-ancestor-active,
+.story-grid > .pseudo-focus-all.pseudo-active-all,
 .story-grid > [data-focus][data-active] {
   grid-area: focus-active;
   justify-self: left;
 }
-.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus.pseudo-ancestor-active,
+.story-grid > .pseudo-hover-all.pseudo-focus-all.pseudo-active-all,
 .story-grid > [data-hover][data-focus][data-active] {
   grid-area: hover-focus-active;
   justify-self: center;

From 51e6b5094e18f7be4b73c34f8cfda4cb7ae0f9e1 Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Wed, 9 Aug 2023 09:19:44 -0400
Subject: [PATCH 6/9] Update CustomElement.stories.js

---
 stories/CustomElement.stories.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/stories/CustomElement.stories.js b/stories/CustomElement.stories.js
index e4ffa54..4bf0a6e 100644
--- a/stories/CustomElement.stories.js
+++ b/stories/CustomElement.stories.js
@@ -18,25 +18,25 @@ export const All = () => (
     <div>
       <custom-element>Normal</custom-element>
     </div>
-    <div className="pseudo-hover">
+    <div className="pseudo-hover-all">
       <custom-element>Hover</custom-element>
     </div>
-    <div className="pseudo-focus">
+    <div className="pseudo-focus-all">
       <custom-element>Focus</custom-element>
     </div>
-    <div className="pseudo-active">
+    <div className="pseudo-active-all">
       <custom-element>Active</custom-element>
     </div>
-    <div className="pseudo-hover pseudo-focus">
+    <div className="pseudo-hover-all pseudo-focus-all">
       <custom-element>Hover Focus</custom-element>
     </div>
-    <div className="pseudo-hover pseudo-active">
+    <div className="pseudo-hover-all pseudo-active-all">
       <custom-element>Hover Active</custom-element>
     </div>
-    <div className="pseudo-focus pseudo-active">
+    <div className="pseudo-focus-all pseudo-active-all">
       <custom-element>Focus Active</custom-element>
     </div>
-    <div className="pseudo-hover pseudo-focus pseudo-active">
+    <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
       <custom-element>Hover Focus Active</custom-element>
     </div>
   </div>

From e6e2f8d0d2cdab20d1fdc83cf0aeb171933d3269 Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:40:47 -0400
Subject: [PATCH 7/9] Update rewriteStyleSheet.test.ts

---
 src/preview/rewriteStyleSheet.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/preview/rewriteStyleSheet.test.ts b/src/preview/rewriteStyleSheet.test.ts
index 1788ad5..3eb1bda 100644
--- a/src/preview/rewriteStyleSheet.test.ts
+++ b/src/preview/rewriteStyleSheet.test.ts
@@ -71,7 +71,7 @@ describe("rewriteStyleSheet", () => {
     const sheet = new Sheet("a:hover:focus { color: red }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-hover.pseudo-focus")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hove-allr.pseudo-focus-all a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover-all.pseudo-focus-all a")
   })
 
   it("supports combined pseudo selectors with classes", () => {

From 01f67b4109f512a4e4ce76dd6ad246c44c95b6f3 Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:27:40 -0400
Subject: [PATCH 8/9] Update Button.stories.js

---
 stories/Button.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 27daba5..5578ea7 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -33,7 +33,7 @@ export const All = () => (
     <div className="pseudo-focus-all pseudo-active-all">
       <Button>Focus Active</Button>
     </div>
-    <div className="pseudo-hover-all pseudo-focus-all pseudo-ancestor-active">
+    <div className="pseudo-hover-all pseudo-focus-all pseudo-active-all">
       <Button>Hover Focus Active</Button>
     </div>
   </div>

From 0bc3584967ce258813b036238011f82666ddb79b Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Thu, 10 Aug 2023 14:07:16 -0400
Subject: [PATCH 9/9] add support for shadowRoot host in customElement

---
 src/preview/rewriteStyleSheet.test.ts | 2 +-
 src/preview/rewriteStyleSheet.ts      | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/preview/rewriteStyleSheet.test.ts b/src/preview/rewriteStyleSheet.test.ts
index 3eb1bda..dc76232 100644
--- a/src/preview/rewriteStyleSheet.test.ts
+++ b/src/preview/rewriteStyleSheet.test.ts
@@ -85,7 +85,7 @@ describe("rewriteStyleSheet", () => {
   it('supports ":host"', () => {
     const sheet = new Sheet(":host(:hover) { color: red }")
     rewriteStyleSheet(sheet as any)
-    expect(sheet.cssRules[0].cssText).toEqual(":host(:hover), :host(.pseudo-hover) { color: red }")
+    expect(sheet.cssRules[0].cssText).toEqual(":host(:hover), :host(.pseudo-hover), :host(.pseudo-hover-all) { color: red }")
   })
 
   it('supports ":not"', () => {
diff --git a/src/preview/rewriteStyleSheet.ts b/src/preview/rewriteStyleSheet.ts
index 30d9af5..6c68ac2 100644
--- a/src/preview/rewriteStyleSheet.ts
+++ b/src/preview/rewriteStyleSheet.ts
@@ -38,8 +38,14 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado
           return acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}`)
         }, selector)
 
+        const classAllSelector = states.reduce((acc, state) => {
+          if (isExcludedPseudoElement(selector, state)) return ""
+          return acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}-all`)
+        }, selector)
+
+
         if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
-          return [selector, classSelector].filter(Boolean)
+          return [selector, classSelector, classAllSelector].filter(Boolean)
         }
 
         const ancestorSelector = shadowRoot