@hotosm/ui 0.3.1-b4 → 0.3.1-b6

package/dist/themes/hot.css

@@ -1,235 +1,187 @@
-
 /* HOT theme */
 
+/* :root makes them available globally */
 :root,
+/* :host is for Web Components and shadow DOM scopes */
 :host,
+/* .hot-theme-light allows scoping if you apply that class conditionally */
 .hot-theme-light {
-
    /*
-   * Color primitives
-   */
-
-  /* red - red */
-
-  --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;
-
-  /* rose - persian plum */
-
-  --hot-color-rose-950: #3E030B;
-  --hot-color-rose-900: #4B040E;
-  --hot-color-rose-800: #5C1517;
-  --hot-color-rose-700: #6B231D;
-  --hot-color-rose-600: #7C2E26;
-  --hot-color-rose-500: #7D463F;
-  --hot-color-rose-400: #9E6960;
-  --hot-color-rose-300: #B3837B;
-  --hot-color-rose-200: #CFA59E;
-  --hot-color-rose-100: #EAC7C0;
-  --hot-color-rose-50: #FFE6DE;
-
-  /* yellow - bright yellow */
-
-  --hot-color-yellow-950: #CC6508;
-  --hot-color-yellow-900: #E8750C;
-  --hot-color-yellow-800: #F77D0F;
-  --hot-color-yellow-700: #FAA71E;
-  --hot-color-yellow-600: #FCBF26;
-  --hot-color-yellow-500: #FED82E;
-  --hot-color-yellow-400: #FAE62E;
-  --hot-color-yellow-300: #FDEB51;
-  --hot-color-yellow-200: #FFF072;
-  --hot-color-yellow-100: #FFF59B;
-  --hot-color-yellow-50: #FFF9C3;
-
-  /* blue - space cadet */
-
-  --hot-color-blue-950: #111C31;
-  --hot-color-blue-900: #182642;
-  --hot-color-blue-800: #20365B;
-  --hot-color-blue-700: #263F68;
-  --hot-color-blue-600: #2E4873;
-  --hot-color-blue-500: #344F7B;
-  --hot-color-blue-400: #53688B;
-  --hot-color-blue-300: #71829E;
-  --hot-color-blue-200: #97A5BA;
-  --hot-color-blue-100: #BFC8D6;
-  --hot-color-blue-50: #E6E9EE;
-
-  /* cyan - cadet blue */
-
-  --hot-color-cyan-950: #2B514F;
-  --hot-color-cyan-900: #366361;
-  --hot-color-cyan-800: #408789;
-  --hot-color-cyan-700: #459BA0;
-  --hot-color-cyan-600: #4BB1B9;
-  --hot-color-cyan-500: #50C1CB;
-  --hot-color-cyan-400: #58CBD1;
-  --hot-color-cyan-300: #6AD4D9;
-  --hot-color-cyan-200: #8FE1E3;
-  --hot-color-cyan-100: #B9EDED;
-  --hot-color-cyan-50: #E3F8F8;
-
-  /* gray - dark slate gray */
-
-  --hot-color-gray-950: #2C3038;
-  --hot-color-gray-900: #404248;
-  --hot-color-gray-800: #515057;
-  --hot-color-gray-700: #615F66;
-  --hot-color-gray-600: #716F73;
-  --hot-color-gray-500: #828085;
-  --hot-color-gray-400: #9A969B;
-  --hot-color-gray-300: #B3B0B3;
-  --hot-color-gray-200: #C4C3C5;
-  --hot-color-gray-100: #E1E0E1;
-  --hot-color-gray-50: #F3F3F3;
-
-  /* neutral - black & white */
-
-  --hot-color-neutral-1000: #000;
-  --hot-color-neutral-0: #fff;
+  * Color primitives
+  */
+
+   /* red - red */
+
+   --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;
+
+   /* rose - persian plum */
+
+   --hot-color-rose-950: #3E030B;
+   --hot-color-rose-900: #4B040E;
+   --hot-color-rose-800: #5C1517;
+   --hot-color-rose-700: #6B231D;
+   --hot-color-rose-600: #7C2E26;
+   --hot-color-rose-500: #7D463F;
+   --hot-color-rose-400: #9E6960;
+   --hot-color-rose-300: #B3837B;
+   --hot-color-rose-200: #CFA59E;
+   --hot-color-rose-100: #EAC7C0;
+   --hot-color-rose-50: #FFE6DE;
+
+   /* yellow - bright yellow */
+
+   --hot-color-yellow-950: #CC6508;
+   --hot-color-yellow-900: #E8750C;
+   --hot-color-yellow-800: #F77D0F;
+   --hot-color-yellow-700: #FAA71E;
+   --hot-color-yellow-600: #FCBF26;
+   --hot-color-yellow-500: #FED82E;
+   --hot-color-yellow-400: #FAE62E;
+   --hot-color-yellow-300: #FDEB51;
+   --hot-color-yellow-200: #FFF072;
+   --hot-color-yellow-100: #FFF59B;
+   --hot-color-yellow-50: #FFF9C3;
+
+   /* blue - space cadet */
+
+   --hot-color-blue-950: #111C31;
+   --hot-color-blue-900: #182642;
+   --hot-color-blue-800: #20365B;
+   --hot-color-blue-700: #263F68;
+   --hot-color-blue-600: #2E4873;
+   --hot-color-blue-500: #344F7B;
+   --hot-color-blue-400: #53688B;
+   --hot-color-blue-300: #71829E;
+   --hot-color-blue-200: #97A5BA;
+   --hot-color-blue-100: #BFC8D6;
+   --hot-color-blue-50: #E6E9EE;
+
+   /* cyan - cadet blue */
+
+   --hot-color-cyan-950: #2B514F;
+   --hot-color-cyan-900: #366361;
+   --hot-color-cyan-800: #408789;
+   --hot-color-cyan-700: #459BA0;
+   --hot-color-cyan-600: #4BB1B9;
+   --hot-color-cyan-500: #50C1CB;
+   --hot-color-cyan-400: #58CBD1;
+   --hot-color-cyan-300: #6AD4D9;
+   --hot-color-cyan-200: #8FE1E3;
+   --hot-color-cyan-100: #B9EDED;
+   --hot-color-cyan-50: #E3F8F8;
+
+   /* gray - dark slate gray */
+
+   --hot-color-gray-950: #2C3038;
+   --hot-color-gray-900: #404248;
+   --hot-color-gray-800: #515057;
+   --hot-color-gray-700: #615F66;
+   --hot-color-gray-600: #716F73;
+   --hot-color-gray-500: #828085;
+   --hot-color-gray-400: #9A969B;
+   --hot-color-gray-300: #B3B0B3;
+   --hot-color-gray-200: #C4C3C5;
+   --hot-color-gray-100: #E1E0E1;
+   --hot-color-gray-50: #F3F3F3;
 
    /*
-   * Color tokens
-   */
-
-  --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-color-danger-950: var(--hot-color-rose-950);
-  --hot-color-danger-900: var(--hot-color-rose-900);
-  --hot-color-danger-800: var(--hot-color-rose-800);
-  --hot-color-danger-700: var(--hot-color-rose-700);
-  --hot-color-danger-600: var(--hot-color-rose-600);
-  --hot-color-danger-500: var(--hot-color-rose-500);
-  --hot-color-danger-400: var(--hot-color-rose-400);
-  --hot-color-danger-300: var(--hot-color-rose-300);
-  --hot-color-danger-200: var(--hot-color-rose-200);
-  --hot-color-danger-100: var(--hot-color-rose-100);
-  --hot-color-danger-50: var(--hot-color-rose-50);
-
-  --hot-color-neutral-950: var(--hot-color-gray-950);
-  --hot-color-neutral-900: var(--hot-color-gray-900);
-  --hot-color-neutral-800: var(--hot-color-gray-800);
-  --hot-color-neutral-700: var(--hot-color-gray-700);
-  --hot-color-neutral-600: var(--hot-color-gray-600);
-  --hot-color-neutral-500: var(--hot-color-gray-500);
-  --hot-color-neutral-400: var(--hot-color-gray-400);
-  --hot-color-neutral-300: var(--hot-color-gray-300);
-  --hot-color-neutral-200: var(--hot-color-gray-200);
-  --hot-color-neutral-100: var(--hot-color-gray-100);
-  --hot-color-neutral-50: var(--hot-color-gray-50);
-
-  --hot-color-success-950: var(--hot-color-cyan-950);
-  --hot-color-success-900: var(--hot-color-cyan-900);
-  --hot-color-success-800: var(--hot-color-cyan-800);
-  --hot-color-success-700: var(--hot-color-cyan-700);
-  --hot-color-success-600: var(--hot-color-cyan-600);
-  --hot-color-success-500: var(--hot-color-cyan-500);
-  --hot-color-success-400: var(--hot-color-cyan-400);
-  --hot-color-success-300: var(--hot-color-cyan-300);
-  --hot-color-success-200: var(--hot-color-cyan-200);
-  --hot-color-success-100: var(--hot-color-cyan-100);
-  --hot-color-success-50: var(--hot-color-cyan-50);
-
-  --hot-color-warning-950: var(--hot-color-yellow-950);
-  --hot-color-warning-900: var(--hot-color-yellow-900);
-  --hot-color-warning-800: var(--hot-color-yellow-800);
-  --hot-color-warning-700: var(--hot-color-yellow-700);
-  --hot-color-warning-600: var(--hot-color-yellow-600);
-  --hot-color-warning-500: var(--hot-color-yellow-500);
-  --hot-color-warning-400: var(--hot-color-yellow-400);
-  --hot-color-warning-300: var(--hot-color-yellow-300);
-  --hot-color-warning-200: var(--hot-color-yellow-200);
-  --hot-color-warning-100: var(--hot-color-yellow-100);
-  --hot-color-warning-50: var(--hot-color-yellow-50);
-
-  /*
    * Typography
    */
 
-  /* Fonts */
-  --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --hot-font-sans-variant: 'Barlow Condensed';
-  --hot-font-sefif: Georgia, 'Times New Roman', serif;
-  --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New',
-  monospace, Consolas, 'Liberation Mono', Menlo, monospace;
-
-  /* Font sizes */
-  --hot-font-size-2x-small: 0.625rem; /* 10px */
-  --hot-font-size-x-small: 0.75rem; /* 12px */
-  --hot-font-size-small: 0.875rem; /* 14px */
-  --hot-font-size-medium: 1rem; /* 16px */
-  --hot-font-size-large: 1.25rem; /* 20px */
-  --hot-font-size-x-large: 1.5rem; /* 24px */
-  --hot-font-size-2x-large: 2.25rem; /* 36px */
-  --hot-font-size-3x-large: 3rem; /* 48px */
-  --hot-font-size-4x-large: 4.5rem; /* 72px */
-
-  /* Font weights */
-  --hot-font-weight-light: 300;
-  --hot-font-weight-normal: 400;
-  --hot-font-weight-semibold: 500;
-  --hot-font-weight-bold: 700;
-
-  /* Letter spacings */
-  --hot-letter-spacing-denser: -0.03em;
-  --hot-letter-spacing-dense: -0.015em;
-  --hot-letter-spacing-normal: normal;
-  --hot-letter-spacing-loose: 0.075em;
-  --hot-letter-spacing-looser: 0.15em;
-
-  /* Line heights */
-  --hot-line-height-denser: 1;
-  --hot-line-height-dense: 1.4;
-  --hot-line-height-normal: 1.8;
-  --hot-line-height-loose: 2.2;
-  --hot-line-height-looser: 2.6;
+   /* Fonts */
+   --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+   --hot-font-sans-variant: 'Barlow';
+   --hot-font-sans-variant-condensed: 'Barlow Condensed';
+   --hot-font-sefif: Georgia, 'Times New Roman', serif;
+   --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace, Consolas, 'Liberation Mono', Menlo, monospace;
+
+   /* Font sizes */
+   --hot-font-size-2x-small: 0.625rem;
+   /* 10px */
+   --hot-font-size-x-small: 0.75rem;
+   /* 12px */
+   --hot-font-size-small: 0.875rem;
+   /* 14px */
+   --hot-font-size-medium: 1rem;
+   /* 16px */
+   --hot-font-size-large: 1.25rem;
+   /* 20px */
+   --hot-font-size-x-large: 1.5rem;
+   /* 24px */
+   --hot-font-size-2x-large: 2.25rem;
+   /* 36px */
+   --hot-font-size-3x-large: 3rem;
+   /* 48px */
+   --hot-font-size-4x-large: 4.5rem;
+   /* 72px */
+
+   /* Font weights */
+   --hot-font-weight-light: 300;
+   --hot-font-weight-normal: 400;
+   --hot-font-weight-semibold: 500;
+   --hot-font-weight-bold: 700;
+
+   /* Letter spacings */
+   --hot-letter-spacing-denser: -0.03em;
+   --hot-letter-spacing-dense: -0.015em;
+   --hot-letter-spacing-normal: normal;
+   --hot-letter-spacing-loose: 0.075em;
+   --hot-letter-spacing-looser: 0.15em;
+
+   /* Line heights */
+   --hot-line-height-denser: 1;
+   --hot-line-height-dense: 1.4;
+   --hot-line-height-normal: 1.8;
+   --hot-line-height-loose: 2.2;
+   --hot-line-height-looser: 2.6;
 
    /*
    * Spacings
    */
 
-   --hot-spacing-3x-small: 0.125rem; /* 2px */
-   --hot-spacing-2x-small: 0.25rem; /* 4px */
-   --hot-spacing-x-small: 0.5rem; /* 8px */
-   --hot-spacing-small: 0.75rem; /* 12px */
-   --hot-spacing-medium: 1rem; /* 16px */
-   --hot-spacing-large: 1.25rem; /* 20px */
-   --hot-spacing-x-large: 1.75rem; /* 28px */
-   --hot-spacing-2x-large: 2.25rem; /* 36px */
-   --hot-spacing-3x-large: 3rem; /* 48px */
-   --hot-spacing-4x-large: 4.5rem; /* 72px */
-
-  /*
+   --hot-spacing-3x-small: 0.125rem;
+   /* 2px */
+   --hot-spacing-2x-small: 0.25rem;
+   /* 4px */
+   --hot-spacing-x-small: 0.5rem;
+   /* 8px */
+   --hot-spacing-small: 0.75rem;
+   /* 12px */
+   --hot-spacing-medium: 1rem;
+   /* 16px */
+   --hot-spacing-large: 1.25rem;
+   /* 20px */
+   --hot-spacing-x-large: 1.75rem;
+   /* 28px */
+   --hot-spacing-2x-large: 2.25rem;
+   /* 36px */
+   --hot-spacing-3x-large: 3rem;
+   /* 48px */
+   --hot-spacing-4x-large: 4.5rem;
+   /* 72px */
+
+   /*
    * Border radius
    */
 
-   --hot-border-radius-small: 0.1875rem; /* 3px */
-   --hot-border-radius-medium: 0.25rem; /* 4px */
-   --hot-border-radius-large: 0.5rem; /* 8px */
-   --hot-border-radius-x-large: 1rem; /* 16px */
+   --hot-border-radius-small: 0.1875rem;
+   /* 3px */
+   --hot-border-radius-medium: 0.25rem;
+   /* 4px */
+   --hot-border-radius-large: 0.5rem;
+   /* 8px */
+   --hot-border-radius-x-large: 1rem;
+   /* 16px */
    --hot-border-radius-circle: 50%;
    --hot-border-radius-pill: 9999px;
-
 }
-

package/package.json

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

package/dist/chunks/button.QMPBLQB7.js

@@ -1 +0,0 @@
-import{d as t}from"./chunk.I26W4NHZ.js";import"./chunk.OHRBDQCO.js";import"./chunk.TFICHQZE.js";import"./chunk.FIQQYKEP.js";import"./chunk.6ZDEZIWM.js";import"./chunk.U4P7XQR4.js";import"./chunk.NI7UJOOZ.js";export{t as default};

package/dist/chunks/chunk.7VBX4GII.js

@@ -1 +0,0 @@
-function m(o,t){return{top:Math.round(o.getBoundingClientRect().top-t.getBoundingClientRect().top),left:Math.round(o.getBoundingClientRect().left-t.getBoundingClientRect().left)}}var n=new Set;function g(){let o=document.documentElement.clientWidth;return Math.abs(window.innerWidth-o)}function p(){let o=Number(getComputedStyle(document.body).paddingRight.replace(/px/,""));return isNaN(o)||!o?0:o}function h(o){if(n.add(o),!document.documentElement.classList.contains("wa-scroll-lock")){let t=g()+p(),l=getComputedStyle(document.documentElement).scrollbarGutter;(!l||l==="auto")&&(l="stable"),t<2&&(l=""),document.documentElement.style.setProperty("--wa-scroll-lock-gutter",l),document.documentElement.classList.add("wa-scroll-lock"),document.documentElement.style.setProperty("--wa-scroll-lock-size",`${t}px`)}}function a(o){n.delete(o),n.size===0&&(document.documentElement.classList.remove("wa-scroll-lock"),document.documentElement.style.removeProperty("--wa-scroll-lock-size"))}function y(o,t,l="vertical",e="smooth"){let d=m(o,t),c=d.top+t.scrollTop,s=d.left+t.scrollLeft,i=t.scrollLeft,f=t.scrollLeft+t.offsetWidth,u=t.scrollTop,r=t.scrollTop+t.offsetHeight;(l==="horizontal"||l==="both")&&(s<i?t.scrollTo({left:s,behavior:e}):s+o.clientWidth>f&&t.scrollTo({left:s-t.offsetWidth+o.clientWidth,behavior:e})),(l==="vertical"||l==="both")&&(c<u?t.scrollTo({top:c,behavior:e}):c+o.clientHeight>r&&t.scrollTo({top:c-t.offsetHeight+o.clientHeight,behavior:e}))}export{h as a,a as b,y as c};

package/dist/chunks/chunk.FIQQYKEP.js

@@ -1,14 +0,0 @@
-import{b as a}from"./chunk.6ZDEZIWM.js";import{a as c,k as f}from"./chunk.U4P7XQR4.js";import{a as p}from"./chunk.NI7UJOOZ.js";var m=Object.defineProperty,w=Object.getOwnPropertyDescriptor,u=e=>{throw TypeError(e)},n=(e,t,s,r)=>{for(var i=r>1?void 0:r?w(t,s):t,l=e.length-1,h;l>=0;l--)(h=e[l])&&(i=(r?h(t,s,i):h(i))||i);return r&&i&&m(t,s,i),i},v=(e,t,s)=>t.has(e)||u("Cannot "+s),_=(e,t,s)=>(v(e,t,"read from private field"),s?s.call(e):t.get(e)),y=(e,t,s)=>t.has(e)?u("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),S=(e,t,s,r)=>(v(e,t,"write to private field"),r?r.call(e,s):t.set(e,s),s);var b=`:host {
-  box-sizing: border-box !important;
-}
-
-:host *,
-:host *::before,
-:host *::after {
-  box-sizing: inherit !important;
-}
-
-[hidden] {
-  display: none !important;
-}
-`,o,d=class extends f{constructor(){super(),y(this,o,!1),this.initialReflectedProperties=new Map,this.didSSR=!1||!!this.shadowRoot,this.customStates={set:(t,s)=>{var r;(r=this.internals)!=null&&r.states&&(s?this.internals.states.add(t):this.internals.states.delete(t))},has:t=>{var s;return(s=this.internals)!=null&&s.states?this.internals.states.has(t):!1}};try{this.internals=this.attachInternals()}catch(t){console.error("Element internals are not supported in your browser. Consider using a polyfill")}this.customStates.set("wa-defined",!0);let e=this.constructor;for(let[t,s]of e.elementProperties)s.default==="inherit"&&s.initial!==void 0&&typeof t=="string"&&this.customStates.set(`initial-${t}-${s.initial}`,!0)}static get styles(){let e=Array.isArray(this.css)?this.css:this.css?[this.css]:[];return[b,...e].map(t=>typeof t=="string"?c(t):t)}attributeChangedCallback(e,t,s){_(this,o)||(this.constructor.elementProperties.forEach((r,i)=>{r.reflect&&this[i]!=null&&this.initialReflectedProperties.set(i,this[i])}),S(this,o,!0)),super.attributeChangedCallback(e,t,s)}willUpdate(e){super.willUpdate(e),this.initialReflectedProperties.forEach((t,s)=>{e.has(s)&&this[s]==null&&(this[s]=t)})}firstUpdated(e){var t;super.firstUpdated(e),this.didSSR&&((t=this.shadowRoot)==null||t.querySelectorAll("slot").forEach(s=>{s.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}update(e){try{super.update(e)}catch(t){if(this.didSSR&&!this.hasUpdated){let s=new Event("lit-hydration-error",{bubbles:!0,composed:!0,cancelable:!1});s.error=t,this.dispatchEvent(s)}throw t}}relayNativeEvent(e,t){e.stopImmediatePropagation(),this.dispatchEvent(new e.constructor(e.type,p(p({},e),t)))}};o=new WeakMap;n([a()],d.prototype,"dir",2);n([a()],d.prototype,"lang",2);n([a({type:Boolean,reflect:!0,attribute:"did-ssr"})],d.prototype,"didSSR",2);export{n as a,d as b};