@hotosm/ui 0.3.2-b4 → 0.3.2-b7

package/dist/components/tracking/tracking.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.YYEOK7MA.js";import"../../chunks/chunk.PDLGEB7T.js";import"../../chunks/chunk.QT57GV7H.js";import"../../chunks/chunk.O2GMJYSL.js";import"../../chunks/chunk.CS444ZXM.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
+import{a}from"../../chunks/chunk.3P72BRDN.js";import"../../chunks/chunk.2E5B6OR3.js";import"../../chunks/chunk.34D2LPI2.js";import"../../chunks/chunk.O2GMJYSL.js";import"../../chunks/chunk.2FEIL35F.js";import"../../chunks/chunk.6Y3X2E2V.js";import"../../chunks/chunk.TNLBUOUK.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};

package/dist/hotosm-ui.js

@@ -1 +1 @@
-import{a as o}from"./chunks/chunk.EROFXAZH.js";import"./chunks/chunk.EMBNMR2N.js";import"./chunks/chunk.HQE63XEZ.js";import{a as t}from"./chunks/chunk.SZ46YTWY.js";import"./chunks/chunk.7RJ72M75.js";import"./chunks/chunk.UTSKEKTV.js";import{a as r}from"./chunks/chunk.YYEOK7MA.js";import"./chunks/chunk.PDLGEB7T.js";import{a}from"./chunks/chunk.H5ZQREL2.js";import"./chunks/chunk.HDZFWGNV.js";import"./chunks/chunk.U4GEH6YR.js";import{a as m}from"./chunks/chunk.UYOJKKGV.js";import"./chunks/chunk.CS56NBTQ.js";import"./chunks/chunk.QT57GV7H.js";import"./chunks/chunk.O2GMJYSL.js";import"./chunks/chunk.CS444ZXM.js";import"./chunks/chunk.6ZDEZIWM.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.T4GALJJA.js";import"./chunks/chunk.U4P7XQR4.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/style.css

@@ -1,8 +1,8 @@
 /* The default WebAwesome CSS */
-@import url('https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/webawesome.css');
 /* The WebAwesome theme we use (options: awesome, brutalist, glossy, etc) */
 @import url('https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/themes/default.css');
 /* Import our custom HOTOSM CSS variables - should be imported first */
 @import 'themes/hot.css';
 /* Import our WebAwesome palette / colour & font override */
 @import 'themes/hot-wa-override.css';
+@import url('https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/webawesome.css');

package/dist/themes/hot.css

@@ -258,3 +258,33 @@
    --hot-border-radius-circle: 50%;
    --hot-border-radius-pill: 9999px;
 }
+
+.gradient-button::part(base) {
+   background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
+   border: solid 1px var(--wa-color-purple-50);
+   transition: transform 100ms, box-shadow 100ms;
+ }
+
+ .gradient-button::part(base):hover {
+   box-shadow: var(--wa-shadow-m);
+   transform: translateY(-3px);
+ }
+
+ .gradient-button::part(base):active {
+   box-shadow: inset var(--wa-shadow-s);
+   transform: translateY(0);
+ }
+
+ .gradient-button::part(label) {
+   color: white;
+   text-shadow: rgb(0 0 0 / 0.3) 0 -1px;
+ }
+
+
+ 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-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-b4",
+  "version": "0.3.2-b7",
   "description": "Shared UI components with HOT theming.",
   "homepage": "https://github.com/hotosm/ui#readme",
   "author": {