proto-icons-wc 0.0.445 → 0.0.447

package/dist/cjs/icon-proofs.cjs.entry.js

@@ -2,43 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5d498d66.js');
+const index = require('./index-1a57b032.js');
 
 const iconPaths = {
-  'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
-  'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
-  'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
-  'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
-  'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
-  'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
-  'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
+    'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
+    'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
+    'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
+    'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
+    'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
+    'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
+    'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
 };
 const iconNames = Object.keys(iconPaths);
 
 const iconProofsCss = ".page{color:var(--clrs-navy);font-family:'Roboto', 'Helvetica Neue', Arial, sans-serif;-webkit-font-smoothing:antialiased}.sheet{display:flex;flex-direction:column;margin:16px}.proof{display:flex;flex-direction:column;margin-bottom:32px}.proof svg{fill:var(--cx-icon-fill, '#111111')}.label{font-size:24px;font-weight:bold;color:var(--clrs-red);display:flex;flex-direction:row;align-items:center}.row{display:flex;flex-direction:row;flex-wrap:wrap}h1{color:var(--clrs-red);text-transform:uppercase;font-size:4em;font-weight:100;text-align:center}hr{margin-left:0;margin-right:0}";
 
 const IconProofs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.icons = [...iconNames, 'pad'];
-    this.protoIcon = (name, hex = undefined, size = 24) => {
-      const path = iconPaths[name];
-      return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, index.h("title", null, name), index.h("g", { fill: hex }, index.h("path", { d: path })), index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
-    };
-    this.iconRow = (size) => {
-      const { colors, icons, protoIcon } = this;
-      return (index.h("div", { class: "proof" }, index.h("div", { class: "label" }, size, protoIcon('down', 'currentColor')), index.h("hr", null), index.h("div", { class: "row" }, icons.map(name => {
-        const hex = colors[name];
-        return protoIcon(name, hex, size);
-      }))));
-    };
-    this.colors = {};
-    this.sizes = [24];
-  }
-  render() {
-    const { sizes } = this;
-    return (index.h("div", { class: "page" }, index.h("h1", null, "Icon Proofs"), index.h("div", { class: "sheet" }, sizes.map(size => this.iconRow(size))), ";"));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.icons = [...iconNames, 'pad'];
+        this.protoIcon = (name, hex = undefined, size = 24) => {
+            const path = iconPaths[name];
+            return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, index.h("title", null, name), index.h("g", { fill: hex }, index.h("path", { d: path })), index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+        };
+        this.iconRow = (size) => {
+            const { colors, icons, protoIcon } = this;
+            return (index.h("div", { class: "proof" }, index.h("div", { class: "label" }, size, protoIcon('down', 'currentColor')), index.h("hr", null), index.h("div", { class: "row" }, icons.map(name => {
+                const hex = colors[name];
+                return protoIcon(name, hex, size);
+            }))));
+        };
+        this.colors = {};
+        this.sizes = [24];
+    }
+    render() {
+        const { sizes } = this;
+        return (index.h("div", { class: "page" }, index.h("h1", null, "Icon Proofs"), index.h("div", { class: "sheet" }, sizes.map(size => this.iconRow(size))), ";"));
+    }
 };
 IconProofs.style = iconProofsCss;
 

package/dist/cjs/{index-5d498d66.js → index-1a57b032.js}

@@ -49,6 +49,13 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+/**
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+ *
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+ * support as of Stencil v4.
+ */
+const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 /**
  * Default style mode id
  */
@@ -263,6 +270,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
+                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
+                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                    styleElm.innerHTML += SLOT_FB_CSS;
+                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -347,7 +358,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) { }
+                catch (e) {
+                    /**
+                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
+                     */
+                }
             }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -366,6 +381,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
+/**
+ * Parsed a string of classnames into an array
+ * @param value className string, e.g. "foo bar baz"
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
+ */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
 const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     // if the element passed in is a shadow root, which is a document fragment
@@ -1062,10 +1082,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1236,12 +1256,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             const cmpMeta = {
@@ -1250,6 +1271,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
+            // Check if we are using slots outside the shadow DOM in this component.
+            // We'll use this information later to add styles for `slot-fb` elements
+            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                hasSlotRelocation = true;
+            }
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
@@ -1300,15 +1326,23 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
+    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+    if (hasSlotRelocation) {
+        dataStyles.innerHTML += SLOT_FB_CSS;
+    }
+    // Add hydration styles
     {
-        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
-        visibilityStyle.setAttribute('data-styles', '');
+        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+    }
+    // If we have styles, add them to the DOM
+    if (dataStyles.innerHTML.length) {
+        dataStyles.setAttribute('data-styles', '');
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
-            visibilityStyle.setAttribute('nonce', nonce);
+            dataStyles.setAttribute('nonce', nonce);
         }
-        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1460,7 +1494,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 exports.bootstrapLazy = bootstrapLazy;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5d498d66.js');
+const index = require('./index-1a57b032.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/proto-icons-wc.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5d498d66.js');
+const index = require('./index-1a57b032.js');
 
 /*
- Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.8.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('proto-icons-wc.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.7.1",
+    "version": "4.8.0",
     "typescriptVersion": "5.2.2"
   },
   "collections": [],

package/dist/collection/components/icon-proofs/icon-proofs.js

@@ -1,83 +1,83 @@
 import { h } from "@stencil/core";
 import { iconPaths, iconNames } from "../icons";
 export class IconProofs {
-  constructor() {
-    this.icons = [...iconNames, 'pad'];
-    this.protoIcon = (name, hex = undefined, size = 24) => {
-      const path = iconPaths[name];
-      return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, h("title", null, name), h("g", { fill: hex }, h("path", { d: path })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
-    };
-    this.iconRow = (size) => {
-      const { colors, icons, protoIcon } = this;
-      return (h("div", { class: "proof" }, h("div", { class: "label" }, size, protoIcon('down', 'currentColor')), h("hr", null), h("div", { class: "row" }, icons.map(name => {
-        const hex = colors[name];
-        return protoIcon(name, hex, size);
-      }))));
-    };
-    this.colors = {};
-    this.sizes = [24];
-  }
-  render() {
-    const { sizes } = this;
-    return (h("div", { class: "page" }, h("h1", null, "Icon Proofs"), h("div", { class: "sheet" }, sizes.map(size => this.iconRow(size))), ";"));
-  }
-  static get is() { return "icon-proofs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["icon-proofs.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["icon-proofs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "colors": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ColorMap",
-          "resolved": "ColorMap",
-          "references": {
-            "ColorMap": {
-              "location": "local",
-              "path": "/Users/richardhess/github/ionic/proto-icons-wc/src/components/icon-proofs/icon-proofs.tsx",
-              "id": "src/components/icon-proofs/icon-proofs.tsx::ColorMap"
+    constructor() {
+        this.icons = [...iconNames, 'pad'];
+        this.protoIcon = (name, hex = undefined, size = 24) => {
+            const path = iconPaths[name];
+            return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, h("title", null, name), h("g", { fill: hex }, h("path", { d: path })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+        };
+        this.iconRow = (size) => {
+            const { colors, icons, protoIcon } = this;
+            return (h("div", { class: "proof" }, h("div", { class: "label" }, size, protoIcon('down', 'currentColor')), h("hr", null), h("div", { class: "row" }, icons.map(name => {
+                const hex = colors[name];
+                return protoIcon(name, hex, size);
+            }))));
+        };
+        this.colors = {};
+        this.sizes = [24];
+    }
+    render() {
+        const { sizes } = this;
+        return (h("div", { class: "page" }, h("h1", null, "Icon Proofs"), h("div", { class: "sheet" }, sizes.map(size => this.iconRow(size))), ";"));
+    }
+    static get is() { return "icon-proofs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon-proofs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-proofs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorMap",
+                    "resolved": "ColorMap",
+                    "references": {
+                        "ColorMap": {
+                            "location": "local",
+                            "path": "/Users/richardhess/github/ionic/proto-icons-wc/src/components/icon-proofs/icon-proofs.tsx",
+                            "id": "src/components/icon-proofs/icon-proofs.tsx::ColorMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "{}"
+            },
+            "sizes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<number>",
+                    "resolved": "number[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[24]"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "{}"
-      },
-      "sizes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Array<number>",
-          "resolved": "number[]",
-          "references": {
-            "Array": {
-              "location": "global",
-              "id": "global::Array"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[24]"
-      }
-    };
-  }
+        };
+    }
 }

package/dist/collection/components/icons/iconPaths.js

@@ -1,11 +1,11 @@
 const iconPaths = {
-  'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
-  'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
-  'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
-  'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
-  'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
-  'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
-  'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
+    'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
+    'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
+    'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
+    'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
+    'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
+    'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
+    'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
 };
 const iconNames = Object.keys(iconPaths);
 export { iconPaths, iconNames };

package/dist/collection/utils/utils.js

@@ -1,3 +1,3 @@
 export function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }

package/dist/esm/icon-proofs.entry.js

@@ -1,40 +1,40 @@
-import { r as registerInstance, h } from './index-0f076ef9.js';
+import { r as registerInstance, h } from './index-d5c14c93.js';
 
 const iconPaths = {
-  'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
-  'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
-  'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
-  'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
-  'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
-  'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
-  'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
+    'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',
+    'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',
+    'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',
+    'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',
+    'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',
+    'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',
+    'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
 };
 const iconNames = Object.keys(iconPaths);
 
 const iconProofsCss = ".page{color:var(--clrs-navy);font-family:'Roboto', 'Helvetica Neue', Arial, sans-serif;-webkit-font-smoothing:antialiased}.sheet{display:flex;flex-direction:column;margin:16px}.proof{display:flex;flex-direction:column;margin-bottom:32px}.proof svg{fill:var(--cx-icon-fill, '#111111')}.label{font-size:24px;font-weight:bold;color:var(--clrs-red);display:flex;flex-direction:row;align-items:center}.row{display:flex;flex-direction:row;flex-wrap:wrap}h1{color:var(--clrs-red);text-transform:uppercase;font-size:4em;font-weight:100;text-align:center}hr{margin-left:0;margin-right:0}";
 
 const IconProofs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icons = [...iconNames, 'pad'];
-    this.protoIcon = (name, hex = undefined, size = 24) => {
-      const path = iconPaths[name];
-      return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, h("title", null, name), h("g", { fill: hex }, h("path", { d: path })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
-    };
-    this.iconRow = (size) => {
-      const { colors, icons, protoIcon } = this;
-      return (h("div", { class: "proof" }, h("div", { class: "label" }, size, protoIcon('down', 'currentColor')), h("hr", null), h("div", { class: "row" }, icons.map(name => {
-        const hex = colors[name];
-        return protoIcon(name, hex, size);
-      }))));
-    };
-    this.colors = {};
-    this.sizes = [24];
-  }
-  render() {
-    const { sizes } = this;
-    return (h("div", { class: "page" }, h("h1", null, "Icon Proofs"), h("div", { class: "sheet" }, sizes.map(size => this.iconRow(size))), ";"));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icons = [...iconNames, 'pad'];
+        this.protoIcon = (name, hex = undefined, size = 24) => {
+            const path = iconPaths[name];
+            return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-labelledby": "title" }, h("title", null, name), h("g", { fill: hex }, h("path", { d: path })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+        };
+        this.iconRow = (size) => {
+            const { colors, icons, protoIcon } = this;
+            return (h("div", { class: "proof" }, h("div", { class: "label" }, size, protoIcon('down', 'currentColor')), h("hr", null), h("div", { class: "row" }, icons.map(name => {
+                const hex = colors[name];
+                return protoIcon(name, hex, size);
+            }))));
+        };
+        this.colors = {};
+        this.sizes = [24];
+    }
+    render() {
+        const { sizes } = this;
+        return (h("div", { class: "page" }, h("h1", null, "Icon Proofs"), h("div", { class: "sheet" }, sizes.map(size => this.iconRow(size))), ";"));
+    }
 };
 IconProofs.style = iconProofsCss;
 

package/dist/esm/{index-0f076ef9.js → index-d5c14c93.js}

@@ -27,6 +27,13 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+/**
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+ *
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+ * support as of Stencil v4.
+ */
+const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
 /**
  * Default style mode id
  */
@@ -241,6 +248,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                     }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
+                // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
+                if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                    styleElm.innerHTML += SLOT_FB_CSS;
+                }
                 if (appliedStyles) {
                     appliedStyles.add(scopeId);
                 }
@@ -325,7 +336,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                         elm[memberName] = newValue;
                     }
                 }
-                catch (e) { }
+                catch (e) {
+                    /**
+                     * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
+                     */
+                }
             }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -344,6 +359,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
+/**
+ * Parsed a string of classnames into an array
+ * @param value className string, e.g. "foo bar baz"
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
+ */
 const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
 const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     // if the element passed in is a shadow root, which is a document fragment
@@ -1040,10 +1060,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    const prototype = Cstr.prototype;
     if (cmpMeta.$members$) {
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
-        const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
             if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
                     ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1214,12 +1234,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const customElements = win.customElements;
     const head = doc.head;
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
-    const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
+    const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
     let appLoadFallback;
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
             const cmpMeta = {
@@ -1228,6 +1249,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 $members$: compactMeta[2],
                 $listeners$: compactMeta[3],
             };
+            // Check if we are using slots outside the shadow DOM in this component.
+            // We'll use this information later to add styles for `slot-fb` elements
+            if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
+                hasSlotRelocation = true;
+            }
             {
                 cmpMeta.$members$ = compactMeta[2];
             }
@@ -1278,15 +1304,23 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
+    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+    if (hasSlotRelocation) {
+        dataStyles.innerHTML += SLOT_FB_CSS;
+    }
+    // Add hydration styles
     {
-        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
-        visibilityStyle.setAttribute('data-styles', '');
+        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+    }
+    // If we have styles, add them to the DOM
+    if (dataStyles.innerHTML.length) {
+        dataStyles.setAttribute('data-styles', '');
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
-            visibilityStyle.setAttribute('nonce', nonce);
+            dataStyles.setAttribute('nonce', nonce);
         }
-        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1438,7 +1472,7 @@ const flush = () => {
         }
     }
 };
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const nextTick = (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-0f076ef9.js';
-export { s as setNonce } from './index-0f076ef9.js';
+import { b as bootstrapLazy } from './index-d5c14c93.js';
+export { s as setNonce } from './index-d5c14c93.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/proto-icons-wc.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-0f076ef9.js';
-export { s as setNonce } from './index-0f076ef9.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d5c14c93.js';
+export { s as setNonce } from './index-d5c14c93.js';
 
 /*
- Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.8.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/dist/proto-icons-wc/{p-f539d61a.entry.js → p-7a219bb2.entry.js}

@@ -1 +1 @@
-import{r as l,h as o}from"./p-91fd778d.js";const r={"arrow-up":"M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z","arrow-down":"M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z",left:"M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z",right:"M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z",up:"M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z",down:"M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z",more:"M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z"},e=Object.keys(r),t=class{constructor(t){l(this,t),this.icons=[...e,"pad"],this.protoIcon=(l,e,t=24)=>{const i=r[l];return o("svg",{width:t,height:t,viewBox:"0 0 24 24",role:"img","aria-labelledby":"title"},o("title",null,l),o("g",{fill:e},o("path",{d:i})),o("path",{d:"M0 0h24v24H0z",fill:"none"}))},this.iconRow=l=>{const{colors:r,icons:e,protoIcon:t}=this;return o("div",{class:"proof"},o("div",{class:"label"},l,t("down","currentColor")),o("hr",null),o("div",{class:"row"},e.map((o=>t(o,r[o],l)))))},this.colors={},this.sizes=[24]}render(){const{sizes:l}=this;return o("div",{class:"page"},o("h1",null,"Icon Proofs"),o("div",{class:"sheet"},l.map((l=>this.iconRow(l)))),";")}};t.style=".page{color:var(--clrs-navy);font-family:'Roboto', 'Helvetica Neue', Arial, sans-serif;-webkit-font-smoothing:antialiased}.sheet{display:flex;flex-direction:column;margin:16px}.proof{display:flex;flex-direction:column;margin-bottom:32px}.proof svg{fill:var(--cx-icon-fill, '#111111')}.label{font-size:24px;font-weight:bold;color:var(--clrs-red);display:flex;flex-direction:row;align-items:center}.row{display:flex;flex-direction:row;flex-wrap:wrap}h1{color:var(--clrs-red);text-transform:uppercase;font-size:4em;font-weight:100;text-align:center}hr{margin-left:0;margin-right:0}";export{t as icon_proofs}
+import{r as l,h as o}from"./p-e3f06643.js";const r={"arrow-up":"M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z","arrow-down":"M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z",left:"M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z",right:"M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z",up:"M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z",down:"M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z",more:"M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z"},e=Object.keys(r),t=class{constructor(t){l(this,t),this.icons=[...e,"pad"],this.protoIcon=(l,e,t=24)=>{const i=r[l];return o("svg",{width:t,height:t,viewBox:"0 0 24 24",role:"img","aria-labelledby":"title"},o("title",null,l),o("g",{fill:e},o("path",{d:i})),o("path",{d:"M0 0h24v24H0z",fill:"none"}))},this.iconRow=l=>{const{colors:r,icons:e,protoIcon:t}=this;return o("div",{class:"proof"},o("div",{class:"label"},l,t("down","currentColor")),o("hr",null),o("div",{class:"row"},e.map((o=>t(o,r[o],l)))))},this.colors={},this.sizes=[24]}render(){const{sizes:l}=this;return o("div",{class:"page"},o("h1",null,"Icon Proofs"),o("div",{class:"sheet"},l.map((l=>this.iconRow(l)))),";")}};t.style=".page{color:var(--clrs-navy);font-family:'Roboto', 'Helvetica Neue', Arial, sans-serif;-webkit-font-smoothing:antialiased}.sheet{display:flex;flex-direction:column;margin:16px}.proof{display:flex;flex-direction:column;margin-bottom:32px}.proof svg{fill:var(--cx-icon-fill, '#111111')}.label{font-size:24px;font-weight:bold;color:var(--clrs-red);display:flex;flex-direction:row;align-items:center}.row{display:flex;flex-direction:row;flex-wrap:wrap}h1{color:var(--clrs-red);text-transform:uppercase;font-size:4em;font-weight:100;text-align:center}hr{margin-left:0;margin-right:0}";export{t as icon_proofs}

package/dist/proto-icons-wc/p-e3f06643.js

@@ -0,0 +1,2 @@
+let n,t,e=!1,l=!1;const o="slot-fb{display:contents}slot-fb[hidden]{display:none}",s={},c=n=>"object"==(n=typeof n)||"function"===n;function i(n){var t,e,l;return null!==(l=null===(e=null===(t=n.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===e?void 0:e.getAttribute("content"))&&void 0!==l?l:void 0}const r=(n,t,...e)=>{let l=null,o=!1,s=!1;const i=[],r=t=>{for(let e=0;e<t.length;e++)l=t[e],Array.isArray(l)?r(l):null!=l&&"boolean"!=typeof l&&((o="function"!=typeof n&&!c(l))&&(l+=""),o&&s?i[i.length-1].t+=l:i.push(o?u(null,l):l),s=o)};if(r(e),t){const n=t.className||t.class;n&&(t.class="object"!=typeof n?n:Object.keys(n).filter((t=>n[t])).join(" "))}const a=u(n,null);return a.l=t,i.length>0&&(a.o=i),a},u=(n,t)=>({i:0,u:n,t,$:null,o:null,l:null}),a={},f=new WeakMap,d=n=>"sc-"+n.p,y=(n,t,e,l,o,s)=>{if(e!==l){let i=F(n,t);if(t.toLowerCase(),"class"===t){const t=n.classList,o=p(e),s=p(l);t.remove(...o.filter((n=>n&&!s.includes(n)))),t.add(...s.filter((n=>n&&!o.includes(n))))}else{const r=c(l);if((i||r&&null!==l)&&!o)try{if(n.tagName.includes("-"))n[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=e&&n[t]==o||(n[t]=o)}}catch(n){}null==l||!1===l?!1===l&&""!==n.getAttribute(t)||n.removeAttribute(t):(!i||4&s||o)&&!r&&n.setAttribute(t,l=!0===l?"":l)}}},$=/\s/,p=n=>n?n.split($):[],m=(n,t,e,l)=>{const o=11===t.$.nodeType&&t.$.host?t.$.host:t.$,c=n&&n.l||s,i=t.l||s;for(l in c)l in i||y(o,l,c[l],void 0,e,t.i);for(l in i)y(o,l,c[l],i[l],e,t.i)},v=(t,l,o)=>{const s=l.o[o];let c,i,r=0;if(null!==s.t)c=s.$=D.createTextNode(s.t);else{if(e||(e="svg"===s.u),c=s.$=D.createElementNS(e?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s.u),e&&"foreignObject"===s.u&&(e=!1),m(null,s,e),null!=n&&c["s-si"]!==n&&c.classList.add(c["s-si"]=n),s.o)for(r=0;r<s.o.length;++r)i=v(t,s,r),i&&c.appendChild(i);"svg"===s.u?e=!1:"foreignObject"===c.tagName&&(e=!0)}return c},h=(n,e,l,o,s,c)=>{let i,r=n;for(r.shadowRoot&&r.tagName===t&&(r=r.shadowRoot);s<=c;++s)o[s]&&(i=v(null,l,s),i&&(o[s].$=i,r.insertBefore(i,e)))},w=(n,t,e)=>{for(let l=t;l<=e;++l){const t=n[l];if(t){const n=t.$;n&&n.remove()}}},b=(n,t)=>n.u===t.u,g=(n,t)=>{const l=t.$=n.$,o=n.o,s=t.o,c=t.u,i=t.t;null===i?(e="svg"===c||"foreignObject"!==c&&e,m(n,t,e),null!==o&&null!==s?((n,t,e,l)=>{let o,s=0,c=0,i=t.length-1,r=t[0],u=t[i],a=l.length-1,f=l[0],d=l[a];for(;s<=i&&c<=a;)null==r?r=t[++s]:null==u?u=t[--i]:null==f?f=l[++c]:null==d?d=l[--a]:b(r,f)?(g(r,f),r=t[++s],f=l[++c]):b(u,d)?(g(u,d),u=t[--i],d=l[--a]):b(r,d)?(g(r,d),n.insertBefore(r.$,u.$.nextSibling),r=t[++s],d=l[--a]):b(u,f)?(g(u,f),n.insertBefore(u.$,r.$),u=t[--i],f=l[++c]):(o=v(t&&t[c],e,c),f=l[++c],o&&r.$.parentNode.insertBefore(o,r.$));s>i?h(n,null==l[a+1]?null:l[a+1].$,e,l,c,a):c>a&&w(t,s,i)})(l,o,t,s):null!==s?(null!==n.t&&(l.textContent=""),h(l,null,t,s,0,s.length-1)):null!==o&&w(o,0,o.length-1),e&&"svg"===c&&(e=!1)):n.t!==i&&(l.data=i)},j=(n,t)=>{t&&!n.m&&t["s-p"]&&t["s-p"].push(new Promise((t=>n.m=t)))},S=(n,t)=>{if(n.i|=16,!(4&n.i))return j(n,n.v),tn((()=>O(n,t)));n.i|=512},O=(n,t)=>{const e=n.h;return k(void 0,(()=>C(n,e,t)))},k=(n,t)=>M(n)?n.then(t):t(),M=n=>n instanceof Promise||n&&n.then&&"function"==typeof n.then,C=async(n,t,e)=>{var l;const s=n.$hostElement$,c=s["s-rc"];e&&(n=>{const t=n.j,e=n.$hostElement$,l=t.i,s=((n,t)=>{var e;const l=d(t),s=z.get(l);if(n=11===n.nodeType?n:D,s)if("string"==typeof s){let c,r=f.get(n=n.head||n);if(r||f.set(n,r=new Set),!r.has(l)){{c=D.createElement("style"),c.innerHTML=s;const t=null!==(e=G.S)&&void 0!==e?e:i(D);null!=t&&c.setAttribute("nonce",t),n.insertBefore(c,n.querySelector("link"))}4&t.i&&(c.innerHTML+=o),r&&r.add(l)}}else n.adoptedStyleSheets.includes(s)||(n.adoptedStyleSheets=[...n.adoptedStyleSheets,s]);return l})(e.shadowRoot?e.shadowRoot:e.getRootNode(),t);10&l&&(e["s-sc"]=s,e.classList.add(s+"-h"))})(n);P(n,t,s,e),c&&(c.map((n=>n())),s["s-rc"]=void 0);{const t=null!==(l=s["s-p"])&&void 0!==l?l:[],e=()=>x(n);0===t.length?e():(Promise.all(t).then(e),n.i|=4,t.length=0)}},P=(e,l,o,s)=>{try{l=l.render(),e.i&=-17,e.i|=2,((e,l,o=!1)=>{const s=e.$hostElement$,c=e.O||u(null,null),i=(n=>n&&n.u===a)(l)?l:r(null,null,l);if(t=s.tagName,o&&i.l)for(const n of Object.keys(i.l))s.hasAttribute(n)&&!["key","ref","style","class"].includes(n)&&(i.l[n]=s[n]);i.u=null,i.i|=4,e.O=i,i.$=c.$=s.shadowRoot||s,n=s["s-sc"],g(c,i)})(e,l,s)}catch(n){H(n,e.$hostElement$)}return null},x=n=>{const t=n.$hostElement$,e=n.v;64&n.i||(n.i|=64,N(t),n.k(t),e||E()),n.m&&(n.m(),n.m=void 0),512&n.i&&nn((()=>S(n,!1))),n.i&=-517},E=()=>{N(D.documentElement),nn((()=>(n=>{const t=G.ce("appload",{detail:{namespace:"proto-icons-wc"}});return n.dispatchEvent(t),t})(B)))},N=n=>n.classList.add("hydrated"),T=(n,t,e)=>{const l=n.prototype;return t.M&&Object.entries(t.M).map((([n,[t]])=>{(31&t||2&e&&32&t)&&Object.defineProperty(l,n,{get(){return((n,t)=>U(this).C.get(t))(0,n)},set(t){((n,t,e)=>{const l=U(n),o=l.C.get(t),s=l.i,i=l.h;e=(n=>(null==n||c(n),n))(e),8&s&&void 0!==o||e===o||Number.isNaN(o)&&Number.isNaN(e)||(l.C.set(t,e),i&&2==(18&s)&&S(l,!1))})(this,n,t)},configurable:!0,enumerable:!0})})),n},A=(n,t={})=>{var e;const l=[],s=t.exclude||[],c=B.customElements,r=D.head,u=r.querySelector("meta[charset]"),a=D.createElement("style"),f=[];let y,$=!0;Object.assign(G,t),G.P=new URL(t.resourcesUrl||"./",D.baseURI).href;let p=!1;if(n.map((n=>{n[1].map((t=>{const e={i:t[0],p:t[1],M:t[2],N:t[3]};4&e.i&&(p=!0),e.M=t[2];const o=e.p,i=class extends HTMLElement{constructor(n){super(n),q(n=this,e),1&e.i&&n.attachShadow({mode:"open"})}connectedCallback(){y&&(clearTimeout(y),y=null),$?f.push(this):G.jmp((()=>(n=>{if(0==(1&G.i)){const t=U(n),e=t.j,l=()=>{};if(1&t.i)(null==t?void 0:t.h)||(null==t?void 0:t.T)&&t.T.then((()=>{}));else{t.i|=1;{let e=n;for(;e=e.parentNode||e.host;)if(e["s-p"]){j(t,t.v=e);break}}e.M&&Object.entries(e.M).map((([t,[e]])=>{if(31&e&&n.hasOwnProperty(t)){const e=n[t];delete n[t],n[t]=e}})),(async(n,t,e)=>{let l;if(0==(32&t.i)){t.i|=32;{if(l=_(e),l.then){const n=()=>{};l=await l,n()}l.isProxied||(T(l,e,2),l.isProxied=!0);const n=()=>{};t.i|=8;try{new l(t)}catch(n){H(n)}t.i&=-9,n()}if(l.style){let n=l.style;const t=d(e);if(!z.has(t)){const l=()=>{};((n,t,e)=>{let l=z.get(n);J&&e?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,z.set(n,l)})(t,n,!!(1&e.i)),l()}}}const o=t.v,s=()=>S(t,!0);o&&o["s-rc"]?o["s-rc"].push(s):s()})(0,t,e)}l()}})(this)))}disconnectedCallback(){G.jmp((()=>(async()=>{if(0==(1&G.i)){const n=U(this);(null==n?void 0:n.h)||(null==n?void 0:n.T)&&n.T.then((()=>{}))}})()))}componentOnReady(){return U(this).T}};e.A=n[0],s.includes(o)||c.get(o)||(l.push(o),c.define(o,T(i,e,1)))}))})),p&&(a.innerHTML+=o),a.innerHTML+=l+"{visibility:hidden}.hydrated{visibility:inherit}",a.innerHTML.length){a.setAttribute("data-styles",""),r.insertBefore(a,u?u.nextSibling:r.firstChild);const n=null!==(e=G.S)&&void 0!==e?e:i(D);null!=n&&a.setAttribute("nonce",n)}$=!1,f.length?f.map((n=>n.connectedCallback())):G.jmp((()=>y=setTimeout(E,30)))},L=n=>G.S=n,R=new WeakMap,U=n=>R.get(n),W=(n,t)=>R.set(t.h=n,t),q=(n,t)=>{const e={i:0,$hostElement$:n,j:t,C:new Map};return e.T=new Promise((n=>e.k=n)),n["s-p"]=[],n["s-rc"]=[],R.set(n,e)},F=(n,t)=>t in n,H=(n,t)=>(0,console.error)(n,t),V=new Map,_=n=>{const t=n.p.replace(/-/g,"_"),e=n.A,l=V.get(e);return l?l[t]:import(`./${e}.entry.js`).then((n=>(V.set(e,n),n[t])),H)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},z=new Map,B="undefined"!=typeof window?window:{},D=B.document||{head:{}},G={i:0,P:"",jmp:n=>n(),raf:n=>requestAnimationFrame(n),ael:(n,t,e,l)=>n.addEventListener(t,e,l),rel:(n,t,e,l)=>n.removeEventListener(t,e,l),ce:(n,t)=>new CustomEvent(n,t)},I=n=>Promise.resolve(n),J=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(n){}return!1})(),K=[],Q=[],X=(n,t)=>e=>{n.push(e),l||(l=!0,t&&4&G.i?nn(Z):G.raf(Z))},Y=n=>{for(let t=0;t<n.length;t++)try{n[t](performance.now())}catch(n){H(n)}n.length=0},Z=()=>{Y(K),Y(Q),(l=K.length>0)&&G.raf(Z)},nn=n=>I().then(n),tn=X(Q,!0);export{A as b,r as h,I as p,W as r,L as s}

package/dist/proto-icons-wc/proto-icons-wc.esm.js

@@ -1 +1 @@
-import{p as o,b as r}from"./p-91fd778d.js";export{s as setNonce}from"./p-91fd778d.js";(()=>{const s=import.meta.url,r={};return""!==s&&(r.resourcesUrl=new URL(".",s).href),o(r)})().then((o=>r([["p-f539d61a",[[1,"icon-proofs",{colors:[16],sizes:[16]}]]]],o)));
+import{p as o,b as e}from"./p-e3f06643.js";export{s as setNonce}from"./p-e3f06643.js";(()=>{const s=import.meta.url,e={};return""!==s&&(e.resourcesUrl=new URL(".",s).href),o(e)})().then((o=>e([["p-7a219bb2",[[1,"icon-proofs",{colors:[16],sizes:[16]}]]]],o)));

package/dist/types/components/icon-proofs/icon-proofs.d.ts

@@ -1,11 +1,11 @@
 export interface ColorMap {
-  [key: string]: string;
+    [key: string]: string;
 }
 export declare class IconProofs {
-  colors: ColorMap;
-  sizes: Array<number>;
-  icons: Array<string>;
-  protoIcon: (name: any, hex?: any, size?: number) => any;
-  iconRow: (size: number) => any;
-  render(): any;
+    colors: ColorMap;
+    sizes: Array<number>;
+    icons: Array<string>;
+    protoIcon: (name: any, hex?: any, size?: number) => any;
+    iconRow: (size: number) => any;
+    render(): any;
 }

package/dist/types/components/icons/iconPaths.d.ts

@@ -1,11 +1,11 @@
 declare const iconPaths: {
-  'arrow-up': string;
-  'arrow-down': string;
-  left: string;
-  right: string;
-  up: string;
-  down: string;
-  more: string;
+    'arrow-up': string;
+    'arrow-down': string;
+    left: string;
+    right: string;
+    up: string;
+    down: string;
+    more: string;
 };
 declare const iconNames: string[];
 export { iconPaths, iconNames };

package/dist/types/stencil-public-runtime.d.ts

@@ -810,6 +810,9 @@ export declare namespace JSXBase {
         name?: string;
         type?: string;
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -971,6 +974,9 @@ export declare namespace JSXBase {
         webkitdirectory?: boolean;
         webkitEntries?: any;
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
         autoFocus?: boolean;
@@ -1223,6 +1229,7 @@ export declare namespace JSXBase {
         draggable?: boolean;
         hidden?: boolean;
         id?: string;
+        inert?: boolean;
         lang?: string;
         spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1231,6 +1238,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proto-icons-wc",
-  "version": "0.0.445",
+  "version": "0.0.447",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,14 +25,14 @@
     "format": "prettier --write src"
   },
   "dependencies": {
-    "@stencil/core": "4.7.1"
+    "@stencil/core": "4.8.0"
   },
   "devDependencies": {
     "cspell": "8.0.0",
-    "eslint": "8.53.0",
-    "prettier": "3.0.3",
+    "eslint": "8.54.0",
+    "prettier": "3.1.0",
     "tslint": "6.1.3",
-    "typescript": "5.2.2"
+    "typescript": "5.3.2"
   },
   "license": "MIT"
 }

package/dist/proto-icons-wc/p-91fd778d.js

@@ -1,2 +0,0 @@
-let n,e,t=!1,l=!1;const o={},s=n=>"object"==(n=typeof n)||"function"===n;function c(n){var e,t,l;return null!==(l=null===(t=null===(e=n.head)||void 0===e?void 0:e.querySelector('meta[name="csp-nonce"]'))||void 0===t?void 0:t.getAttribute("content"))&&void 0!==l?l:void 0}const i=(n,e,...t)=>{let l=null,o=!1,c=!1;const i=[],u=e=>{for(let t=0;t<e.length;t++)l=e[t],Array.isArray(l)?u(l):null!=l&&"boolean"!=typeof l&&((o="function"!=typeof n&&!s(l))&&(l+=""),o&&c?i[i.length-1].t+=l:i.push(o?r(null,l):l),c=o)};if(u(t),e){const n=e.className||e.class;n&&(e.class="object"!=typeof n?n:Object.keys(n).filter((e=>n[e])).join(" "))}const a=r(n,null);return a.l=e,i.length>0&&(a.o=i),a},r=(n,e)=>({i:0,u:n,t:e,$:null,o:null,l:null}),u={},a=new WeakMap,f=n=>"sc-"+n.m,d=(n,e,t,l,o,c)=>{if(t!==l){let i=q(n,e);if(e.toLowerCase(),"class"===e){const e=n.classList,o=y(t),s=y(l);e.remove(...o.filter((n=>n&&!s.includes(n)))),e.add(...s.filter((n=>n&&!o.includes(n))))}else{const r=s(l);if((i||r&&null!==l)&&!o)try{if(n.tagName.includes("-"))n[e]=l;else{const o=null==l?"":l;"list"===e?i=!1:null!=t&&n[e]==o||(n[e]=o)}}catch(n){}null==l||!1===l?!1===l&&""!==n.getAttribute(e)||n.removeAttribute(e):(!i||4&c||o)&&!r&&n.setAttribute(e,l=!0===l?"":l)}}},$=/\s/,y=n=>n?n.split($):[],m=(n,e,t,l)=>{const s=11===e.$.nodeType&&e.$.host?e.$.host:e.$,c=n&&n.l||o,i=e.l||o;for(l in c)l in i||d(s,l,c[l],void 0,t,e.i);for(l in i)d(s,l,c[l],i[l],t,e.i)},p=(e,l,o)=>{const s=l.o[o];let c,i,r=0;if(null!==s.t)c=s.$=B.createTextNode(s.t);else{if(t||(t="svg"===s.u),c=s.$=B.createElementNS(t?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",s.u),t&&"foreignObject"===s.u&&(t=!1),m(null,s,t),null!=n&&c["s-si"]!==n&&c.classList.add(c["s-si"]=n),s.o)for(r=0;r<s.o.length;++r)i=p(e,s,r),i&&c.appendChild(i);"svg"===s.u?t=!1:"foreignObject"===c.tagName&&(t=!0)}return c},v=(n,t,l,o,s,c)=>{let i,r=n;for(r.shadowRoot&&r.tagName===e&&(r=r.shadowRoot);s<=c;++s)o[s]&&(i=p(null,l,s),i&&(o[s].$=i,r.insertBefore(i,t)))},w=(n,e,t)=>{for(let l=e;l<=t;++l){const e=n[l];if(e){const n=e.$;n&&n.remove()}}},h=(n,e)=>n.u===e.u,b=(n,e)=>{const l=e.$=n.$,o=n.o,s=e.o,c=e.u,i=e.t;null===i?(t="svg"===c||"foreignObject"!==c&&t,m(n,e,t),null!==o&&null!==s?((n,e,t,l)=>{let o,s=0,c=0,i=e.length-1,r=e[0],u=e[i],a=l.length-1,f=l[0],d=l[a];for(;s<=i&&c<=a;)null==r?r=e[++s]:null==u?u=e[--i]:null==f?f=l[++c]:null==d?d=l[--a]:h(r,f)?(b(r,f),r=e[++s],f=l[++c]):h(u,d)?(b(u,d),u=e[--i],d=l[--a]):h(r,d)?(b(r,d),n.insertBefore(r.$,u.$.nextSibling),r=e[++s],d=l[--a]):h(u,f)?(b(u,f),n.insertBefore(u.$,r.$),u=e[--i],f=l[++c]):(o=p(e&&e[c],t,c),f=l[++c],o&&r.$.parentNode.insertBefore(o,r.$));s>i?v(n,null==l[a+1]?null:l[a+1].$,t,l,c,a):c>a&&w(e,s,i)})(l,o,e,s):null!==s?(null!==n.t&&(l.textContent=""),v(l,null,e,s,0,s.length-1)):null!==o&&w(o,0,o.length-1),t&&"svg"===c&&(t=!1)):n.t!==i&&(l.data=i)},g=(n,e)=>{e&&!n.p&&e["s-p"]&&e["s-p"].push(new Promise((e=>n.p=e)))},j=(n,e)=>{if(n.i|=16,!(4&n.i))return g(n,n.v),nn((()=>S(n,e)));n.i|=512},S=(n,e)=>{const t=n.h;return O(void 0,(()=>M(n,t,e)))},O=(n,e)=>k(n)?n.then(e):e(),k=n=>n instanceof Promise||n&&n.then&&"function"==typeof n.then,M=async(n,e,t)=>{var l;const o=n.$hostElement$,s=o["s-rc"];t&&(n=>{const e=n.j,t=n.$hostElement$,l=e.i,o=((n,e)=>{var t;const l=f(e),o=_.get(l);if(n=11===n.nodeType?n:B,o)if("string"==typeof o){let e,s=a.get(n=n.head||n);if(s||a.set(n,s=new Set),!s.has(l)){{e=B.createElement("style"),e.innerHTML=o;const l=null!==(t=D.S)&&void 0!==t?t:c(B);null!=l&&e.setAttribute("nonce",l),n.insertBefore(e,n.querySelector("link"))}s&&s.add(l)}}else n.adoptedStyleSheets.includes(o)||(n.adoptedStyleSheets=[...n.adoptedStyleSheets,o]);return l})(t.shadowRoot?t.shadowRoot:t.getRootNode(),e);10&l&&(t["s-sc"]=o,t.classList.add(o+"-h"))})(n);C(n,e,o,t),s&&(s.map((n=>n())),o["s-rc"]=void 0);{const e=null!==(l=o["s-p"])&&void 0!==l?l:[],t=()=>P(n);0===e.length?t():(Promise.all(e).then(t),n.i|=4,e.length=0)}},C=(t,l,o,s)=>{try{l=l.render(),t.i&=-17,t.i|=2,((t,l,o=!1)=>{const s=t.$hostElement$,c=t.O||r(null,null),a=(n=>n&&n.u===u)(l)?l:i(null,null,l);if(e=s.tagName,o&&a.l)for(const n of Object.keys(a.l))s.hasAttribute(n)&&!["key","ref","style","class"].includes(n)&&(a.l[n]=s[n]);a.u=null,a.i|=4,t.O=a,a.$=c.$=s.shadowRoot||s,n=s["s-sc"],b(c,a)})(t,l,s)}catch(n){F(n,t.$hostElement$)}return null},P=n=>{const e=n.$hostElement$,t=n.v;64&n.i||(n.i|=64,E(e),n.k(e),t||x()),n.p&&(n.p(),n.p=void 0),512&n.i&&Z((()=>j(n,!1))),n.i&=-517},x=()=>{E(B.documentElement),Z((()=>(n=>{const e=D.ce("appload",{detail:{namespace:"proto-icons-wc"}});return n.dispatchEvent(e),e})(z)))},E=n=>n.classList.add("hydrated"),N=(n,e,t)=>{if(e.M){const l=Object.entries(e.M),o=n.prototype;l.map((([n,[e]])=>{(31&e||2&t&&32&e)&&Object.defineProperty(o,n,{get(){return((n,e)=>R(this).C.get(e))(0,n)},set(e){((n,e,t)=>{const l=R(n),o=l.C.get(e),c=l.i,i=l.h;t=(n=>(null==n||s(n),n))(t),8&c&&void 0!==o||t===o||Number.isNaN(o)&&Number.isNaN(t)||(l.C.set(e,t),i&&2==(18&c)&&j(l,!1))})(this,n,e)},configurable:!0,enumerable:!0})}))}return n},T=(n,e={})=>{var t;const l=[],o=e.exclude||[],s=z.customElements,i=B.head,r=i.querySelector("meta[charset]"),u=B.createElement("style"),a=[];let d,$=!0;Object.assign(D,e),D.P=new URL(e.resourcesUrl||"./",B.baseURI).href,n.map((n=>{n[1].map((e=>{const t={i:e[0],m:e[1],M:e[2],N:e[3]};t.M=e[2];const c=t.m,i=class extends HTMLElement{constructor(n){super(n),W(n=this,t),1&t.i&&n.attachShadow({mode:"open"})}connectedCallback(){d&&(clearTimeout(d),d=null),$?a.push(this):D.jmp((()=>(n=>{if(0==(1&D.i)){const e=R(n),t=e.j,l=()=>{};if(1&e.i)(null==e?void 0:e.h)||(null==e?void 0:e.T)&&e.T.then((()=>{}));else{e.i|=1;{let t=n;for(;t=t.parentNode||t.host;)if(t["s-p"]){g(e,e.v=t);break}}t.M&&Object.entries(t.M).map((([e,[t]])=>{if(31&t&&n.hasOwnProperty(e)){const t=n[e];delete n[e],n[e]=t}})),(async(n,e,t)=>{let l;if(0==(32&e.i)){e.i|=32;{if(l=V(t),l.then){const n=()=>{};l=await l,n()}l.isProxied||(N(l,t,2),l.isProxied=!0);const n=()=>{};e.i|=8;try{new l(e)}catch(n){F(n)}e.i&=-9,n()}if(l.style){let n=l.style;const e=f(t);if(!_.has(e)){const l=()=>{};((n,e,t)=>{let l=_.get(n);I&&t?(l=l||new CSSStyleSheet,"string"==typeof l?l=e:l.replaceSync(e)):l=e,_.set(n,l)})(e,n,!!(1&t.i)),l()}}}const o=e.v,s=()=>j(e,!0);o&&o["s-rc"]?o["s-rc"].push(s):s()})(0,e,t)}l()}})(this)))}disconnectedCallback(){D.jmp((()=>(async()=>{if(0==(1&D.i)){const n=R(this);(null==n?void 0:n.h)||(null==n?void 0:n.T)&&n.T.then((()=>{}))}})()))}componentOnReady(){return R(this).T}};t.A=n[0],o.includes(c)||s.get(c)||(l.push(c),s.define(c,N(i,t,1)))}))}));{u.innerHTML=l+"{visibility:hidden}.hydrated{visibility:inherit}",u.setAttribute("data-styles","");const n=null!==(t=D.S)&&void 0!==t?t:c(B);null!=n&&u.setAttribute("nonce",n),i.insertBefore(u,r?r.nextSibling:i.firstChild)}$=!1,a.length?a.map((n=>n.connectedCallback())):D.jmp((()=>d=setTimeout(x,30)))},A=n=>D.S=n,L=new WeakMap,R=n=>L.get(n),U=(n,e)=>L.set(e.h=n,e),W=(n,e)=>{const t={i:0,$hostElement$:n,j:e,C:new Map};return t.T=new Promise((n=>t.k=n)),n["s-p"]=[],n["s-rc"]=[],L.set(n,t)},q=(n,e)=>e in n,F=(n,e)=>(0,console.error)(n,e),H=new Map,V=n=>{const e=n.m.replace(/-/g,"_"),t=n.A,l=H.get(t);return l?l[e]:import(`./${t}.entry.js`).then((n=>(H.set(t,n),n[e])),F)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},_=new Map,z="undefined"!=typeof window?window:{},B=z.document||{head:{}},D={i:0,P:"",jmp:n=>n(),raf:n=>requestAnimationFrame(n),ael:(n,e,t,l)=>n.addEventListener(e,t,l),rel:(n,e,t,l)=>n.removeEventListener(e,t,l),ce:(n,e)=>new CustomEvent(n,e)},G=n=>Promise.resolve(n),I=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(n){}return!1})(),J=[],K=[],Q=(n,e)=>t=>{n.push(t),l||(l=!0,e&&4&D.i?Z(Y):D.raf(Y))},X=n=>{for(let e=0;e<n.length;e++)try{n[e](performance.now())}catch(n){F(n)}n.length=0},Y=()=>{X(J),X(K),(l=J.length>0)&&D.raf(Y)},Z=n=>G().then(n),nn=Q(K,!0);export{T as b,i as h,G as p,U as r,A as s}