@hotosm/ui 0.6.1 → 0.8.0

package/dist/themes/hot-wa.css

@@ -11,11 +11,17 @@
 @import "./hot-wa.css";
 */
 
+/* ─── Palette layer ─────────────────────────────────────────────────────────
+   Maps HOT primitive colors onto WA's named palette slots.
+   WA numbers 05 (darkest) → 95 (lightest); HOT numbers 950 (darkest) → 50 (lightest).
+   These are ONLY color primitives - no typography or spacing here, because
+   WA declares those tokens in @layer wa-theme which has higher priority than
+   @layer wa-color-palette. Typography/spacing overrides live in wa-theme below.
+─────────────────────────────────────────────────────────────────────────── */
 @layer wa-color-palette {
   :where(:root),
   .wa-palette-hotosm {
-    /* NOTE: for some reason WA decided to swap the ordering 05 --> 95 to be dark to light... */
-    /* Material design and WebAwesome convention is the inverse, so we map to that */
+    /* Red */
     --wa-color-red-95: var(--hot-color-red-50);
     --wa-color-red-90: var(--hot-color-red-100);
     --wa-color-red-80: var(--hot-color-red-200);
@@ -30,6 +36,7 @@
     --wa-color-red: var(--wa-color-red-50);
     --wa-color-red-key: 50;
 
+    /* Orange → HOT rose (persian plum) */
     --wa-color-orange-95: var(--hot-color-rose-50);
     --wa-color-orange-90: var(--hot-color-rose-100);
     --wa-color-orange-80: var(--hot-color-rose-200);
@@ -44,6 +51,7 @@
     --wa-color-orange: var(--wa-color-orange-60);
     --wa-color-orange-key: 60;
 
+    /* Yellow */
     --wa-color-yellow-95: var(--hot-color-yellow-50);
     --wa-color-yellow-90: var(--hot-color-yellow-100);
     --wa-color-yellow-80: var(--hot-color-yellow-200);
@@ -58,6 +66,7 @@
     --wa-color-yellow: var(--wa-color-yellow-80);
     --wa-color-yellow-key: 80;
 
+    /* Cyan */
     --wa-color-cyan-95: var(--hot-color-cyan-50);
     --wa-color-cyan-90: var(--hot-color-cyan-100);
     --wa-color-cyan-80: var(--hot-color-cyan-200);
@@ -72,6 +81,7 @@
     --wa-color-cyan: var(--wa-color-cyan-70);
     --wa-color-cyan-key: 70;
 
+    /* Blue (space cadet) */
     --wa-color-blue-95: var(--hot-color-blue-50);
     --wa-color-blue-90: var(--hot-color-blue-100);
     --wa-color-blue-80: var(--hot-color-blue-200);
@@ -86,6 +96,7 @@
     --wa-color-blue: var(--wa-color-blue-50);
     --wa-color-blue-key: 50;
 
+    /* Gray */
     --wa-color-gray-95: var(--hot-color-gray-50);
     --wa-color-gray-90: var(--hot-color-gray-100);
     --wa-color-gray-80: var(--hot-color-gray-200);
@@ -100,13 +111,13 @@
     --wa-color-gray: var(--wa-color-gray-40);
     --wa-color-gray-key: 40;
 
-    /* Brand colors - Map to HOT primary colors (red) */
+    /* Brand → HOT primary (red) */
     --wa-color-brand-95: var(--hot-color-primary-50);
     --wa-color-brand-90: var(--hot-color-primary-100);
     --wa-color-brand-80: var(--hot-color-primary-200);
     --wa-color-brand-70: var(--hot-color-primary-300);
     --wa-color-brand-60: var(--hot-color-primary-400);
-    --wa-color-brand-50: var(--hot-color-red-500);
+    --wa-color-brand-50: var(--hot-color-primary-500);
     --wa-color-brand-40: var(--hot-color-primary-600);
     --wa-color-brand-30: var(--hot-color-primary-700);
     --wa-color-brand-20: var(--hot-color-primary-800);
@@ -115,7 +126,7 @@
     --wa-color-brand: var(--wa-color-brand-50);
     --wa-color-brand-key: 50;
 
-    /* Neutral colors - Map to HOT neutral colors (gray) */
+    /* Neutral → HOT gray */
     --wa-color-neutral-95: var(--hot-color-neutral-50);
     --wa-color-neutral-90: var(--hot-color-neutral-100);
     --wa-color-neutral-80: var(--hot-color-neutral-200);
@@ -130,7 +141,7 @@
     --wa-color-neutral: var(--wa-color-neutral-40);
     --wa-color-neutral-key: 40;
 
-    /* Success colors - Map to HOT success colors */
+    /* Success → HOT cyan */
     --wa-color-success-95: var(--hot-color-success-50);
     --wa-color-success-90: var(--hot-color-success-100);
     --wa-color-success-80: var(--hot-color-success-200);
@@ -145,7 +156,7 @@
     --wa-color-success: var(--wa-color-success-60);
     --wa-color-success-key: 60;
 
-    /* Warning colors - Map to HOT warning colors */
+    /* Warning → HOT yellow */
     --wa-color-warning-95: var(--hot-color-warning-50);
     --wa-color-warning-90: var(--hot-color-warning-100);
     --wa-color-warning-80: var(--hot-color-warning-200);
@@ -160,7 +171,7 @@
     --wa-color-warning: var(--wa-color-warning-80);
     --wa-color-warning-key: 80;
 
-    /* Danger colors - Map to HOT danger colors */
+    /* Danger → HOT red (same as primary) */
     --wa-color-danger-95: var(--hot-color-danger-50);
     --wa-color-danger-90: var(--hot-color-danger-100);
     --wa-color-danger-80: var(--hot-color-danger-200);
@@ -175,8 +186,8 @@
     --wa-color-danger: var(--wa-color-danger-50);
     --wa-color-danger-key: 50;
 
-    /* Check the defaults at https://early.webawesome.com/webawesome@3.2.1/dist/styles/color/palettes/default.css */
-    /* No change made to: purple, indigo, pink, green */
+    /* Unchanged: green, indigo, purple, pink
+       See https://early.webawesome.com/webawesome@3.2.1/dist/styles/color/palettes/default.css */
 
     --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
     --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
@@ -233,71 +244,15 @@
     --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
     --wa-color-pink: var(--wa-color-pink-50);
     --wa-color-pink-key: 50;
-
-    /* Fonts */
-    --wa-font-family-body: var(--hot-font-sans);
-    --wa-font-family-heading: var(--hot-font-sans-variant);
-    --wa-font-family-code: var(--hot-font-mono);
-    --wa-font-family-longform: var(--hot-font-sefif);
-
-    /* Font sizes */
-    --wa-font-size-2xs: var(--hot-font-size-2x-small); /* 10px */
-    --wa-font-size-xs: var(--hot-font-size-x-small); /* 12px */
-    --wa-font-size-s: var(--hot-font-size-small); /* 14px */
-    --wa-font-size-m: var(--hot-font-size-medium); /* 16px */
-    --wa-font-size-l: var(--hot-font-size-large); /* 20px */
-    --wa-font-size-xl: var(--hot-font-size-x-large); /* 24px */
-    --wa-font-size-2xl: var(--hot-font-size-2x-large); /* 36px */
-    --wa-font-size-3xl: var(--hot-font-size-3x-large); /* 48px */
-    --wa-font-size-4xl: var(--hot-font-size-4x-large); /* 72px */
-    /* Note: `wa-font-size-scale` and `wa-font-size-smaller` / `larger` have no direct `hot-` match.
-      They depend on calc() so we set no overrides here. */
-
-    /* Font weights */
-    --wa-font-weight-light: var(--hot-font-weight-light);
-    --wa-font-weight-normal: var(--hot-font-weight-normal);
-    --wa-font-weight-semibold: var(--hot-font-weight-semibold);
-    --wa-font-weight-bold: var(--hot-font-weight-bold);
-
-    /* Functional font weights */
-    --wa-font-weight-body: var(--wa-font-weight-normal);
-    --wa-font-weight-heading: var(--wa-font-weight-bold);
-    --wa-font-weight-code: var(--wa-font-weight-normal);
-    --wa-font-weight-longform: var(--wa-font-weight-normal);
-    --wa-font-weight-action: var(--wa-font-weight-semibold);
-
-    /* Line heights */
-    --wa-line-height-condensed: var(--hot-line-height-denser);
-    --wa-line-height-normal: var(--hot-line-height-normal);
-    --wa-line-height-expanded: var(--hot-line-height-looser);
-
-    /*
-    * Spacing, rounding, etc
-    *
-    * See https://early.webawesome.com/webawesome@3.2.1/dist/styles/themes/default.css for all options
-    */
-    /*  */
-
-    --wa-space-3xs: var(--hot-spacing-3x-small); /* 2px */
-    --wa-space-2xs: var(--hot-spacing-2x-small); /* 4px */
-    --wa-space-xs: var(--hot-spacing-x-small); /* 8px */
-    --wa-space-s: var(--hot-spacing-small); /* 12px */
-    --wa-space-m: var(--hot-spacing-medium); /* 16px */
-    --wa-space-l: var(--hot-spacing-large); /* 20px */
-    --wa-space-xl: var(--hot-spacing-x-large); /* 28px */
-    --wa-space-2xl: var(--hot-spacing-2x-large); /* 36px */
-    --wa-space-3xl: var(--hot-spacing-3x-large); /* 48px */
-    --wa-space-4xl: var(--hot-spacing-4x-large); /* 72px */
-
-    --wa-border-radius-s: var(--hot-border-radius-small); /* 3px */
-    --wa-border-radius-m: var(--hot-border-radius-medium); /* 4px */
-    --wa-border-radius-l: var(--hot-border-radius-large); /* 8px */
-    --wa-border-radius-pill: var(--hot-border-radius-pill); /* 9999px */
-    --wa-border-radius-circle: var(--hot-border-radius-circle); /* 50% */
   }
 }
 
-/* Theme layer - semantic color mappings (must be in wa-theme layer, not wa-color-palette) */
+/* ─── Theme layer ────────────────────────────────────────────────────────────
+   Semantic color tokens + typography + spacing + borders.
+   All overrides are in @layer wa-theme so they take precedence over WA's own
+   wa-theme defaults (our hot-wa.css is imported after WA's default.css, so
+   within the same layer our declarations win).
+─────────────────────────────────────────────────────────────────────────── */
 @layer wa-theme {
   :where(:root),
   .wa-theme-default,
@@ -306,6 +261,7 @@
   .wa-light .wa-theme-default,
   .wa-dark .wa-theme-default.wa-invert,
   .wa-dark .wa-theme-default .wa-invert {
+    /* #region Colors (Light) */
     color-scheme: light;
     color: var(--wa-color-text-normal);
 
@@ -334,58 +290,139 @@
       var(--hot-color-neutral-950) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
       transparent
     );
+
     --wa-color-focus: var(--hot-color-primary-400);
+
     --wa-color-mix-hover: black 10%;
     --wa-color-mix-active: black 20%;
 
-    --wa-color-brand-fill-quiet: var(--hot-color-blue-50);
-    --wa-color-brand-fill-normal: var(--hot-color-blue-50);
-    --wa-color-brand-fill-loud: var(--hot-color-blue-600);
-    --wa-color-brand-border-quiet: var(--hot-color-blue-100);
-    --wa-color-brand-border-normal: var(--hot-color-blue-100);
-    --wa-color-brand-border-loud: var(--hot-color-blue-400);
-    --wa-color-brand-on-quiet: var(--hot-color-blue-700);
-    --wa-color-brand-on-normal: var(--hot-color-blue-700);
+    /* Brand = HOT primary (red) */
+    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);   /* primary-50  */
+    --wa-color-brand-fill-normal: var(--wa-color-brand-90);  /* primary-100 */
+    --wa-color-brand-fill-loud: var(--wa-color-brand-50);    /* primary-500 */
+    --wa-color-brand-border-quiet: var(--wa-color-brand-90); /* primary-100 */
+    --wa-color-brand-border-normal: var(--wa-color-brand-80); /* primary-200 */
+    --wa-color-brand-border-loud: var(--wa-color-brand-60);  /* primary-400 */
+    --wa-color-brand-on-quiet: var(--wa-color-brand-40);     /* primary-600 */
+    --wa-color-brand-on-normal: var(--wa-color-brand-30);    /* primary-700 */
     --wa-color-brand-on-loud: white;
 
-    --wa-color-success-fill-quiet: var(--hot-color-success-50);
-    --wa-color-success-fill-normal: var(--hot-color-success-100);
-    --wa-color-success-fill-loud: var(--hot-color-success-700);
-    --wa-color-success-border-quiet: var(--hot-color-success-100);
-    --wa-color-success-border-normal: var(--hot-color-success-800);
-    --wa-color-success-border-loud: var(--hot-color-success-700);
-    --wa-color-success-on-quiet: var(--hot-color-success-800);
-    --wa-color-success-on-normal: var(--hot-color-success-800);
+    /* Success = HOT cyan
+       on-quiet/normal use darker values for sufficient contrast on light backgrounds */
+    --wa-color-success-fill-quiet: var(--wa-color-success-95);   /* success-50  */
+    --wa-color-success-fill-normal: var(--wa-color-success-90);  /* success-100 */
+    --wa-color-success-fill-loud: var(--wa-color-success-50);    /* success-500 */
+    --wa-color-success-border-quiet: var(--wa-color-success-90); /* success-100 */
+    --wa-color-success-border-normal: var(--wa-color-success-80); /* success-200 */
+    --wa-color-success-border-loud: var(--wa-color-success-60);  /* success-400 */
+    --wa-color-success-on-quiet: var(--wa-color-success-20);     /* success-800 - a11y: cyan needs dark text */
+    --wa-color-success-on-normal: var(--wa-color-success-20);    /* success-800 */
     --wa-color-success-on-loud: white;
 
-    --wa-color-warning-fill-quiet: var(--hot-color-warning-50);
-    --wa-color-warning-fill-normal: var(--hot-color-warning-100);
-    --wa-color-warning-fill-loud: var(--hot-color-warning-950);
-    --wa-color-warning-border-quiet: var(--hot-color-warning-100);
-    --wa-color-warning-border-normal: var(--hot-color-warning-950);
-    --wa-color-warning-border-loud: var(--hot-color-warning-950);
-    --wa-color-warning-on-quiet: var(--hot-color-warning-950);
-    --wa-color-warning-on-normal: var(--hot-color-warning-950);
-    --wa-color-warning-on-loud: white;
-
-    --wa-color-danger-fill-quiet: var(--hot-color-danger-50);
-    --wa-color-danger-fill-normal: var(--hot-color-danger-100);
-    --wa-color-danger-fill-loud: var(--hot-color-danger-500);
-    --wa-color-danger-border-quiet: var(--hot-color-danger-100);
-    --wa-color-danger-border-normal: var(--hot-color-danger-950);
-    --wa-color-danger-border-loud: var(--hot-color-danger-500);
-    --wa-color-danger-on-quiet: var(--hot-color-danger-950);
-    --wa-color-danger-on-normal: var(--hot-color-danger-950);
+    /* Warning = HOT yellow
+       on-* and on-loud use dark amber for contrast - white on bright yellow is unreadable */
+    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);   /* warning-50  */
+    --wa-color-warning-fill-normal: var(--wa-color-warning-90);  /* warning-100 */
+    --wa-color-warning-fill-loud: var(--wa-color-warning-50);    /* warning-500 (#FED82E) */
+    --wa-color-warning-border-quiet: var(--wa-color-warning-90); /* warning-100 */
+    --wa-color-warning-border-normal: var(--wa-color-warning-80); /* warning-200 */
+    --wa-color-warning-border-loud: var(--wa-color-warning-40);  /* warning-600 (amber) */
+    --wa-color-warning-on-quiet: var(--wa-color-warning-05);     /* warning-950 - a11y: yellow needs dark text */
+    --wa-color-warning-on-normal: var(--wa-color-warning-05);    /* warning-950 */
+    --wa-color-warning-on-loud: var(--wa-color-warning-05);      /* warning-950 - white on yellow = ~1:1 contrast */
+
+    /* Danger = HOT red
+       on-quiet/normal use darker values for accessibility */
+    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);   /* danger-50  */
+    --wa-color-danger-fill-normal: var(--wa-color-danger-90);  /* danger-100 */
+    --wa-color-danger-fill-loud: var(--wa-color-danger-50);    /* danger-500 */
+    --wa-color-danger-border-quiet: var(--wa-color-danger-90); /* danger-100 */
+    --wa-color-danger-border-normal: var(--wa-color-danger-80); /* danger-200 */
+    --wa-color-danger-border-loud: var(--wa-color-danger-60);  /* danger-400 */
+    --wa-color-danger-on-quiet: var(--wa-color-danger-05);     /* danger-950 - a11y */
+    --wa-color-danger-on-normal: var(--wa-color-danger-05);    /* danger-950 */
     --wa-color-danger-on-loud: white;
 
-    --wa-color-neutral-fill-quiet: var(--hot-color-neutral-50);
-    --wa-color-neutral-fill-normal: var(--hot-color-neutral-100);
-    --wa-color-neutral-fill-loud: var(--hot-color-neutral-950);
-    --wa-color-neutral-border-quiet: var(--hot-color-neutral-950);
-    --wa-color-neutral-border-normal: var(--hot-color-neutral-200);
-    --wa-color-neutral-border-loud: var(--hot-color-neutral-400);
-    --wa-color-neutral-on-quiet: var(--hot-color-neutral-950);
-    --wa-color-neutral-on-normal: var(--hot-color-neutral-950);
-    --wa-color-neutral-on-loud: white;
+    /* Neutral = HOT gray (secondary button colour)
+       fill-loud uses neutral-200 (light gray) for a secondary button feel;
+       on-loud uses neutral-950 (dark text) for contrast on light fill */
+    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);   /* neutral-50  */
+    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);  /* neutral-100 */
+    --wa-color-neutral-fill-loud: var(--wa-color-neutral-80);    /* neutral-200 */
+    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); /* neutral-100 */
+    --wa-color-neutral-border-normal: var(--wa-color-neutral-80); /* neutral-200 */
+    --wa-color-neutral-border-loud: var(--wa-color-neutral-60);  /* neutral-400 */
+    --wa-color-neutral-on-quiet: var(--wa-color-neutral-05);     /* neutral-950 */
+    --wa-color-neutral-on-normal: var(--wa-color-neutral-05);    /* neutral-950 */
+    --wa-color-neutral-on-loud: var(--wa-color-neutral-05);      /* neutral-950 - dark text on light gray fill */
+    /* #endregion */
+  }
+
+  /* ─── Typography, spacing and border tokens ──────────────────────────────
+     Must be in @layer wa-theme (same layer as WA's own declarations) so our
+     values win when this file is imported after WA's default.css.
+  ──────────────────────────────────────────────────────────────────────── */
+  :where(:root),
+  .wa-theme-default,
+  .wa-light,
+  .wa-dark,
+  .wa-invert {
+    /* #region Fonts */
+    --wa-font-family-body: var(--hot-font-sans);
+    --wa-font-family-heading: var(--hot-font-sans-variant-condensed);
+    --wa-font-family-code: var(--hot-font-mono);
+    --wa-font-family-longform: var(--hot-font-serif);
+
+    /* Font sizes - fixed values to match HOT scale */
+    --wa-font-size-2xs: var(--hot-font-size-2x-small); /* 10px */
+    --wa-font-size-xs: var(--hot-font-size-x-small);   /* 12px */
+    --wa-font-size-s: var(--hot-font-size-small);      /* 14px */
+    --wa-font-size-m: var(--hot-font-size-medium);     /* 16px */
+    --wa-font-size-l: var(--hot-font-size-large);      /* 20px */
+    --wa-font-size-xl: var(--hot-font-size-x-large);   /* 24px */
+    --wa-font-size-2xl: var(--hot-font-size-2x-large); /* 36px */
+    --wa-font-size-3xl: var(--hot-font-size-3x-large); /* 48px */
+    --wa-font-size-4xl: var(--hot-font-size-4x-large); /* 72px */
+    /* wa-font-size-scale, wa-font-size-smaller/larger use calc() - no override */
+
+    /* Font weights */
+    --wa-font-weight-light: var(--hot-font-weight-light);       /* 300 */
+    --wa-font-weight-normal: var(--hot-font-weight-normal);     /* 400 */
+    --wa-font-weight-semibold: var(--hot-font-weight-semibold); /* 500 */
+    --wa-font-weight-bold: var(--hot-font-weight-bold);         /* 700 */
+
+    /* Functional font weights */
+    --wa-font-weight-body: var(--wa-font-weight-normal);
+    --wa-font-weight-heading: var(--wa-font-weight-bold);
+    --wa-font-weight-code: var(--wa-font-weight-normal);
+    --wa-font-weight-longform: var(--wa-font-weight-normal);
+    --wa-font-weight-action: var(--wa-font-weight-semibold);
+
+    /* Line heights */
+    --wa-line-height-condensed: var(--hot-line-height-dense);   /* 1.4 */
+    --wa-line-height-normal: var(--hot-line-height-normal);     /* 1.8 */
+    --wa-line-height-expanded: var(--hot-line-height-loose);    /* 2.2 */
+    /* #endregion */
+
+    /* #region Spacing */
+    --wa-space-3xs: var(--hot-spacing-3x-small); /* 2px  */
+    --wa-space-2xs: var(--hot-spacing-2x-small); /* 4px  */
+    --wa-space-xs: var(--hot-spacing-x-small);   /* 8px  */
+    --wa-space-s: var(--hot-spacing-small);      /* 12px */
+    --wa-space-m: var(--hot-spacing-medium);     /* 16px */
+    --wa-space-l: var(--hot-spacing-large);      /* 20px */
+    --wa-space-xl: var(--hot-spacing-x-large);   /* 28px */
+    --wa-space-2xl: var(--hot-spacing-2x-large); /* 36px */
+    --wa-space-3xl: var(--hot-spacing-3x-large); /* 48px */
+    --wa-space-4xl: var(--hot-spacing-4x-large); /* 72px */
+    /* #endregion */
+
+    /* #region Border radius */
+    --wa-border-radius-s: var(--hot-border-radius-small);   /* 3px  */
+    --wa-border-radius-m: var(--hot-border-radius-medium);  /* 4px  */
+    --wa-border-radius-l: var(--hot-border-radius-large);   /* 8px  */
+    --wa-border-radius-pill: var(--hot-border-radius-pill); /* 9999px */
+    --wa-border-radius-circle: var(--hot-border-radius-circle); /* 50% */
+    /* #endregion */
   }
 }

package/dist/themes/hot.css

@@ -175,7 +175,7 @@
    --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --hot-font-sans-variant: 'Barlow';
    --hot-font-sans-variant-condensed: 'Barlow Condensed';
-   --hot-font-sefif: Georgia, 'Times New Roman', serif;
+   --hot-font-serif: Georgia, 'Times New Roman', serif;
    --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace, Consolas, 'Liberation Mono', Menlo, monospace;
 
    /* Font sizes */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/ui",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Shared UI components with HOT theming.",
   "homepage": "https://github.com/hotosm/ui#readme",
   "author": {
@@ -40,7 +40,8 @@
     "./dist/hotosm-ui.js": "./dist/hotosm-ui.js",
     "./dist/components/*": "./dist/components/*",
     "./dist/themes/*": "./dist/themes/*",
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css",
+    "./dist/style-core.css": "./dist/style-core.css"
   },
   "files": [
     "dist"
@@ -82,6 +83,7 @@
     "dev": "storybook dev -p 3001 --no-open",
     "build:docs": "storybook build --output-dir docs",
     "build": "node scripts/build.js",
+    "serve:dist": "node scripts/serve-dist.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "coverage": "vitest run --coverage"

package/dist/chunks/chunk.CQO3GWTI.js

@@ -1,32 +0,0 @@
-import{a as l}from"./chunk.ARF626EG.js";import{a as n}from"./chunk.ZETV7TDG.js";import{d as a,f as h}from"./chunk.QABMDRWR.js";import{d as s}from"./chunk.N2W26RCT.js";import"@awesome.me/webawesome/dist/components/dropdown/dropdown";import"@awesome.me/webawesome/dist/components/button/button";import"@awesome.me/webawesome/dist/components/icon/icon";var g='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">%0A  <path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"/>%0A</svg>';var p='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var d='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var w='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var m='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var c='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var f='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var v='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var u='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="white"/></svg>%0A';var k=[{id:"imagery",title:"Imagery"},{id:"mapping",title:"Mapping"},{id:"field",title:"Field"},{id:"data",title:"Data"}],E=[{id:"drone",title:"Drone Tasking Manager",href:"https://dronetm.org/",icon:p,section:"imagery"},{id:"oam",title:"OpenAerialMap",href:"https://openaerialmap.org/",icon:d,section:"imagery"},{id:"tasking-manager",title:"Tasking Manager",href:"https://tasks.hotosm.org/",icon:w,section:"mapping"},{id:"fair",title:"fAIr",href:"https://fair.hotosm.org/",icon:m,section:"mapping"},{id:"field",title:"Field Mapping Tasking Manager",href:"https://fmtm.hotosm.org/",icon:c,section:"field"},{id:"chat-map",title:"ChatMap",href:"https://www.hotosm.org/tech-suite/chatmap/",icon:f,section:"field"},{id:"export-tool",title:"Export Tool",href:"https://export.hotosm.org/",icon:v,section:"data"},{id:"umap",title:"Maps",href:"https://umap.hotosm.org/",icon:u,section:"data"}],r=class extends h{constructor(){super(...arguments);this.showLogos=!1;this.tools=E}getToolsBySection(t){return this.tools.filter(o=>o.section===t)}handleSelect(t){let o=t.detail.item.value,i=this.tools.find(e=>e.id===o);i&&(this.dispatchEvent(new CustomEvent("tool-selected",{detail:{tool:i},bubbles:!0,composed:!0})),window.open(i.href,"_blank","noopener,noreferrer"))}render(){return a`
-      <wa-dropdown placement="bottom-end" @wa-select=${this.handleSelect}>
-        <wa-button
-          slot="trigger"
-          appearance="plain"
-          aria-label="Open tools menu"
-        >
-          <wa-icon src="${g}" class="menu-icon"></wa-icon>
-        </wa-button>
-
-        ${k.map((t,o)=>{let i=this.getToolsBySection(t.id);return i.length===0?"":a`
-            <div
-              class="section-group ${o>0?"section-divider":""}"
-            >
-              <wa-dropdown-label>${t.title}</wa-dropdown-label>
-              ${i.map(e=>a`
-                  <wa-dropdown-item value="${e.id}">
-                    ${this.showLogos?a`<img
-                          slot="icon"
-                          src="${e.icon}"
-                          alt="${e.title}"
-                          style="width: 32px; height: 32px; object-fit: contain; display: block;"
-                        />`:""}
-                    <div class="tool-content">
-                      <div class="tool-title">${e.title}</div>
-                    </div>
-                  </wa-dropdown-item>
-                `)}
-            </div>
-          `})}
-      </wa-dropdown>
-    `}};r.styles=l,s([n({type:Boolean,attribute:"show-logos",reflect:!1})],r.prototype,"showLogos",2);var et=r;export{r as a,et as b};

package/dist/chunks/chunk.LHZ7Q2M3.js

@@ -1,166 +0,0 @@
-import{a as f}from"./chunk.QABMDRWR.js";import{a as h,c as v}from"./chunk.N2W26RCT.js";function p(t){var r,e,a="";if(typeof t=="string"||typeof t=="number")a+=t;else if(typeof t=="object")if(Array.isArray(t)){var n=t.length;for(r=0;r<n;r++)t[r]&&(e=p(t[r]))&&(a&&(a+=" "),a+=e)}else for(e in t)t[e]&&(a&&(a+=" "),a+=e);return a}function b(){for(var t,r,e=0,a="",n=arguments.length;e<n;e++)(t=arguments[e])&&(r=p(t))&&(a&&(a+=" "),a+=r);return a}var x=t=>typeof t=="boolean"?`${t}`:t===0?"0":t,y=b,w=(t,r)=>e=>{var a;if((r==null?void 0:r.variants)==null)return y(t,e==null?void 0:e.class,e==null?void 0:e.className);let{variants:n,defaultVariants:s}=r,z=Object.keys(n).map(o=>{let i=e==null?void 0:e[o],d=s==null?void 0:s[o];if(i===null)return null;let l=x(i)||x(d);return n[o][l]}),m=e&&Object.entries(e).reduce((o,i)=>{let[d,l]=i;return l===void 0||(o[d]=l),o},{}),j=r==null||(a=r.compoundVariants)===null||a===void 0?void 0:a.reduce((o,i)=>{let g=i,{class:d,className:l}=g,k=v(g,["class","className"]);return Object.entries(k).every(V=>{let[u,c]=V;return Array.isArray(c)?c.includes(h(h({},s),m)[u]):h(h({},s),m)[u]===c})?[...o,d,l]:o},[]);return y(t,z,j,e==null?void 0:e.class,e==null?void 0:e.className)};var S=w(`
-      header
-  `,{variants:{size:{small:"header--size-small",medium:"header--size-medium",large:"header--size-large"},borderBottom:{true:"border-bottom"}}}),_=f`
-  .header {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    height: auto;
-    padding: 0 var(--hot-spacing-small);
-  }
-
-  .header.border-bottom {
-    border-bottom: var(--hot-spacing-3x-small) solid var(--hot-color-neutral-50);
-  }
-
-  .header--size-small {
-    height: var(--hot-spacing-4x-large);
-  }
-
-  .header--size-medium {
-    height: calc(var(--hot-spacing-4x-large) * 2);
-  }
-
-  .header--size-large {
-    height: calc(var(--hot-spacing-4x-large) * 4);
-  }
-
-  .header--link {
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding-right: var(--hot-spacing-2x-small);
-    gap: var(--hot-spacing-x-small);
-  }
-
-  .header--title {
-    color: var(--hot-color-neutral-950);
-    font-family: var(--hot-font-sans);
-    font-size: var(--hot-font-size-large);
-  }
-
-  .header--tab::part(base) {
-    font-size: var(--hot-font-size-medium);
-    font-weight: var(--hot-font-weight-normal);
-    color: var(--hot-color-neutral-950);
-    padding: var(--hot-spacing-small) var(--hot-spacing-small);
-    border-bottom: 3px solid transparent;
-    transition: all 0.2s ease;
-    text-transform: uppercase;
-    font-weight: var(--hot-font-weight-bold);
-    letter-spacing: 0.5px;
-  }
-
-  .header--tab[active]::part(base) {
-    border-bottom-color: var(--hot-color-red-500);
-    font-weight: var(--hot-font-weight-bold);
-    color: var(--hot-color-neutral-950);
-  }
-
-  .header--tab:hover::part(base) {
-    color: var(--hot-color-neutral-700);
-    border-bottom-color: var(--hot-color-red-300);
-  }
-
-  .header--tab[active]:hover::part(base) {
-    color: var(--hot-color-neutral-950);
-    border-bottom-color: var(--hot-color-red-600);
-  }
-
-  .header--tab-group::part(base) {
-    --track-color: transparent;
-    --indicator-color: transparent;
-  }
-
-  .header--nav {
-    display: none;
-  }
-
-  .header--nav-mobile {
-    display: block;
-    width: 100%;
-    margin-top: var(--hot-spacing-small);
-  }
-
-  .header--person-circle {
-    font-size: var(--hot-font-size-x-large);
-  }
-
-  .header--drawer {
-    font-size: var(--hot-font-size-x-large);
-  }
-
-  .header--right-section {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--hot-spacing-x-small);
-  }
-
-  .header--logo-img {
-    max-height: 2.5rem;
-    width: auto;
-  }
-
-  wa-button[appearance="outlined"] {
-    /* Make drawer button larger for touch */
-    min-width: 2.5rem;
-    min-height: 2.5rem;
-    padding: 0.5rem;
-  }
-
-  /* Login Modal Styles */
-  .login-modal {
-    --width: 35rem;
-    --border-radius: 8px;
-    --background-color: white;
-  }
-
-  /* --- Responsive styles for tablet and desktop --- */
-  @media (min-width: 769px) {
-    .header {
-      align-items: center;
-      height: auto;
-    }
-
-    .header--link {
-      justify-content: space-between;
-      padding-right: 0;
-      gap: var(--hot-spacing-small);
-    }
-
-    .header--title {
-      font-size: var(--hot-font-size-x-large);
-    }
-
-    .header--nav {
-      display: flex;
-      justify-content: space-between;
-      justify-items: center;
-      gap: var(--hot-spacing-medium);
-      font-weight: var(--hot-font-weight-semibold);
-    }
-
-    .header--nav-mobile {
-      display: none;
-    }
-
-    .header--right-section {
-      justify-content: center;
-      margin-top: 0;
-      gap: var(--hot-spacing-small);
-    }
-
-    .header--logo-img {
-      max-height: none;
-      width: auto;
-    }
-
-    wa-button[appearance="outlined"] {
-      min-width: auto;
-      min-height: auto;
-      padding: initial;
-    }
-  }
-`;export{S as a,_ as b};

package/dist/chunks/chunk.PBBH42B6.js

@@ -1,6 +0,0 @@
-import{a as e}from"./chunk.QABMDRWR.js";var t=e`
-  .logo {
-    line-height: 0;
-    height: var(--hot-spacing-3x-large)
-  }
-`;export{t as a};