@hotosm/ui 0.3.4-b2 → 0.4.0

package/README.md

@@ -192,7 +192,7 @@ are bound to slightly differently:
 For **styling**, check `/theme`:
 
 - `hot.css` has a HOT theme, used across HOT components.
-- `hot-wa-override.css` has a WebAwesome theme, re-defining style variables.
+- `hot-wa.css` has a WebAwesome theme, re-defining style variables.
 
 ### License
 

package/dist/chunks/{chunk.LF3EJYUJ.js → chunk.3DAASGWT.js}

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

package/dist/chunks/chunk.5AWU5BEU.js

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

package/dist/chunks/{chunk.3M4SJCXS.js → chunk.6TJUNYFL.js}

@@ -1,10 +1,11 @@
-import{b as f}from"./chunk.C6I42VVF.js";import{a as h,c as u}from"./chunk.N2W26RCT.js";function p(t){var r,e,a="";if(typeof t=="string"||typeof t=="number")a+=t;else if(typeof t=="object")if(Array.isArray(t)){var n=t.length;for(r=0;r<n;r++)t[r]&&(e=p(t[r]))&&(a&&(a+=" "),a+=e)}else for(e in t)t[e]&&(a&&(a+=" "),a+=e);return a}function b(){for(var t,r,e=0,a="",n=arguments.length;e<n;e++)(t=arguments[e])&&(r=p(t))&&(a&&(a+=" "),a+=r);return a}var x=t=>typeof t=="boolean"?`${t}`:t===0?"0":t,y=b,w=(t,r)=>e=>{var a;if((r==null?void 0:r.variants)==null)return y(t,e==null?void 0:e.class,e==null?void 0:e.className);let{variants:n,defaultVariants:s}=r,z=Object.keys(n).map(o=>{let i=e==null?void 0:e[o],d=s==null?void 0:s[o];if(i===null)return null;let l=x(i)||x(d);return n[o][l]}),m=e&&Object.entries(e).reduce((o,i)=>{let[d,l]=i;return l===void 0||(o[d]=l),o},{}),j=r==null||(a=r.compoundVariants)===null||a===void 0?void 0:a.reduce((o,i)=>{let v=i,{class:d,className:l}=v,k=u(v,["class","className"]);return Object.entries(k).every(V=>{let[g,c]=V;return Array.isArray(c)?c.includes(h(h({},s),m)[g]):h(h({},s),m)[g]===c})?[...o,d,l]:o},[]);return y(t,z,j,e==null?void 0:e.class,e==null?void 0:e.className)};var S=w(`
+import{a as f}from"./chunk.KNTMZWRV.js";import{a as h,c as v}from"./chunk.N2W26RCT.js";function p(t){var r,e,a="";if(typeof t=="string"||typeof t=="number")a+=t;else if(typeof t=="object")if(Array.isArray(t)){var n=t.length;for(r=0;r<n;r++)t[r]&&(e=p(t[r]))&&(a&&(a+=" "),a+=e)}else for(e in t)t[e]&&(a&&(a+=" "),a+=e);return a}function b(){for(var t,r,e=0,a="",n=arguments.length;e<n;e++)(t=arguments[e])&&(r=p(t))&&(a&&(a+=" "),a+=r);return a}var x=t=>typeof t=="boolean"?`${t}`:t===0?"0":t,y=b,w=(t,r)=>e=>{var a;if((r==null?void 0:r.variants)==null)return y(t,e==null?void 0:e.class,e==null?void 0:e.className);let{variants:n,defaultVariants:s}=r,z=Object.keys(n).map(o=>{let i=e==null?void 0:e[o],d=s==null?void 0:s[o];if(i===null)return null;let l=x(i)||x(d);return n[o][l]}),m=e&&Object.entries(e).reduce((o,i)=>{let[d,l]=i;return l===void 0||(o[d]=l),o},{}),j=r==null||(a=r.compoundVariants)===null||a===void 0?void 0:a.reduce((o,i)=>{let g=i,{class:d,className:l}=g,k=v(g,["class","className"]);return Object.entries(k).every(V=>{let[u,c]=V;return Array.isArray(c)?c.includes(h(h({},s),m)[u]):h(h({},s),m)[u]===c})?[...o,d,l]:o},[]);return y(t,z,j,e==null?void 0:e.class,e==null?void 0:e.className)};var S=w(`
       header
   `,{variants:{size:{small:"header--size-small",medium:"header--size-medium",large:"header--size-large"},borderBottom:{true:"border-bottom"}}}),_=f`
   .header {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     justify-content: space-between;
+    height: auto;
     padding: 0 var(--hot-spacing-small);
   }
 
@@ -28,14 +29,15 @@ import{b as f}from"./chunk.C6I42VVF.js";import{a as h,c as u}from"./chunk.N2W26R
     text-decoration: none;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: var(--hot-spacing-small);
+    justify-content: flex-start;
+    padding-right: var(--hot-spacing-2x-small);
+    gap: var(--hot-spacing-x-small);
   }
 
   .header--title {
     color: var(--hot-color-neutral-950);
     font-family: var(--hot-font-sans);
-    font-size: var(--hot-font-size-x-large);
+    font-size: var(--hot-font-size-large);
   }
 
   .header--tab::part(base) {
@@ -72,13 +74,13 @@ import{b as f}from"./chunk.C6I42VVF.js";import{a as h,c as u}from"./chunk.N2W26R
   }
 
   .header--nav {
-    justify-content: space-between;
-    justify-items: center;
-    gap: var(--hot-spacing-medium);
-    font-weight: var(--hot-font-weight-semibold);
+    display: none;
   }
 
   .header--nav-mobile {
+    display: block;
+    width: 100%;
+    margin-top: var(--hot-spacing-small);
   }
 
   .header--person-circle {
@@ -86,21 +88,27 @@ import{b as f}from"./chunk.C6I42VVF.js";import{a as h,c as u}from"./chunk.N2W26R
   }
 
   .header--drawer {
-    font-size: var(--hot-font-size-x-large)
+    font-size: var(--hot-font-size-x-large);
   }
 
   .header--right-section {
     display: flex;
     align-items: center;
-    gap: var(--hot-spacing-small);
+    justify-content: flex-end;
+    gap: var(--hot-spacing-x-small);
   }
 
-
-
   .header--logo-img {
+    max-height: 2.5rem;
+    width: auto;
   }
 
-
+  wa-button[appearance="outlined"] {
+    /* Make drawer button larger for touch */
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    padding: 0.5rem;
+  }
 
   /* Login Modal Styles */
   .login-modal {
@@ -109,44 +117,50 @@ import{b as f}from"./chunk.C6I42VVF.js";import{a as h,c as u}from"./chunk.N2W26R
     --background-color: white;
   }
 
-  /* --- Responsive styles for mobile --- */
-  @media (max-width: 768px) {
+  /* --- Responsive styles for tablet and desktop --- */
+  @media (min-width: 769px) {
     .header {
-      flex-direction: column;
-      align-items: stretch;
-      padding: var(--hot-spacing-small);
+      align-items: center;
       height: auto;
     }
+
     .header--link {
-      justify-content: flex-start;
-      gap: var(--hot-spacing-x-small);
+      justify-content: space-between;
+      padding-right: 0;
+      gap: var(--hot-spacing-small);
     }
+
     .header--title {
-      font-size: var(--hot-font-size-large);
+      font-size: var(--hot-font-size-x-large);
     }
+
     .header--nav {
-      display: none;
+      display: flex;
+      justify-content: space-between;
+      justify-items: center;
+      gap: var(--hot-spacing-medium);
+      font-weight: var(--hot-font-weight-semibold);
     }
+
     .header--nav-mobile {
-      display: block;
-      width: 100%;
-      margin-top: var(--hot-spacing-small);
+      display: none;
     }
+
     .header--right-section {
-      justify-content: flex-end;
-      width: 100%;
-      margin-top: var(--hot-spacing-small);
-      gap: var(--hot-spacing-x-small);
+      justify-content: center;
+      margin-top: 0;
+      gap: var(--hot-spacing-small);
     }
+
     .header--logo-img {
-      max-height: 2.5rem;
+      max-height: none;
       width: auto;
     }
+
     wa-button[appearance="outlined"] {
-      /* Make drawer button larger for touch */
-      min-width: 2.5rem;
-      min-height: 2.5rem;
-      padding: 0.5rem;
+      min-width: auto;
+      min-height: auto;
+      padding: initial;
     }
   }
 `;export{S as a,_ as b};

package/dist/chunks/{chunk.OCJJFWT7.js → chunk.BB52VMVE.js}

@@ -1,4 +1,4 @@
-import{b as o}from"./chunk.C6I42VVF.js";var t=o`
+import{a as o}from"./chunk.KNTMZWRV.js";var t=o`
   :host {
     display: block;
   }
@@ -15,7 +15,7 @@ import{b as o}from"./chunk.C6I42VVF.js";var t=o`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
+    padding: 0.25rem;
     animation: fadeIn 0.3s ease-out;
   }
 
@@ -30,7 +30,7 @@ import{b as o}from"./chunk.C6I42VVF.js";var t=o`
 
   .consent-container {
     width: 100%;
-    max-width: 600px;
+    max-width: 100%;
     animation: slideUp 0.4s ease-out;
   }
 
@@ -73,12 +73,12 @@ import{b as o}from"./chunk.C6I42VVF.js";var t=o`
   }
 
   .consent-content {
-    padding: 1.5rem;
+    padding: 0.75rem;
   }
 
   .consent-header {
     font-weight: 600;
-    font-size: 1.5rem;
+    font-size: 1.125rem;
     line-height: 1.3;
     margin: 0 0 1rem 0;
     color: #1f2937;
@@ -92,7 +92,7 @@ import{b as o}from"./chunk.C6I42VVF.js";var t=o`
 
   .consent-message p {
     margin: 0 0 1rem 0;
-    font-size: 1rem;
+    font-size: 0.875rem;
     line-height: 1.6;
     color: #4b5563;
   }
@@ -103,13 +103,15 @@ import{b as o}from"./chunk.C6I42VVF.js";var t=o`
 
   .consent-actions {
     display: flex;
-    gap: 1rem;
+    flex-direction: column;
+    gap: 0.75rem;
     justify-content: center;
     flex-wrap: wrap;
   }
 
   .consent-button {
-    min-width: 120px;
+    width: 100%;
+    min-width: auto;
     font-weight: 500;
     transition: all 0.2s ease;
     border-radius: 8px;
@@ -142,14 +144,37 @@ import{b as o}from"./chunk.C6I42VVF.js";var t=o`
     border-color: var(--hot-color-red-700);
   }
 
-  /* Responsive design */
-  @media (max-width: 768px) {
-    .consent-overlay {
-      padding: 0.5rem;
+  /* Focus styles for accessibility */
+  .consent-button:focus {
+    outline: 2px solid var(--hot-color-red-500);
+    outline-offset: 2px;
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .consent-callout {
+      border: 2px solid #000;
     }
 
-    .consent-container {
-      max-width: 100%;
+    .consent-button {
+      border-width: 2px;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .consent-overlay,
+    .consent-container,
+    .consent-button {
+      animation: none;
+      transition: none;
+    }
+  }
+
+  /* Responsive design for larger screens */
+  @media (min-width: 481px) {
+    .consent-overlay {
+      padding: 0.5rem;
     }
 
     .consent-content {
@@ -160,59 +185,39 @@ import{b as o}from"./chunk.C6I42VVF.js";var t=o`
       font-size: 1.25rem;
     }
 
-    .consent-actions {
-      flex-direction: column;
-      gap: 0.75rem;
+    .consent-message p {
+      font-size: 1rem;
     }
 
-    .consent-button {
-      width: 100%;
-      min-width: auto;
+    .consent-actions {
+      gap: 1rem;
     }
   }
 
-  @media (max-width: 480px) {
+  @media (min-width: 769px) {
     .consent-overlay {
-      padding: 0.25rem;
-    }
-
-    .consent-content {
-      padding: 0.75rem;
+      padding: 1rem;
     }
 
-    .consent-header {
-      font-size: 1.125rem;
+    .consent-container {
+      max-width: 600px;
     }
 
-    .consent-message p {
-      font-size: 0.875rem;
+    .consent-content {
+      padding: 1.5rem;
     }
-  }
-
-  /* Focus styles for accessibility */
-  .consent-button:focus {
-    outline: 2px solid var(--hot-color-red-500);
-    outline-offset: 2px;
-  }
 
-  /* High contrast mode support */
-  @media (prefers-contrast: high) {
-    .consent-callout {
-      border: 2px solid #000;
+    .consent-header {
+      font-size: 1.5rem;
     }
 
-    .consent-button {
-      border-width: 2px;
+    .consent-actions {
+      flex-direction: row;
     }
-  }
 
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    .consent-overlay,
-    .consent-container,
     .consent-button {
-      animation: none;
-      transition: none;
+      width: auto;
+      min-width: 120px;
     }
   }
 `;export{t as a};