@hotosm/ui 0.3.2-b5 → 0.3.2-b7

package/dist/chunks/chunk.GGX6E7QF.js

@@ -0,0 +1,179 @@
+import{b as p}from"./chunk.TNLBUOUK.js";import{a as h,c as g}from"./chunk.NI7UJOOZ.js";function b(r){var e,o,t="";if(typeof r=="string"||typeof r=="number")t+=r;else if(typeof r=="object")if(Array.isArray(r)){var i=r.length;for(e=0;e<i;e++)r[e]&&(o=b(r[e]))&&(t&&(t+=" "),t+=o)}else for(o in r)r[o]&&(t&&(t+=" "),t+=o);return t}function f(){for(var r,e,o=0,t="",i=arguments.length;o<i;o++)(r=arguments[o])&&(e=b(r))&&(t&&(t+=" "),t+=e);return t}var y=r=>typeof r=="boolean"?`${r}`:r===0?"0":r,x=f,w=(r,e)=>o=>{var t;if((e==null?void 0:e.variants)==null)return x(r,o==null?void 0:o.class,o==null?void 0:o.className);let{variants:i,defaultVariants:s}=e,z=Object.keys(i).map(a=>{let l=o==null?void 0:o[a],d=s==null?void 0:s[a];if(l===null)return null;let n=y(l)||y(d);return i[a][n]}),m=o&&Object.entries(o).reduce((a,l)=>{let[d,n]=l;return n===void 0||(a[d]=n),a},{}),A=e==null||(t=e.compoundVariants)===null||t===void 0?void 0:t.reduce((a,l)=>{let u=l,{class:d,className:n}=u,O=g(u,["class","className"]);return Object.entries(O).every(C=>{let[v,c]=C;return Array.isArray(c)?c.includes(h(h({},s),m)[v]):h(h({},s),m)[v]===c})?[...a,d,n]:a},[]);return x(r,z,A,o==null?void 0:o.class,o==null?void 0:o.className)};var V=w(`
+      header
+  `,{variants:{size:{small:"header--size-small",medium:"header--size-medium",large:"header--size-large"},borderBottom:{true:"border-bottom"}}}),F=p`
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    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: space-between;
+    gap: var(--hot-spacing-small);
+  }
+
+  .header--title {
+    color: var(--hot-color-neutral-950);
+    font-family: var(--hot-font-sans);
+    font-size: var(--hot-font-size-x-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);
+  }
+
+  .header--tab-group::part(base) {
+    --track-color: transparent;
+    --indicator-color: none;
+  }
+
+  .header--nav {
+    justify-content: space-between;
+    justify-items: center;
+    gap: var(--hot-spacing-medium);
+    font-weight: var(--hot-font-weight-semibold);
+  }
+
+  .header--nav-mobile {
+  }
+
+  .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;
+    gap: var(--hot-spacing-small);
+  }
+
+  .header--logo-img {
+  }
+
+  .header--tab {
+    border-bottom: 2px solid;
+    border-color: transparent;
+  }
+  .header--tab-active {
+    border-color: var(--hot-color-neutral-1000);
+  }
+
+  /* Login Modal Styles */
+  .login-modal {
+    --width: 35rem;
+    --border-radius: 8px;
+    --background-color: white;
+  }
+
+  /* Global wa-button styling when shadow DOM is disabled */
+  wa-button {
+    /* HOT Color primitives */
+    --hot-color-red-950: #A52A28;
+    --hot-color-red-900: #B9302D;
+    --hot-color-red-800: #B83032;
+    --hot-color-red-700: #C53639;
+    --hot-color-red-600: #D73F3F;
+    --hot-color-red-500: #F34D47;
+    --hot-color-red-400: #ED5C5E;
+    --hot-color-red-300: #E27A7D;
+    --hot-color-red-200: #EC9EA1;
+    --hot-color-red-100: #FDD0D6;
+    --hot-color-red-50: #FEECEF;
+
+    /* HOT Semantic colors */
+    --hot-color-primary-950: var(--hot-color-red-950);
+    --hot-color-primary-900: var(--hot-color-red-900);
+    --hot-color-primary-800: var(--hot-color-red-800);
+    --hot-color-primary-700: var(--hot-color-red-700);
+    --hot-color-primary-600: var(--hot-color-red-600);
+    --hot-color-primary-500: var(--hot-color-red-500);
+    --hot-color-primary-400: var(--hot-color-red-400);
+    --hot-color-primary-300: var(--hot-color-red-300);
+    --hot-color-primary-200: var(--hot-color-red-200);
+    --hot-color-primary-100: var(--hot-color-red-100);
+    --hot-color-primary-50: var(--hot-color-red-50);
+
+    /* HOT Typography */
+    --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --hot-font-weight-semibold: 500;
+    --hot-font-weight-bold: 700;
+
+    /* HOT Spacing */
+    --hot-spacing-x-small: 0.5rem;
+    --hot-spacing-small: 0.75rem;
+    --hot-spacing-medium: 1rem;
+    --hot-spacing-large: 1.25rem;
+
+    /* HOT Border radius */
+    --hot-border-radius-medium: 0.25rem;
+    --hot-border-radius-circle: 50%;
+
+    /* HOT Font sizes */
+    --hot-font-size-small: 0.875rem;
+    --hot-font-size-medium: 1rem;
+    --hot-font-size-large: 1.25rem;
+  }
+
+  /* Apply HOT styling to button parts */
+  wa-button::part(base) {
+    font-family: var(--hot-font-sans);
+    font-weight: var(--hot-font-weight-semibold);
+    border-radius: var(--hot-border-radius-medium);
+    transition: all 0.2s ease-in-out;
+  }
+
+  wa-button::part(base):hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  wa-button::part(base):active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  wa-button::part(label) {
+    font-family: var(--hot-font-sans);
+    font-weight: var(--hot-font-weight-semibold);
+  }
+
+  /* Login button specific styling */
+  wa-button.login-button::part(base) {
+    background: linear-gradient(135deg, var(--hot-color-primary-500), var(--hot-color-primary-600));
+    border: none;
+    color: white;
+    padding: var(--hot-spacing-small) var(--hot-spacing-medium);
+    font-size: var(--hot-font-size-medium);
+  }
+
+  wa-button.login-button::part(base):hover {
+    background: linear-gradient(135deg, var(--hot-color-primary-600), var(--hot-color-primary-700));
+  }
+`;export{V as a,F as b};

package/dist/chunks/chunk.NTH75J37.js

@@ -0,0 +1 @@
+import{b as e}from"./chunk.6YNKD56X.js";var r=e;customElements.define("hot-header",e);export{r as a};

package/dist/components/header/header.component.d.ts

@@ -10,6 +10,8 @@ interface MenuItem {
 }
 export declare class Header extends LitElement {
     static styles: CSSResultGroup;
+    static shadowRootOptions: ShadowRootInit;
+    createRenderRoot(): DocumentFragment | HTMLElement;
     name: string;
     /** Use a text-based title in the header. */
     accessor title: string;
@@ -31,7 +33,21 @@ export declare class Header extends LitElement {
     accessor loginModalOpen: boolean;
     /** Default fallback icon for providers without custom icons. */
     accessor defaultLoginIcon: string;
+    private mutationObserver?;
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    /**
+     * Injects HOT theme CSS into the shadow DOM of wa-button components
+     */
+    private injectCSSIntoShadowDOM;
+    /**
+     * Sets up mutation observer to automatically inject CSS into new wa-button components
+     */
+    private setupMutationObserver;
+    /**
+     * Override updated() to inject CSS when new wa-button elements are added
+     */
+    updated(changedProperties: Map<string, unknown>): void;
     selectTab(index: number): void;
     protected render(): import("lit-html").TemplateResult<1>;
     private _tabClick;

package/dist/components/header/header.component.js

@@ -1 +1 @@
-import{a,b}from"../../chunks/chunk.UMBUH2EC.js";import"../../chunks/chunk.WX25LIXR.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Header,b as default};
+import{a,b}from"../../chunks/chunk.6YNKD56X.js";import"../../chunks/chunk.GGX6E7QF.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Header,b as default};

package/dist/components/header/header.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.RQCFXHIG.js";import"../../chunks/chunk.UMBUH2EC.js";import"../../chunks/chunk.WX25LIXR.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
+import{a}from"../../chunks/chunk.NTH75J37.js";import"../../chunks/chunk.6YNKD56X.js";import"../../chunks/chunk.GGX6E7QF.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};

package/dist/components/header/header.styles.js

@@ -1 +1 @@
-import{a,b}from"../../chunks/chunk.WX25LIXR.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as headerVariants,b as styles};
+import{a,b}from"../../chunks/chunk.GGX6E7QF.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as headerVariants,b as styles};

package/dist/hotosm-ui.js

@@ -1 +1 @@
-import{a as o}from"./chunks/chunk.RQCFXHIG.js";import"./chunks/chunk.UMBUH2EC.js";import"./chunks/chunk.WX25LIXR.js";import{a as t}from"./chunks/chunk.MCLA4YSC.js";import"./chunks/chunk.CFJBM2JT.js";import"./chunks/chunk.W65BP3JY.js";import{a as r}from"./chunks/chunk.3P72BRDN.js";import"./chunks/chunk.2E5B6OR3.js";import{a}from"./chunks/chunk.KWRSAL43.js";import"./chunks/chunk.NQSLFHXC.js";import"./chunks/chunk.O6I2TNK3.js";import{a as m}from"./chunks/chunk.SMFWK2VT.js";import"./chunks/chunk.OSUPNFJP.js";import"./chunks/chunk.34D2LPI2.js";import"./chunks/chunk.O2GMJYSL.js";import"./chunks/chunk.2FEIL35F.js";import"./chunks/chunk.6Y3X2E2V.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.GTNRNZDH.js";import"./chunks/chunk.TNLBUOUK.js";import"./chunks/chunk.NI7UJOOZ.js";export{a as Button,m as Consent,o as Header,t as Logo,r as Tracking};
+import{a as o}from"./chunks/chunk.NTH75J37.js";import"./chunks/chunk.6YNKD56X.js";import"./chunks/chunk.GGX6E7QF.js";import{a as t}from"./chunks/chunk.MCLA4YSC.js";import"./chunks/chunk.CFJBM2JT.js";import"./chunks/chunk.W65BP3JY.js";import{a as r}from"./chunks/chunk.3P72BRDN.js";import"./chunks/chunk.2E5B6OR3.js";import{a}from"./chunks/chunk.KWRSAL43.js";import"./chunks/chunk.NQSLFHXC.js";import"./chunks/chunk.O6I2TNK3.js";import{a as m}from"./chunks/chunk.SMFWK2VT.js";import"./chunks/chunk.OSUPNFJP.js";import"./chunks/chunk.34D2LPI2.js";import"./chunks/chunk.O2GMJYSL.js";import"./chunks/chunk.2FEIL35F.js";import"./chunks/chunk.6Y3X2E2V.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.GTNRNZDH.js";import"./chunks/chunk.TNLBUOUK.js";import"./chunks/chunk.NI7UJOOZ.js";export{a as Button,m as Consent,o as Header,t as Logo,r as Tracking};

package/dist/themes/hot.css

@@ -1,4 +1,5 @@
 /* HOT theme */
+
 /* :root makes them available globally */
 :root,
 /* :host is for Web Components and shadow DOM scopes */
@@ -16,7 +17,7 @@
    --hot-color-red-800: #B83032;
    --hot-color-red-700: #C53639;
    --hot-color-red-600: #D73F3F;
-   --hot-color-red-500: green;
+   --hot-color-red-500: #F34D47;
    --hot-color-red-400: #ED5C5E;
    --hot-color-red-300: #E27A7D;
    --hot-color-red-200: #EC9EA1;

package/dist/utils/shadow-dom-config.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Configuration for shadow DOM handling in HOT UI components
+ */
+export interface ShadowDOMConfig {
+    /** Whether to disable shadow DOM for Lit components */
+    disableShadowDOM: boolean;
+    /** Whether to inject CSS into shadow DOM when not disabled */
+    injectCSS: boolean;
+    /** Whether to use mutation observers for dynamic content */
+    useMutationObserver: boolean;
+}
+/**
+ * Default configuration
+ * - disableShadowDOM: false (keep shadow DOM for encapsulation)
+ * - injectCSS: true (inject HOT theme CSS into shadow DOM)
+ * - useMutationObserver: true (automatically handle dynamic content)
+ */
+export declare const defaultShadowDOMConfig: ShadowDOMConfig;
+/**
+ * Configuration that disables shadow DOM entirely
+ * Use this when you want global CSS to penetrate all components
+ */
+export declare const noShadowDOMConfig: ShadowDOMConfig;
+/**
+ * Configuration that keeps shadow DOM but injects CSS
+ * Use this for maximum encapsulation with HOT theming
+ */
+export declare const injectCSSConfig: ShadowDOMConfig;
+/**
+ * Global configuration instance
+ * Can be modified at runtime to change behavior
+ */
+export declare let globalShadowDOMConfig: ShadowDOMConfig;
+/**
+ * Set the global shadow DOM configuration
+ * @param config The configuration to use
+ */
+export declare function setShadowDOMConfig(config: ShadowDOMConfig): void;
+/**
+ * Get the current global shadow DOM configuration
+ * @returns The current configuration
+ */
+export declare function getShadowDOMConfig(): ShadowDOMConfig;
+/**
+ * Helper function to determine if shadow DOM should be disabled for a component
+ * @returns True if shadow DOM should be disabled
+ */
+export declare function shouldDisableShadowDOM(): boolean;
+/**
+ * Helper function to determine if CSS should be injected into shadow DOM
+ * @returns True if CSS should be injected
+ */
+export declare function shouldInjectCSS(): boolean;
+/**
+ * Helper function to determine if mutation observers should be used
+ * @returns True if mutation observers should be used
+ */
+export declare function shouldUseMutationObserver(): boolean;

package/dist/utils/shadow-dom-css.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Utility functions for injecting CSS into shadow DOM components
+ */
+/**
+ * HOT theme CSS variables and styles for injection into shadow DOM
+ */
+export declare const HOT_THEME_CSS = "\n  :host {\n    /* HOT Color primitives */\n    --hot-color-red-950: #A52A28;\n    --hot-color-red-900: #B9302D;\n    --hot-color-red-800: #B83032;\n    --hot-color-red-700: #C53639;\n    --hot-color-red-600: #D73F3F;\n    --hot-color-red-500: #F34D47;\n    --hot-color-red-400: #ED5C5E;\n    --hot-color-red-300: #E27A7D;\n    --hot-color-red-200: #EC9EA1;\n    --hot-color-red-100: #FDD0D6;\n    --hot-color-red-50: #FEECEF;\n\n    --hot-color-rose-950: #3E030B;\n    --hot-color-rose-900: #4B040E;\n    --hot-color-rose-800: #5C1517;\n    --hot-color-rose-700: #6B231D;\n    --hot-color-rose-600: #7C2E26;\n    --hot-color-rose-500: #7D463F;\n    --hot-color-rose-400: #9E6960;\n    --hot-color-rose-300: #B3837B;\n    --hot-color-rose-200: #CFA59E;\n    --hot-color-rose-100: #EAC7C0;\n    --hot-color-rose-50: #FFE6DE;\n\n    --hot-color-yellow-950: #CC6508;\n    --hot-color-yellow-900: #E8750C;\n    --hot-color-yellow-800: #F77D0F;\n    --hot-color-yellow-700: #FAA71E;\n    --hot-color-yellow-600: #FCBF26;\n    --hot-color-yellow-500: #FED82E;\n    --hot-color-yellow-400: #FAE62E;\n    --hot-color-yellow-300: #FDEB51;\n    --hot-color-yellow-200: #FFF072;\n    --hot-color-yellow-100: #FFF59B;\n    --hot-color-yellow-50: #FFF9C3;\n\n    --hot-color-blue-950: #111C31;\n    --hot-color-blue-900: #182642;\n    --hot-color-blue-800: #20365B;\n    --hot-color-blue-700: #263F68;\n    --hot-color-blue-600: #2E4873;\n    --hot-color-blue-500: #344F7B;\n    --hot-color-blue-400: #53688B;\n    --hot-color-blue-300: #71829E;\n    --hot-color-blue-200: #97A5BA;\n    --hot-color-blue-100: #BFC8D6;\n    --hot-color-blue-50: #E6E9EE;\n\n    --hot-color-cyan-950: #2B514F;\n    --hot-color-cyan-900: #366361;\n    --hot-color-cyan-800: #408789;\n    --hot-color-cyan-700: #459BA0;\n    --hot-color-cyan-600: #4BB1B9;\n    --hot-color-cyan-500: #50C1CB;\n    --hot-color-cyan-400: #58CBD1;\n    --hot-color-cyan-300: #6AD4D9;\n    --hot-color-cyan-200: #8FE1E3;\n    --hot-color-cyan-100: #B9EDED;\n    --hot-color-cyan-50: #E3F8F8;\n\n    --hot-color-gray-950: #2C3038;\n    --hot-color-gray-900: #404248;\n    --hot-color-gray-800: #515057;\n    --hot-color-gray-700: #615F66;\n    --hot-color-gray-600: #716F73;\n    --hot-color-gray-500: #828085;\n    --hot-color-gray-400: #9A969B;\n    --hot-color-gray-300: #B3B0B3;\n    --hot-color-gray-200: #C4C3C5;\n    --hot-color-gray-100: #E1E0E1;\n    --hot-color-gray-50: #F3F3F3;\n\n    /* HOT Semantic colors */\n    --hot-color-primary-950: var(--hot-color-red-950);\n    --hot-color-primary-900: var(--hot-color-red-900);\n    --hot-color-primary-800: var(--hot-color-red-800);\n    --hot-color-primary-700: var(--hot-color-red-700);\n    --hot-color-primary-600: var(--hot-color-red-600);\n    --hot-color-primary-500: var(--hot-color-red-500);\n    --hot-color-primary-400: var(--hot-color-red-400);\n    --hot-color-primary-300: var(--hot-color-red-300);\n    --hot-color-primary-200: var(--hot-color-red-200);\n    --hot-color-primary-100: var(--hot-color-red-100);\n    --hot-color-primary-50: var(--hot-color-red-50);\n\n    --hot-color-danger-950: var(--hot-color-red-950);\n    --hot-color-danger-900: var(--hot-color-red-900);\n    --hot-color-danger-800: var(--hot-color-red-800);\n    --hot-color-danger-700: var(--hot-color-red-700);\n    --hot-color-danger-600: var(--hot-color-red-600);\n    --hot-color-danger-500: var(--hot-color-red-500);\n    --hot-color-danger-400: var(--hot-color-red-400);\n    --hot-color-danger-300: var(--hot-color-red-300);\n    --hot-color-danger-200: var(--hot-color-red-200);\n    --hot-color-danger-100: var(--hot-color-red-100);\n    --hot-color-danger-50: var(--hot-color-red-50);\n\n    --hot-color-warning-950: var(--hot-color-yellow-950);\n    --hot-color-warning-900: var(--hot-color-yellow-900);\n    --hot-color-warning-800: var(--hot-color-yellow-800);\n    --hot-color-warning-700: var(--hot-color-yellow-700);\n    --hot-color-warning-600: var(--hot-color-yellow-600);\n    --hot-color-warning-500: var(--hot-color-yellow-500);\n    --hot-color-warning-400: var(--hot-color-yellow-400);\n    --hot-color-warning-300: var(--hot-color-yellow-300);\n    --hot-color-warning-200: var(--hot-color-yellow-200);\n    --hot-color-warning-100: var(--hot-color-yellow-100);\n    --hot-color-warning-50: var(--hot-color-yellow-50);\n\n    --hot-color-success-950: #031608;\n    --hot-color-success-900: #052310;\n    --hot-color-success-800: #0a3a1d;\n    --hot-color-success-700: #0a5027;\n    --hot-color-success-600: #036730;\n    --hot-color-success-500: #00883c;\n    --hot-color-success-400: #00ac49;\n    --hot-color-success-300: #5dc36f;\n    --hot-color-success-200: #93da98;\n    --hot-color-success-100: #c2f2c1;\n    --hot-color-success-50: #e3f9e3;\n\n    --hot-color-neutral-1000: #ffffff;\n    --hot-color-neutral-950: var(--hot-color-gray-950);\n    --hot-color-neutral-900: var(--hot-color-gray-900);\n    --hot-color-neutral-800: var(--hot-color-gray-800);\n    --hot-color-neutral-700: var(--hot-color-gray-700);\n    --hot-color-neutral-600: var(--hot-color-gray-600);\n    --hot-color-neutral-500: var(--hot-color-gray-500);\n    --hot-color-neutral-400: var(--hot-color-gray-400);\n    --hot-color-neutral-300: var(--hot-color-gray-300);\n    --hot-color-neutral-200: var(--hot-color-gray-200);\n    --hot-color-neutral-100: var(--hot-color-gray-100);\n    --hot-color-neutral-50: var(--hot-color-gray-50);\n    --hot-color-neutral-0: #000000;\n\n    /* HOT Typography */\n    --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n    --hot-font-sans-variant: 'Barlow';\n    --hot-font-sans-variant-condensed: 'Barlow Condensed';\n    --hot-font-sefif: Georgia, 'Times New Roman', serif;\n    --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace, Consolas, 'Liberation Mono', Menlo, monospace;\n\n    --hot-font-size-2x-small: 0.625rem;\n    --hot-font-size-x-small: 0.75rem;\n    --hot-font-size-small: 0.875rem;\n    --hot-font-size-medium: 1rem;\n    --hot-font-size-large: 1.25rem;\n    --hot-font-size-x-large: 1.5rem;\n    --hot-font-size-2x-large: 2.25rem;\n    --hot-font-size-3x-large: 3rem;\n    --hot-font-size-4x-large: 4.5rem;\n\n    --hot-font-weight-light: 300;\n    --hot-font-weight-normal: 400;\n    --hot-font-weight-semibold: 500;\n    --hot-font-weight-bold: 700;\n\n    --hot-letter-spacing-denser: -0.03em;\n    --hot-letter-spacing-dense: -0.015em;\n    --hot-letter-spacing-normal: normal;\n    --hot-letter-spacing-loose: 0.075em;\n    --hot-letter-spacing-looser: 0.15em;\n\n    --hot-line-height-denser: 1;\n    --hot-line-height-dense: 1.4;\n    --hot-line-height-normal: 1.8;\n    --hot-line-height-loose: 2.2;\n    --hot-line-height-looser: 2.6;\n\n    --hot-spacing-3x-small: 0.125rem;\n    --hot-spacing-2x-small: 0.25rem;\n    --hot-spacing-x-small: 0.5rem;\n    --hot-spacing-small: 0.75rem;\n    --hot-spacing-medium: 1rem;\n    --hot-spacing-large: 1.25rem;\n    --hot-spacing-x-large: 1.75rem;\n    --hot-spacing-2x-large: 2.25rem;\n    --hot-spacing-3x-large: 3rem;\n    --hot-spacing-4x-large: 4.5rem;\n\n    --hot-border-radius-small: 0.1875rem;\n    --hot-border-radius-medium: 0.25rem;\n    --hot-border-radius-large: 0.5rem;\n    --hot-border-radius-x-large: 1rem;\n    --hot-border-radius-circle: 50%;\n    --hot-border-radius-pill: 9999px;\n  }\n\n  /* Apply HOT styling to button parts */\n  ::part(base) {\n    font-family: var(--hot-font-sans);\n    font-weight: var(--hot-font-weight-semibold);\n    border-radius: var(--hot-border-radius-medium);\n    transition: all 0.2s ease-in-out;\n  }\n\n  ::part(base):hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n  }\n\n  ::part(base):active {\n    transform: translateY(0);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n\n  ::part(label) {\n    font-family: var(--hot-font-sans);\n    font-weight: var(--hot-font-weight-semibold);\n  }\n\n  /* Login button specific styling */\n  :host(.login-button)::part(base) {\n    background: linear-gradient(135deg, var(--hot-color-primary-500), var(--hot-color-primary-600));\n    border: none;\n    color: white;\n    padding: var(--hot-spacing-small) var(--hot-spacing-medium);\n    font-size: var(--hot-font-size-medium);\n  }\n\n  :host(.login-button)::part(base):hover {\n    background: linear-gradient(135deg, var(--hot-color-primary-600), var(--hot-color-primary-700));\n  }\n\n  /* Gradient button styling */\n  :host(.gradient-button)::part(base) {\n    background: linear-gradient(217deg, var(--hot-color-red-50), var(--hot-color-rose-50), var(--hot-color-yellow-50));\n    border: solid 1px var(--hot-color-rose-50);\n    color: white;\n    text-shadow: rgb(0 0 0 / 0.3) 0 -1px;\n  }\n\n  :host(.gradient-button)::part(base):hover {\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n    transform: translateY(-3px);\n  }\n\n  :host(.gradient-button)::part(base):active {\n    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);\n    transform: translateY(0);\n  }\n";
+/**
+ * Injects HOT theme CSS into the shadow DOM of a component
+ * @param element The element to inject CSS into
+ * @param styleId Optional ID for the style element (defaults to 'hot-theme-injection')
+ */
+export declare function injectHOTThemeCSS(element: Element, styleId?: string): void;
+/**
+ * Injects HOT theme CSS into all wa-button components within a container
+ * @param container The container element or shadow root to search for wa-button components
+ */
+export declare function injectHOTThemeCSSIntoButtons(container: Element | ShadowRoot): void;
+/**
+ * Creates a MutationObserver to automatically inject CSS into new wa-button components
+ * @param container The container element or shadow root to observe
+ * @param callback Optional callback to run after injection
+ */
+export declare function observeAndInjectCSS(container: Element | ShadowRoot, callback?: () => void): MutationObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/ui",
-  "version": "0.3.2-b5",
+  "version": "0.3.2-b7",
   "description": "Shared UI components with HOT theming.",
   "homepage": "https://github.com/hotosm/ui#readme",
   "author": {

package/dist/chunks/chunk.RQCFXHIG.js

@@ -1 +0,0 @@
-import{b as e}from"./chunk.UMBUH2EC.js";var r=e;customElements.define("hot-header",e);export{r as a};

package/dist/chunks/chunk.WX25LIXR.js

@@ -1,96 +0,0 @@
-import{b as f}from"./chunk.TNLBUOUK.js";import{a as c,c as g}from"./chunk.NI7UJOOZ.js";function b(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=b(t[r]))&&(a&&(a+=" "),a+=e)}else for(e in t)t[e]&&(a&&(a+=" "),a+=e);return a}function y(){for(var t,r,e=0,a="",n=arguments.length;e<n;e++)(t=arguments[e])&&(r=b(t))&&(a&&(a+=" "),a+=r);return a}var x=t=>typeof t=="boolean"?`${t}`:t===0?"0":t,p=y,z=(t,r)=>e=>{var a;if((r==null?void 0:r.variants)==null)return p(t,e==null?void 0:e.class,e==null?void 0:e.className);let{variants:n,defaultVariants:s}=r,w=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 u=i,{class:d,className:l}=u,V=g(u,["class","className"]);return Object.entries(V).every(k=>{let[v,h]=k;return Array.isArray(h)?h.includes(c(c({},s),m)[v]):c(c({},s),m)[v]===h})?[...o,d,l]:o},[]);return p(t,w,j,e==null?void 0:e.class,e==null?void 0:e.className)};var _=z(`
-      header
-  `,{variants:{size:{small:"header--size-small",medium:"header--size-medium",large:"header--size-large"},borderBottom:{true:"border-bottom"}}}),B=f`
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    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: space-between;
-    gap: var(--hot-spacing-small);
-  }
-
-  .header--title {
-    color: var(--hot-color-neutral-950);
-    font-family: var(--hot-font-sans);
-    font-size: var(--hot-font-size-x-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);
-  }
-
-  .header--tab-group::part(base) {
-    --track-color: transparent;
-    --indicator-color: none;
-  }
-
-  .header--nav {
-    justify-content: space-between;
-    justify-items: center;
-    gap: var(--hot-spacing-medium);
-    font-weight: var(--hot-font-weight-semibold);
-  }
-
-  .header--nav-mobile {
-  }
-
-  .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;
-    gap: var(--hot-spacing-small);
-  }
-
-
-
-  .header--logo-img {
-  }
-
-  .header--tab {
-    border-bottom: 2px solid;
-    border-color: transparent;
-  }
-  .header--tab-active {
-    border-color: var(--hot-color-neutral-1000);
-  }
-
-  /* Login Modal Styles */
-  .login-modal {
-    --width: 35rem;
-    --border-radius: 8px;
-    --background-color: white;
-  }
-`;export{_ as a,B as b};