npm - @hotosm/ui - Versions diffs - 0.7.0 → 0.8.1 - Mend

@hotosm/ui 0.7.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/README.md CHANGED Viewed

@@ -11,6 +11,9 @@
   <a href="https://github.com/hotosm/ui/actions/workflows/publish.yml" target="_blank">
       <img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg?event=release" alt="Publish">
   </a>
+  <a href="https://github.com/hotosm/ui/actions/workflows/playwright.yml" target="_blank">
+      <img src="https://github.com/hotosm/ui/actions/workflows/playwright.yml/badge.svg?branch=main" alt="Tests">
+  </a>
   <a href="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml" target="_blank">
       <img src="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml/badge.svg?branch=main" alt="CDN Deploy">
   </a>
@@ -81,7 +84,7 @@ pnpm install @hotosm/ui @awesome.me/webawesome@3.2.1
 Two CSS files are published. Choose the one that fits your setup.
-### Option A — Bundled (recommended for simplicity)
+### Option A - Bundled (recommended for simplicity)
 A single self-contained file with WebAwesome base styles + HOT theme
 already inlined. Nothing else to load.
@@ -97,14 +100,14 @@ Or from a bundler:
 import '@hotosm/ui/dist/style.css';
 ```
-### Option B — Split / CDN-optimised (recommended for multi-tool caching)
+### Option B - Split / CDN-optimised (recommended for multi-tool caching)
 If you run several HOT tools (FMTM, Tasking Manager, etc.) and want
 the browser to **cache WebAwesome CSS once** across all of them, load
 WebAwesome from CDN separately and use the slim HOT-only stylesheet:
 ```html
-<!-- WebAwesome CSS — shared across all HOT tools via browser cache -->
+<!-- WebAwesome CSS - shared across all HOT tools via browser cache -->
 <link rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/native.css">
 <link rel="stylesheet"
@@ -137,9 +140,9 @@ import '@hotosm/ui/dist/style-core.css';
 > [!TIP]
 > **Which should I pick?**
 >
-> - Building a single standalone app? Use **Option A** — zero config.
+> - Building a single standalone app? Use **Option A** - zero config.
 > - Running multiple HOT tools on the same domain or expecting users to
->   navigate between them? Use **Option B** — the ~84 KB of shared
+>   navigate between them? Use **Option B** - the ~84 KB of shared
 >   WebAwesome CSS is fetched once and cached by the browser.
 ---
@@ -166,7 +169,7 @@ Add the required WebAwesome classes to your `<html>` element:
 ### Via Bundler (Vite, Webpack, etc.)
-Import individual components — your bundler will tree-shake the rest:
+Import individual components - your bundler will tree-shake the rest:
 ```js
 import '@hotosm/ui/dist/components/header/header.js';
@@ -186,7 +189,7 @@ all HOT tools (Option B from the styles section above):
 <!DOCTYPE html>
 <html class="wa-theme-default wa-palette-hotosm">
 <head>
-  <!-- WebAwesome CSS — cached once across all HOT tools at this WA version -->
+  <!-- WebAwesome CSS - cached once across all HOT tools at this WA version -->
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.2.1/dist/styles/native.css">
   <link rel="stylesheet"
@@ -225,7 +228,6 @@ all HOT tools (Option B from the styles section above):
     // Include the attribute to make it true.
     const hdr = document.getElementById('hdr');
     hdr.drawer = true;        // enable the hamburger drawer
-    hdr.borderBottom = true;  // enable bottom border
   </script>
 </body>
 </html>
@@ -233,13 +235,13 @@ all HOT tools (Option B from the styles section above):
 > [!TIP]
 > If you need only a single self-contained stylesheet instead of the three
-> WA links above, you can use Option A (`style.css`) — but then the ~84 KB
+> WA links above, you can use Option A (`style.css`) - but then the ~84 KB
 > of WebAwesome CSS is bundled into the HOT package and cannot be shared
 > across tools as a single cached resource.
 ### React
-Web Components work in React with a small caveat — use `ref` callbacks
+Web Components work in React with a small caveat - use `ref` callbacks
 for custom events if React's synthetic event system doesn't forward them:
 ```jsx

package/dist/chunks/{chunk.2Y7OBKRQ.js → chunk.3FIEOVXD.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import{b as e}from"./chunk.~~XU6UFL27~~.js";var a=e;customElements.get("hot-header")\|\|customElements.define("hot-header",e);export{a};
1	+ import{b as e}from"./chunk.3T33Y2BX.js";var a=e;customElements.get("hot-header")\|\|customElements.define("hot-header",e);export{a};