lit-weather - npm Package Compare versions

Comparing version 1.0.0-beta.4 to 1.0.0

custom-elements.json

@@ -17,26 +17,37 @@ {
               "name": "createRenderRoot",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Disable shadow-dom"
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "render",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "Header"
+              "name": "Header",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "Forecast"
+              "name": "Forecast",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "Content"
+              "name": "Preview",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "ErrorContent"
+              "name": "Content",
+              "privacy": "protected"
             },
             {
               "kind": "field",
+              "name": "ErrorContent",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
               "name": "query",
@@ -46,3 +57,2 @@ "type": {
               },
-              "default": "''",
               "description": "The query to lookup via openweatherapi. <br/>\n<code>{city}</code>  <br/>\n<code>{city}, {state}</code> <br/>\n<code>{city}, {state}, {country}</code> <br/>\n<code>{zip code}</code> <br/>\n<code>{zip code},{country code}</code>"
@@ -56,3 +66,2 @@ },
               },
-              "default": "''",
               "description": "Your openweather API token"
@@ -66,4 +75,4 @@ },
               },
-              "default": "'Imperial'",
-              "description": "The units to use for the weather"
+              "description": "The units to use for the weather",
+              "default": "'Imperial'"
             },
@@ -74,6 +83,6 @@ {
               "type": {
-                "text": "'stacked' | 'horizontal' | undefined"
+                "text": "'stacked' | 'preview' | undefined"
               },
-              "default": "'stacked'",
-              "description": "Variant for pre-defined tw classes"
+              "description": "Variant for pre-defined tw classes",
+              "default": "'stacked'"
             },
@@ -84,6 +93,6 @@ {
               "type": {
-                "text": "typeof classNames | undefined"
+                "text": "typeof defaultCn | undefined"
               },
-              "default": "{\n  wrapper: 'block',\n  'location-wrapper': '',\n  location: 'text-2xl font-medium',\n  today: `text-base ${secondaryTextColorClasses}`,\n  description: `text-sm mb-3 capitalize ${secondaryTextColorClasses}`,\n  time: `text-base mb-4 ${secondaryTextColorClasses}`,\n  'temp-wrapper-desktop': 'flex flex-col-reverse',\n  'temp-wrapper': 'flex horizontal',\n  'img-temp-wrapper': 'flex',\n  img: 'h-[70px] w-[70px] mr-3 bg-inherit rounded',\n  'unit-toggle': `text-lg mt-1.5 ml-2 ${secondaryTextColorClasses}`,\n  'unit-toggle-active': `text-black dark:text-white`,\n  temp: 'text-7xl',\n  'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${secondaryTextColorClasses}`,\n  'forecast-wrapper': 'flex flex-wrap gap-6 sm:gap-8 mt-4',\n  'forecast-item': 'flex flex-col items-center',\n  'forecast-item-title': `text-center text-sm font-medium mb-1 ${secondaryTextColorClasses}`,\n  'forecast-item-high': 'text-sm',\n  'forecast-item-low': `text-sm ${secondaryTextColorClasses}`,\n  'forecast-item-img': 'mb-1 bg-inherit',\n  'error-img': 'h-[120px] w-[120px] mb-4',\n  'error-text': 'text-2xl text-center',\n  'mobile-header': 'md:hidden',\n  loading: 'text-center',\n}",
-              "description": "Class names applied to elements"
+              "description": "Class names applied to elements",
+              "default": "{\n  wrapper: 'block',\n  location: 'text-2xl font-medium',\n  today: `text-base ${grayTxt}`,\n  description: `text-sm mb-3 capitalize ${grayTxt}`,\n  time: `text-base mb-4 ${grayTxt}`,\n  img: 'h-[70px] w-[70px] mr-3 bg-inherit rounded',\n  'img-loading': 'h-[70px] w-[70px] bg-gray-50 dark:bg-gray-800 mr-3 bg-inherit rounded',\n  'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${grayTxt}`,\n  'temp-wrapper': 'flex horizontal',\n  'temp-content': 'flex',\n  temp: 'text-7xl',\n  'unit-toggle': `text-lg mt-1.5 ml-2 ${grayTxt}`,\n  'unit-toggle-active': `text-black dark:text-white`,\n  'forecast-wrapper': 'flex flex-wrap gap-6 sm:gap-8 mt-4',\n  'forecast-item': 'flex flex-col items-center',\n  'forecast-item-title': `text-center text-sm font-medium mb-1 ${grayTxt}`,\n  'forecast-item-high': 'text-sm',\n  'forecast-item-low': `text-sm ${grayTxt}`,\n  'forecast-item-img': 'mb-1 bg-inherit',\n  'forecast-item-img-loading': 'h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-800',\n  error: 'text-sm',\n  'preview-wrapper': 'flex items-center',\n  'preview-img': 'h-6 w-6 mr-2 bg-inherit rounded',\n  'preview-img-loading': 'h-6 w-6 bg-gray-50 dark:bg-gray-800 rounded-xl',\n  'preview-temp': 'text-lg',\n  'preview-temp-content': 'flex',\n  'preview-unit-toggle': `text-xs mt-0.5 ml-1 ${grayTxt}`,\n}"
             },
@@ -96,3 +105,2 @@ {
               },
-              "default": "'default'",
               "description": "Icon type, defaults to a combination of material weather icons and openweather icons"
@@ -106,29 +114,32 @@ },
               },
-              "default": "'https://www.unpkg.com/lit-weather/icons/'",
-              "description": "If you are self-hosting the iconset"
+              "description": "If you are self-hosting the iconset",
+              "default": "'https://www.unpkg.com/lit-weather/icons/'"
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "_loading",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "description": "When true, a request is being made and the skeleton state is shown"
+              "privacy": "protected",
+              "description": "When true, a request is being made and the skeleton state is shown",
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "_error",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "true when there is an error"
+              "privacy": "protected",
+              "description": "true when there is an error",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "weekDayName",
+              "name": "_weekDayName",
               "type": {
                 "text": "string | undefined"
               },
+              "privacy": "protected",
               "description": "The day of the week"
@@ -138,6 +149,7 @@ },
               "kind": "field",
-              "name": "time",
+              "name": "_time",
               "type": {
                 "text": "string | undefined"
               },
+              "privacy": "protected",
               "description": "The current time"
@@ -147,19 +159,31 @@ },
               "kind": "field",
-              "name": "forecast",
+              "name": "_forecast",
               "type": {
-                "text": "Forecast | undefined"
+                "text": "{\n    weekDayName: string;\n    high: number;\n    low: number;\n    weatherImgSrc: string;\n  }[] | undefined"
               },
-              "default": "[]",
-              "description": "The forecast data"
+              "privacy": "protected",
+              "description": "The forecast data",
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "data",
+              "name": "_data",
               "type": {
-                "text": "Data | undefined"
+                "text": "{\n    name?: string;\n    id?: number;\n    sunrise?: string;\n    sunset?: string;\n    temp?: number;\n    description?: string;\n    humidity?: string;\n    wind?: string;\n    weatherImgSrc?: string;\n    fullForecastUrl?: string;\n    tempFeelsLike?: number;\n  }"
               },
-              "default": "{}",
-              "description": "API response for the current weather"
+              "privacy": "protected",
+              "description": "API response for the current weather",
+              "default": "{}"
             },
             {
+              "kind": "field",
+              "name": "_cn",
+              "privacy": "protected",
+              "default": "{\n  wrapper: 'block',\n  location: 'text-2xl font-medium',\n  today: `text-base ${grayTxt}`,\n  description: `text-sm mb-3 capitalize ${grayTxt}`,\n  time: `text-base mb-4 ${grayTxt}`,\n  img: 'h-[70px] w-[70px] mr-3 bg-inherit rounded',\n  'img-loading': 'h-[70px] w-[70px] bg-gray-50 dark:bg-gray-800 mr-3 bg-inherit rounded',\n  'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${grayTxt}`,\n  'temp-wrapper': 'flex horizontal',\n  'temp-content': 'flex',\n  temp: 'text-7xl',\n  'unit-toggle': `text-lg mt-1.5 ml-2 ${grayTxt}`,\n  'unit-toggle-active': `text-black dark:text-white`,\n  'forecast-wrapper': 'flex flex-wrap gap-6 sm:gap-8 mt-4',\n  'forecast-item': 'flex flex-col items-center',\n  'forecast-item-title': `text-center text-sm font-medium mb-1 ${grayTxt}`,\n  'forecast-item-high': 'text-sm',\n  'forecast-item-low': `text-sm ${grayTxt}`,\n  'forecast-item-img': 'mb-1 bg-inherit',\n  'forecast-item-img-loading': 'h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-800',\n  error: 'text-sm',\n  'preview-wrapper': 'flex items-center',\n  'preview-img': 'h-6 w-6 mr-2 bg-inherit rounded',\n  'preview-img-loading': 'h-6 w-6 bg-gray-50 dark:bg-gray-800 rounded-xl',\n  'preview-temp': 'text-lg',\n  'preview-temp-content': 'flex',\n  'preview-unit-toggle': `text-xs mt-0.5 ml-1 ${grayTxt}`,\n}",
+              "description": "Applied classnames",
+              "type": {
+                "text": "object"
+              }
+            },
+            {
               "kind": "method",
@@ -193,6 +217,12 @@ "name": "firstUpdated"
                 {
-                  "name": "key"
+                  "name": "key",
+                  "type": {
+                    "text": "typeof this.token"
+                  }
                 },
                 {
-                  "name": "query"
+                  "name": "query",
+                  "type": {
+                    "text": "typeof this.query"
+                  }
                 }
@@ -206,3 +236,6 @@ ]
                 {
-                  "name": "query"
+                  "name": "query",
+                  "type": {
+                    "text": "string"
+                  }
                 }
@@ -216,6 +249,12 @@ ]
                 {
-                  "name": "key"
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
                 },
                 {
-                  "name": "locationParam"
+                  "name": "locationParam",
+                  "type": {
+                    "text": "string"
+                  }
                 }
@@ -229,6 +268,12 @@ ]
                 {
-                  "name": "key"
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
                 },
                 {
-                  "name": "locationParam"
+                  "name": "locationParam",
+                  "type": {
+                    "text": "string"
+                  }
                 }
@@ -239,8 +284,3 @@ ]
               "kind": "method",
-              "name": "_handleWeatherError",
-              "parameters": [
-                {
-                  "name": "err"
-                }
-              ]
+              "name": "_handleWeatherError"
             },
@@ -252,3 +292,6 @@ {
                 {
-                  "name": "items"
+                  "name": "items",
+                  "type": {
+                    "text": "any"
+                  }
                 }
@@ -262,3 +305,6 @@ ]
                 {
-                  "name": "{ icon, id, dynamicDayOrNightString = false }"
+                  "name": "{\n    icon,\n    id,\n    dynamicDayOrNightString = false,\n  }",
+                  "type": {
+                    "text": "{\n    icon: string;\n    id: number;\n    dynamicDayOrNightString?: boolean;\n  }"
+                  }
                 }
@@ -265,0 +311,0 @@ ]

demo/custom-elements.json

@@ -17,26 +17,37 @@ {
               "name": "createRenderRoot",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Disable shadow-dom"
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "render",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "Header"
+              "name": "Header",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "Forecast"
+              "name": "Forecast",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "Content"
+              "name": "Preview",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "ErrorContent"
+              "name": "Content",
+              "privacy": "protected"
             },
             {
               "kind": "field",
+              "name": "ErrorContent",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
               "name": "query",
@@ -46,3 +57,2 @@ "type": {
               },
-              "default": "''",
               "description": "The query to lookup via openweatherapi. <br/>\n<code>{city}</code>  <br/>\n<code>{city}, {state}</code> <br/>\n<code>{city}, {state}, {country}</code> <br/>\n<code>{zip code}</code> <br/>\n<code>{zip code},{country code}</code>"
@@ -56,3 +66,2 @@ },
               },
-              "default": "''",
               "description": "Your openweather API token"
@@ -64,6 +73,6 @@ },
               "type": {
-                "text": "'Imperial' | 'Metric'"
+                "text": "'Imperial' | 'Metric' | undefined"
               },
-              "default": "'Imperial'",
-              "description": "The units to use for the weather"
+              "description": "The units to use for the weather",
+              "default": "'Imperial'"
             },
@@ -74,6 +83,6 @@ {
               "type": {
-                "text": "'stacked' | 'horizontal'"
+                "text": "'stacked' | 'preview' | undefined"
               },
-              "default": "'stacked'",
-              "description": "Variant for pre-defined tw classes"
+              "description": "Variant for pre-defined tw classes",
+              "default": "'stacked'"
             },
@@ -83,7 +92,7 @@ {
               "name": "cn",
-              "default": "{\n  wrapper: 'block',\n  'location-wrapper': '',\n  location: 'text-2xl font-medium',\n  today: `text-base ${secondaryTextColorClasses}`,\n  description: `text-sm mb-3 capitalize ${secondaryTextColorClasses}`,\n  time: `text-base mb-4 ${secondaryTextColorClasses}`,\n  'temp-wrapper-desktop': 'flex flex-col-reverse',\n  'temp-wrapper': 'flex horizontal',\n  'img-temp-wrapper': 'flex',\n  img: 'h-[70px] w-[70px] mr-3',\n  'unit-toggle': `text-lg mt-1.5 ml-2 ${secondaryTextColorClasses}`,\n  'unit-toggle-active': `text-black dark:text-white`,\n  temp: 'text-7xl',\n  'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${secondaryTextColorClasses}`,\n  'forecast-wrapper': 'flex flex-wrap gap-6 sm:gap-8 mt-4',\n  'forecast-item': 'flex flex-col items-center',\n  'forecast-item-title': `text-center text-sm font-medium mb-1 ${secondaryTextColorClasses}`,\n  'forecast-item-high': 'text-sm',\n  'forecast-item-low': `text-sm ${secondaryTextColorClasses}`,\n  'forecast-item-img': 'mb-1',\n  'error-img': 'h-[120px] w-[120px] mb-4',\n  'error-text': 'text-2xl text-center',\n  'mobile-header': 'md:hidden',\n  loading: 'text-center',\n}",
+              "type": {
+                "text": "typeof defaultCn | undefined"
+              },
               "description": "Class names applied to elements",
-              "type": {
-                "text": "object"
-              }
+              "default": "{\n  wrapper: 'block',\n  location: 'text-2xl font-medium',\n  today: `text-base ${grayTxt}`,\n  description: `text-sm mb-3 capitalize ${grayTxt}`,\n  time: `text-base mb-4 ${grayTxt}`,\n  img: 'h-[70px] w-[70px] mr-3 bg-inherit rounded',\n  'img-loading': 'h-[70px] w-[70px] bg-gray-50 dark:bg-gray-800 mr-3 bg-inherit rounded',\n  'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${grayTxt}`,\n  'temp-wrapper': 'flex horizontal',\n  'temp-content': 'flex',\n  temp: 'text-7xl',\n  'unit-toggle': `text-lg mt-1.5 ml-2 ${grayTxt}`,\n  'unit-toggle-active': `text-black dark:text-white`,\n  'forecast-wrapper': 'flex flex-wrap gap-6 sm:gap-8 mt-4',\n  'forecast-item': 'flex flex-col items-center',\n  'forecast-item-title': `text-center text-sm font-medium mb-1 ${grayTxt}`,\n  'forecast-item-high': 'text-sm',\n  'forecast-item-low': `text-sm ${grayTxt}`,\n  'forecast-item-img': 'mb-1 bg-inherit',\n  'forecast-item-img-loading': 'h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-800',\n  error: 'text-sm',\n  'preview-wrapper': 'flex items-center',\n  'preview-img': 'h-6 w-6 mr-2 bg-inherit rounded',\n  'preview-img-loading': 'h-6 w-6 bg-gray-50 dark:bg-gray-800 rounded-xl',\n  'preview-temp': 'text-lg',\n  'preview-temp-content': 'flex',\n  'preview-unit-toggle': `text-xs mt-0.5 ml-1 ${grayTxt}`,\n}"
             },
@@ -94,5 +103,4 @@ {
               "type": {
-                "text": "'default' | 'openweather'"
+                "text": "'default' | 'openweather' | undefined"
               },
-              "default": "'default'",
               "description": "Icon type, defaults to a combination of material weather icons and openweather icons"
@@ -104,31 +112,34 @@ },
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'https://www.unpkg.com/lit-weather/icons/'",
-              "description": "If you are self-hosting the iconset"
+              "description": "If you are self-hosting the iconset",
+              "default": "'https://www.unpkg.com/lit-weather/icons/'"
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "_loading",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "true",
-              "description": "When true, a request is being made and the skeleton state is shown"
+              "privacy": "protected",
+              "description": "When true, a request is being made and the skeleton state is shown",
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "_error",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "true when there is an error"
+              "privacy": "protected",
+              "description": "true when there is an error",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "weekDayName",
+              "name": "_weekDayName",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
+              "privacy": "protected",
               "description": "The day of the week"
@@ -138,6 +149,7 @@ },
               "kind": "field",
-              "name": "time",
+              "name": "_time",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
+              "privacy": "protected",
               "description": "The current time"
@@ -147,19 +159,31 @@ },
               "kind": "field",
-              "name": "forecast",
+              "name": "_forecast",
               "type": {
-                "text": "Forecast"
+                "text": "{\n    weekDayName: string;\n    high: number;\n    low: number;\n    weatherImgSrc: string;\n  }[] | undefined"
               },
-              "default": "[]",
-              "description": "The forecast data"
+              "privacy": "protected",
+              "description": "The forecast data",
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "data",
+              "name": "_data",
               "type": {
-                "text": "Data"
+                "text": "{\n    name?: string;\n    id?: number;\n    sunrise?: string;\n    sunset?: string;\n    temp?: number;\n    description?: string;\n    humidity?: string;\n    wind?: string;\n    weatherImgSrc?: string;\n    fullForecastUrl?: string;\n    tempFeelsLike?: number;\n  }"
               },
-              "default": "{}",
-              "description": "API response for the current weather"
+              "privacy": "protected",
+              "description": "API response for the current weather",
+              "default": "{}"
             },
             {
+              "kind": "field",
+              "name": "_cn",
+              "privacy": "protected",
+              "default": "{\n  wrapper: 'block',\n  location: 'text-2xl font-medium',\n  today: `text-base ${grayTxt}`,\n  description: `text-sm mb-3 capitalize ${grayTxt}`,\n  time: `text-base mb-4 ${grayTxt}`,\n  img: 'h-[70px] w-[70px] mr-3 bg-inherit rounded',\n  'img-loading': 'h-[70px] w-[70px] bg-gray-50 dark:bg-gray-800 mr-3 bg-inherit rounded',\n  'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${grayTxt}`,\n  'temp-wrapper': 'flex horizontal',\n  'temp-content': 'flex',\n  temp: 'text-7xl',\n  'unit-toggle': `text-lg mt-1.5 ml-2 ${grayTxt}`,\n  'unit-toggle-active': `text-black dark:text-white`,\n  'forecast-wrapper': 'flex flex-wrap gap-6 sm:gap-8 mt-4',\n  'forecast-item': 'flex flex-col items-center',\n  'forecast-item-title': `text-center text-sm font-medium mb-1 ${grayTxt}`,\n  'forecast-item-high': 'text-sm',\n  'forecast-item-low': `text-sm ${grayTxt}`,\n  'forecast-item-img': 'mb-1 bg-inherit',\n  'forecast-item-img-loading': 'h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-800',\n  error: 'text-sm',\n  'preview-wrapper': 'flex items-center',\n  'preview-img': 'h-6 w-6 mr-2 bg-inherit rounded',\n  'preview-img-loading': 'h-6 w-6 bg-gray-50 dark:bg-gray-800 rounded-xl',\n  'preview-temp': 'text-lg',\n  'preview-temp-content': 'flex',\n  'preview-unit-toggle': `text-xs mt-0.5 ml-1 ${grayTxt}`,\n}",
+              "description": "Applied classnames",
+              "type": {
+                "text": "object"
+              }
+            },
+            {
               "kind": "method",
@@ -193,6 +217,12 @@ "name": "firstUpdated"
                 {
-                  "name": "key"
+                  "name": "key",
+                  "type": {
+                    "text": "typeof this.token"
+                  }
                 },
                 {
-                  "name": "query"
+                  "name": "query",
+                  "type": {
+                    "text": "typeof this.query"
+                  }
                 }
@@ -206,3 +236,6 @@ ]
                 {
-                  "name": "query"
+                  "name": "query",
+                  "type": {
+                    "text": "string"
+                  }
                 }
@@ -216,6 +249,12 @@ ]
                 {
-                  "name": "key"
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
                 },
                 {
-                  "name": "locationParam"
+                  "name": "locationParam",
+                  "type": {
+                    "text": "string"
+                  }
                 }
@@ -229,6 +268,12 @@ ]
                 {
-                  "name": "key"
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
                 },
                 {
-                  "name": "locationParam"
+                  "name": "locationParam",
+                  "type": {
+                    "text": "string"
+                  }
                 }
@@ -239,8 +284,3 @@ ]
               "kind": "method",
-              "name": "_handleWeatherError",
-              "parameters": [
-                {
-                  "name": "err"
-                }
-              ]
+              "name": "_handleWeatherError"
             },
@@ -252,3 +292,6 @@ {
                 {
-                  "name": "items"
+                  "name": "items",
+                  "type": {
+                    "text": "any"
+                  }
                 }
@@ -262,3 +305,6 @@ ]
                 {
-                  "name": "{ icon, id, dynamicDayOrNightString = false }"
+                  "name": "{\n    icon,\n    id,\n    dynamicDayOrNightString = false,\n  }",
+                  "type": {
+                    "text": "{\n    icon: string;\n    id: number;\n    dynamicDayOrNightString?: boolean;\n  }"
+                  }
                 }
@@ -265,0 +311,0 @@ ]

dist/src/LitWeather.d.ts

 import { LitElement } from 'lit';
-type Data = {
-    name?: string;
-    id?: number;
-    sunrise?: string;
-    sunset?: string;
-    temp?: number;
-    description?: string;
-    humidity?: string;
-    wind?: string;
-    weatherImgSrc?: string;
-    fullForecastUrl?: string;
-    tempFeelsLike?: number;
-};
-type Forecast = {
-    weekDayName: string;
-    high: number;
-    low: number;
-    weatherImgSrc: string;
-}[];
-declare const classNames: {
+declare const defaultCn: {
     wrapper: string;
-    'location-wrapper': string;
     location: string;
@@ -28,10 +8,10 @@ today: string;
     time: string;
-    'temp-wrapper-desktop': string;
+    img: string;
+    'img-loading': string;
+    'extra-info': string;
     'temp-wrapper': string;
-    'img-temp-wrapper': string;
-    img: string;
+    'temp-content': string;
+    temp: string;
     'unit-toggle': string;
     'unit-toggle-active': string;
-    temp: string;
-    'extra-info': string;
     'forecast-wrapper': string;
@@ -43,14 +23,20 @@ 'forecast-item': string;
     'forecast-item-img': string;
-    'error-img': string;
-    'error-text': string;
-    'mobile-header': string;
-    loading: string;
+    'forecast-item-img-loading': string;
+    error: string;
+    'preview-wrapper': string;
+    'preview-img': string;
+    'preview-img-loading': string;
+    'preview-temp': string;
+    'preview-temp-content': string;
+    'preview-unit-toggle': string;
 };
 export declare class LitWeather extends LitElement {
+    /** Disable shadow-dom */
     protected createRenderRoot(): this;
-    render(): import("lit").TemplateResult<1>;
-    get Header(): import("lit").TemplateResult<1>;
-    get Forecast(): import("lit").TemplateResult<1>;
-    get Content(): import("lit").TemplateResult<1>;
-    get ErrorContent(): import("lit").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
+    protected get Header(): import("lit").TemplateResult<1>;
+    protected get Forecast(): import("lit").TemplateResult<1>;
+    protected get Preview(): import("lit").TemplateResult<1>;
+    protected get Content(): import("lit").TemplateResult<1>;
+    protected get ErrorContent(): import("lit").TemplateResult<1>;
     /**
@@ -70,5 +56,5 @@ * The query to lookup via openweatherapi. <br/>
     /** Variant for pre-defined tw classes */
-    variant?: 'stacked' | 'horizontal';
+    variant?: 'stacked' | 'preview';
     /** Class names applied to elements  */
-    cn?: typeof classNames;
+    cn?: typeof defaultCn;
     /** Icon type, defaults to a combination of material weather icons and openweather icons */
@@ -78,14 +64,63 @@ icons?: 'default' | 'openweather';
     iconBaseUrl?: string;
+    /** Private Props */
     /** When true, a request is being made and the skeleton state is shown */
-    loading?: boolean;
+    protected _loading?: boolean;
     /** true when there is an error */
-    error?: boolean;
+    protected _error?: boolean;
     /** The day of the week */
-    weekDayName?: string;
+    protected _weekDayName?: string;
     /** The current time */
-    time?: string;
+    protected _time?: string;
     /** The forecast data */
-    forecast?: Forecast;
+    protected _forecast?: {
+        weekDayName: string;
+        high: number;
+        low: number;
+        weatherImgSrc: string;
+    }[];
     /** API response for the current weather  */
-    data?: Data;
+    protected _data: {
+        name?: string;
+        id?: number;
+        sunrise?: string;
+        sunset?: string;
+        temp?: number;
+        description?: string;
+        humidity?: string;
+        wind?: string;
+        weatherImgSrc?: string;
+        fullForecastUrl?: string;
+        tempFeelsLike?: number;
+    };
+    /** Applied classnames */
+    protected _cn: {
+        wrapper: string;
+        location: string;
+        today: string;
+        description: string;
+        time: string;
+        img: string;
+        'img-loading': string;
+        'extra-info': string;
+        'temp-wrapper': string;
+        'temp-content': string;
+        temp: string;
+        'unit-toggle': string;
+        'unit-toggle-active': string;
+        'forecast-wrapper': string;
+        'forecast-item': string;
+        'forecast-item-title': string;
+        'forecast-item-high': string;
+        'forecast-item-low': string;
+        'forecast-item-img': string;
+        'forecast-item-img-loading': string;
+        error: string;
+        'preview-wrapper': string;
+        'preview-img': string;
+        'preview-img-loading': string;
+        'preview-temp': string;
+        'preview-temp-content': string;
+        'preview-unit-toggle': string;
+    };
+    constructor();
     firstUpdated(): void;
@@ -95,11 +130,11 @@ updated(changed: Map<string, any>): void;
     refresh(): void;
-    _generateRequests(key: any, query: any): void;
-    _getLocationParam(query: any): string;
-    _getCurrentWeather(key: any, locationParam: any): void;
-    _getForecast(key: any, locationParam: any): void;
-    _handleWeatherError(err: any): void;
+    _generateRequests(key: typeof this.token, query: typeof this.query): void;
+    _getLocationParam(query: string): string;
+    _getCurrentWeather(key: string, locationParam: string): void;
+    _getForecast(key: string, locationParam: string): void;
+    _handleWeatherError(): void;
     _computeForecast(items: any): any[];
-    _imgSrc({ icon, id, dynamicDayOrNightString }: {
-        icon: any;
-        id: any;
+    _imgSrc({ icon, id, dynamicDayOrNightString, }: {
+        icon: string;
+        id: number;
         dynamicDayOrNightString?: boolean;
@@ -114,3 +149,3 @@ }): string;
         interface IntrinsicElements {
-            ['lit-weather']: Partial<LitWeather> & Pick<LitWeather, 'query' | 'token' | 'units' | 'variant' | 'cn' | 'icons' | 'iconBaseUrl' | 'loading' | 'error' | 'weekDayName' | 'time' | 'forecast' | 'data'>;
+            ['lit-weather']: Partial<LitWeather> & Pick<LitWeather, 'query' | 'token' | 'units' | 'variant' | 'cn' | 'icons' | 'iconBaseUrl'>;
         }
@@ -117,0 +152,0 @@ }

dist/src/LitWeather.js

 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-const today = new Date();
-// prettier-ignore
-const getLocalTime = time => time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
-// prettier-ignore
-const getWeekDay = index => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index];
-const secondaryTextColorClasses = /*tw*/ 'text-gray-500 dark:text-gray-400';
-// prettier-ignore
-const skeletonLg = /*tw*/ html `<div class="h-5 w-48 bg-gray-50 dark:bg-gray-900 rounded-lg mb-3"></div>`;
-// prettier-ignore
-const skeleton = /*tw*/ html `<div class="h-4 w-20 bg-gray-50 dark:bg-gray-900 rounded-lg mb-2"></div>`;
-// prettier-ignore
-const skeletonSm = /*tw*/ html `<div class="h-3 w-8 bg-gray-50 dark:bg-gray-900 rounded-lg mb-1"></div>`;
-const classNames = /*tw*/ {
+function getLocalTime(time) {
+    return time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
+}
+function getWeekDay(index) {
+    return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index];
+}
+const Skelton = {
+    lg: html `<div class="h-5 w-48 bg-gray-50 dark:bg-gray-700 rounded-lg mb-3"></div>`,
+    md: html `<div class="h-4 w-20 bg-gray-50 dark:bg-gray-800 rounded-lg mb-2"></div>`,
+    sm: html `<div class="h-3 w-8 bg-gray-50 dark:bg-gray-800 rounded-lg mb-1"></div>`,
+};
+const grayTxt = /*tw*/ 'text-gray-500 dark:text-gray-400';
+const defaultCn = /*tw*/ {
     wrapper: 'block',
-    'location-wrapper': '',
     location: 'text-2xl font-medium',
-    today: `text-base ${secondaryTextColorClasses}`,
-    description: `text-sm mb-3 capitalize ${secondaryTextColorClasses}`,
-    time: `text-base mb-4 ${secondaryTextColorClasses}`,
-    'temp-wrapper-desktop': 'flex flex-col-reverse',
+    today: `text-base ${grayTxt}`,
+    description: `text-sm mb-3 capitalize ${grayTxt}`,
+    time: `text-base mb-4 ${grayTxt}`,
+    img: 'h-[70px] w-[70px] mr-3 bg-inherit rounded',
+    'img-loading': 'h-[70px] w-[70px] bg-gray-50 dark:bg-gray-800 mr-3 bg-inherit rounded',
+    'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${grayTxt}`,
     'temp-wrapper': 'flex horizontal',
-    'img-temp-wrapper': 'flex',
-    img: 'h-[70px] w-[70px] mr-3 bg-inherit rounded',
-    'unit-toggle': `text-lg mt-1.5 ml-2 ${secondaryTextColorClasses}`,
+    'temp-content': 'flex',
+    temp: 'text-7xl',
+    'unit-toggle': `text-lg mt-1.5 ml-2 ${grayTxt}`,
     'unit-toggle-active': `text-black dark:text-white`,
-    temp: 'text-7xl',
-    'extra-info': `flex-col text-xs ml-6 mt-2 hidden sm:flex ${secondaryTextColorClasses}`,
     'forecast-wrapper': 'flex flex-wrap gap-6 sm:gap-8 mt-4',
     'forecast-item': 'flex flex-col items-center',
-    'forecast-item-title': `text-center text-sm font-medium mb-1 ${secondaryTextColorClasses}`,
+    'forecast-item-title': `text-center text-sm font-medium mb-1 ${grayTxt}`,
     'forecast-item-high': 'text-sm',
-    'forecast-item-low': `text-sm ${secondaryTextColorClasses}`,
+    'forecast-item-low': `text-sm ${grayTxt}`,
     'forecast-item-img': 'mb-1 bg-inherit',
-    'error-img': 'h-[120px] w-[120px] mb-4',
-    'error-text': 'text-2xl text-center',
-    'mobile-header': 'md:hidden',
-    loading: 'text-center',
+    'forecast-item-img-loading': 'h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-800',
+    error: 'text-sm',
+    'preview-wrapper': 'flex items-center',
+    'preview-img': 'h-6 w-6 mr-2 bg-inherit rounded',
+    'preview-img-loading': 'h-6 w-6 bg-gray-50 dark:bg-gray-800 rounded-xl',
+    'preview-temp': 'text-lg',
+    'preview-temp-content': 'flex',
+    'preview-unit-toggle': `text-xs mt-0.5 ml-1 ${grayTxt}`,
 };
 export class LitWeather extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The query to lookup via openweatherapi. <br/>
-         * <code>{city}</code>  <br/>
-         * <code>{city}, {state}</code> <br/>
-         * <code>{city}, {state}, {country}</code> <br/>
-         * <code>{zip code}</code> <br/>
-         * <code>{zip code},{country code}</code>
-         * */
-        this.query = '';
-        /** Your openweather API token */
-        this.token = '';
-        /** The units to use for the weather */
-        this.units = 'Imperial';
-        /** Variant for pre-defined tw classes */
-        this.variant = 'stacked';
-        /** Class names applied to elements  */
-        this.cn = classNames;
-        /** Icon type, defaults to a combination of material weather icons and openweather icons */
-        this.icons = 'default';
-        /** If you are self-hosting the iconset */
-        this.iconBaseUrl = 'https://www.unpkg.com/lit-weather/icons/';
-        /** When true, a request is being made and the skeleton state is shown */
-        this.loading = true;
-        /** true when there is an error */
-        this.error = false;
-        /** The day of the week */
-        this.weekDayName = getWeekDay(today.getDay());
-        /** The current time */
-        this.time = getLocalTime(today);
-        /** The forecast data */
-        this.forecast = [];
-        /** API response for the current weather  */
-        this.data = {};
-    }
+    /** Disable shadow-dom */
     createRenderRoot() {
@@ -84,57 +52,51 @@ return this;
     render() {
-        return this.error ? this.ErrorContent : this.Content;
+        return this._error ? this.ErrorContent : this.Content;
     }
     get Header() {
         return html `
-      <div class=${this.cn['temp-wrapper-desktop']}>
-        <div class="${this.cn['temp-wrapper']}">
-          ${this.data.weatherImgSrc && !this.loading
+      <div class=${this._cn.location}>${this._loading ? Skelton.lg : this._data.name}</div>
+      <div class=${this._cn.today}>
+        ${this._loading ? Skelton.md : `${this._weekDayName} ${this._time}`}
+      </div>
+      <div class=${this._cn.description}>
+        ${this._loading ? Skelton.md : this._data.description}
+      </div>
+
+      <div class="${this._cn['temp-wrapper']}">
+        ${this._data.weatherImgSrc && !this._loading
             ? html `<img
-                class="${this.cn['img']}"
-                draggable="false"
-                src="${this.data.weatherImgSrc}"
-                loading="lazy"
-                height="70"
-                width="70"
-              />`
-            : html `<div
-                class=${`${this.cn['img']} h-[70px] w-[70px] bg-gray-50 dark:bg-gray-900 rounded-xl`}
-              ></div>`}
+              class="${this._cn['img']}"
+              draggable="false"
+              src="${this._data.weatherImgSrc}"
+              loading="lazy"
+              height="70"
+              width="70"
+            />`
+            : html `<div class=${this._cn['img-loading']}></div>`}
 
-          <div class="${this.cn['img-temp-wrapper']}">
-            <div class="${this.cn['temp']}">${this.data.temp}</div>
-            <div class="${this.cn['unit-toggle']}">
-              <button
-                class=${this.units === 'Imperial' && this.cn['unit-toggle-active']}
-                .disabled=${this.units === 'Imperial'}
-                @click="${this.toggleUnits}"
-              >
-                °F
-              </button>
-              <span> | </span>
-              <button
-                class=${this.units === 'Metric' && this.cn['unit-toggle-active']}
-                .disabled=${this.units === 'Metric'}
-                @click="${this.toggleUnits}"
-              >
-                °C
-              </button>
-            </div>
+        <div class="${this._cn['temp-content']}">
+          <div class="${this._cn['temp']}">${this._data.temp}</div>
+          <div class="${this._cn['unit-toggle']}">
+            <button
+              class=${this.units === 'Imperial' && this._cn['unit-toggle-active']}
+              .disabled=${this.units === 'Imperial'}
+              @click="${this.toggleUnits}"
+            >
+              °F
+            </button>
+            <span> | </span>
+            <button
+              class=${this.units === 'Metric' && this._cn['unit-toggle-active']}
+              .disabled=${this.units === 'Metric'}
+              @click="${this.toggleUnits}"
+            >
+              °C
+            </button>
           </div>
-
-          <div class="${this.cn['extra-info']}">
-            <div>Sunrise: ${this.data.sunrise} &rarr; ${this.data.sunset}</div>
-            <div>Humidity: ${this.data.humidity}%</div>
-            <div>Wind: ${this.data.wind}</div>
-          </div>
         </div>
 
-        <div class="flex flex-1"></div>
-
-        <div class=${this.cn['location-wrapper']}>
-          <div class=${this.cn.location}>${this.loading ? skeletonLg : this.data.name}</div>
-          <div class=${this.cn.today}>
-            ${this.loading ? skeleton : `${this.weekDayName} ${this.time}`}
-          </div>
-          <div class=${this.cn.description}>${this.loading ? skeleton : this.data.description}</div>
+        <div class="${this._cn['extra-info']}">
+          <div>Sunrise: ${this._data.sunrise} &rarr; ${this._data.sunset}</div>
+          <div>Humidity: ${this._data.humidity}%</div>
+          <div>Wind: ${this._data.wind}</div>
         </div>
@@ -147,11 +109,11 @@ </div>
         return html `
-      <div class="${this.cn['forecast-wrapper']}">
-        ${((_a = this.forecast) === null || _a === void 0 ? void 0 : _a.length) && !this.loading
-            ? repeat(this.forecast, item => html `
-                <div class="${this.cn['forecast-item']}">
-                  <div class="${this.cn['forecast-item-title']}">
+      <div class="${this._cn['forecast-wrapper']}">
+        ${((_a = this._forecast) === null || _a === void 0 ? void 0 : _a.length) && !this._loading
+            ? repeat(this._forecast, item => html `
+                <div class="${this._cn['forecast-item']}">
+                  <div class="${this._cn['forecast-item-title']}">
                     ${item.weekDayName.substring(0, 3)}
                   </div>
                   <img
-                    class="${this.cn['forecast-item-img']}"
+                    class="${this._cn['forecast-item-img']}"
                     draggable="false"
@@ -164,4 +126,4 @@ src="${item.weatherImgSrc}"
                   <div>
-                    <span class="${this.cn['forecast-item-high']}">${item.high}°</span>
-                    <span class="${this.cn['forecast-item-low']}">${item.low}°</span>
+                    <span class="${this._cn['forecast-item-high']}">${item.high}°</span>
+                    <span class="${this._cn['forecast-item-low']}">${item.low}°</span>
                   </div>
@@ -171,18 +133,10 @@ </div>
             : html `
-              <div class="${this.cn['forecast-wrapper']} mt-4">
-                <div class="flex flex-col justify-center items-center">
-                  ${skeletonSm}
-                  <div class="h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-900"></div>
-                  ${skeletonSm}
-                </div>
-                <div class="flex flex-col justify-center items-center">
-                  ${skeletonSm}
-                  <div class="h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-900"></div>
-                  ${skeletonSm}
-                </div>
-                <div class="flex flex-col justify-center items-center">
-                  ${skeletonSm}
-                  <div class="h-[48px] w-[48px] rounded-lg bg-gray-50 dark:bg-gray-900"></div>
-                  ${skeletonSm}
-                </div>
+              <div class="${this._cn['forecast-wrapper']} mt-4">
+                ${Array.from({ length: 6 }, (_, i) => i).map(() => html `
+                    <div class="flex flex-col justify-center items-center space-y-1">
+                      ${Skelton.sm}
+                      <div class=${this._cn['forecast-item-img-loading']}></div>
+                      ${Skelton.sm}
+                    </div>
+                  `)}
               </div>
@@ -193,20 +147,50 @@ `}
     }
+    get Preview() {
+        return html `
+      <div class=${this._cn['preview-wrapper']}>
+        ${this._data.weatherImgSrc && !this._loading
+            ? html `<img
+              class="${this._cn['preview-img']}"
+              draggable="false"
+              src="${this._data.weatherImgSrc}"
+              loading="lazy"
+              height="35"
+              width="35"
+            />`
+            : html `<div class=${this._cn['preview-img-loading']}></div>`}
+
+        <div class="${this._cn['preview-temp-content']}">
+          <div class="${this._cn['preview-temp']}">${this._data.temp}</div>
+          <div class="${this._cn['preview-unit-toggle']}">
+            ${this.units === 'Metric' ? '°C' : '°F'}
+          </div>
+        </div>
+      </div>
+    `;
+    }
     get Content() {
-        return html ` <div class=${this.cn.wrapper}>${this.Header}${this.Forecast}</div> `;
+        if (this.variant === 'preview')
+            return this.Preview;
+        return html ` <div class=${this._cn.wrapper}>${this.Header}${this.Forecast}</div>`;
     }
     get ErrorContent() {
-        return html ` <div class="flex justify-center">Error loading weather data</div> `;
+        return html ` <div class=${this._cn.error}>Error loading weather data</div> `;
     }
+    constructor() {
+        super();
+        /** Applied classnames */
+        this._cn = defaultCn;
+        this.units = 'Imperial';
+        this.variant = 'stacked';
+        this.cn = defaultCn;
+        this.iconBaseUrl = 'https://www.unpkg.com/lit-weather/icons/';
+        this._loading = true;
+        this._data = {};
+        this._forecast = [];
+        this._time = getLocalTime(new Date());
+        this._weekDayName = getWeekDay(new Date().getDay());
+        this._error = false;
+    }
     firstUpdated() {
-        if (!this.token || !this.query)
-            return;
-        // When the variant is not the default stacked, we need to add the tw classes
-        if (this.variant === 'horizontal') {
-            this.cn = /*tw*/ {
-                ...this.cn,
-                'location-wrapper': 'sm:ml-4 sm:text-right',
-                'temp-wrapper-desktop': 'flex flex-col-reverse sm:flex-row',
-            };
-        }
-        this._generateRequests(this.token, this.query);
+        this._cn = this.cn || defaultCn;
     }
@@ -218,3 +202,3 @@ updated(changed) {
         if (changed.has('loading')) {
-            this.dispatchEvent(new CustomEvent('loading-changed', { detail: { value: this.loading } }));
+            this.dispatchEvent(new CustomEvent('loading-changed', { detail: { value: this._loading } }));
         }
@@ -227,3 +211,3 @@ }
     refresh() {
-        this.time = getLocalTime(new Date());
+        this._time = getLocalTime(new Date());
         this._generateRequests(this.token, this.query);
@@ -234,5 +218,4 @@ }
             return;
-        this.error = false;
-        this.loading = true;
-        this.requestUpdate();
+        this._error = false;
+        this._loading = true;
         const locationParam = this._getLocationParam(query);
@@ -243,4 +226,4 @@ this._getCurrentWeather(key, locationParam);
     _getLocationParam(query) {
-        const firstChar = query.toString().charAt(0);
-        const isZipCode = !isNaN(firstChar - parseFloat(firstChar));
+        const firstChar = query.charAt(0);
+        const isZipCode = !isNaN(parseInt(firstChar));
         return isZipCode ? `zip=${query}` : `q=${query}`;
@@ -256,6 +239,6 @@ }
             .then(data => {
-            this.loading = false;
-            this.time = getLocalTime(new Date(data.dt * 1000));
-            this.weekDayName = getWeekDay(new Date(data.dt * 1000 + data.timezone * 1000).getDay());
-            this.data = {
+            this._loading = false;
+            this._time = getLocalTime(new Date(data.dt * 1000));
+            this._weekDayName = getWeekDay(new Date(data.dt * 1000 + data.timezone * 1000).getDay());
+            this._data = {
                 id: data.id,
@@ -277,7 +260,6 @@ name: data.name,
             };
-            this.dispatchEvent(new CustomEvent('data-changed', { detail: { value: this.data } }));
-            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent('data-changed', { detail: { value: this._data } }));
         })
-            .catch(error => {
-            this._handleWeatherError(error);
+            .catch(() => {
+            this._handleWeatherError();
         });
@@ -293,15 +275,14 @@ }
             .then(data => {
-            this.loading = false;
-            this.forecast = this._computeForecast(data.list);
-            this.requestUpdate();
+            this._loading = false;
+            this._forecast = this._computeForecast(data.list);
         })
-            .catch(error => {
-            this._handleWeatherError(error);
+            .catch(() => {
+            this._handleWeatherError();
         });
     }
-    _handleWeatherError(err) {
-        this.loading = false;
-        this.error = true;
-        this.data = {};
-        this.forecast = [];
+    _handleWeatherError() {
+        this._loading = false;
+        this._error = true;
+        this._data = {};
+        this._forecast = [];
         this.requestUpdate();
@@ -312,3 +293,3 @@ }
             return [];
-        let data = {};
+        const data = {};
         // Loop through each item
@@ -343,9 +324,11 @@ for (const item of items) {
         // https://stackoverflow.com/a/20762713
-        // prettier-ignore
-        const getMostProminentWeatherId = (arr) => arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop();
+        function getMostProminentWeatherId(arr) {
+            const sortedArr = arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length);
+            return sortedArr.pop();
+        }
         // Create an array of forecast data for each day
         const response = Object.keys(data).map(k => {
             const codes = data[k].weatherCodes;
-            const icon = getMostProminentWeatherId(codes.map(code => code[0]));
-            const id = getMostProminentWeatherId(codes.map(code => code[1]));
+            const icon = getMostProminentWeatherId(codes.map((code) => code[0]));
+            const id = getMostProminentWeatherId(codes.map((code) => code[1]));
             return {
@@ -360,3 +343,3 @@ weatherImgSrc: this._imgSrc({ icon, id }),
     }
-    _imgSrc({ icon, id, dynamicDayOrNightString = false }) {
+    _imgSrc({ icon, id, dynamicDayOrNightString = false, }) {
         if (!icon && !id) {
@@ -420,19 +403,22 @@ return '';
 __decorate([
-    property({ type: Boolean })
-], LitWeather.prototype, "loading", void 0);
+    state()
+], LitWeather.prototype, "_loading", void 0);
 __decorate([
-    property({ type: Boolean })
-], LitWeather.prototype, "error", void 0);
+    state()
+], LitWeather.prototype, "_error", void 0);
 __decorate([
-    property({ type: String })
-], LitWeather.prototype, "weekDayName", void 0);
+    state()
+], LitWeather.prototype, "_weekDayName", void 0);
 __decorate([
-    property({ type: String })
-], LitWeather.prototype, "time", void 0);
+    state()
+], LitWeather.prototype, "_time", void 0);
 __decorate([
-    property({ type: Boolean })
-], LitWeather.prototype, "forecast", void 0);
+    state()
+], LitWeather.prototype, "_forecast", void 0);
 __decorate([
-    property({ type: Object })
-], LitWeather.prototype, "data", void 0);
+    state()
+], LitWeather.prototype, "_data", void 0);
+__decorate([
+    state()
+], LitWeather.prototype, "_cn", void 0);
 //# sourceMappingURL=LitWeather.js.map

package.json

 {
   "name": "lit-weather",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0",
   "description": "Lit powered weather forecast web component, leveraging the OpenWeatherMap API. It's customizable with tailwindcss, lightweight, and shadow dom free.",
@@ -32,8 +32,3 @@ "module": "dist/index.js",
     "start:watch": "web-dev-server --open demo/ --node-resolve --watch",
-    "lint": "npm run lint:eslint && npm run lint:prettier",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
-    "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
-    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts . --ignore-path .gitignore",
     "tw:watch": "cd demo && npx tailwindcss --config ./tailwind.config.cjs -i ./tw.css -o ./tw-output.css --watch",
@@ -51,4 +46,5 @@ "tw:build": "npx tailwindcss -i ./demo/tw.css -o ./dist/tw.css",
   "devDependencies": {
-    "@open-wc/eslint-config": "^9.2.2",
     "@types/node": "18.14.2",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
     "@web/dev-server": "^0.1.35",
@@ -68,7 +64,2 @@ "@web/dev-server-esbuild": "0.3.3",
   },
-  "eslintConfig": {
-    "extends": [
-      "@open-wc/eslint-config"
-    ]
-  },
   "prettier": {
@@ -75,0 +66,0 @@ "singleQuote": true,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

584614

increased by1.21%

Lines of code

1868

increased by6.99%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

13

increased by8.33%

No dependency changes