progressive-share-button 1.0.0-alpha.1 → 1.0.0-alpha.2

package/README.md

@@ -1,17 +1,9 @@
 # Progressive Share Button
 
-The _Progressive Share Button_ web component is a simple way to add a share button to your web page. The button will only be displayed if the browser supports the [Web Share API](https://w3c.github.io/web-share/).
+The _Progressive Share Button_ web component is a simple way to add a share button to your web page that will show the user the OS native share options using the [Web Share API](https://w3c.github.io/web-share/). The "progressive" part of the name comes from the fact that the component will only display the share button if the browser supports the Web Share API. If the browser does not support the Web Share API, the component will not display anything.
 
 The web component is a wrapper around the [Web Share API](https://w3c.github.io/web-share/) that attempts to display a share icon appropriate to the user's device with icons that will be recognizable to iOS/Mac, Android and Windows. If the device type can't be determined, the component will display a Windows share icon.
 
-## Limitations
-
-The [Web Share API](https://w3c.github.io/web-share/), while still in draft, has wide support on mobile. Desktop support is decent on Windows. Mac support works in Safari, but lags on third-party browsers. Check [caniuse/web-share](https://caniuse.com/web-share) for the most up-to-date information on its progress.
-
-The component will only display the share button if the browser supports the Web Share API. If the browser does not support the Web Share API, the component will not display anything.
-
-_Progressive Share Button_ does not support the sharing of files.
-
 ## Basic Usage
 
 The most basic usage of the component is to pass the URL to be shared. The component will render a share icon that will open the native share dialog when clicked.
@@ -24,6 +16,14 @@ This will render one of the following, depending on the device and browser. This
 
 ![Basic Example](./img/button-examples.png)
 
+## Limitations
+
+The [Web Share API](https://w3c.github.io/web-share/), while still in draft, has wide support on mobile. Desktop support is decent on Windows. Mac support works in Safari, but lags on third-party browsers. Check [caniuse/web-share](https://caniuse.com/web-share) for the most up-to-date information on its progress.
+
+The component will only display the share button if the browser supports the Web Share API. If the browser does not support the Web Share API, the component will not display anything.
+
+_Progressive Share Button_ does not support the sharing of files.
+
 ## Installation as a module
 
 Run the following command to install it.
@@ -40,10 +40,10 @@ customElements.define('progressive-share-button', ProgressiveShareButton);
 
 ### CDN
 
-https://unpkg.com/ info to come
+You can also use the component directly from a CDN. The component is available on [unpkg](https://unpkg.com/progressive-share-button).
 
 ```html
-<script src="https://unpkg.com/TBD/progressive-share-button"></script>
+<script src="https://unpkg.com/progressive-share-button"></script>
 ```
 
 ## Customizing the Component
@@ -55,14 +55,30 @@ The component accepts the following attributes:
 | title | string | null | The title of the page to be shared. |
 | text | string | null | The text string to be shared. |
 | url | string | null | The URL to be shared. |
-| smart-share | boolean | false | Accepts 0, false, 1, or true. If true, the component concatenate the title, text, and url into a single string. See the [_Why use smart-share_](#why-use-smart-share) section below for more information. |
+| smart-share | boolean | false | Accepts 0, false, 1, or true. If true, the component concatenate the title, text, and url into a single string. See the [_Why use smart-share_](#why-use-the-smart-share-feature) section below for more information. |
 | icon-size | string or int | 24 | The size of the SVG share icon. The icon is rendered in a square. If an integer is passed, the component assumes the value is given in pixels, 24 becomes "24px", but you may also pass a string with a valid CSS size, like "1rem". |
-| debug | boolean | false | Accepts 0, false, 1, or true. If true is passed, the share icon will be displayed even if the Web Share API is not supported in the browser. The share behavior will *not* open the share dialog but, but instead will pass the data to be shared to the console for debugging. |
+| debug | boolean | false | Accepts 0, false, 1, or true. If true is passed, the share icon will be displayed even if the Web Share API is not supported in the browser. The share behavior will *not* open the share dialog but, but instead will pass the data to be shared to the console for debugging. No custom events will be fired. |
 ## Styling
 
 The component uses the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate the styles. This means that the styles are not inherited by the parent page. To style the component, you must use the [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element. There are two parts that can be styled: `shareButton` and `shareIcon`.
 
-### shareButton
+The basic Shadow DOM strutcture of the component is as follows:
+
+```html
+<progressive-share-button>
+  <button part="shareButton">
+    <slot>
+      <svg part="shareIcon">
+        <!-- content of SVG here -->
+      </svg>
+    </slot>
+  </button>
+</progressive-share-button>
+```
+
+If you place style directly on the component, i.e., the _progressive-share-button_ element, you may have unintended visual glitches on devices that would normally not display the share button. For example, if you place a background color and padding on the component, the background color will be displayed on devices that do not support the Web Share API.
+
+### The _shareButton_ part
 
 The `shareButton` part is the button that is displayed when the Web Share API is supported. The button is a [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) element. The button has the following default styles:
 
@@ -76,7 +92,7 @@ button {
 }
 ```
 
-### shareIcon
+### The _shareIcon_ part
 
 The `shareIcon` part is the icon that is displayed when the Web Share API is supported. The icon is an [svg](https://developer.mozilla.org/en-US/docs/Web/SVG) element. The icon has the following default styles:
 
@@ -89,18 +105,23 @@ svg {
 }
 ```
 
-## Usage Examples
+## Usage examples
 
-### Basic Usage
+### Basic usage
+
+As shown earlier, the most basic usage of the component is to pass the URL to be shared. You may also pass the title and text to be shared.
 
-As shown earlier, the most basic usage of the component is to pass the URL to be shared.
 ```
 <progressive-share-button url="https://example.com" />
+
+<progressive-share-button title="Example.com" url="https://example.com" />
+
+<progressive-share-button title="Example.com" text="The example.com URL is a useful placehold during web development." url="https://example.com" />
 ```
 
-### Usage with Text
+### Replacing the share icon with text
 
-You can replace the share icon with text by inserting text into the component's slot. The following example replaces the share icon with the text "Share this link". The text is styled with the `text-share-example-1` class using using the [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element named `shareButton`.
+You can replace the share icon with text by inserting text into the component's slot. The following example replaces the share icon with the text "Share this link". The text is styled using the [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element named `shareButton` to apply the updated style to the button. This example also shows how you can target the component by assigning the  `text-share-example-1` class to the element.
 
 ```
 <progressive-share-button url="https://example.com" class="text-share-example-1">Share this link</progressive-share-button>
@@ -114,18 +135,17 @@ progressive-share-button.text-share-example-1::part(shareButton) {
 </style>
 ```
 
-### Advanced Usage with Options
+### Advanced usage with options
 
-In the following example,
+In the following example, the component is assigned the `text-share-example-2` class. The component is styled using the [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) pseudo-element named `shareIcon` to apply the updated style to the icon. The component is also assigned the `smart-share` attribute to pass the title, text, and url as a single string to the Web Share API. The icon will be displayed at 20 pixels wide and high.
 
 ```
 <progressive-share-button
-  title="Progressive Share Button Web Component"
-  text="Check out this cool web component that creates a share button that will only be displayed if the browser supports the Web Share API."
+  title="Example.com"
+  text="The example.com URL is a useful placehold during web development."
   url="https://example.com"
   smart-share=1
-  icon-size="20"
-  debug=0
+  icon-size=20
   class="text-share-example-2"
 />
 
@@ -137,9 +157,9 @@ progressive-share-button.text-share-example-2::part(shareIcon) {
 }
 ```
 
-## Why use smart-share
+## Why use the "smart-share" feature?
 
-The Web Share API requires that the data to be shared be passed as an object with the following optional properties:
+The _smart-share_ feature is an attempt to address a situation that might be viewed as a bug in the implementation of the Web Share API on some platforms. The Web Share API requires that the data to be shared be passed as an object with the following optional properties:
 
 * title
 * text
@@ -157,7 +177,7 @@ The _Progressive Share Button_ web component by default simply passes your data
 
 The problem is that when multiple properties are passed as separate properties what actually gets shared doesn't always include all the pieces of data you pass into the API. Some devices and applications receiving the data object will only share a single property, most often the URL in my tests.
 
-If have `smart-share` set to true, the component will concatenate all of the data into a single string and pass it to the Web Share API as text. The `title` and `text` will have a period added at the end of the string if it is not present. This will allow the data to be shared on any device or application that supports sharing text. The data will be shared as a single string, like this:
+If `smart-share` attribute is true, the component will concatenate all of the data into a single string and pass it to the Web Share API as text. The `title` and `text` will have a period added at the end of the string if it is not present. This will allow the data to be shared on any device or application that supports sharing text. The data will be shared as a single string, like this:
 
 ```
 {
@@ -169,11 +189,32 @@ The following link lets you test the Web Share API on your devices to make a mor
 
 https://w3c.github.io/web-share/demos/share-files.html
 
-## Demo
+## Custom events
 
-Demo to come.
+There are two custom event emitted by the component: `progressive-share-success` and `progressive-share-fail`.
+
+| Event name | Description |
+| --- | --- |
+| `progressive-share-success` | Emitted when the Web Share API is supported and the data is successfully shared. |
+| `progressive-share-fail` | Emitted when the Web Share API is supported but the data is not successfully shared. This is typically emitted when a user opens the share dialog box but exits out of it without sharing. |
+
+
+
+```javascript
+// example of listening for the custom events
+document.addEventListener('progressive-share-success', (e) => {
+  // e.detail contains the share data that was shared
+  console.log('The progressive-share event was heard.', e.detail);
+});
+document.addEventListener('progressive-share-fail', (e) => {
+  // e.detail contains the error message
+  console.log('The progressive-share-fail event was heard.', e.detail);
+});
+```
+
+## Demo
 
-~~[https://johnfmorton.github.io/progressive-share-button/](https://johnfmorton.github.io/progressive-share-button/)~~
+[https://johnfmorton.github.io/progressive-share-button/](https://johnfmorton.github.io/progressive-share-button/)
 
 ## License
 

package/dist/progressive-share-button.es.js

@@ -1,70 +1,87 @@
-class g extends HTMLElement {
+class p extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.iconSize = () => {
       const e = this.getAttribute("icon-size");
-      return i(e) ? e + "px" : e || 24 + "px";
+      return c(e) ? e + "px" : e || 24 + "px";
     };
-    function i(e) {
+    function c(e) {
       return /^-?\d+$/.test(e);
     }
-    (navigator.share || c(this.getAttribute("debug"))) && (this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: inline-block;
-          cursor: pointer;
-        }
-        svg {
-          width: ${this.iconSize()};
-          height: ${this.iconSize()};
-          fill: currentColor;
-          vertical-align: bottom;
-        }
-        button {
-          background: none;
-          border: none;
-          padding: 1px 2px 1px 2px;
-          margin: 0;
-          cursor: pointer;
-        }
-        :host(:hover) {
-        }
-      </style>
-      <button part="shareButton">
-      <slot>
-      ${d()}
-      </slot>
-      </button>
+    (navigator.share || o(this.getAttribute("debug"))) && (this.shadowRoot.innerHTML = `
+<style>
+  :host {
+    display: inline-block;
+    cursor: pointer;
+  }
+  svg {
+    width: ${this.iconSize()};
+    height: ${this.iconSize()};
+    fill: currentColor;
+    vertical-align: bottom;
+  }
+  button {
+    all: unset;
+    padding: 1px 2px 1px 2px;
+    margin: 0;
+    cursor: pointer;
+  }
+  :host(:hover) {
+  }
+</style>
+<button part="shareButton">
+<slot>
+${w()}
+</slot>
+</button>
     `, this.addEventListener("click", this.share));
   }
   share() {
-    const i = c(this.getAttribute("debug")), e = c(this.getAttribute("smart-share")), n = this.getAttribute("url");
-    let s = this.getAttribute("text"), r = this.getAttribute("title"), o = {};
-    n && (o.url = n), s && (o.text = s), r && (o.title = r), e && (r && r.slice(-1) !== "." && (r = r + "."), s && s.slice(-1) !== "." && (s = s + "."), o = {
+    const c = o(this.getAttribute("debug")), e = o(this.getAttribute("smart-share")), n = this.getAttribute("url");
+    let s = this.getAttribute("text"), r = this.getAttribute("title"), i = {};
+    n && (i.url = n), s && (i.text = s), r && (i.title = r), e && (r && r.slice(-1) !== "." && (r = r + "."), s && s.slice(-1) !== "." && (s = s + "."), i = {
       text: `${r ? r + " " : ""}${s ? s + " " : ""}${n || ""}`
-    }), navigator.share ? i == 1 ? console.debug("data to be shared", o) : navigator.share(o).then(() => {
-      console.log("Thanks for sharing!");
-    }).catch(console.error) : console.debug("data to be shared", o);
+    });
+    let h = new CustomEvent("progressive-share-success", {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      detail: i
+    });
+    navigator.share ? c == 1 ? console.debug("data to be shared", i) : navigator.share(i).then(() => {
+      this.dispatchEvent(h);
+    }).catch((l) => {
+      let u = new CustomEvent(
+        "progressive-share-fail",
+        {
+          bubbles: !0,
+          cancelable: !1,
+          composed: !0,
+          detail: l
+        }
+      );
+      this.dispatchEvent(u);
+    }) : console.debug("data to be shared", i);
   }
 }
-const h = () => '<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>', l = () => '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>', a = () => '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>', u = () => {
+const d = () => '<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>', v = () => '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>', a = () => '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>', g = () => {
   const t = navigator.userAgent;
   return /iPhone|iPad|iPod/.test(t) ? "iOS" : /Android/.test(t) ? "Android" : /_whichIcon/.test(t) ? "Windows" : /Mac/.test(t) ? "Mac" : "Unknown";
-}, d = (t) => {
-  switch (u()) {
+}, w = (t) => {
+  switch (g()) {
     case "iOS":
     case "Mac":
-      return h();
+      return d();
     case "Android":
-      return l();
+      return v();
     case "Windows":
       return a();
     default:
       return a();
   }
 };
-function c(t) {
-  var i;
-  switch ((i = t == null ? void 0 : t.toLowerCase()) == null ? void 0 : i.trim()) {
+function o(t) {
+  var c;
+  switch ((c = t == null ? void 0 : t.toLowerCase()) == null ? void 0 : c.trim()) {
     case "true":
     case "1":
       return !0;
@@ -78,5 +95,5 @@ function c(t) {
   }
 }
 export {
-  g as default
+  p as default
 };

package/dist/progressive-share-button.umd.js

@@ -1,28 +1,27 @@
-(function(o,c){typeof exports=="object"&&typeof module<"u"?module.exports=c():typeof define=="function"&&define.amd?define(c):(o=typeof globalThis<"u"?globalThis:o||self,o["progressive-share-button"]=c())})(this,function(){"use strict";class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.iconSize=()=>{const e=this.getAttribute("icon-size");return i(e)?e+"px":e||24+"px"};function i(e){return/^-?\d+$/.test(e)}(navigator.share||h(this.getAttribute("debug")))&&(this.shadowRoot.innerHTML=`
-      <style>
-        :host {
-          display: inline-block;
-          cursor: pointer;
-        }
-        svg {
-          width: ${this.iconSize()};
-          height: ${this.iconSize()};
-          fill: currentColor;
-          vertical-align: bottom;
-        }
-        button {
-          background: none;
-          border: none;
-          padding: 1px 2px 1px 2px;
-          margin: 0;
-          cursor: pointer;
-        }
-        :host(:hover) {
-        }
-      </style>
-      <button part="shareButton">
-      <slot>
-      ${g()}
-      </slot>
-      </button>
-    `,this.addEventListener("click",this.share))}share(){const i=h(this.getAttribute("debug")),e=h(this.getAttribute("smart-share")),a=this.getAttribute("url");let s=this.getAttribute("text"),r=this.getAttribute("title"),n={};a&&(n.url=a),s&&(n.text=s),r&&(n.title=r),e&&(r&&r.slice(-1)!=="."&&(r=r+"."),s&&s.slice(-1)!=="."&&(s=s+"."),n={text:`${r?r+" ":""}${s?s+" ":""}${a||""}`}),navigator.share?i==1?console.debug("data to be shared",n):navigator.share(n).then(()=>{console.log("Thanks for sharing!")}).catch(console.error):console.debug("data to be shared",n)}}const c=()=>'<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>',u=()=>'<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>',l=()=>'<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>',d=()=>{const t=navigator.userAgent;return/iPhone|iPad|iPod/.test(t)?"iOS":/Android/.test(t)?"Android":/_whichIcon/.test(t)?"Windows":/Mac/.test(t)?"Mac":"Unknown"},g=t=>{switch(d()){case"iOS":case"Mac":return c();case"Android":return u();case"Windows":return l();default:return l()}};function h(t){var i;switch((i=t==null?void 0:t.toLowerCase())==null?void 0:i.trim()){case"true":case"1":return!0;case"false":case"0":case null:case void 0:return!1;default:return JSON.parse(t)}}return o});
+(function(o,c){typeof exports=="object"&&typeof module<"u"?module.exports=c():typeof define=="function"&&define.amd?define(c):(o=typeof globalThis<"u"?globalThis:o||self,o["progressive-share-button"]=c())})(this,function(){"use strict";class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.iconSize=()=>{const t=this.getAttribute("icon-size");return n(t)?t+"px":t||24+"px"};function n(t){return/^-?\d+$/.test(t)}(navigator.share||h(this.getAttribute("debug")))&&(this.shadowRoot.innerHTML=`
+<style>
+  :host {
+    display: inline-block;
+    cursor: pointer;
+  }
+  svg {
+    width: ${this.iconSize()};
+    height: ${this.iconSize()};
+    fill: currentColor;
+    vertical-align: bottom;
+  }
+  button {
+    all: unset;
+    padding: 1px 2px 1px 2px;
+    margin: 0;
+    cursor: pointer;
+  }
+  :host(:hover) {
+  }
+</style>
+<button part="shareButton">
+<slot>
+${v()}
+</slot>
+</button>
+    `,this.addEventListener("click",this.share))}share(){const n=h(this.getAttribute("debug")),t=h(this.getAttribute("smart-share")),a=this.getAttribute("url");let s=this.getAttribute("text"),i=this.getAttribute("title"),r={};a&&(r.url=a),s&&(r.text=s),i&&(r.title=i),t&&(i&&i.slice(-1)!=="."&&(i=i+"."),s&&s.slice(-1)!=="."&&(s=s+"."),r={text:`${i?i+" ":""}${s?s+" ":""}${a||""}`});let g=new CustomEvent("progressive-share-success",{bubbles:!0,cancelable:!1,composed:!0,detail:r});navigator.share?n==1?console.debug("data to be shared",r):navigator.share(r).then(()=>{this.dispatchEvent(g)}).catch(p=>{let f=new CustomEvent("progressive-share-fail",{bubbles:!0,cancelable:!1,composed:!0,detail:p});this.dispatchEvent(f)}):console.debug("data to be shared",r)}}const c=()=>'<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>',u=()=>'<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>',l=()=>'<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>',d=()=>{const e=navigator.userAgent;return/iPhone|iPad|iPod/.test(e)?"iOS":/Android/.test(e)?"Android":/_whichIcon/.test(e)?"Windows":/Mac/.test(e)?"Mac":"Unknown"},v=e=>{switch(d()){case"iOS":case"Mac":return c();case"Android":return u();case"Windows":return l();default:return l()}};function h(e){var n;switch((n=e==null?void 0:e.toLowerCase())==null?void 0:n.trim()){case"true":case"1":return!0;case"false":case"0":case null:case void 0:return!1;default:return JSON.parse(e)}}return o});

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "progressive-share-button",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "A web componet that creates a OS-native share button.",
-  "files":["dist"],
-  "main":"./dist/progressive-share-button.umd.js",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/progressive-share-button.umd.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/johnfmorton/progressive-share-button"
   },
-  "module":"./dist/progressive-share-button.es.js",
+  "module": "./es/progressive-share-button.es.js",
   "exports": {
     ".": {
       "import": "./dist/progressive-share-button.es.js",