@hotosm/ui 0.3.1-b9 → 0.3.2-b2

package/dist/chunks/{chunk.HCXPZJU6.js → chunk.5F5JALRB.js}

@@ -1,4 +1,4 @@
-import{a as O,b as g,c as i,d as k,e as C,f as W}from"./chunk.D2BMH7HD.js";import{a as y,b as s,c as D,d as x}from"./chunk.6ZDEZIWM.js";import{a as M}from"./chunk.KO4EOD3I.js";import{a as q,b as z}from"./chunk.HTYJKOJL.js";import{e as r,k as B}from"./chunk.U4P7XQR4.js";import{a as A,d as h,e as p,f as u,g as b}from"./chunk.NI7UJOOZ.js";function rt(t,n){return{top:Math.round(t.getBoundingClientRect().top-n.getBoundingClientRect().top),left:Math.round(t.getBoundingClientRect().left-n.getBoundingClientRect().left)}}var T=new Set;function lt(){let t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}function ct(){let t=Number(getComputedStyle(document.body).paddingRight.replace(/px/,""));return isNaN(t)||!t?0:t}function $(t){if(T.add(t),!document.documentElement.classList.contains("wa-scroll-lock")){let n=lt()+ct(),e=getComputedStyle(document.documentElement).scrollbarGutter;(!e||e==="auto")&&(e="stable"),n<2&&(e=""),document.documentElement.style.setProperty("--wa-scroll-lock-gutter",e),document.documentElement.classList.add("wa-scroll-lock"),document.documentElement.style.setProperty("--wa-scroll-lock-size",`${n}px`)}}function P(t){T.delete(t),T.size===0&&(document.documentElement.classList.remove("wa-scroll-lock"),document.documentElement.style.removeProperty("--wa-scroll-lock-size"))}function I(t,n,e="vertical",o="smooth"){let a=rt(t,n),l=a.top+n.scrollTop,c=a.left+n.scrollLeft,f=n.scrollLeft,E=n.scrollLeft+n.offsetWidth,it=n.scrollTop,st=n.scrollTop+n.offsetHeight;(e==="horizontal"||e==="both")&&(c<f?n.scrollTo({left:c,behavior:o}):c+t.clientWidth>E&&n.scrollTo({left:c-n.offsetWidth+t.clientWidth,behavior:o})),(e==="vertical"||e==="both")&&(l<it?n.scrollTo({top:l,behavior:o}):l+t.clientHeight>st&&n.scrollTo({top:l-n.offsetHeight+t.clientHeight,behavior:o}))}var dt=class extends Event{constructor(t){super("wa-tab-hide",{bubbles:!0,cancelable:!1,composed:!0}),this.detail=t}},ht=class extends Event{constructor(t){super("wa-tab-show",{bubbles:!0,cancelable:!1,composed:!0}),this.detail=t}},pt=`:host {
+import{a as q,b as z}from"./chunk.HTYJKOJL.js";import{a as O,b as g,c as i,d as k,e as C,f as W}from"./chunk.D2BMH7HD.js";import{a as y,b as s,c as D,d as x}from"./chunk.6ZDEZIWM.js";import{a as M}from"./chunk.KO4EOD3I.js";import{e as r,k as B}from"./chunk.U4P7XQR4.js";import{a as A,d as h,e as p,f as u,g as b}from"./chunk.NI7UJOOZ.js";function rt(t,n){return{top:Math.round(t.getBoundingClientRect().top-n.getBoundingClientRect().top),left:Math.round(t.getBoundingClientRect().left-n.getBoundingClientRect().left)}}var T=new Set;function lt(){let t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}function ct(){let t=Number(getComputedStyle(document.body).paddingRight.replace(/px/,""));return isNaN(t)||!t?0:t}function $(t){if(T.add(t),!document.documentElement.classList.contains("wa-scroll-lock")){let n=lt()+ct(),e=getComputedStyle(document.documentElement).scrollbarGutter;(!e||e==="auto")&&(e="stable"),n<2&&(e=""),document.documentElement.style.setProperty("--wa-scroll-lock-gutter",e),document.documentElement.classList.add("wa-scroll-lock"),document.documentElement.style.setProperty("--wa-scroll-lock-size",`${n}px`)}}function P(t){T.delete(t),T.size===0&&(document.documentElement.classList.remove("wa-scroll-lock"),document.documentElement.style.removeProperty("--wa-scroll-lock-size"))}function I(t,n,e="vertical",o="smooth"){let a=rt(t,n),l=a.top+n.scrollTop,c=a.left+n.scrollLeft,f=n.scrollLeft,E=n.scrollLeft+n.offsetWidth,it=n.scrollTop,st=n.scrollTop+n.offsetHeight;(e==="horizontal"||e==="both")&&(c<f?n.scrollTo({left:c,behavior:o}):c+t.clientWidth>E&&n.scrollTo({left:c-n.offsetWidth+t.clientWidth,behavior:o})),(e==="vertical"||e==="both")&&(l<it?n.scrollTo({top:l,behavior:o}):l+t.clientHeight>st&&n.scrollTo({top:l-n.offsetHeight+t.clientHeight,behavior:o}))}var dt=class extends Event{constructor(t){super("wa-tab-hide",{bubbles:!0,cancelable:!1,composed:!0}),this.detail=t}},ht=class extends Event{constructor(t){super("wa-tab-show",{bubbles:!0,cancelable:!1,composed:!0}),this.detail=t}},pt=`:host {
   --indicator-color: var(--wa-color-brand-fill-loud);
   --track-color: var(--wa-color-neutral-fill-normal);
   --track-width: 0.125rem;

package/dist/chunks/{chunk.MIYFUINI.js → chunk.CS56NBTQ.js}

@@ -1,4 +1,4 @@
-import{a as d}from"./chunk.T4GALJJA.js";import{b as o}from"./chunk.6ZDEZIWM.js";import{a as l}from"./chunk.KO4EOD3I.js";import{e as r,k as c}from"./chunk.U4P7XQR4.js";import{d as s,e as a,f as n,g as i}from"./chunk.NI7UJOOZ.js";l();var u,g,p,b,h,m,v,e=class extends c{constructor(){super(...arguments);this.name="hot-consent";n(this,u,"");n(this,g,!1);n(this,p,!0);n(this,b,"About the information we collect");n(this,h,"We use cookies and similar technologies to recognize and analyze your visits, and measure traffic usage and activity.");n(this,m,"I Agree");n(this,v,"I Do Not Agree")}get consentId(){return a(this,u)}set consentId(t){i(this,u,t)}get force(){return a(this,g)}set force(t){i(this,g,t)}get isOpen(){return a(this,p)}set isOpen(t){i(this,p,t)}get title(){return a(this,b)}set title(t){i(this,b,t)}get message(){return a(this,h)}set message(t){i(this,h,t)}get agreeLabel(){return a(this,m)}set agreeLabel(t){i(this,m,t)}get notAgreeLabel(){return a(this,v)}set notAgreeLabel(t){i(this,v,t)}render(){return this.isOpen?r`
+import{b as o}from"./chunk.6ZDEZIWM.js";import{a as l}from"./chunk.KO4EOD3I.js";import{a as d}from"./chunk.T4GALJJA.js";import{e as r,k as c}from"./chunk.U4P7XQR4.js";import{d as s,e as a,f as n,g as i}from"./chunk.NI7UJOOZ.js";l();var u,g,p,b,h,m,v,e=class extends c{constructor(){super(...arguments);this.name="hot-consent";n(this,u,"");n(this,g,!1);n(this,p,!0);n(this,b,"About the information we collect");n(this,h,"We use cookies and similar technologies to recognize and analyze your visits, and measure traffic usage and activity.");n(this,m,"I Agree");n(this,v,"I Do Not Agree")}get consentId(){return a(this,u)}set consentId(t){i(this,u,t)}get force(){return a(this,g)}set force(t){i(this,g,t)}get isOpen(){return a(this,p)}set isOpen(t){i(this,p,t)}get title(){return a(this,b)}set title(t){i(this,b,t)}get message(){return a(this,h)}set message(t){i(this,h,t)}get agreeLabel(){return a(this,m)}set agreeLabel(t){i(this,m,t)}get notAgreeLabel(){return a(this,v)}set notAgreeLabel(t){i(this,v,t)}render(){return this.isOpen?r`
       <div class="consent-overlay">
         <div class="consent-container">
           <wa-callout variant="brand" appearance="outlined filled" size="large" class="consent-callout">

package/dist/chunks/chunk.H4QL3V4P.js

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

package/dist/chunks/chunk.UYOJKKGV.js

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

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

@@ -1 +1 @@
-import{a,b}from"../../chunks/chunk.MIYFUINI.js";import"../../chunks/chunk.LPSHZWUY.js";import"../../chunks/chunk.T4GALJJA.js";import"../../chunks/chunk.D2BMH7HD.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Consent,b as default};
+import{a,b}from"../../chunks/chunk.CS56NBTQ.js";import"../../chunks/chunk.LPSHZWUY.js";import"../../chunks/chunk.D2BMH7HD.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 Consent,b as default};

package/dist/components/consent/consent.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.456NATDG.js";import"../../chunks/chunk.MIYFUINI.js";import"../../chunks/chunk.LPSHZWUY.js";import"../../chunks/chunk.T4GALJJA.js";import"../../chunks/chunk.D2BMH7HD.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
+import{a}from"../../chunks/chunk.UYOJKKGV.js";import"../../chunks/chunk.CS56NBTQ.js";import"../../chunks/chunk.LPSHZWUY.js";import"../../chunks/chunk.D2BMH7HD.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 default};

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

@@ -1 +1 @@
-import{a,b}from"../../chunks/chunk.HCXPZJU6.js";import"../../chunks/chunk.D2BMH7HD.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.HTYJKOJL.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Header,b as default};
+import{a,b}from"../../chunks/chunk.5F5JALRB.js";import"../../chunks/chunk.HTYJKOJL.js";import"../../chunks/chunk.D2BMH7HD.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.U4P7XQR4.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.CNARC7G7.js";import"../../chunks/chunk.HCXPZJU6.js";import"../../chunks/chunk.D2BMH7HD.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.HTYJKOJL.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
+import{a}from"../../chunks/chunk.H4QL3V4P.js";import"../../chunks/chunk.5F5JALRB.js";import"../../chunks/chunk.HTYJKOJL.js";import"../../chunks/chunk.D2BMH7HD.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};

package/dist/hotosm-ui.js

@@ -1 +1 @@
-import{a as r}from"./chunks/chunk.SZ46YTWY.js";import"./chunks/chunk.7RJ72M75.js";import"./chunks/chunk.UTSKEKTV.js";import{a as t}from"./chunks/chunk.YYEOK7MA.js";import"./chunks/chunk.PDLGEB7T.js";import{a}from"./chunks/chunk.456NATDG.js";import"./chunks/chunk.MIYFUINI.js";import"./chunks/chunk.LPSHZWUY.js";import"./chunks/chunk.T4GALJJA.js";import{a as o}from"./chunks/chunk.CNARC7G7.js";import"./chunks/chunk.HCXPZJU6.js";import"./chunks/chunk.D2BMH7HD.js";import"./chunks/chunk.6ZDEZIWM.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.HTYJKOJL.js";import"./chunks/chunk.U4P7XQR4.js";import"./chunks/chunk.NI7UJOOZ.js";export{a as Consent,o as Header,r as Logo,t as Tracking};
+import{a as r}from"./chunks/chunk.SZ46YTWY.js";import"./chunks/chunk.7RJ72M75.js";import"./chunks/chunk.UTSKEKTV.js";import{a as t}from"./chunks/chunk.YYEOK7MA.js";import"./chunks/chunk.PDLGEB7T.js";import{a as o}from"./chunks/chunk.H4QL3V4P.js";import"./chunks/chunk.5F5JALRB.js";import"./chunks/chunk.HTYJKOJL.js";import{a}from"./chunks/chunk.UYOJKKGV.js";import"./chunks/chunk.CS56NBTQ.js";import"./chunks/chunk.LPSHZWUY.js";import"./chunks/chunk.D2BMH7HD.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 Consent,o as Header,r as Logo,t as Tracking};

package/dist/themes/hot-wa-override.css

@@ -151,6 +151,76 @@
     --wa-color-pink: var(--wa-color-pink-50);
     --wa-color-pink-key: 50;
 
+    /*
+    * WebAwesome Theme Override
+    * This defines all the semantic color variants used by WebAwesome components
+    */
+    :where(:root), .wa-theme-default, .wa-light, .wa-dark .wa-invert, .wa-light .wa-theme-default, .wa-dark .wa-theme-default.wa-invert, .wa-dark .wa-theme-default .wa-invert {
+      color-scheme: light;
+      color: var(--wa-color-text-normal);
+      --wa-color-surface-raised: white;
+      --wa-color-surface-default: white;
+      --wa-color-surface-lowered: var(--wa-color-neutral-95);
+      --wa-color-surface-border: var(--wa-color-neutral-90);
+      --wa-color-text-normal: var(--wa-color-neutral-10);
+      --wa-color-text-quiet: var(--wa-color-neutral-40);
+      --wa-color-text-link: var(--wa-color-brand-40);
+      --wa-color-overlay-modal: 
+        color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
+      --wa-color-overlay-inline: 
+        color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
+      --wa-color-shadow: 
+        color-mix(in oklab, var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), transparent);
+      --wa-color-focus: var(--wa-color-brand-60);
+      --wa-color-mix-hover: black 10%;
+      --wa-color-mix-active: black 20%;
+      --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
+      --wa-color-brand-fill-normal: var(--wa-color-brand-90);
+      --wa-color-brand-fill-loud: var(--wa-color-brand-50);
+      --wa-color-brand-border-quiet: var(--wa-color-brand-90);
+      --wa-color-brand-border-normal: var(--wa-color-brand-80);
+      --wa-color-brand-border-loud: var(--wa-color-brand-60);
+      --wa-color-brand-on-quiet: var(--wa-color-brand-40);
+      --wa-color-brand-on-normal: var(--wa-color-brand-30);
+      --wa-color-brand-on-loud: white;
+      --wa-color-success-fill-quiet: var(--wa-color-success-95);
+      --wa-color-success-fill-normal: var(--wa-color-success-90);
+      --wa-color-success-fill-loud: var(--wa-color-success-50);
+      --wa-color-success-border-quiet: var(--wa-color-success-90);
+      --wa-color-success-border-normal: var(--wa-color-success-80);
+      --wa-color-success-border-loud: var(--wa-color-success-60);
+      --wa-color-success-on-quiet: var(--wa-color-success-40);
+      --wa-color-success-on-normal: var(--wa-color-success-30);
+      --wa-color-success-on-loud: white;
+      --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
+      --wa-color-warning-fill-normal: var(--wa-color-warning-90);
+      --wa-color-warning-fill-loud: var(--wa-color-warning-50);
+      --wa-color-warning-border-quiet: var(--wa-color-warning-90);
+      --wa-color-warning-border-normal: var(--wa-color-warning-80);
+      --wa-color-warning-border-loud: var(--wa-color-warning-60);
+      --wa-color-warning-on-quiet: var(--wa-color-warning-40);
+      --wa-color-warning-on-normal: var(--wa-color-warning-30);
+      --wa-color-warning-on-loud: white;
+      --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
+      --wa-color-danger-fill-normal: var(--wa-color-danger-90);
+      --wa-color-danger-fill-loud: var(--wa-color-danger-50);
+      --wa-color-danger-border-quiet: var(--wa-color-danger-90);
+      --wa-color-danger-border-normal: var(--wa-color-danger-80);
+      --wa-color-danger-border-loud: var(--wa-color-danger-60);
+      --wa-color-danger-on-quiet: var(--wa-color-danger-40);
+      --wa-color-danger-on-normal: var(--wa-color-danger-30);
+      --wa-color-danger-on-loud: white;
+      --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
+      --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
+      --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
+      --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
+      --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
+      --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
+      --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
+      --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
+      --wa-color-neutral-on-loud: white;
+    }
+
     /*
     * Typography
     *
@@ -220,3 +290,228 @@
     --wa-border-radius-circle: var(--hot-border-radius-circle);  /* 50% */
   }
 }
+
+/*
+* Button Customizations
+* Based on WebAwesome documentation: https://webawesome.com/docs/customizing/
+*/
+
+/* Custom Properties for Button Components */
+wa-button {
+  /* Button sizing */
+  --size: var(--wa-space-l); /* 20px - default button height */
+  --padding-x: var(--wa-space-m); /* 16px horizontal padding */
+  --padding-y: var(--wa-space-s); /* 12px vertical padding */
+  
+  /* Button appearance */
+  --border-radius: var(--wa-border-radius-m); /* 4px border radius */
+  --border-width: 1px;
+  --font-size: var(--wa-font-size-s); /* 14px font size */
+  --font-weight: var(--wa-font-weight-action); /* semibold */
+  
+  /* Button states */
+  --transition-duration: 150ms;
+  --transition-timing: ease-out;
+}
+
+/* Button size variants */
+wa-button[size="small"] {
+  --size: var(--wa-space-m); /* 16px */
+  --padding-x: var(--wa-space-s); /* 12px */
+  --padding-y: var(--wa-space-xs); /* 8px */
+  --font-size: var(--wa-font-size-xs); /* 12px */
+}
+
+wa-button[size="large"] {
+  --size: var(--wa-space-xl); /* 28px */
+  --padding-x: var(--wa-space-l); /* 20px */
+  --padding-y: var(--wa-space-m); /* 16px */
+  --font-size: var(--wa-font-size-m); /* 16px */
+}
+
+/* CSS Parts for advanced button styling */
+wa-button::part(base) {
+  /* Base button styling */
+  border-radius: var(--border-radius);
+  border-width: var(--border-width);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  padding: var(--padding-y) var(--padding-x);
+  min-height: var(--size);
+  transition: all var(--transition-duration) var(--transition-timing);
+  
+  /* HOT-specific styling */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+wa-button::part(base):hover {
+  /* Hover state */
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+wa-button::part(base):active {
+  /* Active state */
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+wa-button::part(base):focus-visible {
+  /* Focus state */
+  outline: 2px solid var(--wa-color-focus);
+  outline-offset: 2px;
+}
+
+wa-button::part(label) {
+  /* Button text styling */
+  font-family: var(--wa-font-family-body);
+  letter-spacing: 0.025em;
+}
+
+/* Button variant-specific styling */
+wa-button[variant="primary"]::part(base) {
+  background: linear-gradient(135deg, var(--wa-color-brand-fill-loud), var(--wa-color-brand-fill-normal));
+  border-color: var(--wa-color-brand-border-loud);
+  color: var(--wa-color-brand-on-loud);
+}
+
+wa-button[variant="primary"]::part(base):hover {
+  background: linear-gradient(135deg, var(--wa-color-brand-fill-normal), var(--wa-color-brand-fill-quiet));
+  border-color: var(--wa-color-brand-border-normal);
+}
+
+wa-button[variant="secondary"]::part(base) {
+  background: var(--wa-color-neutral-fill-quiet);
+  border-color: var(--wa-color-neutral-border-normal);
+  color: var(--wa-color-neutral-on-quiet);
+}
+
+wa-button[variant="secondary"]::part(base):hover {
+  background: var(--wa-color-neutral-fill-normal);
+  border-color: var(--wa-color-neutral-border-loud);
+  color: var(--wa-color-neutral-on-normal);
+}
+
+wa-button[variant="outline"]::part(base) {
+  background: transparent;
+  border-color: var(--wa-color-brand-border-normal);
+  color: var(--wa-color-brand-on-normal);
+}
+
+wa-button[variant="outline"]::part(base):hover {
+  background: var(--wa-color-brand-fill-quiet);
+  border-color: var(--wa-color-brand-border-loud);
+  color: var(--wa-color-brand-on-quiet);
+}
+
+/* Success, warning, danger variants */
+wa-button[variant="success"]::part(base) {
+  background: linear-gradient(135deg, var(--wa-color-success-fill-loud), var(--wa-color-success-fill-normal));
+  border-color: var(--wa-color-success-border-loud);
+  color: var(--wa-color-success-on-loud);
+}
+
+wa-button[variant="warning"]::part(base) {
+  background: linear-gradient(135deg, var(--wa-color-warning-fill-loud), var(--wa-color-warning-fill-normal));
+  border-color: var(--wa-color-warning-border-loud);
+  color: var(--wa-color-warning-on-loud);
+}
+
+wa-button[variant="danger"]::part(base) {
+  background: linear-gradient(135deg, var(--wa-color-danger-fill-loud), var(--wa-color-danger-fill-normal));
+  border-color: var(--wa-color-danger-border-loud);
+  color: var(--wa-color-danger-on-loud);
+}
+
+/* Custom states using :state() selector */
+wa-button:state(disabled)::part(base) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+wa-button:state(loading)::part(base) {
+  cursor: wait;
+}
+
+/* Custom button classes for specific use cases */
+wa-button.hot-gradient::part(base) {
+  background: linear-gradient(217deg, var(--wa-color-red-50), var(--wa-color-orange-50), var(--wa-color-yellow-50));
+  border: solid 1px var(--wa-color-orange-50);
+  color: white;
+  text-shadow: rgba(0, 0, 0, 0.3) 0 -1px;
+}
+
+wa-button.hot-gradient::part(base):hover {
+  box-shadow: var(--wa-shadow-m);
+  transform: translateY(-3px);
+}
+
+wa-button.hot-gradient::part(base):active {
+  box-shadow: inset var(--wa-shadow-s);
+  transform: translateY(0);
+}
+
+/* Icon button styling */
+wa-button[appearance="icon"] {
+  --padding-x: var(--wa-space-xs);
+  --padding-y: var(--wa-space-xs);
+  --size: var(--wa-space-xl);
+}
+
+wa-button[appearance="icon"]::part(base) {
+  border-radius: var(--wa-border-radius-circle);
+  padding: var(--padding-y);
+  min-width: var(--size);
+  min-height: var(--size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Native button element support */
+button {
+  /* Apply same custom properties to native buttons */
+  --size: var(--wa-space-l);
+  --padding-x: var(--wa-space-m);
+  --padding-y: var(--wa-space-s);
+  --border-radius: var(--wa-border-radius-m);
+  --border-width: 1px;
+  --font-size: var(--wa-font-size-s);
+  --font-weight: var(--wa-font-weight-action);
+  --transition-duration: 150ms;
+  --transition-timing: ease-out;
+  
+  border-radius: var(--border-radius);
+  border-width: var(--border-width);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  padding: var(--padding-y) var(--padding-x);
+  min-height: var(--size);
+  transition: all var(--transition-duration) var(--transition-timing);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--wa-color-focus);
+  outline-offset: 2px;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}

package/package.json

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

package/dist/chunks/chunk.456NATDG.js

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

package/dist/chunks/chunk.CNARC7G7.js

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