Add custom tint support

Author: khmyznikov

README.md

@@ -106,6 +106,23 @@ import '@khmyznikov/pwa-install';
 ```
 *Make a good manifest file and don't use name/descr/icon params. Boolean attributes needs to be removed to act like "false"*
 
+## Custom Styles
+
+*Only the Apple template supports styling, and only the tint color option is available as of today. More to come.*
+```html
+<!-- As attribute (JSON string) -->
+<pwa-install styles='{"--tint-color": "#6366f1"}'></pwa-install>
+```
+
+```javascript
+// As property (object)
+const pwaInstall = document.querySelector('pwa-install');
+pwaInstall.styles = { '--tint-color': '#6366f1' };
+
+// Or as attribute via JavaScript
+pwaInstall.setAttribute('styles', JSON.stringify({ '--tint-color': '#6366f1' }));
+```
+
 <br>
 
 ## Supported events
@@ -137,6 +154,7 @@ This is **not** a error and **not** a bug. This means that the component success
 - isInstallAvailable: boolean
 - isAppleMobilePlatform: boolean
 - isAppleDesktopPlatform: boolean
+- isApple26Plus: boolean
 - isUnderStandaloneMode: boolean
 - isRelatedAppsInstalled: boolean
 

custom-elements.json

@@ -437,6 +437,14 @@
               },
               "default": "false",
               "fieldName": "useLocalStorage"
+            },
+            {
+              "name": "styles",
+              "type": {
+                "text": "Record<string, string>"
+              },
+              "default": "{}",
+              "fieldName": "styles"
             }
           ],
           "superclass": {

dist/pwa-install.bundle.js

@@ -16,6 +16,7 @@ export declare class PWAInstallElement extends LitElement {
     disableClose: boolean;
     disableFallback: boolean;
     useLocalStorage: boolean;
+    styles: Record<string, string>;
     static get styles(): CSSStyleSheet[];
     externalPromptEvent: BeforeInstallPromptEvent | null;
     platforms: BeforeInstallPromptEvent['platforms'];

dist/pwa-install.bundle.js.map

@@ -1,3 +1,3 @@
 import { WebAppManifest } from 'web-app-manifest';
-declare const template: (name: string, description: string, installDescription: string, disableDescription: boolean, disableScreenshots: boolean, disableClose: boolean, icon: string, manifest: WebAppManifest, installAvailable: any, hideDialog: any, howToForApple: any, howToRequested: boolean, toggleGallery: any, galleryRequested: boolean, isRTL?: boolean, isApple26Plus?: boolean, isDesktop?: boolean) => import("lit").TemplateResult<1>;
+declare const template: (name: string, description: string, installDescription: string, disableDescription: boolean, disableScreenshots: boolean, disableClose: boolean, icon: string, manifest: WebAppManifest, installAvailable: any, hideDialog: any, howToForApple: any, howToRequested: boolean, toggleGallery: any, galleryRequested: boolean, isRTL?: boolean, isApple26Plus?: boolean, isDesktop?: boolean, customStyles?: Record<string, string>) => import("lit").TemplateResult<1>;
 export default template;