storybook-addon-pseudo-states 9.2.0-alpha.3 → 10.0.0-beta.0

package/README.md

@@ -81,3 +81,5 @@ DialogButton.parameters = {
   pseudo: { hover: true, rootSelector: 'body' },
 };
 ```
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

package/dist/_browser-chunks/chunk-5GW7LIKW.js

@@ -0,0 +1,369 @@
+import {
+  EXCLUDED_PSEUDO_ELEMENT_PATTERNS,
+  EXCLUDED_PSEUDO_ESCAPE_SEQUENCE,
+  PARAM_KEY,
+  PSEUDO_STATES,
+  __export,
+  __name
+} from "./chunk-7CQCSQMX.js";
+
+// src/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  decorators: () => decorators,
+  initialGlobals: () => initialGlobals
+});
+
+// src/preview/withPseudoState.ts
+import {
+  DOCS_RENDERED,
+  FORCE_REMOUNT,
+  FORCE_RE_RENDER,
+  GLOBALS_UPDATED,
+  STORY_CHANGED,
+  STORY_RENDERED,
+  UPDATE_GLOBALS
+} from "storybook/internal/core-events";
+import { addons, useEffect, useMemo, useRef } from "storybook/preview-api";
+
+// src/preview/splitSelectors.ts
+var isAtRule = /* @__PURE__ */ __name((selector) => selector.indexOf("@") === 0, "isAtRule");
+var splitSelectors = /* @__PURE__ */ __name((selectors) => {
+  if (isAtRule(selectors)) {
+    return [selectors];
+  }
+  const 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;
+}, "splitSelectors");
+
+// src/preview/rewriteStyleSheet.ts
+var pseudoStates = Object.values(PSEUDO_STATES);
+var pseudoStatesPattern = `${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:(${pseudoStates.join("|")})`;
+var matchOne = new RegExp(pseudoStatesPattern);
+var matchAll = new RegExp(pseudoStatesPattern, "g");
+var warnings = /* @__PURE__ */ new Set();
+var warnOnce = /* @__PURE__ */ __name((message) => {
+  if (warnings.has(message)) {
+    return;
+  }
+  console.warn(message);
+  warnings.add(message);
+}, "warnOnce");
+var replacePseudoStates = /* @__PURE__ */ __name((selector, allClass) => {
+  const negativeLookbehind = `(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;
+  return pseudoStates.reduce(
+    (acc, state) => acc.replace(
+      new RegExp(`${negativeLookbehind}${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:${state}`, "g"),
+      `.pseudo-${state}${allClass ? "-all" : ""}`
+    ),
+    selector
+  );
+}, "replacePseudoStates");
+var replacePseudoStatesWithAncestorSelector = /* @__PURE__ */ __name((selector, forShadowDOM, additionalHostSelectors) => {
+  const extracted = extractPseudoStates(selector);
+  if (extracted.states.length === 0 && !additionalHostSelectors) {
+    return selector;
+  }
+  const selectors = `${additionalHostSelectors ?? ""}${extracted.states.map((s) => `.pseudo-${s}-all`).join("")}`;
+  let { withoutPseudoStates } = extracted;
+  withoutPseudoStates = withoutPseudoStates.replace(":host-context(*)", "").trimStart();
+  return withoutPseudoStates.startsWith(":host-context(") ? withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/, `)${selectors}`) : forShadowDOM ? `:host(${selectors}) ${withoutPseudoStates}` : `${selectors} ${withoutPseudoStates}`;
+}, "replacePseudoStatesWithAncestorSelector");
+var extractPseudoStates = /* @__PURE__ */ __name((selector) => {
+  const states = /* @__PURE__ */ new Set();
+  const withoutPseudoStates = selector.replace(matchAll, (_, state) => {
+    states.add(state);
+    return "";
+  }).replaceAll(/(?<!is)\(\)/g, "(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g, "") || "*";
+  return {
+    states: Array.from(states),
+    withoutPseudoStates
+  };
+}, "extractPseudoStates");
+var rewriteNotSelectors = /* @__PURE__ */ __name((selector, forShadowDOM) => {
+  return [...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc, match) => {
+    const originalNot = match[0];
+    const selectorList = match[1];
+    const rewrittenNot = rewriteNotSelector(selectorList, forShadowDOM);
+    return acc.replace(originalNot, rewrittenNot);
+  }, selector);
+}, "rewriteNotSelectors");
+var rewriteNotSelector = /* @__PURE__ */ __name((negatedSelectorList, forShadowDOM) => {
+  const rewrittenSelectors = [];
+  for (const negatedSelector of negatedSelectorList.split(/,\s*/)) {
+    rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector, forShadowDOM));
+  }
+  return `:not(${rewrittenSelectors.join(", ")})`;
+}, "rewriteNotSelector");
+var rewriteRule = /* @__PURE__ */ __name(({ cssText, selectorText }, forShadowDOM) => {
+  return cssText.replace(
+    selectorText,
+    splitSelectors(selectorText).flatMap((selector) => {
+      if (selector.includes(".pseudo-")) {
+        return [];
+      }
+      const replacementSelectors = [selector];
+      if (!matchOne.test(selector)) {
+        return replacementSelectors;
+      }
+      const classSelector = replacePseudoStates(selector);
+      if (classSelector !== selector) {
+        replacementSelectors.push(classSelector);
+      }
+      let ancestorSelector = "";
+      if (selector.startsWith(":host(")) {
+        const matches = selector.match(/^:host\((\S+)\)\s+(.+)$/);
+        if (matches && matchOne.test(matches[2])) {
+          let hostInnerSelector = matches[1];
+          let descendantSelector = matches[2];
+          hostInnerSelector = replacePseudoStates(hostInnerSelector, true);
+          descendantSelector = rewriteNotSelectors(descendantSelector, true);
+          ancestorSelector = replacePseudoStatesWithAncestorSelector(
+            descendantSelector,
+            true,
+            hostInnerSelector
+          );
+        } else {
+          ancestorSelector = replacePseudoStates(selector, true);
+        }
+      } else {
+        const withNotsReplaced = rewriteNotSelectors(selector, forShadowDOM);
+        ancestorSelector = replacePseudoStatesWithAncestorSelector(
+          withNotsReplaced,
+          forShadowDOM
+        );
+      }
+      replacementSelectors.push(ancestorSelector);
+      return replacementSelectors;
+    }).join(", ")
+  );
+}, "rewriteRule");
+var rewriteStyleSheet = /* @__PURE__ */ __name((sheet, forShadowDOM = false) => {
+  try {
+    const maximumRulesToRewrite = 1e3;
+    const count = rewriteRuleContainer(sheet, maximumRulesToRewrite, forShadowDOM);
+    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;
+  }
+}, "rewriteStyleSheet");
+var rewriteRuleContainer = /* @__PURE__ */ __name((ruleContainer, rewriteLimit, forShadowDOM) => {
+  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,
+          forShadowDOM
+        );
+      } else {
+        if (!("selectorText" in cssRule)) {
+          continue;
+        }
+        const styleRule = cssRule;
+        if (matchOne.test(styleRule.selectorText)) {
+          const newRule = rewriteRule(styleRule, forShadowDOM);
+          ruleContainer.deleteRule(index);
+          ruleContainer.insertRule(newRule, index);
+          numRewritten = 1;
+        }
+      }
+      cssRule.__processed = true;
+      cssRule.__pseudoStatesRewrittenCount = numRewritten;
+    }
+    count += numRewritten;
+    if (count >= rewriteLimit) {
+      break;
+    }
+  }
+  return count;
+}, "rewriteRuleContainer");
+
+// src/preview/withPseudoState.ts
+var channel = addons.getChannel();
+var shadowHosts = /* @__PURE__ */ new Set();
+var applyClasses = /* @__PURE__ */ __name((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));
+}, "applyClasses");
+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;
+}
+__name(querySelectorPiercingShadowDOM, "querySelectorPiercingShadowDOM");
+var applyParameter = /* @__PURE__ */ __name((rootElement, parameter = {}) => {
+  const map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]);
+  const add = /* @__PURE__ */ __name((target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state])), "add");
+  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);
+  });
+}, "applyParameter");
+var updateShadowHost = /* @__PURE__ */ __name((shadowHost) => {
+  const classnames = /* @__PURE__ */ new Set();
+  shadowHost.className.split(" ").filter((classname) => classname.match(/^pseudo-(.(?!-all))+$/)).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);
+}, "updateShadowHost");
+var pseudoConfig = /* @__PURE__ */ __name((parameter) => {
+  const { rootSelector, ...pseudoStateConfig } = parameter || {};
+  return pseudoStateConfig;
+}, "pseudoConfig");
+var equals = /* @__PURE__ */ __name((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])
+), "equals");
+var withPseudoState = /* @__PURE__ */ __name((StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
+  const { pseudo: parameter } = parameters;
+  const { pseudo: globals } = 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]);
+  const globalsRef = useRef(globals);
+  useEffect(() => {
+    const config = pseudoConfig(parameter);
+    if (viewMode === "story" && !equals(config, globalsRef.current)) {
+      channel.emit(UPDATE_GLOBALS, {
+        globals: { pseudo: config }
+      });
+    }
+  }, [parameter, viewMode]);
+  useEffect(() => {
+    if (!rootElement) {
+      return;
+    }
+    const timeout = setTimeout(() => {
+      applyParameter(rootElement, globals || pseudoConfig(parameter));
+      shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [rootElement, globals, parameter]);
+  return StoryFn();
+}, "withPseudoState");
+var rewriteStyleSheets = /* @__PURE__ */ __name((shadowRoot) => {
+  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
+  if (shadowRoot?.adoptedStyleSheets?.length) {
+    styleSheets = shadowRoot.adoptedStyleSheets;
+  }
+  styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, !!shadowRoot));
+  if (shadowRoot && shadowHosts) {
+    shadowHosts.add(shadowRoot.host);
+  }
+}, "rewriteStyleSheets");
+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 = /* @__PURE__ */ __name(function attachShadow(init) {
+    const shadowRoot = this._attachShadow({ ...init, mode: "open" });
+    requestAnimationFrame(() => {
+      rewriteStyleSheets(shadowRoot);
+      if (shadowHosts.has(shadowRoot.host)) {
+        updateShadowHost(shadowRoot.host);
+      }
+    });
+    return shadowRoot;
+  }, "attachShadow");
+}
+
+// src/preview.ts
+var decorators = [withPseudoState];
+var initialGlobals = {
+  [PARAM_KEY]: false
+};
+
+export {
+  decorators,
+  initialGlobals,
+  preview_exports
+};

package/dist/_browser-chunks/chunk-7CQCSQMX.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/constants.ts
+var ADDON_ID = "storybook/pseudo-states";
+var TOOL_ID = `${ADDON_ID}/tool`;
+var PARAM_KEY = "pseudo";
+var EXCLUDED_PSEUDO_ELEMENT_PATTERNS = ["::-(webkit|moz|ms)-[a-z-]+", "::part\\([^)]+\\)"];
+var EXCLUDED_PSEUDO_ESCAPE_SEQUENCE = "(?<=(?<!\\\\)(?:\\\\\\\\)*)";
+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 {
+  __name,
+  __export,
+  ADDON_ID,
+  TOOL_ID,
+  PARAM_KEY,
+  EXCLUDED_PSEUDO_ELEMENT_PATTERNS,
+  EXCLUDED_PSEUDO_ESCAPE_SEQUENCE,
+  PSEUDO_STATES
+};

package/dist/index.js

@@ -1,12 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var csf = require('storybook/internal/csf');
-var coreEvents = require('storybook/internal/core-events');
-var previewApi = require('storybook/preview-api');
-
-var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators,initialGlobals:()=>initialGlobals});var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],EXCLUDED_PSEUDO_ESCAPE_SEQUENCE="(?<=(?<!\\\\)(?:\\\\\\\\)*)",PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let 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,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=previewApi.addons.getChannel(),shadowHosts=new Set,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){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=previewApi.useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=previewApi.useRef(globals);return previewApi.useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(coreEvents.UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),previewApi.useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),shadowRoot&&shadowHosts&&shadowHosts.add(shadowRoot.host);};channel.on(coreEvents.STORY_CHANGED,()=>shadowHosts.clear());channel.on(coreEvents.STORY_RENDERED,()=>rewriteStyleSheets());channel.on(coreEvents.GLOBALS_UPDATED,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_RE_RENDER,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_REMOUNT,()=>rewriteStyleSheets());channel.on(coreEvents.DOCS_RENDERED,()=>rewriteStyleSheets());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};var index_default=()=>csf.definePreviewAddon(preview_exports);
-
-exports.PARAM_KEY = PARAM_KEY;
-exports.default = index_default;
+import {
+  preview_exports
+} from "./_browser-chunks/chunk-5GW7LIKW.js";
+import {
+  PARAM_KEY,
+  __name
+} from "./_browser-chunks/chunk-7CQCSQMX.js";
+
+// src/index.ts
+import { definePreviewAddon } from "storybook/internal/csf";
+var index_default = /* @__PURE__ */ __name(() => definePreviewAddon(preview_exports), "default");
+export {
+  PARAM_KEY,
+  index_default as default
+};

package/dist/manager.js

@@ -1,7 +1,78 @@
-import { addons, types, useGlobals } from 'storybook/manager-api';
-import React, { useCallback } from 'react';
-import { Form, WithTooltip, TooltipLinkList, IconButton } from 'storybook/internal/components';
-import { styled, color } from 'storybook/internal/theming';
-import { RefreshIcon, ButtonIcon } from '@storybook/icons';
+import {
+  ADDON_ID,
+  PARAM_KEY,
+  PSEUDO_STATES,
+  TOOL_ID,
+  __name
+} from "./_browser-chunks/chunk-7CQCSQMX.js";
 
-var ADDON_ID="storybook/pseudo-states",TOOL_ID=`${ADDON_ID}/tool`,PARAM_KEY="pseudo";var PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var LinkTitle=styled.span(({active})=>({color:active?color.secondary:"inherit"})),options=Object.keys(PSEUDO_STATES).sort(),PseudoStateTool=()=>{let[globals,updateGlobals]=useGlobals(),pseudo=globals[PARAM_KEY],isActive=useCallback(option=>pseudo?pseudo[option]===!0:!1,[pseudo]),hasActive=options.some(isActive),reset={id:"reset",title:"Reset pseudo states",icon:React.createElement(RefreshIcon,{style:{opacity:hasActive?1:.7}}),disabled:!hasActive,onClick:()=>updateGlobals({[PARAM_KEY]:{}})},toggleOption=useCallback(option=>()=>{let{[option]:value,...rest}=pseudo;updateGlobals({[PARAM_KEY]:value===!0?rest:{...rest,[option]:!0}});},[pseudo,updateGlobals]),links=options.map(option=>{let active=isActive(option);return {id:option,title:React.createElement(LinkTitle,{active},":",PSEUDO_STATES[option]),input:React.createElement(Form.Checkbox,{checked:active,onChange:toggleOption(option)}),active}});return React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnOutsideClick:!0,tooltip:React.createElement(TooltipLinkList,{links:[[reset],links]})},React.createElement(IconButton,{key:"pseudo-states",title:"Select CSS pseudo states",active:hasActive},React.createElement(ButtonIcon,null)))};addons.register(ADDON_ID,()=>{addons.add(TOOL_ID,{type:types.TOOL,title:"CSS pseudo states",match:({viewMode})=>viewMode==="story",render:PseudoStateTool});});
+// src/manager.ts
+import { addons, types } from "storybook/manager-api";
+
+// src/manager/PseudoStateTool.tsx
+import React, { useCallback } from "react";
+import { Form, IconButton, TooltipLinkList, WithTooltip } from "storybook/internal/components";
+import { color, styled } from "storybook/internal/theming";
+import { ButtonIcon, RefreshIcon } from "@storybook/icons";
+import { useGlobals } from "storybook/manager-api";
+var LinkTitle = styled.span(({ active }) => ({
+  color: active ? color.secondary : "inherit"
+}));
+var options = Object.keys(PSEUDO_STATES).sort();
+var PseudoStateTool = /* @__PURE__ */ __name(() => {
+  const [globals, updateGlobals] = useGlobals();
+  const pseudo = globals[PARAM_KEY];
+  const isActive = useCallback(
+    (option) => {
+      if (!pseudo) {
+        return false;
+      }
+      return pseudo[option] === true;
+    },
+    [pseudo]
+  );
+  const hasActive = options.some(isActive);
+  const reset = {
+    id: "reset",
+    title: "Reset pseudo states",
+    icon: React.createElement(RefreshIcon, { style: { opacity: hasActive ? 1 : 0.7 } }),
+    disabled: !hasActive,
+    onClick: /* @__PURE__ */ __name(() => updateGlobals({ [PARAM_KEY]: {} }), "onClick")
+  };
+  const toggleOption = useCallback(
+    (option) => () => {
+      const { [option]: value, ...rest } = pseudo;
+      updateGlobals({ [PARAM_KEY]: value === true ? rest : { ...rest, [option]: true } });
+    },
+    [pseudo, updateGlobals]
+  );
+  const links = options.map((option) => {
+    const active = isActive(option);
+    return {
+      id: option,
+      title: React.createElement(LinkTitle, { active }, ":", PSEUDO_STATES[option]),
+      input: React.createElement(Form.Checkbox, { checked: active, onChange: toggleOption(option) }),
+      active
+    };
+  });
+  return React.createElement(
+    WithTooltip,
+    {
+      placement: "top",
+      trigger: "click",
+      closeOnOutsideClick: true,
+      tooltip: React.createElement(TooltipLinkList, { links: [[reset], links] })
+    },
+    React.createElement(IconButton, { key: "pseudo-states", title: "Select CSS pseudo states", active: hasActive }, React.createElement(ButtonIcon, null))
+  );
+}, "PseudoStateTool");
+
+// src/manager.ts
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: "CSS pseudo states",
+    match: /* @__PURE__ */ __name(({ viewMode }) => viewMode === "story", "match"),
+    render: PseudoStateTool
+  });
+});

package/dist/preview.d.ts

@@ -1,6 +1,6 @@
-import * as core_dist_csf from 'storybook/internal/csf';
+import * as storybook_internal_csf from 'storybook/internal/csf';
 
-declare const decorators: core_dist_csf.DecoratorFunction[];
+declare const decorators: storybook_internal_csf.DecoratorFunction[];
 declare const initialGlobals: {
     pseudo: boolean;
 };

package/dist/preview.js

@@ -1,9 +1,9 @@
-'use strict';
-
-var coreEvents = require('storybook/internal/core-events');
-var previewApi = require('storybook/preview-api');
-
-var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],EXCLUDED_PSEUDO_ESCAPE_SEQUENCE="(?<=(?<!\\\\)(?:\\\\\\\\)*)",PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let 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,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=previewApi.addons.getChannel(),shadowHosts=new Set,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){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=previewApi.useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=previewApi.useRef(globals);return previewApi.useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(coreEvents.UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),previewApi.useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),shadowRoot&&shadowHosts&&shadowHosts.add(shadowRoot.host);};channel.on(coreEvents.STORY_CHANGED,()=>shadowHosts.clear());channel.on(coreEvents.STORY_RENDERED,()=>rewriteStyleSheets());channel.on(coreEvents.GLOBALS_UPDATED,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_RE_RENDER,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_REMOUNT,()=>rewriteStyleSheets());channel.on(coreEvents.DOCS_RENDERED,()=>rewriteStyleSheets());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};
-
-exports.decorators = decorators;
-exports.initialGlobals = initialGlobals;
+import {
+  decorators,
+  initialGlobals
+} from "./_browser-chunks/chunk-5GW7LIKW.js";
+import "./_browser-chunks/chunk-7CQCSQMX.js";
+export {
+  decorators,
+  initialGlobals
+};

package/manager.js

@@ -1 +1 @@
-import './dist/manager';
+export * from './dist/manager.js';

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "9.2.0-alpha.3",
-  "description": "CSS pseudo states for Storybook",
+  "version": "10.0.0-beta.0",
+  "description": "Storybook Pseudo-states addon: Manipulate CSS pseudo states",
   "keywords": [
     "storybook",
+    "storybook-addon",
+    "css",
     "pseudo states",
     "style",
-    "test"
+    "test",
+    "component",
+    "components",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "web-components"
   ],
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/pseudo-states",
   "bugs": {
@@ -22,24 +31,19 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
+    "./manager": "./dist/manager.js",
+    "./package.json": "./package.json",
     "./preview": {
       "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
-    },
-    "./manager": "./dist/manager.js",
-    "./register": "./dist/manager.js",
-    "./package.json": "./package.json"
+      "default": "./dist/preview.js"
+    }
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "files": [
     "*.js",
     "*.d.ts",
@@ -47,8 +51,8 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
+    "check": "jiti ../../../scripts/check/check-package.ts",
+    "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "devDependencies": {
     "@storybook/icons": "^1.4.0",
@@ -57,22 +61,11 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^9.2.0-alpha.3"
+    "storybook": "^10.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "bundler": {
-    "exportEntries": [
-      "./src/index.ts"
-    ],
-    "managerEntries": [
-      "./src/manager.ts"
-    ],
-    "previewEntries": [
-      "./src/preview.ts"
-    ]
-  },
   "storybook": {
     "displayName": "Pseudo States",
     "icon": "https://user-images.githubusercontent.com/321738/105224055-f6c29c00-5b5c-11eb-83c9-ba28a7fbadf2.gif",

package/preview.js

@@ -1 +1 @@
-export * from './dist/preview';
+export * from './dist/preview.js';

package/dist/index.mjs

@@ -1,7 +0,0 @@
-import { definePreviewAddon } from 'storybook/internal/csf';
-import { STORY_CHANGED, STORY_RENDERED, GLOBALS_UPDATED, FORCE_RE_RENDER, FORCE_REMOUNT, DOCS_RENDERED, UPDATE_GLOBALS } from 'storybook/internal/core-events';
-import { addons, useMemo, useRef, useEffect } from 'storybook/preview-api';
-
-var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators,initialGlobals:()=>initialGlobals});var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],EXCLUDED_PSEUDO_ESCAPE_SEQUENCE="(?<=(?<!\\\\)(?:\\\\\\\\)*)",PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let 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,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=addons.getChannel(),shadowHosts=new Set,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){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=useRef(globals);return useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),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());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};var index_default=()=>definePreviewAddon(preview_exports);
-
-export { PARAM_KEY, index_default as default };

package/dist/preview.mjs

@@ -1,6 +0,0 @@
-import { STORY_CHANGED, STORY_RENDERED, GLOBALS_UPDATED, FORCE_RE_RENDER, FORCE_REMOUNT, DOCS_RENDERED, UPDATE_GLOBALS } from 'storybook/internal/core-events';
-import { addons, useMemo, useRef, useEffect } from 'storybook/preview-api';
-
-var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],EXCLUDED_PSEUDO_ESCAPE_SEQUENCE="(?<=(?<!\\\\)(?:\\\\\\\\)*)",PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}${EXCLUDED_PSEUDO_ESCAPE_SEQUENCE}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let 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,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=addons.getChannel(),shadowHosts=new Set,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){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=useRef(globals);return useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),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());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};
-
-export { decorators, initialGlobals };