@meteo28093/equinox-ui 0.1.6 → 0.1.8

package/README.md

@@ -1,8 +1,38 @@
-## Equinox UI
+# Equinox UI
 
 Equinox UI is a web component library for blogs or small web projects.
 
-You can use the bundled `equinox.css`, use a classless framework like water.css or pico.css or style the components.
+## Use with a CDN
+
+### For Existing Websites (Component Styles Only)
+Load only the design tokens to ensure your site's existing styles are **not** altered.
+```html
+<link href="https://unpkg.com/@meteo28093/equinox-ui/tokens.css" rel="stylesheet">
+<script src="https://unpkg.com/@meteo28093/equinox-ui" defer></script>
+```
+
+
+
+## CSS Integration Modes
+
+Equinox UI offers two stylesheet integration pathways depending on whether you are embedding components into an **existing website** or building a **new project from scratch**.
+
+| Stylesheet | Content | Safe for Existing Sites? | Recommended Use Case |
+| :--- | :--- | :--- | :--- |
+| `tokens.css` | CSS Custom Properties only (`--ee-*`) | **Yes** | Integrating custom elements into existing sites. |
+| `reset.css` | Tag-level resets (`body`, `a`, `button`, etc.) | **No** (will overwrite styles) | Clean-slate blogs or new projects. |
+| `equinox.css` | Combined bundle (`tokens.css` + `reset.css`) | **No** (will overwrite styles) | Quick-start prototypes or new projects. |
+
+---
+
+### For New Websites (Full Reset & Layout)
+Load the combined sheet to establish global styles for the viewport, links, and buttons.
+```html
+<link href="https://unpkg.com/@meteo28093/equinox-ui/equinox.css" rel="stylesheet">
+<script src="https://unpkg.com/@meteo28093/equinox-ui" defer></script>
+```
+
+---
 
 ## Install from npm
 
@@ -15,13 +45,13 @@ Import the package once in your browser entrypoint to register all custom elemen
 ```js
 // main.js
 import "@meteo28093/equinox-ui";
-import "@meteo28093/equinox-ui/equinox.css";
-```
 
-If you only want the design tokens, import the exported token file instead:
-
-```js
+// Choose your style mode:
+// A) SAFE MODE (For existing websites - variables only)
 import "@meteo28093/equinox-ui/tokens.css";
+
+// B) RESET MODE (For brand new websites - full layout reset)
+// import "@meteo28093/equinox-ui/equinox.css";
 ```
 
 Importing `@meteo28093/equinox-ui` registers the components globally with `customElements.define(...)`.
@@ -54,7 +84,7 @@ document.body.innerHTML = `
 `;
 ```
 
-## Vue / Vite
+## Vue
 
 Import Equinox UI once in your client bootstrap file, then use the elements directly in Vue templates.
 
@@ -105,22 +135,6 @@ export default function App() {
 
 For custom DOM events or imperative APIs, use refs and `addEventListener(...)` instead of expecting React's synthetic event system to map custom events automatically.
 
-## SSR and client-only loading
-
-The ESM bundle touches `window` and `document` during module evaluation, so load it only in browser/client code.
-
-- Import it from `main.js`, `main.jsx`, or another browser entrypoint
-- In SSR-capable frameworks, keep the import behind a client boundary such as a client-only component or browser-only bootstrap file
-- Do not import the package from server-rendered modules
-
-If smoother SSR support is needed later, the next packaging improvement would be to split browser-only side effects from import-safe exports.
-
-## Use with a CDN
-
-```html
-<script src="https://unpkg.com/@meteo28093/equinox-ui"></script>
-```
-
 This registers components globally.
 
 ## Components