@hotosm/ui 0.3.2-b7 → 0.3.2-b8

package/dist/chunks/chunk.TTXUWWW4.js

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

package/dist/chunks/chunk.UOUAH7BX.js

@@ -0,0 +1 @@
+import{b as t}from"./chunk.NA5VYRZH.js";var o=t;customElements.define("hot-button",t);export{o as a};

package/dist/chunks/chunk.XV3ZU53D.js

@@ -0,0 +1 @@
+var o='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>%20';function n(){let e=()=>{window.WebAwesome&&window.WebAwesome.iconRegistry?window.WebAwesome.iconRegistry.addIcon("hot-icons","list",o):setTimeout(e,100)};e()}var s=n;export{s as a};

package/dist/components/button/button.component.js

@@ -1 +1 @@
-import{a,b}from"../../chunks/chunk.NQSLFHXC.js";import"../../chunks/chunk.O6I2TNK3.js";import"../../chunks/chunk.O2GMJYSL.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 Button,b as default};
+import{a,b}from"../../chunks/chunk.NA5VYRZH.js";import"../../chunks/chunk.O6I2TNK3.js";import"../../chunks/chunk.O2GMJYSL.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.XV3ZU53D.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Button,b as default};

package/dist/components/button/button.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.KWRSAL43.js";import"../../chunks/chunk.NQSLFHXC.js";import"../../chunks/chunk.O6I2TNK3.js";import"../../chunks/chunk.O2GMJYSL.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.UOUAH7BX.js";import"../../chunks/chunk.NA5VYRZH.js";import"../../chunks/chunk.O6I2TNK3.js";import"../../chunks/chunk.O2GMJYSL.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.XV3ZU53D.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};

package/dist/components/consent/consent.component.js

@@ -1 +1 @@
-import{a,b}from"../../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 Consent,b as default};
+import{a,b}from"../../chunks/chunk.2ULJ7GOD.js";import"../../chunks/chunk.34D2LPI2.js";import"../../chunks/chunk.O2GMJYSL.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.XV3ZU53D.js";import"../../chunks/chunk.GTNRNZDH.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Consent,b as default};

package/dist/components/consent/consent.js

@@ -1 +1 @@
-import{a}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 default};
+import{a}from"../../chunks/chunk.TTXUWWW4.js";import"../../chunks/chunk.2ULJ7GOD.js";import"../../chunks/chunk.34D2LPI2.js";import"../../chunks/chunk.O2GMJYSL.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.XV3ZU53D.js";import"../../chunks/chunk.GTNRNZDH.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};

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

@@ -1,6 +1,7 @@
 import '@awesome.me/webawesome/dist/components/tab-group/tab-group.js';
 import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
+import '@awesome.me/webawesome/dist/components/drawer/drawer.js';
 import { LitElement } from "lit";
 import type { CSSResultGroup } from 'lit';
 import { type sizes } from './header.styles.js';
@@ -10,8 +11,6 @@ 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;
@@ -21,6 +20,11 @@ export declare class Header extends LitElement {
     accessor drawer: boolean;
     /** Array of menu items to include as navigation tabs. */
     accessor tabs: MenuItem[];
+    /** Array of links to include in the drawer. */
+    accessor drawerLinks: Array<{
+        label: string;
+        href: string;
+    }>;
     /** Size of toolbar vertically. */
     accessor size: sizes;
     /** Border bottom. */
@@ -33,25 +37,13 @@ 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;
+    private _handleTabShow;
     private _handleLogin;
     private _handleModalClose;
+    private _handleDrawerOpen;
 }
 export default Header;

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

@@ -1 +1 @@
-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};
+import{d as a,e as b}from"../../chunks/chunk.PDA7Y3OG.js";import"../../chunks/chunk.D4UQX7IV.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.XV3ZU53D.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.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};
+import{a}from"../../chunks/chunk.JWXDWX4U.js";import"../../chunks/chunk.PDA7Y3OG.js";import"../../chunks/chunk.D4UQX7IV.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.XV3ZU53D.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.GGX6E7QF.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as headerVariants,b as styles};
+import{a,b}from"../../chunks/chunk.D4UQX7IV.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as headerVariants,b as styles};

package/dist/components/icons.d.ts

@@ -1,2 +1,11 @@
+declare global {
+    interface Window {
+        WebAwesome?: {
+            iconRegistry?: {
+                addIcon: (library: string, name: string, svg: string) => void;
+            };
+        };
+    }
+}
 declare function registerBundledIcons(): void;
 export default registerBundledIcons;

package/dist/components/icons.js

@@ -1 +1 @@
-import{a}from"../chunks/chunk.KO4EOD3I.js";import"../chunks/chunk.NI7UJOOZ.js";export{a as default};
+import{a}from"../chunks/chunk.XV3ZU53D.js";import"../chunks/chunk.NI7UJOOZ.js";export{a as default};

package/dist/hotosm-ui.d.ts

@@ -3,4 +3,5 @@ import HotLogo from './components/logo/logo.js';
 import HotTracking from './components/tracking/tracking.js';
 import HotConsent from './components/consent/consent.js';
 import HotButton from './components/button/button.js';
+export { setupAutoInjection, injectHOTThemeIntoButtons, injectCSSIntoShadowDOM } from './utils/shadow-dom-css.js';
 export { HotHeader as Header, HotLogo as Logo, HotConsent as Consent, HotTracking as Tracking, HotButton as Button, };

package/dist/hotosm-ui.js

@@ -1 +1 @@
-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};
+import{a as n}from"./chunks/chunk.JWXDWX4U.js";import{a as o,b as t,c as r}from"./chunks/chunk.PDA7Y3OG.js";import"./chunks/chunk.D4UQX7IV.js";import{a as e}from"./chunks/chunk.MCLA4YSC.js";import"./chunks/chunk.CFJBM2JT.js";import"./chunks/chunk.W65BP3JY.js";import{a as m}from"./chunks/chunk.3P72BRDN.js";import"./chunks/chunk.2E5B6OR3.js";import{a as i}from"./chunks/chunk.UOUAH7BX.js";import"./chunks/chunk.NA5VYRZH.js";import"./chunks/chunk.O6I2TNK3.js";import{a}from"./chunks/chunk.TTXUWWW4.js";import"./chunks/chunk.2ULJ7GOD.js";import"./chunks/chunk.34D2LPI2.js";import"./chunks/chunk.O2GMJYSL.js";import"./chunks/chunk.2FEIL35F.js";import"./chunks/chunk.6Y3X2E2V.js";import"./chunks/chunk.XV3ZU53D.js";import"./chunks/chunk.GTNRNZDH.js";import"./chunks/chunk.TNLBUOUK.js";import"./chunks/chunk.NI7UJOOZ.js";export{i as Button,a as Consent,n as Header,e as Logo,m as Tracking,o as injectCSSIntoShadowDOM,t as injectHOTThemeIntoButtons,r as setupAutoInjection};

package/dist/themes/hot.css

@@ -281,10 +281,3 @@
  }
 
 
- wa-button.login-button {
-   background-color: #1a73e8;
-   color: white;
-   font-weight: 600;
-   padding: 0.6rem 1.2rem;
-   border-radius: 8px;
- }

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

@@ -1,24 +1,30 @@
 /**
- * Utility functions for injecting CSS into shadow DOM components
+ * Utility to inject CSS into shadow DOM elements
+ * This is needed because WebAwesome components use shadow DOM and CSS variables
+ * from the global scope are not accessible within the shadow DOM
  */
+export interface CSSInjectionOptions {
+    /** The CSS string to inject */
+    css: string;
+    /** CSS selector to find elements to inject into */
+    selector?: string;
+    /** Whether to inject into all matching elements or just the first */
+    all?: boolean;
+    /** Custom style ID to avoid duplicate injections */
+    styleId?: string;
+}
 /**
- * HOT theme CSS variables and styles for injection into shadow DOM
+ * Injects CSS into the shadow DOM of WebAwesome components
+ * @param options Configuration options for CSS injection
  */
-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";
+export declare function injectCSSIntoShadowDOM(options: CSSInjectionOptions): void;
 /**
- * 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')
+ * Injects HOT theme CSS variables into wa-button shadow DOM
+ * This makes the HOT theme variables available within the shadow DOM
  */
-export declare function injectHOTThemeCSS(element: Element, styleId?: string): void;
+export declare function injectHOTThemeIntoButtons(): 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
+ * Sets up a mutation observer to automatically inject CSS into new wa-button elements
+ * This ensures that dynamically added buttons also get the HOT theme
  */
-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;
+export declare function setupAutoInjection(): void;

package/package.json

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