![\"HOT\"](\"https://github.com/hotosm/ui/blob/main/src/assets/logo/hot-logo-png.png?raw=true\"){kind=logo}
\n\n \n
\n Shared Web Components with theming for use across HOTOSM tools.\n
\n\n \n ![\"Publish\"](\"https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg?event=release\"){kind=icon}
\n \n \n ![\"Tests\"](\"https://github.com/hotosm/ui/actions/workflows/playwright.yml/badge.svg?branch=main\"){kind=icon}
\n \n \n ![\"CDN](\"https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml/badge.svg?branch=main\"){kind=icon}
\n \n \n ![\"Publish](\"https://github.com/hotosm/ui/actions/workflows/docs.yml/badge.svg\"){kind=icon}
\n \n \n ![\"Package](\"https://img.shields.io/npm/v/%40hotosm/ui?color=334D058\"\n)
![\"Downloads\"](\"https://img.shields.io/npm/dm/%40hotosm%2Fui\"\n)
![\"License\"](\"https://img.shields.io/github/license/hotosm/ui.svg\")
\n \n
\n 📖 Documentation: \n https://ui.hotosm.org
\n
\n 🖥️ Source Code: \n https://github.com/hotosm/ui
\n
\n 🎯 Roadmap / Tasks: \n https://github.com/orgs/hotosm/projects/37/views/3\n
\n\n\n---\n\n## Overview\n\nShared [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)\nbuilt with [Lit](https://lit.dev) and themed for HOTOSM tools using\n[WebAwesome](https://webawesome.com) primitives.\n\n**Goals:**\n\n- Reduce code duplication across HOT tools.\n- Provide a consistent HOT look-and-feel out of the box.\n- Keep the component set small and focused (header, sidebar, footer, etc.).\n\n**WebAwesome version:** `3.11.0`\n\n---\n\n## Installation\n\n```bash\npnpm install @hotosm/ui @awesome.me/webawesome@3.11.0\n```\n\n> [!NOTE]\n> `@awesome.me/webawesome` is a **peer dependency**. Always pin it to the\n> version shown above to avoid conflicts between HOT components and\n> WebAwesome internals.\n\n---\n\n## Loading Styles\n\nUse the single self-contained stylesheet (WebAwesome base styles + HOT\ntheme inlined):\n\n```js\nimport \"@hotosm/ui/dist/style.css\";\n```\n\nOr from CDN:\n\n\n\n```html\n\n```\n\n\n\n`style-core.css` (HOT theme only, no WebAwesome) exists for pages that\nload the WebAwesome base stylesheets themselves - most apps don't need it.\n\n### Fonts\n\n**Nothing to add.** `style.css` and `style-core.css` include self-hosted\n`@font-face` rules for the HOT brand fonts: Archivo (`--hot-font-sans`),\nBarlow (`--hot-font-sans-variant`) and Barlow Condensed\n(`--hot-font-sans-variant-condensed`). The woff2 files ship in\n`dist/assets/fonts` as latin / latin-ext / vietnamese subsets with\n`unicode-range`, so browsers only download what a page renders. Remove any\nGoogle Fonts `` for these families.\n\nScripts these fonts don't cover fall back to Helvetica (Apple) or Noto\n(Android / ChromeOS), then the system sans. Set `lang` on `` and on any\ncontent in a different language from the page (e.g. user-created project\nnames) - browsers use it to pick the right fallback, and it is what future\nper-language `:lang()` tweaks will hook onto.\n\nSee [MADR 0014](https://docs.hotosm.org/decisions/0014-ui-fonts) and the\n[font test page](https://hotosm.github.io/ui-design/html/font-test.html).\n\n---\n\n## HTML Setup\n\nAdd the required WebAwesome classes to your `` element:\n\n```html\n\n\n \n ...\n \n \n ...\n \n\n```\n\n> [!IMPORTANT]\n> These classes activate the HOT colour palette and light theme for every\n> WebAwesome component on the page. Do not remove them.\n\n### Semantic variants\n\n`brand`, `danger`, `warning` and `neutral` follow the HOT palette with no extra\nclasses. Since 3.0.0 `brand` follows HOT primary, which is grey (see\n[hotosm/ui-design](https://github.com/hotosm/ui-design/blob/main/css/dist/hot.css)).\n`success` stays green rather than the HOT teal, which reads poorly against a\nred danger.\n\nAny variant can take any hue via WebAwesome's\n[variant classes](https://webawesome.com/docs/utilities/color/), which override\nthe theme - e.g. to opt in to the teal:\n\n```html\n\n```\n\n---\n\n## Using Components\n\n### Via Bundler (Vite, Webpack, etc.)\n\nRecommended: register **all** WebAwesome elements once, up front, so every\ncustom element is defined before first render - this eliminates flash of\nundefined custom elements (FOUCE) without maintaining per-page import\nlists:\n\n```js\nimport \"@hotosm/ui/dist/style.css\";\nimport \"@hotosm/ui/dist/webawesome-all.js\"; // registers every wa-* element\nimport \"@hotosm/ui/dist/components/header/header.js\"; // hot-* components you use\n```\n\n```html\n