storybook-addon-pseudo-states 2.1.3-next.1 → 2.2.0

package/.babelrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  targets: "defaults",
+  presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+}

package/dist/chunk-U5XMEK5H.mjs

@@ -0,0 +1,24 @@
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var PARAM_KEY = "pseudo";
+var EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb", "::-webkit-slider-thumb"];
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  // must come after its alternatives
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
+
+export {
+  ADDON_ID,
+  TOOL_ID,
+  PARAM_KEY,
+  EXCLUDED_PSEUDO_ELEMENTS,
+  PSEUDO_STATES
+};

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+declare const _default: {};
+
+export { _default as default };

package/dist/index.js

@@ -1,7 +1,29 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var e={};
-
-module.exports = e;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.js.map
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+var src_default = {};

package/dist/index.mjs

@@ -1,5 +1,8 @@
-var e={};
-
-export { e as default };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.mjs.map
+// src/index.ts
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
+var src_default = {};
+export {
+  src_default as default
+};

package/dist/manager.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/manager.d.ts

@@ -1,2 +1,2 @@
 
-export { }
+export {  }

package/dist/manager.js

@@ -1,14 +1,117 @@
-'use strict';
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 
-var managerApi = require('@storybook/manager-api');
-var e = require('react');
-var components = require('@storybook/components');
-var theming = require('@storybook/theming');
+// src/manager.ts
+var import_manager_api2 = require("@storybook/manager-api");
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var PARAM_KEY = "pseudo";
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  // must come after its alternatives
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
 
-var e__default = /*#__PURE__*/_interopDefault(e);
+// src/manager/PseudoStateTool.tsx
+var import_react = __toESM(require("react"));
+var import_components = require("@storybook/components");
+var import_manager_api = require("@storybook/manager-api");
+var import_theming = require("@storybook/theming");
+var LinkTitle = import_theming.styled.span(({ active }) => ({
+  color: active ? import_theming.color.secondary : "inherit"
+}));
+var LinkIcon = (0, import_theming.styled)(import_components.Icons)(({ active }) => ({
+  opacity: active ? 1 : 0,
+  path: { fill: active ? import_theming.color.secondary : "inherit" }
+}));
+var options = Object.keys(PSEUDO_STATES).sort();
+var PseudoStateTool = () => {
+  const [globals, updateGlobals] = (0, import_manager_api.useGlobals)();
+  const pseudo = globals[PARAM_KEY];
+  const isActive = (0, import_react.useCallback)(
+    (option) => {
+      if (!pseudo)
+        return false;
+      return pseudo[option] === true;
+    },
+    [pseudo]
+  );
+  const toggleOption = (0, import_react.useCallback)(
+    (option) => () => {
+      updateGlobals({
+        [PARAM_KEY]: {
+          ...pseudo,
+          [option]: !isActive(option)
+        }
+      });
+    },
+    [pseudo]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.WithTooltip,
+    {
+      placement: "top",
+      trigger: "click",
+      tooltip: () => /* @__PURE__ */ import_react.default.createElement(
+        import_components.TooltipLinkList,
+        {
+          links: options.map((option) => ({
+            id: option,
+            title: /* @__PURE__ */ import_react.default.createElement(LinkTitle, { active: isActive(option) }, ":", PSEUDO_STATES[option]),
+            right: /* @__PURE__ */ import_react.default.createElement(LinkIcon, { icon: "check", width: 12, height: 12, active: isActive(option) }),
+            onClick: toggleOption(option),
+            active: isActive(option)
+          }))
+        }
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.IconButton,
+      {
+        key: "pseudo-state",
+        title: "Select CSS pseudo states",
+        active: options.some(isActive)
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_components.Icons, { icon: "button" })
+    )
+  );
+};
 
-var r="storybook/pseudo-states",l=`${r}/tool`,c="pseudo";var n={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var h=theming.styled.span(({active:o})=>({color:o?theming.color.secondary:"inherit"})),b=theming.styled(components.Icons)(({active:o})=>({opacity:o?1:0,path:{fill:o?theming.color.secondary:"inherit"}})),a=Object.keys(n).sort(),T=()=>{let[o,m]=managerApi.useGlobals(),s=o[c],i=e.useCallback(t=>s?s[t]===!0:!1,[s]),E=e.useCallback(t=>()=>{m({[c]:{...s,[t]:!i(t)}});},[s]);return e__default.default.createElement(components.WithTooltip,{placement:"top",trigger:"click",tooltip:()=>e__default.default.createElement(components.TooltipLinkList,{links:a.map(t=>({id:t,title:e__default.default.createElement(h,{active:i(t)},":",n[t]),right:e__default.default.createElement(b,{icon:"check",width:12,height:12,active:i(t)}),onClick:E(t),active:i(t)}))})},e__default.default.createElement(components.IconButton,{key:"pseudo-state",title:"Select CSS pseudo states",active:a.some(i)},e__default.default.createElement(components.Icons,{icon:"button"})))};managerApi.addons.register(r,()=>{managerApi.addons.add(l,{type:managerApi.types.TOOL,title:"CSS pseudo states",match:({viewMode:o})=>o==="story",render:T});});
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=manager.js.map
+// src/manager.ts
+import_manager_api2.addons.register(ADDON_ID, () => {
+  import_manager_api2.addons.add(TOOL_ID, {
+    type: import_manager_api2.types.TOOL,
+    title: "CSS pseudo states",
+    match: ({ viewMode }) => viewMode === "story",
+    render: PseudoStateTool
+  });
+});

package/dist/manager.mjs

@@ -1,8 +1,84 @@
-import { addons, types, useGlobals } from '@storybook/manager-api';
-import e, { useCallback } from 'react';
-import { Icons, WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
-import { styled, color } from '@storybook/theming';
+import {
+  ADDON_ID,
+  PARAM_KEY,
+  PSEUDO_STATES,
+  TOOL_ID
+} from "./chunk-U5XMEK5H.mjs";
 
-var r="storybook/pseudo-states",l=`${r}/tool`,c="pseudo";var n={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var h=styled.span(({active:o})=>({color:o?color.secondary:"inherit"})),b=styled(Icons)(({active:o})=>({opacity:o?1:0,path:{fill:o?color.secondary:"inherit"}})),a=Object.keys(n).sort(),T=()=>{let[o,m]=useGlobals(),s=o[c],i=useCallback(t=>s?s[t]===!0:!1,[s]),E=useCallback(t=>()=>{m({[c]:{...s,[t]:!i(t)}});},[s]);return e.createElement(WithTooltip,{placement:"top",trigger:"click",tooltip:()=>e.createElement(TooltipLinkList,{links:a.map(t=>({id:t,title:e.createElement(h,{active:i(t)},":",n[t]),right:e.createElement(b,{icon:"check",width:12,height:12,active:i(t)}),onClick:E(t),active:i(t)}))})},e.createElement(IconButton,{key:"pseudo-state",title:"Select CSS pseudo states",active:a.some(i)},e.createElement(Icons,{icon:"button"})))};addons.register(r,()=>{addons.add(l,{type:types.TOOL,title:"CSS pseudo states",match:({viewMode:o})=>o==="story",render:T});});
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=manager.mjs.map
+// src/manager.ts
+import { addons, types } from "@storybook/manager-api";
+
+// src/manager/PseudoStateTool.tsx
+import React, { useCallback } from "react";
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from "@storybook/components";
+import { useGlobals } from "@storybook/manager-api";
+import { styled, color } from "@storybook/theming";
+var LinkTitle = styled.span(({ active }) => ({
+  color: active ? color.secondary : "inherit"
+}));
+var LinkIcon = styled(Icons)(({ active }) => ({
+  opacity: active ? 1 : 0,
+  path: { fill: active ? color.secondary : "inherit" }
+}));
+var options = Object.keys(PSEUDO_STATES).sort();
+var PseudoStateTool = () => {
+  const [globals, updateGlobals] = useGlobals();
+  const pseudo = globals[PARAM_KEY];
+  const isActive = useCallback(
+    (option) => {
+      if (!pseudo)
+        return false;
+      return pseudo[option] === true;
+    },
+    [pseudo]
+  );
+  const toggleOption = useCallback(
+    (option) => () => {
+      updateGlobals({
+        [PARAM_KEY]: {
+          ...pseudo,
+          [option]: !isActive(option)
+        }
+      });
+    },
+    [pseudo]
+  );
+  return /* @__PURE__ */ React.createElement(
+    WithTooltip,
+    {
+      placement: "top",
+      trigger: "click",
+      tooltip: () => /* @__PURE__ */ React.createElement(
+        TooltipLinkList,
+        {
+          links: options.map((option) => ({
+            id: option,
+            title: /* @__PURE__ */ React.createElement(LinkTitle, { active: isActive(option) }, ":", PSEUDO_STATES[option]),
+            right: /* @__PURE__ */ React.createElement(LinkIcon, { icon: "check", width: 12, height: 12, active: isActive(option) }),
+            onClick: toggleOption(option),
+            active: isActive(option)
+          }))
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        key: "pseudo-state",
+        title: "Select CSS pseudo states",
+        active: options.some(isActive)
+      },
+      /* @__PURE__ */ React.createElement(Icons, { icon: "button" })
+    )
+  );
+};
+
+// src/manager.ts
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: "CSS pseudo states",
+    match: ({ viewMode }) => viewMode === "story",
+    render: PseudoStateTool
+  });
+});

package/dist/preview.d.mts

@@ -0,0 +1,8 @@
+import * as _storybook_types from '@storybook/types';
+
+declare const decorators: _storybook_types.DecoratorFunction<_storybook_types.Renderer, _storybook_types.Args>[];
+declare const globals: {
+    pseudo: boolean;
+};
+
+export { decorators, globals };

package/dist/preview.js

@@ -1,11 +1,328 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var coreEvents = require('@storybook/core-events');
-var previewApi = require('@storybook/preview-api');
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  decorators: () => decorators,
+  globals: () => globals
+});
+module.exports = __toCommonJS(preview_exports);
 
-var E="pseudo",m=["::-webkit-scrollbar-thumb"],S={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var b=e=>e.indexOf("@")===0,h=e=>{if(b(e))return [e];let s=[],t=0,o=0,n="";for(let r=0,i=e.length;r<i;r++){let l=e[r];if(l==="(")t+=1;else if(l===")")t-=1;else if(l==="[")o+=1;else if(l==="]")o-=1;else if(l===","&&!t&&!o){s.push(n.trim()),n="";continue}n+=l;}return s.push(n.trim()),s};var R=Object.values(S),O=new RegExp(`:(${R.join("|")})`),T=new RegExp(`:(${R.join("|")})`,"g"),g=new Set,y=e=>{g.has(e)||(console.warn(e),g.add(e));},P=(e,s)=>m.some(t=>e.endsWith(`${t}:${s}`)),L=({cssText:e,selectorText:s},t)=>e.replace(s,h(s).flatMap(o=>{if(o.includes(".pseudo-"))return [];if(!O.test(o))return [o];let n=[],r=o.replace(T,(a,c)=>(n.push(c),"")),i=n.reduce((a,c)=>P(o,c)?"":a.replace(new RegExp(`:${c}`,"g"),`.pseudo-${c}`),o),l=n.reduce((a,c)=>P(o,c)?"":a.replace(new RegExp(`:${c}`,"g"),`.pseudo-${c}-all`),o);if(o.startsWith(":host(")||o.startsWith("::slotted("))return [o,i,l].filter(Boolean);let u=t?`:host(${n.map(a=>`.pseudo-${a}-all`).join("")}) ${r}`:`${n.map(a=>`.pseudo-${a}-all`).join("")} ${r}`;return [o,i,u].filter(a=>a&&!a.includes(":not()"))}).join(", ")),_=(e,s,t)=>{try{let o=-1;for(let n of e.cssRules){if(o++,n.__pseudoStatesRewritten||!("selectorText"in n))continue;let r=n;if(O.test(r.selectorText)){let i=L(r,s);e.deleteRule(o),e.insertRule(i,o),s&&t&&t.add(s.host);}if(n.__pseudoStatesRewritten=!0,o>1e3){y("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");break}}}catch(o){String(o).includes("cssRules")?y(`Can't access cssRules, likely due to CORS restrictions: ${e.href}`):console.error(o,e.href);}};var p=previewApi.addons.getChannel(),f=new Set,A=(e,s)=>{Object.values(S).forEach(t=>{e.classList.remove(`pseudo-${t}`),e.classList.remove(`pseudo-${t}-all`);}),s.forEach(t=>e.classList.add(t));},W=(e,s={})=>{let t=new Map([[e,new Set]]),o=(n,r)=>t.set(n,new Set([...t.get(n)||[],r]));Object.entries(s||{}).forEach(([n,r])=>{typeof r=="boolean"?r&&o(e,`${n}-all`):typeof r=="string"?e.querySelectorAll(r).forEach(i=>o(i,n)):Array.isArray(r)&&r.forEach(i=>e.querySelectorAll(i).forEach(l=>o(l,n)));}),t.forEach((n,r)=>{let i=new Set;n.forEach(l=>{let u=l.replace("-all","");S[l]?i.add(`pseudo-${S[l]}`):S[u]&&i.add(`pseudo-${S[u]}-all`);}),A(r,i);});},x=e=>{let s=new Set;for(let t=e.parentElement;t;t=t.parentElement)t.className&&t.className.split(" ").filter(o=>o.indexOf("pseudo-")===0).forEach(o=>s.add(o));A(e,s);},D=e=>{let{rootSelector:s,...t}=e||{};return t},v=(e={},s={})=>e!==null&&s!==null&&Object.keys(e).length===Object.keys(s).length&&Object.keys(e).every(t=>JSON.stringify(e[t])===JSON.stringify(s[t])),$=(e,{viewMode:s,parameters:t,id:o,globals:n})=>{let{pseudo:r}=t,{pseudo:i}=n,{rootSelector:l}=r||{},u=previewApi.useMemo(()=>l?document.querySelector(l):s==="docs"?document.getElementById(`story--${o}`):document.getElementById("storybook-root")||document.getElementById("root"),[l,s,o]);return previewApi.useEffect(()=>{let a=D(r);s==="story"&&!v(a,i)&&p.emit(coreEvents.UPDATE_GLOBALS,{globals:{pseudo:a}});},[r,s]),previewApi.useEffect(()=>{if(!u)return;let a=setTimeout(()=>{W(u,i||D(r)),f.forEach(x);},0);return ()=>clearTimeout(a)},[u,i,r]),e()},d=e=>{let s=Array.from(e?e.styleSheets:document.styleSheets);e?.adoptedStyleSheets?.length&&(s=e.adoptedStyleSheets),s.forEach(t=>_(t,e,f));};p.on(coreEvents.STORY_CHANGED,()=>f.clear());p.on(coreEvents.STORY_RENDERED,()=>d());p.on(coreEvents.GLOBALS_UPDATED,()=>d());p.on(coreEvents.FORCE_RE_RENDER,()=>d());p.on(coreEvents.FORCE_REMOUNT,()=>d());p.on(coreEvents.DOCS_RENDERED,()=>d());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(s){let t=this._attachShadow({...s,mode:"open"});return requestAnimationFrame(()=>{d(t),x(t.host);}),t});var ne=[$],re={[E]:!1};
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var PARAM_KEY = "pseudo";
+var EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb", "::-webkit-slider-thumb"];
+var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  // must come after its alternatives
+  visited: "visited",
+  link: "link",
+  target: "target"
+};
 
-exports.decorators = ne;
-exports.globals = re;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=preview.js.map
+// src/preview/withPseudoState.ts
+var import_core_events = require("@storybook/core-events");
+var import_preview_api = require("@storybook/preview-api");
+
+// src/preview/splitSelectors.ts
+var isAtRule = (selector) => selector.indexOf("@") === 0;
+var splitSelectors = (selectors) => {
+  if (isAtRule(selectors))
+    return [selectors];
+  let result = [];
+  let parentheses = 0;
+  let brackets = 0;
+  let selector = "";
+  for (let i = 0, len = selectors.length; i < len; i++) {
+    const char = selectors[i];
+    if (char === "(") {
+      parentheses += 1;
+    } else if (char === ")") {
+      parentheses -= 1;
+    } else if (char === "[") {
+      brackets += 1;
+    } else if (char === "]") {
+      brackets -= 1;
+    } else if (char === ",") {
+      if (!parentheses && !brackets) {
+        result.push(selector.trim());
+        selector = "";
+        continue;
+      }
+    }
+    selector += char;
+  }
+  result.push(selector.trim());
+  return result;
+};
+
+// src/preview/rewriteStyleSheet.ts
+var pseudoStates = Object.values(PSEUDO_STATES);
+var matchOne = new RegExp(`:(${pseudoStates.join("|")})`);
+var matchAll = new RegExp(`:(${pseudoStates.join("|")})`, "g");
+var warnings = /* @__PURE__ */ new Set();
+var warnOnce = (message) => {
+  if (warnings.has(message))
+    return;
+  console.warn(message);
+  warnings.add(message);
+};
+var isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`));
+var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
+  return cssText.replace(
+    selectorText,
+    splitSelectors(selectorText).flatMap((selector) => {
+      if (selector.includes(".pseudo-")) {
+        return [];
+      }
+      if (!matchOne.test(selector)) {
+        return [selector];
+      }
+      const states = [];
+      let plainSelector = selector.replace(matchAll, (_, state) => {
+        states.push(state);
+        return "";
+      });
+      const classSelector = states.reduce((acc, state) => {
+        if (isExcludedPseudoElement(selector, state))
+          return "";
+        return acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}`);
+      }, selector);
+      let ancestorSelector = "";
+      const statesAllClassSelectors = states.map((s) => `.pseudo-${s}-all`).join("");
+      if (selector.startsWith(":host(")) {
+        const matches = selector.match(/^:host\(([^ ]+)\) /);
+        if (matches && !matchOne.test(matches[1])) {
+          ancestorSelector = `:host(${matches[1]}${statesAllClassSelectors}) ${plainSelector.replace(matches[0], "")}`;
+        } else {
+          ancestorSelector = states.reduce((acc, state) => {
+            if (isExcludedPseudoElement(selector, state))
+              return "";
+            return acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}-all`);
+          }, selector);
+        }
+      } else if (selector.startsWith("::slotted(") || shadowRoot) {
+        if (plainSelector.startsWith("::slotted()")) {
+          plainSelector = plainSelector.replace("::slotted()", "::slotted(*)");
+        }
+        ancestorSelector = `:host(${statesAllClassSelectors}) ${plainSelector}`;
+      } else {
+        ancestorSelector = `${statesAllClassSelectors} ${plainSelector}`;
+      }
+      return [selector, classSelector, ancestorSelector].filter(
+        (selector2) => selector2 && !selector2.includes(":not()")
+      );
+    }).join(", ")
+  );
+};
+var rewriteStyleSheet = (sheet, shadowRoot) => {
+  try {
+    const maximumRulesToRewrite = 1e3;
+    const count = rewriteRuleContainer(sheet, maximumRulesToRewrite, shadowRoot);
+    if (count >= maximumRulesToRewrite) {
+      warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");
+    }
+    return count > 0;
+  } catch (e) {
+    if (String(e).includes("cssRules")) {
+      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`);
+    } else {
+      console.error(e, sheet.href);
+    }
+    return false;
+  }
+};
+var rewriteRuleContainer = (ruleContainer, rewriteLimit, shadowRoot) => {
+  let count = 0;
+  let index = -1;
+  for (const cssRule of ruleContainer.cssRules) {
+    index++;
+    let numRewritten = 0;
+    if (cssRule.__processed) {
+      numRewritten = cssRule.__pseudoStatesRewrittenCount;
+    } else {
+      if ("cssRules" in cssRule && cssRule.cssRules.length) {
+        numRewritten = rewriteRuleContainer(cssRule, rewriteLimit - count, shadowRoot);
+      } else {
+        if (!("selectorText" in cssRule))
+          continue;
+        const styleRule = cssRule;
+        if (matchOne.test(styleRule.selectorText)) {
+          const newRule = rewriteRule(styleRule, shadowRoot);
+          ruleContainer.deleteRule(index);
+          ruleContainer.insertRule(newRule, index);
+          numRewritten = 1;
+        }
+      }
+      cssRule.__processed = true;
+      cssRule.__pseudoStatesRewrittenCount = numRewritten;
+    }
+    count += numRewritten;
+    if (count >= rewriteLimit) {
+      break;
+    }
+  }
+  return count;
+};
+
+// src/preview/withPseudoState.ts
+var channel = import_preview_api.addons.getChannel();
+var shadowHosts = /* @__PURE__ */ new Set();
+var applyClasses = (element, classnames) => {
+  Object.values(PSEUDO_STATES).forEach((state) => {
+    element.classList.remove(`pseudo-${state}`);
+    element.classList.remove(`pseudo-${state}-all`);
+  });
+  classnames.forEach((classname) => element.classList.add(classname));
+};
+function querySelectorPiercingShadowDOM(root, selector) {
+  const results = [];
+  root.querySelectorAll("*").forEach((el) => {
+    if (el.shadowRoot) {
+      results.push(...querySelectorPiercingShadowDOM(el.shadowRoot, selector));
+    }
+  });
+  results.push(...root.querySelectorAll(selector).values());
+  return results;
+}
+var applyParameter = (rootElement, parameter = {}) => {
+  const map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]);
+  const add = (target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state]));
+  Object.entries(parameter || {}).forEach(([state, value]) => {
+    if (typeof value === "boolean") {
+      if (value)
+        add(rootElement, `${state}-all`);
+    } else if (typeof value === "string") {
+      querySelectorPiercingShadowDOM(rootElement, value).forEach((el) => add(el, state));
+    } else if (Array.isArray(value)) {
+      value.forEach((sel) => querySelectorPiercingShadowDOM(rootElement, sel).forEach((el) => add(el, state)));
+    }
+  });
+  map.forEach((states, target) => {
+    const classnames = /* @__PURE__ */ new Set();
+    states.forEach((key) => {
+      const keyWithoutAll = key.replace("-all", "");
+      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);
+  });
+};
+var updateShadowHost = (shadowHost) => {
+  const classnames = /* @__PURE__ */ new Set();
+  shadowHost.className.split(" ").filter((classname) => classname.startsWith("pseudo-")).forEach((classname) => classnames.add(classname));
+  for (let node = shadowHost.parentNode; node; ) {
+    if (node instanceof ShadowRoot) {
+      node = node.host;
+      continue;
+    }
+    if (node instanceof Element) {
+      const element = node;
+      if (element.className) {
+        element.className.split(" ").filter((classname) => classname.match(/^pseudo-.+-all$/) !== null).forEach((classname) => classnames.add(classname));
+      }
+    }
+    node = node.parentNode;
+  }
+  applyClasses(shadowHost, classnames);
+};
+var pseudoConfig = (parameter) => {
+  const { rootSelector, ...pseudoStateConfig } = parameter || {};
+  return pseudoStateConfig;
+};
+var equals = (a = {}, b = {}) => a !== null && b !== null && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(
+  (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
+);
+var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
+  const { pseudo: parameter } = parameters;
+  const { pseudo: globals2 } = globalsArgs;
+  const { rootSelector } = parameter || {};
+  const rootElement = (0, import_preview_api.useMemo)(() => {
+    if (rootSelector) {
+      return document.querySelector(rootSelector);
+    }
+    if (viewMode === "docs") {
+      return document.getElementById(`story--${id}`);
+    }
+    return document.getElementById("storybook-root") || // Storybook 7.0+
+    document.getElementById("root");
+  }, [rootSelector, viewMode, id]);
+  (0, import_preview_api.useEffect)(() => {
+    const config = pseudoConfig(parameter);
+    if (viewMode === "story" && !equals(config, globals2)) {
+      channel.emit(import_core_events.UPDATE_GLOBALS, {
+        globals: { pseudo: config }
+      });
+    }
+  }, [parameter, viewMode]);
+  (0, import_preview_api.useEffect)(() => {
+    if (!rootElement)
+      return;
+    const timeout = setTimeout(() => {
+      applyParameter(rootElement, globals2 || pseudoConfig(parameter));
+      shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [rootElement, globals2, parameter]);
+  return StoryFn();
+};
+var rewriteStyleSheets = (shadowRoot) => {
+  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
+  if (shadowRoot?.adoptedStyleSheets?.length)
+    styleSheets = shadowRoot.adoptedStyleSheets;
+  const rewroteStyles = styleSheets.map((sheet) => rewriteStyleSheet(sheet, shadowRoot)).some(Boolean);
+  if (rewroteStyles && shadowRoot && shadowHosts)
+    shadowHosts.add(shadowRoot.host);
+};
+channel.on(import_core_events.STORY_CHANGED, () => shadowHosts.clear());
+channel.on(import_core_events.STORY_RENDERED, () => rewriteStyleSheets());
+channel.on(import_core_events.GLOBALS_UPDATED, () => rewriteStyleSheets());
+channel.on(import_core_events.FORCE_RE_RENDER, () => rewriteStyleSheets());
+channel.on(import_core_events.FORCE_REMOUNT, () => rewriteStyleSheets());
+channel.on(import_core_events.DOCS_RENDERED, () => rewriteStyleSheets());
+if (Element.prototype.attachShadow) {
+  Element.prototype._attachShadow = Element.prototype.attachShadow;
+  Element.prototype.attachShadow = function attachShadow(init) {
+    const shadowRoot = this._attachShadow({ ...init, mode: "open" });
+    requestAnimationFrame(() => {
+      rewriteStyleSheets(shadowRoot);
+      if (shadowHosts.has(shadowRoot.host))
+        updateShadowHost(shadowRoot.host);
+    });
+    return shadowRoot;
+  };
+}
+
+// src/preview.ts
+var decorators = [withPseudoState];
+var globals = { [PARAM_KEY]: false };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  decorators,
+  globals
+});

package/dist/preview.mjs

@@ -1,8 +1,297 @@
-import { STORY_CHANGED, STORY_RENDERED, GLOBALS_UPDATED, FORCE_RE_RENDER, FORCE_REMOUNT, DOCS_RENDERED, UPDATE_GLOBALS } from '@storybook/core-events';
-import { addons, useMemo, useEffect } from '@storybook/preview-api';
+import {
+  EXCLUDED_PSEUDO_ELEMENTS,
+  PARAM_KEY,
+  PSEUDO_STATES
+} from "./chunk-U5XMEK5H.mjs";
 
-var E="pseudo",m=["::-webkit-scrollbar-thumb"],S={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var b=e=>e.indexOf("@")===0,h=e=>{if(b(e))return [e];let s=[],t=0,o=0,n="";for(let r=0,i=e.length;r<i;r++){let l=e[r];if(l==="(")t+=1;else if(l===")")t-=1;else if(l==="[")o+=1;else if(l==="]")o-=1;else if(l===","&&!t&&!o){s.push(n.trim()),n="";continue}n+=l;}return s.push(n.trim()),s};var R=Object.values(S),O=new RegExp(`:(${R.join("|")})`),T=new RegExp(`:(${R.join("|")})`,"g"),g=new Set,y=e=>{g.has(e)||(console.warn(e),g.add(e));},P=(e,s)=>m.some(t=>e.endsWith(`${t}:${s}`)),L=({cssText:e,selectorText:s},t)=>e.replace(s,h(s).flatMap(o=>{if(o.includes(".pseudo-"))return [];if(!O.test(o))return [o];let n=[],r=o.replace(T,(a,c)=>(n.push(c),"")),i=n.reduce((a,c)=>P(o,c)?"":a.replace(new RegExp(`:${c}`,"g"),`.pseudo-${c}`),o),l=n.reduce((a,c)=>P(o,c)?"":a.replace(new RegExp(`:${c}`,"g"),`.pseudo-${c}-all`),o);if(o.startsWith(":host(")||o.startsWith("::slotted("))return [o,i,l].filter(Boolean);let u=t?`:host(${n.map(a=>`.pseudo-${a}-all`).join("")}) ${r}`:`${n.map(a=>`.pseudo-${a}-all`).join("")} ${r}`;return [o,i,u].filter(a=>a&&!a.includes(":not()"))}).join(", ")),_=(e,s,t)=>{try{let o=-1;for(let n of e.cssRules){if(o++,n.__pseudoStatesRewritten||!("selectorText"in n))continue;let r=n;if(O.test(r.selectorText)){let i=L(r,s);e.deleteRule(o),e.insertRule(i,o),s&&t&&t.add(s.host);}if(n.__pseudoStatesRewritten=!0,o>1e3){y("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");break}}}catch(o){String(o).includes("cssRules")?y(`Can't access cssRules, likely due to CORS restrictions: ${e.href}`):console.error(o,e.href);}};var p=addons.getChannel(),f=new Set,A=(e,s)=>{Object.values(S).forEach(t=>{e.classList.remove(`pseudo-${t}`),e.classList.remove(`pseudo-${t}-all`);}),s.forEach(t=>e.classList.add(t));},W=(e,s={})=>{let t=new Map([[e,new Set]]),o=(n,r)=>t.set(n,new Set([...t.get(n)||[],r]));Object.entries(s||{}).forEach(([n,r])=>{typeof r=="boolean"?r&&o(e,`${n}-all`):typeof r=="string"?e.querySelectorAll(r).forEach(i=>o(i,n)):Array.isArray(r)&&r.forEach(i=>e.querySelectorAll(i).forEach(l=>o(l,n)));}),t.forEach((n,r)=>{let i=new Set;n.forEach(l=>{let u=l.replace("-all","");S[l]?i.add(`pseudo-${S[l]}`):S[u]&&i.add(`pseudo-${S[u]}-all`);}),A(r,i);});},x=e=>{let s=new Set;for(let t=e.parentElement;t;t=t.parentElement)t.className&&t.className.split(" ").filter(o=>o.indexOf("pseudo-")===0).forEach(o=>s.add(o));A(e,s);},D=e=>{let{rootSelector:s,...t}=e||{};return t},v=(e={},s={})=>e!==null&&s!==null&&Object.keys(e).length===Object.keys(s).length&&Object.keys(e).every(t=>JSON.stringify(e[t])===JSON.stringify(s[t])),$=(e,{viewMode:s,parameters:t,id:o,globals:n})=>{let{pseudo:r}=t,{pseudo:i}=n,{rootSelector:l}=r||{},u=useMemo(()=>l?document.querySelector(l):s==="docs"?document.getElementById(`story--${o}`):document.getElementById("storybook-root")||document.getElementById("root"),[l,s,o]);return useEffect(()=>{let a=D(r);s==="story"&&!v(a,i)&&p.emit(UPDATE_GLOBALS,{globals:{pseudo:a}});},[r,s]),useEffect(()=>{if(!u)return;let a=setTimeout(()=>{W(u,i||D(r)),f.forEach(x);},0);return ()=>clearTimeout(a)},[u,i,r]),e()},d=e=>{let s=Array.from(e?e.styleSheets:document.styleSheets);e?.adoptedStyleSheets?.length&&(s=e.adoptedStyleSheets),s.forEach(t=>_(t,e,f));};p.on(STORY_CHANGED,()=>f.clear());p.on(STORY_RENDERED,()=>d());p.on(GLOBALS_UPDATED,()=>d());p.on(FORCE_RE_RENDER,()=>d());p.on(FORCE_REMOUNT,()=>d());p.on(DOCS_RENDERED,()=>d());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(s){let t=this._attachShadow({...s,mode:"open"});return requestAnimationFrame(()=>{d(t),x(t.host);}),t});var ne=[$],re={[E]:!1};
+// src/preview/withPseudoState.ts
+import {
+  DOCS_RENDERED,
+  FORCE_REMOUNT,
+  FORCE_RE_RENDER,
+  GLOBALS_UPDATED,
+  STORY_CHANGED,
+  STORY_RENDERED,
+  UPDATE_GLOBALS
+} from "@storybook/core-events";
+import { addons, useEffect, useMemo } from "@storybook/preview-api";
 
-export { ne as decorators, re as globals };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=preview.mjs.map
+// src/preview/splitSelectors.ts
+var isAtRule = (selector) => selector.indexOf("@") === 0;
+var splitSelectors = (selectors) => {
+  if (isAtRule(selectors))
+    return [selectors];
+  let result = [];
+  let parentheses = 0;
+  let brackets = 0;
+  let selector = "";
+  for (let i = 0, len = selectors.length; i < len; i++) {
+    const char = selectors[i];
+    if (char === "(") {
+      parentheses += 1;
+    } else if (char === ")") {
+      parentheses -= 1;
+    } else if (char === "[") {
+      brackets += 1;
+    } else if (char === "]") {
+      brackets -= 1;
+    } else if (char === ",") {
+      if (!parentheses && !brackets) {
+        result.push(selector.trim());
+        selector = "";
+        continue;
+      }
+    }
+    selector += char;
+  }
+  result.push(selector.trim());
+  return result;
+};
+
+// src/preview/rewriteStyleSheet.ts
+var pseudoStates = Object.values(PSEUDO_STATES);
+var matchOne = new RegExp(`:(${pseudoStates.join("|")})`);
+var matchAll = new RegExp(`:(${pseudoStates.join("|")})`, "g");
+var warnings = /* @__PURE__ */ new Set();
+var warnOnce = (message) => {
+  if (warnings.has(message))
+    return;
+  console.warn(message);
+  warnings.add(message);
+};
+var isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`));
+var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
+  return cssText.replace(
+    selectorText,
+    splitSelectors(selectorText).flatMap((selector) => {
+      if (selector.includes(".pseudo-")) {
+        return [];
+      }
+      if (!matchOne.test(selector)) {
+        return [selector];
+      }
+      const states = [];
+      let plainSelector = selector.replace(matchAll, (_, state) => {
+        states.push(state);
+        return "";
+      });
+      const classSelector = states.reduce((acc, state) => {
+        if (isExcludedPseudoElement(selector, state))
+          return "";
+        return acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}`);
+      }, selector);
+      let ancestorSelector = "";
+      const statesAllClassSelectors = states.map((s) => `.pseudo-${s}-all`).join("");
+      if (selector.startsWith(":host(")) {
+        const matches = selector.match(/^:host\(([^ ]+)\) /);
+        if (matches && !matchOne.test(matches[1])) {
+          ancestorSelector = `:host(${matches[1]}${statesAllClassSelectors}) ${plainSelector.replace(matches[0], "")}`;
+        } else {
+          ancestorSelector = states.reduce((acc, state) => {
+            if (isExcludedPseudoElement(selector, state))
+              return "";
+            return acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}-all`);
+          }, selector);
+        }
+      } else if (selector.startsWith("::slotted(") || shadowRoot) {
+        if (plainSelector.startsWith("::slotted()")) {
+          plainSelector = plainSelector.replace("::slotted()", "::slotted(*)");
+        }
+        ancestorSelector = `:host(${statesAllClassSelectors}) ${plainSelector}`;
+      } else {
+        ancestorSelector = `${statesAllClassSelectors} ${plainSelector}`;
+      }
+      return [selector, classSelector, ancestorSelector].filter(
+        (selector2) => selector2 && !selector2.includes(":not()")
+      );
+    }).join(", ")
+  );
+};
+var rewriteStyleSheet = (sheet, shadowRoot) => {
+  try {
+    const maximumRulesToRewrite = 1e3;
+    const count = rewriteRuleContainer(sheet, maximumRulesToRewrite, shadowRoot);
+    if (count >= maximumRulesToRewrite) {
+      warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");
+    }
+    return count > 0;
+  } catch (e) {
+    if (String(e).includes("cssRules")) {
+      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`);
+    } else {
+      console.error(e, sheet.href);
+    }
+    return false;
+  }
+};
+var rewriteRuleContainer = (ruleContainer, rewriteLimit, shadowRoot) => {
+  let count = 0;
+  let index = -1;
+  for (const cssRule of ruleContainer.cssRules) {
+    index++;
+    let numRewritten = 0;
+    if (cssRule.__processed) {
+      numRewritten = cssRule.__pseudoStatesRewrittenCount;
+    } else {
+      if ("cssRules" in cssRule && cssRule.cssRules.length) {
+        numRewritten = rewriteRuleContainer(cssRule, rewriteLimit - count, shadowRoot);
+      } else {
+        if (!("selectorText" in cssRule))
+          continue;
+        const styleRule = cssRule;
+        if (matchOne.test(styleRule.selectorText)) {
+          const newRule = rewriteRule(styleRule, shadowRoot);
+          ruleContainer.deleteRule(index);
+          ruleContainer.insertRule(newRule, index);
+          numRewritten = 1;
+        }
+      }
+      cssRule.__processed = true;
+      cssRule.__pseudoStatesRewrittenCount = numRewritten;
+    }
+    count += numRewritten;
+    if (count >= rewriteLimit) {
+      break;
+    }
+  }
+  return count;
+};
+
+// src/preview/withPseudoState.ts
+var channel = addons.getChannel();
+var shadowHosts = /* @__PURE__ */ new Set();
+var applyClasses = (element, classnames) => {
+  Object.values(PSEUDO_STATES).forEach((state) => {
+    element.classList.remove(`pseudo-${state}`);
+    element.classList.remove(`pseudo-${state}-all`);
+  });
+  classnames.forEach((classname) => element.classList.add(classname));
+};
+function querySelectorPiercingShadowDOM(root, selector) {
+  const results = [];
+  root.querySelectorAll("*").forEach((el) => {
+    if (el.shadowRoot) {
+      results.push(...querySelectorPiercingShadowDOM(el.shadowRoot, selector));
+    }
+  });
+  results.push(...root.querySelectorAll(selector).values());
+  return results;
+}
+var applyParameter = (rootElement, parameter = {}) => {
+  const map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]);
+  const add = (target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state]));
+  Object.entries(parameter || {}).forEach(([state, value]) => {
+    if (typeof value === "boolean") {
+      if (value)
+        add(rootElement, `${state}-all`);
+    } else if (typeof value === "string") {
+      querySelectorPiercingShadowDOM(rootElement, value).forEach((el) => add(el, state));
+    } else if (Array.isArray(value)) {
+      value.forEach((sel) => querySelectorPiercingShadowDOM(rootElement, sel).forEach((el) => add(el, state)));
+    }
+  });
+  map.forEach((states, target) => {
+    const classnames = /* @__PURE__ */ new Set();
+    states.forEach((key) => {
+      const keyWithoutAll = key.replace("-all", "");
+      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);
+  });
+};
+var updateShadowHost = (shadowHost) => {
+  const classnames = /* @__PURE__ */ new Set();
+  shadowHost.className.split(" ").filter((classname) => classname.startsWith("pseudo-")).forEach((classname) => classnames.add(classname));
+  for (let node = shadowHost.parentNode; node; ) {
+    if (node instanceof ShadowRoot) {
+      node = node.host;
+      continue;
+    }
+    if (node instanceof Element) {
+      const element = node;
+      if (element.className) {
+        element.className.split(" ").filter((classname) => classname.match(/^pseudo-.+-all$/) !== null).forEach((classname) => classnames.add(classname));
+      }
+    }
+    node = node.parentNode;
+  }
+  applyClasses(shadowHost, classnames);
+};
+var pseudoConfig = (parameter) => {
+  const { rootSelector, ...pseudoStateConfig } = parameter || {};
+  return pseudoStateConfig;
+};
+var equals = (a = {}, b = {}) => a !== null && b !== null && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(
+  (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
+);
+var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
+  const { pseudo: parameter } = parameters;
+  const { pseudo: globals2 } = globalsArgs;
+  const { rootSelector } = parameter || {};
+  const rootElement = useMemo(() => {
+    if (rootSelector) {
+      return document.querySelector(rootSelector);
+    }
+    if (viewMode === "docs") {
+      return document.getElementById(`story--${id}`);
+    }
+    return document.getElementById("storybook-root") || // Storybook 7.0+
+    document.getElementById("root");
+  }, [rootSelector, viewMode, id]);
+  useEffect(() => {
+    const config = pseudoConfig(parameter);
+    if (viewMode === "story" && !equals(config, globals2)) {
+      channel.emit(UPDATE_GLOBALS, {
+        globals: { pseudo: config }
+      });
+    }
+  }, [parameter, viewMode]);
+  useEffect(() => {
+    if (!rootElement)
+      return;
+    const timeout = setTimeout(() => {
+      applyParameter(rootElement, globals2 || pseudoConfig(parameter));
+      shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [rootElement, globals2, parameter]);
+  return StoryFn();
+};
+var rewriteStyleSheets = (shadowRoot) => {
+  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
+  if (shadowRoot?.adoptedStyleSheets?.length)
+    styleSheets = shadowRoot.adoptedStyleSheets;
+  const rewroteStyles = styleSheets.map((sheet) => rewriteStyleSheet(sheet, shadowRoot)).some(Boolean);
+  if (rewroteStyles && shadowRoot && shadowHosts)
+    shadowHosts.add(shadowRoot.host);
+};
+channel.on(STORY_CHANGED, () => shadowHosts.clear());
+channel.on(STORY_RENDERED, () => rewriteStyleSheets());
+channel.on(GLOBALS_UPDATED, () => rewriteStyleSheets());
+channel.on(FORCE_RE_RENDER, () => rewriteStyleSheets());
+channel.on(FORCE_REMOUNT, () => rewriteStyleSheets());
+channel.on(DOCS_RENDERED, () => rewriteStyleSheets());
+if (Element.prototype.attachShadow) {
+  Element.prototype._attachShadow = Element.prototype.attachShadow;
+  Element.prototype.attachShadow = function attachShadow(init) {
+    const shadowRoot = this._attachShadow({ ...init, mode: "open" });
+    requestAnimationFrame(() => {
+      rewriteStyleSheets(shadowRoot);
+      if (shadowHosts.has(shadowRoot.host))
+        updateShadowHost(shadowRoot.host);
+    });
+    return shadowRoot;
+  };
+}
+
+// src/preview.ts
+var decorators = [withPseudoState];
+var globals = { [PARAM_KEY]: false };
+export {
+  decorators,
+  globals
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "2.1.3-next.1",
+  "version": "2.2.0",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",
@@ -50,34 +50,36 @@
     "prepublish": "yarn clean && yarn build:dist",
     "release": "auto shipit --base-branch=main"
   },
+  "dependencies": {},
   "devDependencies": {
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@chromaui/addon-visual-tests": "^0.0.105",
-    "@storybook/addon-essentials": "^8.0.0-alpha.12",
-    "@storybook/addon-interactions": "^8.0.0-alpha.12",
-    "@storybook/addon-links": "^8.0.0-alpha.12",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.0",
-    "@storybook/react": "^8.0.0-alpha.12",
-    "@storybook/react-webpack5": "^8.0.0-alpha.12",
-    "@storybook/test": "^8.0.0-alpha.12",
-    "@storybook/types": "^8.0.0-alpha.12",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/types": "^7.4.6",
     "@types/jest": "^29.2.4",
-    "@types/node": "^18.19.0",
-    "auto": "^10.16.8",
+    "auto": "^11.1.1",
     "concurrently": "^5.3.0",
     "jest": "^27.5.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "storybook": "^8.0.0-alpha.12",
-    "tsup": "^6.7.0",
+    "storybook": "^7.4.6",
+    "tsup": "^8.0.1",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {
-    "@storybook/components": "^8.0.0-alpha.12",
-    "@storybook/core-events": "^8.0.0-alpha.12",
-    "@storybook/manager-api": "^8.0.0-alpha.12",
-    "@storybook/preview-api": "^8.0.0-alpha.12",
-    "@storybook/theming": "^8.0.0-alpha.12",
+    "@storybook/components": "^7.4.6",
+    "@storybook/core-events": "^7.4.6",
+    "@storybook/manager-api": "^7.4.6",
+    "@storybook/preview-api": "^7.4.6",
+    "@storybook/theming": "^7.4.6",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts"],"names":["src_default"],"mappings":"AACA,IAAOA,EAAQ,CAAC","sourcesContent":["// make it work with --isolatedModules\nexport default {}\n"]}

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts"],"names":["src_default"],"mappings":"AACA,IAAOA,EAAQ,CAAC","sourcesContent":["// make it work with --isolatedModules\nexport default {}\n"]}

package/dist/manager.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/manager/PseudoStateTool.tsx"],"names":["addons","types","ADDON_ID","TOOL_ID","PARAM_KEY","PSEUDO_STATES","React","useCallback","Icons","IconButton","WithTooltip","TooltipLinkList","useGlobals","styled","color","LinkTitle","active","LinkIcon","options","PseudoStateTool","globals","updateGlobals","pseudo","isActive","option","toggleOption","viewMode"],"mappings":"AAAA,OAAS,UAAAA,EAAQ,SAAAC,MAAa,yBCAvB,IAAMC,EAAW,0BACXC,EAAU,GAAGD,SACbE,EAAY,SAQlB,IAAMC,EAAgB,CAC3B,MAAO,QACP,OAAQ,SACR,aAAc,gBACd,YAAa,eACb,MAAO,QACP,QAAS,UACT,KAAM,OACN,OAAQ,QACV,ECnBA,OAAOC,GAAS,eAAAC,MAAmB,QACnC,OAAS,SAAAC,EAAO,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,MAAuB,wBAChE,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,SAAAC,MAAa,qBAI9B,IAAMC,EAAYF,EAAO,KAA2B,CAAC,CAAE,OAAAG,CAAO,KAAO,CACnE,MAAOA,EAASF,EAAM,UAAY,SACpC,EAAE,EAEIG,EAAWJ,EAAOL,CAAK,EAAwB,CAAC,CAAE,OAAAQ,CAAO,KAAO,CACpE,QAASA,EAAS,EAAI,EACtB,KAAM,CAAE,KAAMA,EAASF,EAAM,UAAY,SAAU,CACrD,EAAE,EAEII,EAAU,OAAO,KAAKb,CAAa,EAAE,KAAK,EAEnCc,EAAkB,IAAM,CACnC,GAAM,CAACC,EAASC,CAAa,EAAIT,EAAW,EACtCU,EAASF,EAAQhB,CAAS,EAE1BmB,EAAWhB,EACdiB,GACMF,EACEA,EAAOE,CAAM,IAAM,GADN,GAGtB,CAACF,CAAM,CACT,EAEMG,EAAelB,EAClBiB,GAAuC,IAAM,CAC5CH,EAAc,CACZ,CAACjB,CAAS,EAAG,CACX,GAAGkB,EACH,CAACE,CAAM,EAAG,CAACD,EAASC,CAAM,CAC5B,CACF,CAAC,CACH,EACA,CAACF,CAAM,CACT,EAEA,OACEhB,EAAA,cAACI,EAAA,CACC,UAAU,MACV,QAAQ,QACR,QAAS,IACPJ,EAAA,cAACK,EAAA,CACC,MAAOO,EAAQ,IAAKM,IAAY,CAC9B,GAAIA,EACJ,MAAOlB,EAAA,cAACS,EAAA,CAAU,OAAQQ,EAASC,CAAM,GAAG,IAAEnB,EAAcmB,CAAM,CAAE,EACpE,MAAOlB,EAAA,cAACW,EAAA,CAAS,KAAK,QAAQ,MAAO,GAAI,OAAQ,GAAI,OAAQM,EAASC,CAAM,EAAG,EAC/E,QAASC,EAAaD,CAAM,EAC5B,OAAQD,EAASC,CAAM,CACzB,EAAE,EACJ,GAGFlB,EAAA,cAACG,EAAA,CACC,IAAI,eACJ,MAAM,2BACN,OAAQS,EAAQ,KAAKK,CAAQ,GAE7BjB,EAAA,cAACE,EAAA,CAAM,KAAK,SAAS,CACvB,CACF,CAEJ,EF9DAR,EAAO,SAASE,EAAU,IAAM,CAC9BF,EAAO,IAAIG,EAAS,CAClB,KAAMF,EAAM,KACZ,MAAO,oBACP,MAAO,CAAC,CAAE,SAAAyB,CAAS,IAAMA,IAAa,QACtC,OAAQP,CACV,CAAC,CACH,CAAC","sourcesContent":["import { addons, types } from \"@storybook/manager-api\"\n\nimport { ADDON_ID, TOOL_ID } from \"./constants\"\nimport { PseudoStateTool } from \"./manager/PseudoStateTool\"\n\naddons.register(ADDON_ID, () => {\n  addons.add(TOOL_ID, {\n    type: types.TOOL,\n    title: \"CSS pseudo states\",\n    match: ({ viewMode }) => viewMode === \"story\",\n    render: PseudoStateTool,\n  })\n})\n","export const ADDON_ID = \"storybook/pseudo-states\"\nexport const TOOL_ID = `${ADDON_ID}/tool`\nexport const PARAM_KEY = \"pseudo\"\n\n// Pseudo-elements which are not allowed to have classes applied on them\n// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector\nexport const EXCLUDED_PSEUDO_ELEMENTS = [\"::-webkit-scrollbar-thumb\"]\n\n// Dynamic pseudo-classes\n// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos\nexport const PSEUDO_STATES = {\n  hover: \"hover\",\n  active: \"active\",\n  focusVisible: \"focus-visible\",\n  focusWithin: \"focus-within\",\n  focus: \"focus\", // must come after its alternatives\n  visited: \"visited\",\n  link: \"link\",\n  target: \"target\",\n} as const\n\nexport type PseudoState = keyof typeof PSEUDO_STATES\n","import React, { useCallback } from \"react\"\nimport { Icons, IconButton, WithTooltip, TooltipLinkList } from \"@storybook/components\"\nimport { useGlobals } from \"@storybook/manager-api\"\nimport { styled, color } from \"@storybook/theming\"\n\nimport { PARAM_KEY, PSEUDO_STATES } from \"../constants\"\n\nconst LinkTitle = styled.span<{ active?: boolean }>(({ active }) => ({\n  color: active ? color.secondary : \"inherit\",\n}))\n\nconst LinkIcon = styled(Icons)<{ active?: boolean }>(({ active }) => ({\n  opacity: active ? 1 : 0,\n  path: { fill: active ? color.secondary : \"inherit\" },\n}))\n\nconst options = Object.keys(PSEUDO_STATES).sort() as (keyof typeof PSEUDO_STATES)[]\n\nexport const PseudoStateTool = () => {\n  const [globals, updateGlobals] = useGlobals()\n  const pseudo = globals[PARAM_KEY]\n\n  const isActive = useCallback(\n    (option: keyof typeof PSEUDO_STATES) => {\n      if (!pseudo) return false\n      return pseudo[option] === true\n    },\n    [pseudo]\n  )\n\n  const toggleOption = useCallback(\n    (option: keyof typeof PSEUDO_STATES) => () => {\n      updateGlobals({\n        [PARAM_KEY]: {\n          ...pseudo,\n          [option]: !isActive(option),\n        },\n      })\n    },\n    [pseudo]\n  )\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      trigger=\"click\"\n      tooltip={() => (\n        <TooltipLinkList\n          links={options.map((option) => ({\n            id: option,\n            title: <LinkTitle active={isActive(option)}>:{PSEUDO_STATES[option]}</LinkTitle>,\n            right: <LinkIcon icon=\"check\" width={12} height={12} active={isActive(option)} />,\n            onClick: toggleOption(option),\n            active: isActive(option),\n          }))}\n        />\n      )}\n    >\n      <IconButton\n        key=\"pseudo-state\"\n        title=\"Select CSS pseudo states\"\n        active={options.some(isActive)}\n      >\n        <Icons icon=\"button\" />\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}

package/dist/manager.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/manager/PseudoStateTool.tsx"],"names":["addons","types","ADDON_ID","TOOL_ID","PARAM_KEY","PSEUDO_STATES","React","useCallback","Icons","IconButton","WithTooltip","TooltipLinkList","useGlobals","styled","color","LinkTitle","active","LinkIcon","options","PseudoStateTool","globals","updateGlobals","pseudo","isActive","option","toggleOption","viewMode"],"mappings":"AAAA,OAAS,UAAAA,EAAQ,SAAAC,MAAa,yBCAvB,IAAMC,EAAW,0BACXC,EAAU,GAAGD,SACbE,EAAY,SAQlB,IAAMC,EAAgB,CAC3B,MAAO,QACP,OAAQ,SACR,aAAc,gBACd,YAAa,eACb,MAAO,QACP,QAAS,UACT,KAAM,OACN,OAAQ,QACV,ECnBA,OAAOC,GAAS,eAAAC,MAAmB,QACnC,OAAS,SAAAC,EAAO,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,MAAuB,wBAChE,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,SAAAC,MAAa,qBAI9B,IAAMC,EAAYF,EAAO,KAA2B,CAAC,CAAE,OAAAG,CAAO,KAAO,CACnE,MAAOA,EAASF,EAAM,UAAY,SACpC,EAAE,EAEIG,EAAWJ,EAAOL,CAAK,EAAwB,CAAC,CAAE,OAAAQ,CAAO,KAAO,CACpE,QAASA,EAAS,EAAI,EACtB,KAAM,CAAE,KAAMA,EAASF,EAAM,UAAY,SAAU,CACrD,EAAE,EAEII,EAAU,OAAO,KAAKb,CAAa,EAAE,KAAK,EAEnCc,EAAkB,IAAM,CACnC,GAAM,CAACC,EAASC,CAAa,EAAIT,EAAW,EACtCU,EAASF,EAAQhB,CAAS,EAE1BmB,EAAWhB,EACdiB,GACMF,EACEA,EAAOE,CAAM,IAAM,GADN,GAGtB,CAACF,CAAM,CACT,EAEMG,EAAelB,EAClBiB,GAAuC,IAAM,CAC5CH,EAAc,CACZ,CAACjB,CAAS,EAAG,CACX,GAAGkB,EACH,CAACE,CAAM,EAAG,CAACD,EAASC,CAAM,CAC5B,CACF,CAAC,CACH,EACA,CAACF,CAAM,CACT,EAEA,OACEhB,EAAA,cAACI,EAAA,CACC,UAAU,MACV,QAAQ,QACR,QAAS,IACPJ,EAAA,cAACK,EAAA,CACC,MAAOO,EAAQ,IAAKM,IAAY,CAC9B,GAAIA,EACJ,MAAOlB,EAAA,cAACS,EAAA,CAAU,OAAQQ,EAASC,CAAM,GAAG,IAAEnB,EAAcmB,CAAM,CAAE,EACpE,MAAOlB,EAAA,cAACW,EAAA,CAAS,KAAK,QAAQ,MAAO,GAAI,OAAQ,GAAI,OAAQM,EAASC,CAAM,EAAG,EAC/E,QAASC,EAAaD,CAAM,EAC5B,OAAQD,EAASC,CAAM,CACzB,EAAE,EACJ,GAGFlB,EAAA,cAACG,EAAA,CACC,IAAI,eACJ,MAAM,2BACN,OAAQS,EAAQ,KAAKK,CAAQ,GAE7BjB,EAAA,cAACE,EAAA,CAAM,KAAK,SAAS,CACvB,CACF,CAEJ,EF9DAR,EAAO,SAASE,EAAU,IAAM,CAC9BF,EAAO,IAAIG,EAAS,CAClB,KAAMF,EAAM,KACZ,MAAO,oBACP,MAAO,CAAC,CAAE,SAAAyB,CAAS,IAAMA,IAAa,QACtC,OAAQP,CACV,CAAC,CACH,CAAC","sourcesContent":["import { addons, types } from \"@storybook/manager-api\"\n\nimport { ADDON_ID, TOOL_ID } from \"./constants\"\nimport { PseudoStateTool } from \"./manager/PseudoStateTool\"\n\naddons.register(ADDON_ID, () => {\n  addons.add(TOOL_ID, {\n    type: types.TOOL,\n    title: \"CSS pseudo states\",\n    match: ({ viewMode }) => viewMode === \"story\",\n    render: PseudoStateTool,\n  })\n})\n","export const ADDON_ID = \"storybook/pseudo-states\"\nexport const TOOL_ID = `${ADDON_ID}/tool`\nexport const PARAM_KEY = \"pseudo\"\n\n// Pseudo-elements which are not allowed to have classes applied on them\n// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector\nexport const EXCLUDED_PSEUDO_ELEMENTS = [\"::-webkit-scrollbar-thumb\"]\n\n// Dynamic pseudo-classes\n// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos\nexport const PSEUDO_STATES = {\n  hover: \"hover\",\n  active: \"active\",\n  focusVisible: \"focus-visible\",\n  focusWithin: \"focus-within\",\n  focus: \"focus\", // must come after its alternatives\n  visited: \"visited\",\n  link: \"link\",\n  target: \"target\",\n} as const\n\nexport type PseudoState = keyof typeof PSEUDO_STATES\n","import React, { useCallback } from \"react\"\nimport { Icons, IconButton, WithTooltip, TooltipLinkList } from \"@storybook/components\"\nimport { useGlobals } from \"@storybook/manager-api\"\nimport { styled, color } from \"@storybook/theming\"\n\nimport { PARAM_KEY, PSEUDO_STATES } from \"../constants\"\n\nconst LinkTitle = styled.span<{ active?: boolean }>(({ active }) => ({\n  color: active ? color.secondary : \"inherit\",\n}))\n\nconst LinkIcon = styled(Icons)<{ active?: boolean }>(({ active }) => ({\n  opacity: active ? 1 : 0,\n  path: { fill: active ? color.secondary : \"inherit\" },\n}))\n\nconst options = Object.keys(PSEUDO_STATES).sort() as (keyof typeof PSEUDO_STATES)[]\n\nexport const PseudoStateTool = () => {\n  const [globals, updateGlobals] = useGlobals()\n  const pseudo = globals[PARAM_KEY]\n\n  const isActive = useCallback(\n    (option: keyof typeof PSEUDO_STATES) => {\n      if (!pseudo) return false\n      return pseudo[option] === true\n    },\n    [pseudo]\n  )\n\n  const toggleOption = useCallback(\n    (option: keyof typeof PSEUDO_STATES) => () => {\n      updateGlobals({\n        [PARAM_KEY]: {\n          ...pseudo,\n          [option]: !isActive(option),\n        },\n      })\n    },\n    [pseudo]\n  )\n\n  return (\n    <WithTooltip\n      placement=\"top\"\n      trigger=\"click\"\n      tooltip={() => (\n        <TooltipLinkList\n          links={options.map((option) => ({\n            id: option,\n            title: <LinkTitle active={isActive(option)}>:{PSEUDO_STATES[option]}</LinkTitle>,\n            right: <LinkIcon icon=\"check\" width={12} height={12} active={isActive(option)} />,\n            onClick: toggleOption(option),\n            active: isActive(option),\n          }))}\n        />\n      )}\n    >\n      <IconButton\n        key=\"pseudo-state\"\n        title=\"Select CSS pseudo states\"\n        active={options.some(isActive)}\n      >\n        <Icons icon=\"button\" />\n      </IconButton>\n    </WithTooltip>\n  )\n}\n"]}

package/dist/preview.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/constants.ts","../src/preview/withPseudoState.ts","../src/preview/splitSelectors.ts","../src/preview/rewriteStyleSheet.ts","../src/preview.ts"],"names":["ADDON_ID","TOOL_ID","PARAM_KEY","EXCLUDED_PSEUDO_ELEMENTS","PSEUDO_STATES","DOCS_RENDERED","FORCE_REMOUNT","FORCE_RE_RENDER","GLOBALS_UPDATED","STORY_CHANGED","STORY_RENDERED","UPDATE_GLOBALS","addons","useEffect","useMemo","isAtRule","selector","splitSelectors","selectors","result","parentheses","brackets","i","len","char","pseudoStates","matchOne","matchAll","warnings","warnOnce","message","isExcludedPseudoElement","pseudoState","element","rewriteRule","cssText","selectorText","shadowRoot","states","plainSelector","_","state","classSelector","acc","classAllSelector","ancestorSelector","s","rewriteStyleSheet","sheet","shadowHosts","index","cssRule","styleRule","newRule","e","channel","applyClasses","classnames","classname","applyParameter","rootElement","parameter","map","add","target","value","el","sel","key","keyWithoutAll","updateShadowHost","shadowHost","pseudoConfig","rootSelector","pseudoStateConfig","equals","a","b","withPseudoState","StoryFn","viewMode","parameters","id","globalsArgs","globals","config","timeout","rewriteStyleSheets","styleSheets","init","decorators"],"mappings":"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","sourcesContent":["export const ADDON_ID = \"storybook/pseudo-states\"\nexport const TOOL_ID = `${ADDON_ID}/tool`\nexport const PARAM_KEY = \"pseudo\"\n\n// Pseudo-elements which are not allowed to have classes applied on them\n// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector\nexport const EXCLUDED_PSEUDO_ELEMENTS = [\"::-webkit-scrollbar-thumb\"]\n\n// Dynamic pseudo-classes\n// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos\nexport const PSEUDO_STATES = {\n  hover: \"hover\",\n  active: \"active\",\n  focusVisible: \"focus-visible\",\n  focusWithin: \"focus-within\",\n  focus: \"focus\", // must come after its alternatives\n  visited: \"visited\",\n  link: \"link\",\n  target: \"target\",\n} as const\n\nexport type PseudoState = keyof typeof PSEUDO_STATES\n","/* eslint-env browser */\nimport {\n  DOCS_RENDERED,\n  FORCE_REMOUNT,\n  FORCE_RE_RENDER,\n  GLOBALS_UPDATED,\n  STORY_CHANGED,\n  STORY_RENDERED,\n  UPDATE_GLOBALS,\n} from \"@storybook/core-events\"\nimport { DecoratorFunction } from \"@storybook/types\"\nimport { addons, useEffect, useMemo } from \"@storybook/preview-api\"\n\nimport { PSEUDO_STATES, PseudoState } from \"../constants\"\nimport { rewriteStyleSheet } from \"./rewriteStyleSheet\"\n\ntype PseudoStateConfig = {\n  [P in PseudoState]?: boolean | string | string[]\n}\n\nexport interface PseudoParameter extends PseudoStateConfig {\n  rootSelector?: string\n}\n\nconst channel = addons.getChannel()\nconst shadowHosts = new Set<Element>()\n\n// Drops any existing pseudo state classnames that carried over from a previously viewed story\n// before adding the new classnames. We use forEach for IE compatibility.\nconst applyClasses = (element: Element, classnames: Set<string>) => {\n  Object.values(PSEUDO_STATES).forEach((state) => {\n    element.classList.remove(`pseudo-${state}`)\n    element.classList.remove(`pseudo-${state}-all`)\n  })\n  classnames.forEach((classname) => element.classList.add(classname))\n}\n\nconst applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {}) => {\n  const map = new Map([[rootElement, new Set<PseudoState>()]])\n  const add = (target: Element, state: PseudoState) =>\n    map.set(target, new Set([...(map.get(target) || []), state]))\n\n  ;(Object.entries(parameter || {}) as [PseudoState, any]).forEach(([state, value]) => {\n    if (typeof value === \"boolean\") {\n      // default API - applying pseudo class to root element.\n      if (value) add(rootElement, `${state}-all` as PseudoState)\n    } else if (typeof value === \"string\") {\n      // explicit selectors API - applying pseudo class to a specific element\n      rootElement.querySelectorAll(value).forEach((el) => add(el, state))\n    } else if (Array.isArray(value)) {\n      // explicit selectors API - we have an array (of strings) recursively handle each one\n      value.forEach((sel) => rootElement.querySelectorAll(sel).forEach((el) => add(el, state)))\n    }\n  })\n\n  map.forEach((states, target) => {\n    const classnames = new Set<string>()\n    states.forEach((key) => {\n      const keyWithoutAll = key.replace(\"-all\", \"\") as PseudoState\n      if (PSEUDO_STATES[key]) {\n        classnames.add(`pseudo-${PSEUDO_STATES[key]}`)\n      } else if (PSEUDO_STATES[keyWithoutAll]) {\n        classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`)\n      }\n    })\n    applyClasses(target, classnames)\n  })\n}\n\n// Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.\n// Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.\nconst updateShadowHost = (shadowHost: Element) => {\n  const classnames = new Set<string>()\n  for (let element = shadowHost.parentElement; element; element = element.parentElement) {\n    if (!element.className) continue\n    element.className\n      .split(\" \")\n      .filter((classname) => classname.indexOf(\"pseudo-\") === 0)\n      .forEach((classname) => classnames.add(classname))\n  }\n  applyClasses(shadowHost, classnames)\n}\n\n// Drops the rootSelector from the parameter object, as it is not a pseudo state.\nconst pseudoConfig = (parameter: PseudoParameter) => {\n  const { rootSelector, ...pseudoStateConfig } = parameter || {}\n  return pseudoStateConfig\n}\n\n// Compares two pseudo state configs to see if they are equal.\n// Uses JSON.stringify to handle arrays, so the order of selectors in the array matters.\nconst equals = (a: PseudoStateConfig = {}, b: PseudoStateConfig = {}) =>\n  a !== null &&\n  b !== null &&\n  Object.keys(a).length === Object.keys(b).length &&\n  (Object.keys(a) as PseudoState[]).every(\n    (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])\n  )\n\n// Global decorator that rewrites stylesheets and applies classnames to render pseudo styles\nexport const withPseudoState: DecoratorFunction = (\n  StoryFn,\n  { viewMode, parameters, id, globals: globalsArgs }\n) => {\n  const { pseudo: parameter } = parameters\n  const { pseudo: globals } = globalsArgs\n  const { rootSelector } = parameter || {}\n\n  const rootElement = useMemo(() => {\n    if (rootSelector) {\n      return document.querySelector(rootSelector)\n    }\n    if (viewMode === \"docs\") {\n      return document.getElementById(`story--${id}`)\n    }\n    return (\n      document.getElementById(\"storybook-root\") || // Storybook 7.0+\n      document.getElementById(\"root\")\n    )\n  }, [rootSelector, viewMode, id])\n\n  // Sync parameter to globals, used by the toolbar (only in canvas as this\n  // doesn't make sense for docs because many stories are displayed at once)\n  useEffect(() => {\n    const config = pseudoConfig(parameter)\n    if (viewMode === \"story\" && !equals(config, globals)) {\n      channel.emit(UPDATE_GLOBALS, {\n        globals: { pseudo: config },\n      })\n    }\n  }, [parameter, viewMode])\n\n  // Convert selected states to classnames and apply them to the story root element.\n  // Then update each shadow host to redetermine its own pseudo classnames.\n  useEffect(() => {\n    if (!rootElement) return\n    const timeout = setTimeout(() => {\n      applyParameter(rootElement, globals || pseudoConfig(parameter))\n      shadowHosts.forEach(updateShadowHost)\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [rootElement, globals, parameter])\n\n  return StoryFn()\n}\n\n// Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector\nconst rewriteStyleSheets = (shadowRoot?: ShadowRoot) => {\n  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets)\n  if (shadowRoot?.adoptedStyleSheets?.length) styleSheets = shadowRoot.adoptedStyleSheets\n  styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts))\n}\n\n// Only track shadow hosts for the current story\nchannel.on(STORY_CHANGED, () => shadowHosts.clear())\n\n// Reinitialize CSS enhancements every time the story changes\nchannel.on(STORY_RENDERED, () => rewriteStyleSheets())\nchannel.on(GLOBALS_UPDATED, () => rewriteStyleSheets())\nchannel.on(FORCE_RE_RENDER, () => rewriteStyleSheets())\nchannel.on(FORCE_REMOUNT, () => rewriteStyleSheets())\n\n// Reinitialize CSS enhancements every time a docs page is rendered\nchannel.on(DOCS_RENDERED, () => rewriteStyleSheets())\n\n// IE doesn't support shadow DOM\nif (Element.prototype.attachShadow) {\n  // Monkeypatch the attachShadow method so we can handle pseudo styles inside shadow DOM\n  // @ts-expect-error (Monkeypatch)\n  Element.prototype._attachShadow = Element.prototype.attachShadow\n  Element.prototype.attachShadow = function attachShadow(init) {\n    // Force \"open\" mode, so we can access the shadowRoot\n    // @ts-expect-error (Monkeypatch)\n    const shadowRoot = this._attachShadow({ ...init, mode: \"open\" })\n    // Wait for it to render and apply its styles before rewriting them\n    requestAnimationFrame(() => {\n      rewriteStyleSheets(shadowRoot)\n      updateShadowHost(shadowRoot.host)\n    })\n    return shadowRoot\n  }\n}\n","const isAtRule = (selector: string) => selector.indexOf(\"@\") === 0\n\nexport const splitSelectors = (selectors: string) => {\n  if (isAtRule(selectors)) return [selectors]\n\n  let result = []\n  let parentheses = 0\n  let brackets = 0\n  let selector = \"\"\n\n  for (let i = 0, len = selectors.length; i < len; i++) {\n    const char = selectors[i]\n    if (char === \"(\") {\n      parentheses += 1\n    } else if (char === \")\") {\n      parentheses -= 1\n    } else if (char === \"[\") {\n      brackets += 1\n    } else if (char === \"]\") {\n      brackets -= 1\n    } else if (char === \",\") {\n      if (!parentheses && !brackets) {\n        result.push(selector.trim())\n        selector = \"\"\n        continue\n      }\n    }\n    selector += char\n  }\n\n  result.push(selector.trim())\n  return result\n}\n","import { PSEUDO_STATES, EXCLUDED_PSEUDO_ELEMENTS } from \"../constants\"\nimport { splitSelectors } from \"./splitSelectors\"\n\nconst pseudoStates = Object.values(PSEUDO_STATES)\nconst matchOne = new RegExp(`:(${pseudoStates.join(\"|\")})`)\nconst matchAll = new RegExp(`:(${pseudoStates.join(\"|\")})`, \"g\")\n\nconst warnings = new Set()\nconst warnOnce = (message: string) => {\n  if (warnings.has(message)) return\n  // eslint-disable-next-line no-console\n  console.warn(message)\n  warnings.add(message)\n}\n\nconst isExcludedPseudoElement = (selector: string, pseudoState: string) =>\n  EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`))\n\nconst rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: ShadowRoot) => {\n  return cssText.replace(\n    selectorText,\n    splitSelectors(selectorText)\n      .flatMap((selector) => {\n        if (selector.includes(\".pseudo-\")) {\n          return []\n        }\n        if (!matchOne.test(selector)) {\n          return [selector]\n        }\n\n        const states: string[] = []\n        const plainSelector = selector.replace(matchAll, (_, state) => {\n          states.push(state)\n          return \"\"\n        })\n        const classSelector = states.reduce((acc, state) => {\n          if (isExcludedPseudoElement(selector, state)) return \"\"\n          return acc.replace(new RegExp(`:${state}`, \"g\"), `.pseudo-${state}`)\n        }, selector)\n\n        const classAllSelector = states.reduce((acc, state) => {\n          if (isExcludedPseudoElement(selector, state)) return \"\"\n          return acc.replace(new RegExp(`:${state}`, \"g\"), `.pseudo-${state}-all`)\n        }, selector)\n\n        if (selector.startsWith(\":host(\") || selector.startsWith(\"::slotted(\")) {\n          return [selector, classSelector, classAllSelector].filter(Boolean)\n        }\n\n        const ancestorSelector = shadowRoot\n          ? `:host(${states.map((s) => `.pseudo-${s}-all`).join(\"\")}) ${plainSelector}`\n          : `${states.map((s) => `.pseudo-${s}-all`).join(\"\")} ${plainSelector}`\n\n        return [selector, classSelector, ancestorSelector].filter(\n          (selector) => selector && !selector.includes(\":not()\")\n        )\n      })\n      .join(\", \")\n  )\n}\n\n// Rewrites the style sheet to add alternative selectors for any rule that targets a pseudo state.\n// A sheet can only be rewritten once, and may carry over between stories.\nexport const rewriteStyleSheet = (\n  sheet: CSSStyleSheet,\n  shadowRoot?: ShadowRoot,\n  shadowHosts?: Set<Element>\n) => {\n  try {\n    let index = -1\n    for (const cssRule of sheet.cssRules) {\n      index++\n\n      // @ts-expect-error\n      if (cssRule.__pseudoStatesRewritten || !(\"selectorText\" in cssRule)) continue\n\n      const styleRule = cssRule as CSSStyleRule\n      if (matchOne.test(styleRule.selectorText)) {\n        const newRule = rewriteRule(styleRule, shadowRoot)\n        sheet.deleteRule(index)\n        sheet.insertRule(newRule, index)\n        if (shadowRoot && shadowHosts) shadowHosts.add(shadowRoot.host)\n      }\n\n      // @ts-expect-error\n      cssRule.__pseudoStatesRewritten = true\n\n      if (index > 1000) {\n        warnOnce(\"Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.\")\n        break\n      }\n    }\n  } catch (e) {\n    if (String(e).includes(\"cssRules\")) {\n      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`)\n    } else {\n      // eslint-disable-next-line no-console\n      console.error(e, sheet.href)\n    }\n  }\n}\n","import { PARAM_KEY } from \"./constants\"\nimport { withPseudoState } from \"./preview/withPseudoState\"\n\nexport const decorators = [withPseudoState]\nexport const globals = { [PARAM_KEY]: false }\n"]}

package/dist/preview.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/constants.ts","../src/preview/withPseudoState.ts","../src/preview/splitSelectors.ts","../src/preview/rewriteStyleSheet.ts","../src/preview.ts"],"names":["ADDON_ID","TOOL_ID","PARAM_KEY","EXCLUDED_PSEUDO_ELEMENTS","PSEUDO_STATES","DOCS_RENDERED","FORCE_REMOUNT","FORCE_RE_RENDER","GLOBALS_UPDATED","STORY_CHANGED","STORY_RENDERED","UPDATE_GLOBALS","addons","useEffect","useMemo","isAtRule","selector","splitSelectors","selectors","result","parentheses","brackets","i","len","char","pseudoStates","matchOne","matchAll","warnings","warnOnce","message","isExcludedPseudoElement","pseudoState","element","rewriteRule","cssText","selectorText","shadowRoot","states","plainSelector","_","state","classSelector","acc","classAllSelector","ancestorSelector","s","rewriteStyleSheet","sheet","shadowHosts","index","cssRule","styleRule","newRule","e","channel","applyClasses","classnames","classname","applyParameter","rootElement","parameter","map","add","target","value","el","sel","key","keyWithoutAll","updateShadowHost","shadowHost","pseudoConfig","rootSelector","pseudoStateConfig","equals","a","b","withPseudoState","StoryFn","viewMode","parameters","id","globalsArgs","globals","config","timeout","rewriteStyleSheets","styleSheets","init","decorators"],"mappings":"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","sourcesContent":["export const ADDON_ID = \"storybook/pseudo-states\"\nexport const TOOL_ID = `${ADDON_ID}/tool`\nexport const PARAM_KEY = \"pseudo\"\n\n// Pseudo-elements which are not allowed to have classes applied on them\n// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector\nexport const EXCLUDED_PSEUDO_ELEMENTS = [\"::-webkit-scrollbar-thumb\"]\n\n// Dynamic pseudo-classes\n// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos\nexport const PSEUDO_STATES = {\n  hover: \"hover\",\n  active: \"active\",\n  focusVisible: \"focus-visible\",\n  focusWithin: \"focus-within\",\n  focus: \"focus\", // must come after its alternatives\n  visited: \"visited\",\n  link: \"link\",\n  target: \"target\",\n} as const\n\nexport type PseudoState = keyof typeof PSEUDO_STATES\n","/* eslint-env browser */\nimport {\n  DOCS_RENDERED,\n  FORCE_REMOUNT,\n  FORCE_RE_RENDER,\n  GLOBALS_UPDATED,\n  STORY_CHANGED,\n  STORY_RENDERED,\n  UPDATE_GLOBALS,\n} from \"@storybook/core-events\"\nimport { DecoratorFunction } from \"@storybook/types\"\nimport { addons, useEffect, useMemo } from \"@storybook/preview-api\"\n\nimport { PSEUDO_STATES, PseudoState } from \"../constants\"\nimport { rewriteStyleSheet } from \"./rewriteStyleSheet\"\n\ntype PseudoStateConfig = {\n  [P in PseudoState]?: boolean | string | string[]\n}\n\nexport interface PseudoParameter extends PseudoStateConfig {\n  rootSelector?: string\n}\n\nconst channel = addons.getChannel()\nconst shadowHosts = new Set<Element>()\n\n// Drops any existing pseudo state classnames that carried over from a previously viewed story\n// before adding the new classnames. We use forEach for IE compatibility.\nconst applyClasses = (element: Element, classnames: Set<string>) => {\n  Object.values(PSEUDO_STATES).forEach((state) => {\n    element.classList.remove(`pseudo-${state}`)\n    element.classList.remove(`pseudo-${state}-all`)\n  })\n  classnames.forEach((classname) => element.classList.add(classname))\n}\n\nconst applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {}) => {\n  const map = new Map([[rootElement, new Set<PseudoState>()]])\n  const add = (target: Element, state: PseudoState) =>\n    map.set(target, new Set([...(map.get(target) || []), state]))\n\n  ;(Object.entries(parameter || {}) as [PseudoState, any]).forEach(([state, value]) => {\n    if (typeof value === \"boolean\") {\n      // default API - applying pseudo class to root element.\n      if (value) add(rootElement, `${state}-all` as PseudoState)\n    } else if (typeof value === \"string\") {\n      // explicit selectors API - applying pseudo class to a specific element\n      rootElement.querySelectorAll(value).forEach((el) => add(el, state))\n    } else if (Array.isArray(value)) {\n      // explicit selectors API - we have an array (of strings) recursively handle each one\n      value.forEach((sel) => rootElement.querySelectorAll(sel).forEach((el) => add(el, state)))\n    }\n  })\n\n  map.forEach((states, target) => {\n    const classnames = new Set<string>()\n    states.forEach((key) => {\n      const keyWithoutAll = key.replace(\"-all\", \"\") as PseudoState\n      if (PSEUDO_STATES[key]) {\n        classnames.add(`pseudo-${PSEUDO_STATES[key]}`)\n      } else if (PSEUDO_STATES[keyWithoutAll]) {\n        classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`)\n      }\n    })\n    applyClasses(target, classnames)\n  })\n}\n\n// Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.\n// Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.\nconst updateShadowHost = (shadowHost: Element) => {\n  const classnames = new Set<string>()\n  for (let element = shadowHost.parentElement; element; element = element.parentElement) {\n    if (!element.className) continue\n    element.className\n      .split(\" \")\n      .filter((classname) => classname.indexOf(\"pseudo-\") === 0)\n      .forEach((classname) => classnames.add(classname))\n  }\n  applyClasses(shadowHost, classnames)\n}\n\n// Drops the rootSelector from the parameter object, as it is not a pseudo state.\nconst pseudoConfig = (parameter: PseudoParameter) => {\n  const { rootSelector, ...pseudoStateConfig } = parameter || {}\n  return pseudoStateConfig\n}\n\n// Compares two pseudo state configs to see if they are equal.\n// Uses JSON.stringify to handle arrays, so the order of selectors in the array matters.\nconst equals = (a: PseudoStateConfig = {}, b: PseudoStateConfig = {}) =>\n  a !== null &&\n  b !== null &&\n  Object.keys(a).length === Object.keys(b).length &&\n  (Object.keys(a) as PseudoState[]).every(\n    (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])\n  )\n\n// Global decorator that rewrites stylesheets and applies classnames to render pseudo styles\nexport const withPseudoState: DecoratorFunction = (\n  StoryFn,\n  { viewMode, parameters, id, globals: globalsArgs }\n) => {\n  const { pseudo: parameter } = parameters\n  const { pseudo: globals } = globalsArgs\n  const { rootSelector } = parameter || {}\n\n  const rootElement = useMemo(() => {\n    if (rootSelector) {\n      return document.querySelector(rootSelector)\n    }\n    if (viewMode === \"docs\") {\n      return document.getElementById(`story--${id}`)\n    }\n    return (\n      document.getElementById(\"storybook-root\") || // Storybook 7.0+\n      document.getElementById(\"root\")\n    )\n  }, [rootSelector, viewMode, id])\n\n  // Sync parameter to globals, used by the toolbar (only in canvas as this\n  // doesn't make sense for docs because many stories are displayed at once)\n  useEffect(() => {\n    const config = pseudoConfig(parameter)\n    if (viewMode === \"story\" && !equals(config, globals)) {\n      channel.emit(UPDATE_GLOBALS, {\n        globals: { pseudo: config },\n      })\n    }\n  }, [parameter, viewMode])\n\n  // Convert selected states to classnames and apply them to the story root element.\n  // Then update each shadow host to redetermine its own pseudo classnames.\n  useEffect(() => {\n    if (!rootElement) return\n    const timeout = setTimeout(() => {\n      applyParameter(rootElement, globals || pseudoConfig(parameter))\n      shadowHosts.forEach(updateShadowHost)\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [rootElement, globals, parameter])\n\n  return StoryFn()\n}\n\n// Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector\nconst rewriteStyleSheets = (shadowRoot?: ShadowRoot) => {\n  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets)\n  if (shadowRoot?.adoptedStyleSheets?.length) styleSheets = shadowRoot.adoptedStyleSheets\n  styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts))\n}\n\n// Only track shadow hosts for the current story\nchannel.on(STORY_CHANGED, () => shadowHosts.clear())\n\n// Reinitialize CSS enhancements every time the story changes\nchannel.on(STORY_RENDERED, () => rewriteStyleSheets())\nchannel.on(GLOBALS_UPDATED, () => rewriteStyleSheets())\nchannel.on(FORCE_RE_RENDER, () => rewriteStyleSheets())\nchannel.on(FORCE_REMOUNT, () => rewriteStyleSheets())\n\n// Reinitialize CSS enhancements every time a docs page is rendered\nchannel.on(DOCS_RENDERED, () => rewriteStyleSheets())\n\n// IE doesn't support shadow DOM\nif (Element.prototype.attachShadow) {\n  // Monkeypatch the attachShadow method so we can handle pseudo styles inside shadow DOM\n  // @ts-expect-error (Monkeypatch)\n  Element.prototype._attachShadow = Element.prototype.attachShadow\n  Element.prototype.attachShadow = function attachShadow(init) {\n    // Force \"open\" mode, so we can access the shadowRoot\n    // @ts-expect-error (Monkeypatch)\n    const shadowRoot = this._attachShadow({ ...init, mode: \"open\" })\n    // Wait for it to render and apply its styles before rewriting them\n    requestAnimationFrame(() => {\n      rewriteStyleSheets(shadowRoot)\n      updateShadowHost(shadowRoot.host)\n    })\n    return shadowRoot\n  }\n}\n","const isAtRule = (selector: string) => selector.indexOf(\"@\") === 0\n\nexport const splitSelectors = (selectors: string) => {\n  if (isAtRule(selectors)) return [selectors]\n\n  let result = []\n  let parentheses = 0\n  let brackets = 0\n  let selector = \"\"\n\n  for (let i = 0, len = selectors.length; i < len; i++) {\n    const char = selectors[i]\n    if (char === \"(\") {\n      parentheses += 1\n    } else if (char === \")\") {\n      parentheses -= 1\n    } else if (char === \"[\") {\n      brackets += 1\n    } else if (char === \"]\") {\n      brackets -= 1\n    } else if (char === \",\") {\n      if (!parentheses && !brackets) {\n        result.push(selector.trim())\n        selector = \"\"\n        continue\n      }\n    }\n    selector += char\n  }\n\n  result.push(selector.trim())\n  return result\n}\n","import { PSEUDO_STATES, EXCLUDED_PSEUDO_ELEMENTS } from \"../constants\"\nimport { splitSelectors } from \"./splitSelectors\"\n\nconst pseudoStates = Object.values(PSEUDO_STATES)\nconst matchOne = new RegExp(`:(${pseudoStates.join(\"|\")})`)\nconst matchAll = new RegExp(`:(${pseudoStates.join(\"|\")})`, \"g\")\n\nconst warnings = new Set()\nconst warnOnce = (message: string) => {\n  if (warnings.has(message)) return\n  // eslint-disable-next-line no-console\n  console.warn(message)\n  warnings.add(message)\n}\n\nconst isExcludedPseudoElement = (selector: string, pseudoState: string) =>\n  EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`))\n\nconst rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: ShadowRoot) => {\n  return cssText.replace(\n    selectorText,\n    splitSelectors(selectorText)\n      .flatMap((selector) => {\n        if (selector.includes(\".pseudo-\")) {\n          return []\n        }\n        if (!matchOne.test(selector)) {\n          return [selector]\n        }\n\n        const states: string[] = []\n        const plainSelector = selector.replace(matchAll, (_, state) => {\n          states.push(state)\n          return \"\"\n        })\n        const classSelector = states.reduce((acc, state) => {\n          if (isExcludedPseudoElement(selector, state)) return \"\"\n          return acc.replace(new RegExp(`:${state}`, \"g\"), `.pseudo-${state}`)\n        }, selector)\n\n        const classAllSelector = states.reduce((acc, state) => {\n          if (isExcludedPseudoElement(selector, state)) return \"\"\n          return acc.replace(new RegExp(`:${state}`, \"g\"), `.pseudo-${state}-all`)\n        }, selector)\n\n        if (selector.startsWith(\":host(\") || selector.startsWith(\"::slotted(\")) {\n          return [selector, classSelector, classAllSelector].filter(Boolean)\n        }\n\n        const ancestorSelector = shadowRoot\n          ? `:host(${states.map((s) => `.pseudo-${s}-all`).join(\"\")}) ${plainSelector}`\n          : `${states.map((s) => `.pseudo-${s}-all`).join(\"\")} ${plainSelector}`\n\n        return [selector, classSelector, ancestorSelector].filter(\n          (selector) => selector && !selector.includes(\":not()\")\n        )\n      })\n      .join(\", \")\n  )\n}\n\n// Rewrites the style sheet to add alternative selectors for any rule that targets a pseudo state.\n// A sheet can only be rewritten once, and may carry over between stories.\nexport const rewriteStyleSheet = (\n  sheet: CSSStyleSheet,\n  shadowRoot?: ShadowRoot,\n  shadowHosts?: Set<Element>\n) => {\n  try {\n    let index = -1\n    for (const cssRule of sheet.cssRules) {\n      index++\n\n      // @ts-expect-error\n      if (cssRule.__pseudoStatesRewritten || !(\"selectorText\" in cssRule)) continue\n\n      const styleRule = cssRule as CSSStyleRule\n      if (matchOne.test(styleRule.selectorText)) {\n        const newRule = rewriteRule(styleRule, shadowRoot)\n        sheet.deleteRule(index)\n        sheet.insertRule(newRule, index)\n        if (shadowRoot && shadowHosts) shadowHosts.add(shadowRoot.host)\n      }\n\n      // @ts-expect-error\n      cssRule.__pseudoStatesRewritten = true\n\n      if (index > 1000) {\n        warnOnce(\"Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.\")\n        break\n      }\n    }\n  } catch (e) {\n    if (String(e).includes(\"cssRules\")) {\n      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`)\n    } else {\n      // eslint-disable-next-line no-console\n      console.error(e, sheet.href)\n    }\n  }\n}\n","import { PARAM_KEY } from \"./constants\"\nimport { withPseudoState } from \"./preview/withPseudoState\"\n\nexport const decorators = [withPseudoState]\nexport const globals = { [PARAM_KEY]: false }\n"]}