{"_id":"hyperellipse","_rev":"6-adb928816c9c297bbdd25073b4954d00","name":"hyperellipse","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"hyperellipse","version":"1.0.0","keywords":["css","corner-shape","squircle","superellipse","polyfill","border-radius","clip-path"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"hyperellipse@1.0.0","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/hyperellipse#readme","bugs":{"url":"https://github.com/mikhailmogilnikov/hyperellipse/issues"},"dist":{"shasum":"2c0a92e879a3fcdbff0ca09ce8676943b3edd0e0","tarball":"https://registry.npmjs.org/hyperellipse/-/hyperellipse-1.0.0.tgz","fileCount":9,"integrity":"sha512-XATImZGjgUmDC8TK1i2oWMBkEAu8TlH3gvhiu2nRJaR6Jd90VuSBajYDZsTuR2C87sPtPqPTMDieZXxjwgqoPg==","signatures":[{"sig":"MEUCIH9Pzplps0jIXQaM1yQm0DHEboDRPk0KAhQ9qc70bVsKAiEA2kzXQsJu3Vfrm+WlzYcsKqXjQlxw+flJY/AnnKQyWIY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":260684},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","schema":"https://json.schemastore.org/package","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./css":"./css/fallback.css"},"gitHead":"4933e7df67fc4ae7040e00057ada9798f23ca50b","private":false,"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","check-types":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/hyperellipse.git","type":"git","directory":"packages/hyperellipse"},"_npmVersion":"10.9.3","description":"Transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes","directories":{},"sideEffects":["*.css","./css/**"],"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8","vitest":"^4.1.8","typescript":"^6","@repo/typescript-config":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/hyperellipse_1.0.0_1781181810597_0.5235528368444742","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"hyperellipse","version":"1.0.1","keywords":["css","corner-shape","squircle","superellipse","polyfill","border-radius","clip-path"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"hyperellipse@1.0.1","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/hyperellipse#readme","bugs":{"url":"https://github.com/mikhailmogilnikov/hyperellipse/issues"},"dist":{"shasum":"4eb9dfd678afb33080d263842c3057b625ebb4d2","tarball":"https://registry.npmjs.org/hyperellipse/-/hyperellipse-1.0.1.tgz","fileCount":9,"integrity":"sha512-mbRX6R/EBquZ1f0cGzvgyNmedDCM1476ZSX3gLDseaJqcz2o+SFiqh7cHq299rCp3Gkqt5o1hKVVB6Y7YGCHNA==","signatures":[{"sig":"MEQCIEOBV5su5u3FQDEU7Us8E4ZzJqwXh4OCcPYy19Wa3W1QAiBAPdZe+oLE+R1uLDpoxd+vW/telAATmkdX0FgRn9HODQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":287424},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","schema":"https://json.schemastore.org/package","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./css":"./css/fallback.css"},"gitHead":"8e8a38698a4661dec4b59fa4be4616e07aed08f2","private":false,"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","check-types":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/hyperellipse.git","type":"git","directory":"packages/hyperellipse"},"_npmVersion":"10.9.3","description":"Transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes","directories":{},"sideEffects":["*.css","./css/**"],"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8","vitest":"^4.1.8","typescript":"^6","@repo/typescript-config":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/hyperellipse_1.0.1_1781261257857_0.7918176627670961","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"hyperellipse","version":"1.0.2","keywords":["css","corner-shape","squircle","superellipse","polyfill","border-radius","clip-path"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"hyperellipse@1.0.2","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/hyperellipse#readme","bugs":{"url":"https://github.com/mikhailmogilnikov/hyperellipse/issues"},"dist":{"shasum":"66c52d2f1a454e521f2a24eaf146746d8a23a1a7","tarball":"https://registry.npmjs.org/hyperellipse/-/hyperellipse-1.0.2.tgz","fileCount":9,"integrity":"sha512-O7hior9If5MvAdd2PMYVVpKuO5y4LbUzDqPxMoPZprDzNCoQOb+/1ZZ+gs/l2knvV8VuiYK70LJIUWyJ7GZlsQ==","signatures":[{"sig":"MEQCIACvaHVaMKiQqA9umyAHKF1qYwcr4vFor9ROb5xnCiX4AiATijMOKLr5j2oG14kubVGU1ooxRL9zojN/RWgA6AGRUA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":336760},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","schema":"https://json.schemastore.org/package","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./css":"./css/fallback.css"},"gitHead":"e4b9e455fc6c92c194553401a71d28d78af0f9ab","private":false,"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","check-types":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/hyperellipse.git","type":"git","directory":"packages/hyperellipse"},"_npmVersion":"10.9.3","description":"Transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes","directories":{},"sideEffects":["*.css","./css/**"],"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8","vitest":"^4.1.8","typescript":"^6","@repo/typescript-config":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/hyperellipse_1.0.2_1781456605283_0.04093864576146333","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"hyperellipse","version":"1.0.3","keywords":["css","corner-shape","squircle","superellipse","polyfill","border-radius","clip-path"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"hyperellipse@1.0.3","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/hyperellipse#readme","bugs":{"url":"https://github.com/mikhailmogilnikov/hyperellipse/issues"},"dist":{"shasum":"1d67187ac56dd657ec49d05cdcec1e621c871b9a","tarball":"https://registry.npmjs.org/hyperellipse/-/hyperellipse-1.0.3.tgz","fileCount":9,"integrity":"sha512-RbAZCliIC0FY93cnmo4sOUBKsB0PAS43YVe8x2VkFVFDGchh301+e4kdcz9RjueQc1Da5KF35WmWVrQx/D13/Q==","signatures":[{"sig":"MEUCIQDapQq18LLWkJ4v2Op0CAGB7a0X7NGF5kq7AQ56AmDywwIgPuf1agjFJLjjFNnSU3KCDji3sZzFv+soZm9lofXtJ8U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":342920},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","schema":"https://json.schemastore.org/package","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./css":"./css/fallback.css"},"gitHead":"778adda639f56023bcd88b93964a5673df9a3f9c","private":false,"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","check-types":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/hyperellipse.git","type":"git","directory":"packages/hyperellipse"},"_npmVersion":"10.9.3","description":"Transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes","directories":{},"sideEffects":["*.css","./css/**"],"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8","vitest":"^4.1.8","typescript":"^6","@repo/typescript-config":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/hyperellipse_1.0.3_1781457349785_0.2719780155483551","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"hyperellipse","version":"1.0.4","keywords":["css","corner-shape","squircle","superellipse","polyfill","border-radius","clip-path"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"hyperellipse@1.0.4","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/hyperellipse#readme","bugs":{"url":"https://github.com/mikhailmogilnikov/hyperellipse/issues"},"dist":{"shasum":"2e59179f393503ee14b338e90994705489299455","tarball":"https://registry.npmjs.org/hyperellipse/-/hyperellipse-1.0.4.tgz","fileCount":9,"integrity":"sha512-uCLSOngIPbVbEf26QBiTbqQNc/J1iahcZYgH9P9QOI6NMkSxMJQWJjO0IDcpK34Q8Hn32uT5QrDe/79iIQtnfQ==","signatures":[{"sig":"MEUCIQCjqmcMVltaFBJcnaF1mOxdI1p8accsyDdMVoHVFJJDkgIgVfkcXxes55Ay6GVl88sn0ztnzGbj1pwTtk7GS+EuX4E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":361304},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","schema":"https://json.schemastore.org/package","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./css":"./css/fallback.css"},"gitHead":"007ea815333bd624fd319f2ff62814d68774eaab","private":false,"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","check-types":"tsc --noEmit","prepublishOnly":"bun run build"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/hyperellipse.git","type":"git","directory":"packages/hyperellipse"},"_npmVersion":"10.9.3","description":"Transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes","directories":{},"sideEffects":["*.css","./css/**"],"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8","vitest":"^4.1.8","happy-dom":"^20.10.3","typescript":"^6","@repo/typescript-config":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/hyperellipse_1.0.4_1781474681876_0.03246200518292941","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"schema":"https://json.schemastore.org/package","name":"hyperellipse","version":"1.0.5","description":"Transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes","type":"module","author":{"name":"Mikhail Mogilnikov"},"license":"MIT","private":false,"keywords":["css","corner-shape","squircle","superellipse","polyfill","border-radius","clip-path"],"homepage":"https://github.com/mikhailmogilnikov/hyperellipse#readme","bugs":{"url":"https://github.com/mikhailmogilnikov/hyperellipse/issues"},"repository":{"type":"git","url":"git+https://github.com/mikhailmogilnikov/hyperellipse.git","directory":"packages/hyperellipse"},"sideEffects":["*.css","./css/**"],"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./css":"./css/fallback.css"},"scripts":{"build":"tsup","check-types":"tsc --noEmit","dev":"tsup --watch","test":"vitest run","prepublishOnly":"bun run build"},"publishConfig":{"access":"public"},"devDependencies":{"@repo/typescript-config":"workspace:*","happy-dom":"^20.10.3","tsup":"^8","typescript":"^6","vitest":"^4.1.8"},"packageManager":"bun@1.3.14","_id":"hyperellipse@1.0.5","gitHead":"d530a4ec47f31c146b0af80a37c151d4f9f8cc5b","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-kXHjOE7xShPPfD5wT6bTSxyuzspBmsTXnzN4rxZm3eIbRHWW2OIAc/TCCfIiJ9fAqppmi8uIQDi2OHDU3mzO7g==","shasum":"916e6e29455c2be9b7177371a8f118fb28521b43","tarball":"https://registry.npmjs.org/hyperellipse/-/hyperellipse-1.0.5.tgz","fileCount":9,"unpackedSize":363029,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC/wv+QZNxP6fM3uYVLLOQwBwq7DZ1t0RY860EiPMiegQIgMB9900XZ23OxO4+IpB3pCyUtnM/MZD60PN2lK3C4XwM="}]},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"directories":{},"maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hyperellipse_1.0.5_1781611295361_0.5468851269564345"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-11T12:43:30.360Z","modified":"2026-06-16T12:01:35.642Z","1.0.0":"2026-06-11T12:43:30.736Z","1.0.1":"2026-06-12T10:47:38.025Z","1.0.2":"2026-06-14T17:03:25.428Z","1.0.3":"2026-06-14T17:15:49.928Z","1.0.4":"2026-06-14T22:04:42.005Z","1.0.5":"2026-06-16T12:01:35.501Z"},"bugs":{"url":"https://github.com/mikhailmogilnikov/hyperellipse/issues"},"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","homepage":"https://github.com/mikhailmogilnikov/hyperellipse#readme","keywords":["css","corner-shape","squircle","superellipse","polyfill","border-radius","clip-path"],"repository":{"type":"git","url":"git+https://github.com/mikhailmogilnikov/hyperellipse.git","directory":"packages/hyperellipse"},"description":"Transparent polyfill for CSS corner-shape — squircles, superellipses, scoops, notches, and per-corner mixes","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"readme":"# hyperellipse\n\nTransparent polyfill for the CSS [`corner-shape`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape) property (squircles, superellipses, scoops, notches). Native rendering in browsers that support `corner-shape`, a high-fidelity JS fallback everywhere else (Safari, Firefox).\n\nThe fallback geometry follows the exact superellipse math from the [css-borders-4 spec](https://drafts.csswg.org/css-borders/#corner-shaping), so corners look the same in Chrome and in the fallback.\n\n## Usage\n\nWrite a `--corner-shape` custom property next to your `border-radius` (unknown native properties are discarded by parsers in non-supporting browsers, so the custom property is the carrier):\n\n```css\n.card {\n  --corner-shape: squircle;\n  border-radius: 45px;\n  background: red;\n  border: 1px solid black;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);\n}\n```\n\nRegister once on the client:\n\n```ts\nimport { registerHyperellipse } from \"hyperellipse\";\n\nregisterHyperellipse();\n```\n\nThat's it. For SSR apps, also see [Zero-flash SSR fallback](#zero-flash-ssr-fallback-recommended) below.\n\n- **Browsers with native `corner-shape`** get a tiny CSS bridge (`corner-shape: var(--corner-shape, round)` at zero specificity) — rendering is fully native, no JS observers run.\n- **Browsers without it** get the fallback: stylesheets are scanned for selectors declaring `--corner-shape`, and matching elements are rendered with `clip-path` / SVG layers / `drop-shadow` filters.\n\nYou can also write the native property alongside for zero-JS rendering in Chrome:\n\n```css\n.card {\n  corner-shape: squircle;\n  --corner-shape: squircle;\n  border-radius: 45px;\n}\n```\n\n### Supported values\n\nSame grammar as the native shorthand, 1–4 values (top-left, top-right, bottom-right, bottom-left):\n\n```css\n--corner-shape: squircle;\n--corner-shape: superellipse(4);\n--corner-shape: squircle bevel scoop notch;\n```\n\nKeywords: `round`, `squircle`, `square`, `bevel`, `scoop`, `notch`, `superellipse(K)`.\n\n### Per-element opt-in\n\nWithout a stylesheet rule you can mark elements directly:\n\n```html\n<div data-corner-shape=\"squircle\" style=\"border-radius: 32px\"></div>\n<!-- or -->\n<div style=\"--corner-shape: squircle; border-radius: 32px\"></div>\n```\n\n## API\n\n```ts\nconst controller = registerHyperellipse({\n  // Extra selectors (escape hatch for cross-origin stylesheets that can't be scanned)\n  selector: \".card, .button\",\n  // border-radius multiplier shown before the fallback applies (see below). Default 0.6\n  pendingRadiusScale: 0.6,\n  // Force the fallback even with native support (debugging / visual comparison)\n  force: false,\n});\n\ncontroller.supported; // native corner-shape support\ncontroller.active;    // JS fallback engine is running\ncontroller.refresh(); // rescan stylesheets, recompute everything\ncontroller.destroy(); // stop and remove all applied styles\n```\n\nCalling `registerHyperellipse()` repeatedly returns the same controller. SSR-safe (no-op without `document`).\n\n## Zero-flash SSR fallback (recommended)\n\nA squircle visually rounds less than a circle at the same radius, so SSR pages in Safari/Firefox briefly show \"too round\" corners until the JS bundle loads. JS can't fix that gap — pure CSS can. Write your radius through the `--corner-scale` multiplier:\n\n```css\n.card {\n  --corner-shape: squircle;\n  border-radius: calc(45px * var(--corner-scale, 1));\n}\n```\n\nAnd add this global snippet (or `@import \"hyperellipse/css\"`):\n\n```css\n@supports not (corner-shape: squircle) {\n  :root {\n    --corner-scale: 0.6;\n  }\n}\n```\n\nHow it behaves:\n\n- **Native browsers**: `--corner-scale` is unset → factor `1` → full radius, native squircle. Zero flash.\n- **Fallback browsers, before JS**: the `@supports not` block activates at first paint → corners render at ×0.6 radius, closely matching the perceived roundness of the future squircle. No layout shift, no JS timing involved.\n- **Fallback browsers, after init**: during each read phase the engine temporarily forces `--corner-scale: 1` so squircle geometry is computed from the **full** radius — identical to Chrome.\n- **Runtime shape off**: when `--corner-shape` is removed, the engine sets inline `--corner-scale: 1` so round mode matches Chrome at full radius (not ×0.6 from the SSR snippet).\n\n`0.6` is the perceptual equivalence factor between a circle and a `squircle` (matching corner cut areas). Tune it globally or per element by overriding `--corner-scale` inside the `@supports not` block (e.g. `0.5` for `superellipse(3+)`, `0.7` for softer shapes).\n\nFor design systems that apply `var(--corner-scale)` to round tokens globally, co-locate `--corner-scale: 0.6` in the same rule as `--corner-shape` instead of relying on `:root` alone.\n\n### Automatic pending reduction (secondary)\n\nIf you write plain `border-radius` without the multiplier, the library still injects a stylesheet at registration time that scales matched radii down (`pendingRadiusScale`, default ×0.6) until per-element styles apply. This only kicks in once JS runs, so it covers late-mounted/CSR content but not the SSR-to-bundle gap — prefer the CSS snippet above. Radii already written via `var(--corner-scale)` are excluded from it automatically.\n\n## How the fallback renders\n\n| Element styles | Strategy |\n| --- | --- |\n| background (color, gradients, images), content clipping | `clip-path: path(...)` on the element |\n| `border` (uniform, solid) | SVG ring as the top background layer, native border made transparent (layout preserved) |\n| `box-shadow` (outer, with real `spread`) | Gaussian-blurred shape baked into a static SVG on a `::before` pseudo-element |\n| `outline` + `outline-offset` | SVG ring on an `::after` pseudo-element |\n\nWhen `box-shadow` or `outline` are present the element switches to \"layer mode\" (no `clip-path`, the background/border/shadows are painted by a single SVG layer on `::before` with `z-index: -1`) because `clip-path` clips pseudo-elements and filter output. Shadows are deliberately **not** rendered with `filter: drop-shadow()` — Safari clips and lags live filters (especially on zoom); a pre-rendered SVG with `feGaussianBlur` is static, vector and composited like any background image.\n\n## Limitations\n\n- **`inset` shadows** are dropped (outer shadows, including `spread`, are exact).\n- **Dashed/dotted/per-side borders** render as a uniform solid ring.\n- **`box-shadow`/`outline` + background images/gradients**: in layer mode the background image is not shaped (corners stick out). Solid colors are fully supported.\n- Layer mode sets `isolation: isolate` (a stacking context) to contain the `z-index: -1` pseudo-layer, and uses the element's `::before`/`::after` — they must be free.\n- In layer mode child content is not clipped to the shape (`overflow: hidden` clips to the rect).\n- **`:hover` and `:focus`** work in the fallback. The engine re-reads computed styles on pointer enter/leave and focus events on the element and its ancestors — parent `:hover` rules (e.g. `.wrap:hover .block`) are covered too. Call `refresh()` for imperative updates outside CSS.\n- `--corner-shape` is registered with `inherits: false` (matching the native property) — set it on the element itself, not an ancestor.\n- **`border-radius`, `box-shadow`, and `outline` transitions** are not interpolated frame-by-frame — the shape updates on state change, at `transitionrun`, and at `transitionend`. `opacity` and `transform` always transition natively. `background-color` transitions smoothly on solid fills only (no shadow or outline); in layer mode the fill is baked into SVG and jumps. Size (`width` / `height`) transitions animate smoothly via `ResizeObserver`.\n- Animating `corner-shape`, `border-radius`, `box-shadow`, or `outline` in keyframes is not tracked frame-by-frame in the fallback — only size (`width` / `height`) animates smoothly.\n\n## Performance\n\nOne shared `ResizeObserver` + `MutationObserver` for all instances, batched read/write phases per animation frame, keyed caching (no DOM writes unless output changed), size-only updates skip computed-style re-reads entirely. A shared `IntersectionObserver` defers work for off-screen elements until they enter the viewport.\n","readmeFilename":"README.md"}