@hotosm/ui 0.6.1 → 0.7.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.7.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.PLECT4NZ.js

@@ -1,20 +0,0 @@
-import{a as r}from"./chunk.7BVHA4G6.js";import{a as n}from"./chunk.ZETV7TDG.js";import{d as l,f as a}from"./chunk.QABMDRWR.js";import{d as t,e as s,f as o,g as i}from"./chunk.N2W26RCT.js";import"@awesome.me/webawesome/dist/components/icon/icon.js";var h,d,m,v,u,y,e=class extends a{constructor(){super(...arguments);this.name="hot-list-card";o(this,h,"");o(this,d,"");o(this,m,"");o(this,v,"");o(this,u,!0);o(this,y,!0)}get title(){return s(this,h)}set title(c){i(this,h,c)}get subtitle(){return s(this,d)}set subtitle(c){i(this,d,c)}get icon(){return s(this,m)}set icon(c){i(this,m,c)}get itemId(){return s(this,v)}set itemId(c){i(this,v,c)}get showRemove(){return s(this,u)}set showRemove(c){i(this,u,c)}get showIcon(){return s(this,y)}set showIcon(c){i(this,y,c)}_handleRemove(){this.dispatchEvent(new CustomEvent("hot-remove",{detail:{id:this.itemId},bubbles:!0,composed:!0}))}_handleKeyDown(c){(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),this._handleRemove())}render(){let c=this.showIcon&&this.icon;return l`
-      <div class="list-item" role="listitem">
-        ${c?l`<wa-icon name=${this.icon} class="list-icon" aria-hidden="true"></wa-icon>`:""}
-        <div class="list-info">
-          <div class="list-title" id="title-${this.itemId}">${this.title}</div>
-          ${this.subtitle?l`<div class="list-subtitle">${this.subtitle}</div>`:""}
-        </div>
-        ${this.showRemove?l`
-              <button
-                type="button"
-                class="remove-button"
-                @click=${this._handleRemove}
-                @keydown=${this._handleKeyDown}
-                aria-label="Remove ${this.title}"
-              >
-                <wa-icon name="xmark" class="remove-icon" aria-hidden="true"></wa-icon>
-              </button>
-            `:""}
-      </div>
-    `}};h=new WeakMap,d=new WeakMap,m=new WeakMap,v=new WeakMap,u=new WeakMap,y=new WeakMap,e.styles=[r],t([n({type:String})],e.prototype,"title",1),t([n({type:String})],e.prototype,"subtitle",1),t([n({type:String})],e.prototype,"icon",1),t([n({type:String})],e.prototype,"itemId",1),t([n({type:Boolean})],e.prototype,"showRemove",1),t([n({type:Boolean})],e.prototype,"showIcon",1);var I=e;export{e as a,I as b};