proto-tinker-wc 0.0.378 → 0.0.380

package/dist/cjs/{index-7a0649cb.js → index-9dee56ff.js}

@@ -468,7 +468,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) === '') {
@@ -487,6 +491,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 CAPTURE_EVENT_SUFFIX = 'Capture';
 const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
@@ -1226,10 +1235,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     var _a;
+    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 */))) {
@@ -1252,6 +1261,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             const attrNameToPropName = new Map();
             prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
+                    var _a;
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
                     //  in the case where an attribute was set inline.
@@ -1307,11 +1317,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // 1. The instance is ready
                         // 2. The watchers are ready
                         // 3. The value has changed
-                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                        if (flags &&
+                            !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
                             flags & 128 /* HOST_FLAGS.isWatchReady */ &&
                             newValue !== oldValue) {
                             const instance = hostRef.$lazyInstance$ ;
-                            const entry = cmpMeta.$watchers$[attrName];
+                            const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
                             entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
                                 if (instance[callbackName] != null) {
                                     instance[callbackName].call(instance, newValue, oldValue, attrName);

package/dist/cjs/loader.cjs.js

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

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7a0649cb.js');
+const index = require('./index-9dee56ff.js');
 
 /*
- Stencil Client Patch Browser v4.7.2 | 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-tinker-wc.cjs.js', document.baseURI).href));

package/dist/cjs/proto-tinker.cjs.entry.js

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7a0649cb.js');
+const index = require('./index-9dee56ff.js');
 
 const Radio = props => {
-  const hex = props.hex || 'currentColor';
-  const klass = props.class;
-  const label = props.label || 'radio';
-  const selected = props.selected || false;
-  const size = props.size || 24;
-  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
-    index.h("title", null, label),
-    ' ',
-    index.h("g", { fill: hex }, selected ? (index.h("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })) : (index.h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }))),
-    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'radio';
+    const selected = props.selected || false;
+    const size = props.size || 24;
+    return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+        index.h("title", null, label),
+        ' ',
+        index.h("g", { fill: hex }, selected ? (index.h("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })) : (index.h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }))),
+        index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
 function createCommonjsModule(fn, basedir, module) {
@@ -2138,11 +2138,11 @@ function zeroArray(arr, length) {
 }
 
 const funnelDefs = [
-  { id: 1, height: 400, width: 100, x: 10, y: 10, drop: 20 },
-  { id: 2, height: 356, width: 100, x: 120, y: 32, drop: 20 },
-  { id: 3, height: 312, width: 100, x: 230, y: 54, drop: 20 },
-  { id: 4, height: 268, width: 100, x: 340, y: 76, drop: 20 },
-  { id: 5, height: 224, width: 100, x: 450, y: 98, drop: 20 },
+    { id: 1, height: 400, width: 100, x: 10, y: 10, drop: 20 },
+    { id: 2, height: 356, width: 100, x: 120, y: 32, drop: 20 },
+    { id: 3, height: 312, width: 100, x: 230, y: 54, drop: 20 },
+    { id: 4, height: 268, width: 100, x: 340, y: 76, drop: 20 },
+    { id: 5, height: 224, width: 100, x: 450, y: 98, drop: 20 },
 ];
 const sample = funnelDefs.map(() => 0);
 
@@ -2170,28 +2170,28 @@ const slate4 = '#4e5964';
 const white = '#ffffff';
 // NOTE:  this is ONLY used internally...
 const _namedColors = {
-  bada55,
-  navy,
-  blue,
-  aqua,
-  teal,
-  olive,
-  green,
-  lime,
-  yellow,
-  orange,
-  red,
-  maroon,
-  fuchsia,
-  purple,
-  black,
-  gray,
-  silver,
+    bada55,
+    navy,
+    blue,
+    aqua,
+    teal,
+    olive,
+    green,
+    lime,
+    yellow,
+    orange,
+    red,
+    maroon,
+    fuchsia,
+    purple,
+    black,
+    gray,
+    silver,
 };
 const _altColors = {
-  slate,
-  slate4,
-  white,
+    slate,
+    slate4,
+    white,
 };
 const colorFor = (key) => _namedColors[key] || _altColors[key];
 const colorKeys = Object.keys(_namedColors);
@@ -2390,182 +2390,182 @@ const createStore = (defaultState, shouldUpdate) => {
 const KEY = 'proto-tinker-wc::app-data';
 // localStorage implementation... [ json ]
 const bag = {
-  get: () => {
-    const json = localStorage.getItem(KEY);
-    return json ? JSON.parse(json) : undefined;
-  },
-  store: data => {
-    const json = JSON.stringify(data);
-    localStorage.setItem(KEY, json);
-  },
+    get: () => {
+        const json = localStorage.getItem(KEY);
+        return json ? JSON.parse(json) : undefined;
+    },
+    store: data => {
+        const json = JSON.stringify(data);
+        localStorage.setItem(KEY, json);
+    },
 };
 
 const initStore = {
-  count: 0,
-  pick: 'bada55',
-  values: [...sample],
+    count: 0,
+    pick: 'bada55',
+    values: [...sample],
 };
 const store = createStore(initStore);
 const { state, onChange } = store;
 const saveState = () => {
-  const { count, pick, values } = state;
-  bag.store({ count, pick, values });
+    const { count, pick, values } = state;
+    bag.store({ count, pick, values });
 };
 const actions = {
-  initApp: () => {
-    const data = bag.get();
-    if (data) {
-      const { count, pick, values } = data;
-      state.count = count;
-      state.pick = pick;
-      state.values = values;
-    }
-  },
-  refresh: () => {
-    const values = sample.map(() => Math.floor(Math.random() * 100));
-    state.count = state.count + 1;
-    state.values = values;
-    saveState();
-  },
-  reset: () => {
-    state.count = 0;
-    state.values = [...sample];
-    saveState();
-  },
-  updatePick: pick => {
-    state.pick = pick;
-    saveState();
-  },
+    initApp: () => {
+        const data = bag.get();
+        if (data) {
+            const { count, pick, values } = data;
+            state.count = count;
+            state.pick = pick;
+            state.values = values;
+        }
+    },
+    refresh: () => {
+        const values = sample.map(() => Math.floor(Math.random() * 100));
+        state.count = state.count + 1;
+        state.values = values;
+        saveState();
+    },
+    reset: () => {
+        state.count = 0;
+        state.values = [...sample];
+        saveState();
+    },
+    updatePick: pick => {
+        state.pick = pick;
+        saveState();
+    },
 };
 
 // WARNING:  generated file...
 const TW_VERSION = '3.3.5';
 
 const ColorPicker = props => {
-  const { actions, state } = props;
-  const { pick } = state;
-  return (index.h("div", { id: "toolbar", class: "flex flex-wrap", role: "radiogroup" }, colorKeys.map((key) => {
-    const hex = colorFor(key);
-    const selected = pick === key;
-    return (index.h("div", { "aria-label": key, "aria-checked": selected ? 'true' : 'false', role: "radio", onClick: () => {
-        actions.updatePick(key);
-      } },
-      index.h(Radio, { hex: hex, selected: selected, label: key })));
-  })));
+    const { actions, state } = props;
+    const { pick } = state;
+    return (index.h("div", { id: "toolbar", class: "flex flex-wrap", role: "radiogroup" }, colorKeys.map((key) => {
+        const hex = colorFor(key);
+        const selected = pick === key;
+        return (index.h("div", { "aria-label": key, "aria-checked": selected ? 'true' : 'false', role: "radio", onClick: () => {
+                actions.updatePick(key);
+            } },
+            index.h(Radio, { hex: hex, selected: selected, label: key })));
+    })));
 };
 
 const ChevronDoubleLeft = props => {
-  const hex = props.hex || 'currentColor';
-  const klass = props.class;
-  const label = props.label || 'chevron-double-left';
-  const size = props.size || 24;
-  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
-    index.h("title", null, label),
-    index.h("g", { fill: hex },
-      index.h("path", { d: "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z" })),
-    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'chevron-double-left';
+    const size = props.size || 24;
+    return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+        index.h("title", null, label),
+        index.h("g", { fill: hex },
+            index.h("path", { d: "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z" })),
+        index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
 const Close = props => {
-  const hex = props.hex || 'currentColor';
-  const klass = props.class;
-  const label = props.label || 'close';
-  const size = props.size || 24;
-  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
-    index.h("title", null, label),
-    index.h("g", { fill: hex },
-      index.h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })),
-    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'close';
+    const size = props.size || 24;
+    return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+        index.h("title", null, label),
+        index.h("g", { fill: hex },
+            index.h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })),
+        index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
 const Refresh = props => {
-  const hex = props.hex || 'currentColor';
-  const klass = props.class;
-  const label = props.label || 'refresh';
-  const size = props.size || 24;
-  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
-    index.h("title", null, label),
-    index.h("g", { fill: hex },
-      index.h("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99\n          8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65\n          4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35\n          2.35z" })),
-    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'refresh';
+    const size = props.size || 24;
+    return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+        index.h("title", null, label),
+        index.h("g", { fill: hex },
+            index.h("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99\n          8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65\n          4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35\n          2.35z" })),
+        index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
 const help = 'click a button... ';
 const DataSource = props => {
-  const { actions, state } = props;
-  const { count } = state;
-  return (index.h("div", { class: "mb-10px mt-3 flex items-center" },
-    index.h("button", { "aria-label": "Refresh", class: "ds1-button data-button bg-clrs-blue", onClick: () => {
-        actions.refresh();
-      } },
-      index.h(Refresh, { label: "Refresh" })),
-    index.h("button", { "aria-label": "Reset", class: "ds1-button data-button bg-clrs-red", onClick: () => {
-        actions.reset();
-      } },
-      index.h(Close, { label: "Reset" })),
-    index.h("span", { class: "flex items-center" },
-      index.h(ChevronDoubleLeft, { size: 28 }),
-      index.h("span", { class: "italic" },
-        help,
-        index.h("sup", null, count)))));
+    const { actions, state } = props;
+    const { count } = state;
+    return (index.h("div", { class: "mb-10px mt-3 flex items-center" },
+        index.h("button", { "aria-label": "Refresh", class: "ds1-button data-button bg-clrs-blue", onClick: () => {
+                actions.refresh();
+            } },
+            index.h(Refresh, { label: "Refresh" })),
+        index.h("button", { "aria-label": "Reset", class: "ds1-button data-button bg-clrs-red", onClick: () => {
+                actions.reset();
+            } },
+            index.h(Close, { label: "Reset" })),
+        index.h("span", { class: "flex items-center" },
+            index.h(ChevronDoubleLeft, { size: 28 }),
+            index.h("span", { class: "italic" },
+                help,
+                index.h("sup", null, count)))));
 };
 
 const TwLabel = _props => {
-  return (index.h("label", { class: "ml-auto align-top text-xs italic text-clrs-slate4" },
-    "Tailwind ",
-    TW_VERSION));
+    return (index.h("label", { class: "ml-auto align-top text-xs italic text-clrs-slate4" },
+        "Tailwind ",
+        TW_VERSION));
 };
 
 const DataValues = props => {
-  const { state } = props;
-  const { values, pick, count } = state;
-  return (index.h("div", { class: "flex" },
-    index.h("div", { class: "flex flex-col" },
-      index.h("div", { class: "flex" },
-        index.h("span", { class: "mr-10px font-bold" }, "color:"),
-        index.h("span", { class: "italic text-clrs-slate4" }, pick)),
-      index.h("div", { class: "mt-5px flex" },
-        index.h("span", { class: "mr-10px font-bold" }, "sample:"),
-        index.h("span", { class: "italic text-clrs-slate4" }, `${count > 0 ? values : '...'}`))),
-    index.h(TwLabel, null)));
+    const { state } = props;
+    const { values, pick, count } = state;
+    return (index.h("div", { class: "flex" },
+        index.h("div", { class: "flex flex-col" },
+            index.h("div", { class: "flex" },
+                index.h("span", { class: "mr-10px font-bold" }, "color:"),
+                index.h("span", { class: "italic text-clrs-slate4" }, pick)),
+            index.h("div", { class: "mt-5px flex" },
+                index.h("span", { class: "mr-10px font-bold" }, "sample:"),
+                index.h("span", { class: "italic text-clrs-slate4" }, `${count > 0 ? values : '...'}`))),
+        index.h(TwLabel, null)));
 };
 
 const Fingerprint = props => {
-  const hex = props.hex || 'currentColor';
-  const klass = props.class;
-  const label = props.label || 'fingerprint';
-  const size = props.size || 24;
-  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
-    index.h("title", null, label),
-    index.h("g", { fill: hex },
-      index.h("path", { d: "M17.81,4.47C17.73,4.47 17.65,4.45 17.58,4.41C15.66,3.42 14,3\n      12,3C10.03,3 8.15,3.47 6.44,4.41C6.2,4.54 5.9,4.45 5.76,4.21C5.63,3.97\n      5.72,3.66 5.96,3.53C7.82,2.5 9.86,2 12,2C14.14,2 16,2.47\n      18.04,3.5C18.29,3.65 18.38,3.95 18.25,4.19C18.16,4.37 18,4.47\n      17.81,4.47M3.5,9.72C3.4,9.72 3.3,9.69 3.21,9.63C3,9.47 2.93,9.16\n      3.09,8.93C4.08,7.53 5.34,6.43 6.84,5.66C10,4.04 14,4.03\n      17.15,5.65C18.65,6.42 19.91,7.5 20.9,8.9C21.06,9.12 21,9.44\n      20.78,9.6C20.55,9.76 20.24,9.71 20.08,9.5C19.18,8.22 18.04,7.23\n      16.69,6.54C13.82,5.07 10.15,5.07 7.29,6.55C5.93,7.25 4.79,8.25\n      3.89,9.5C3.81,9.65 3.66,9.72 3.5,9.72M9.75,21.79C9.62,21.79 9.5,21.74\n      9.4,21.64C8.53,20.77 8.06,20.21 7.39,19C6.7,17.77 6.34,16.27\n      6.34,14.66C6.34,11.69 8.88,9.27 12,9.27C15.12,9.27 17.66,11.69\n      17.66,14.66A0.5,0.5 0 0,1 17.16,15.16A0.5,0.5 0 0,1\n      16.66,14.66C16.66,12.24 14.57,10.27 12,10.27C9.43,10.27 7.34,12.24\n      7.34,14.66C7.34,16.1 7.66,17.43 8.27,18.5C8.91,19.66 9.35,20.15\n      10.12,20.93C10.31,21.13 10.31,21.44 10.12,21.64C10,21.74 9.88,21.79\n      9.75,21.79M16.92,19.94C15.73,19.94 14.68,19.64 13.82,19.05C12.33,18.04\n      11.44,16.4 11.44,14.66A0.5,0.5 0 0,1 11.94,14.16A0.5,0.5 0 0,1\n      12.44,14.66C12.44,16.07 13.16,17.4 14.38,18.22C15.09,18.7 15.92,18.93\n      16.92,18.93C17.16,18.93 17.56,18.9 17.96,18.83C18.23,18.78 18.5,18.96\n      18.54,19.24C18.59,19.5 18.41,19.77 18.13,19.82C17.56,19.93 17.06,19.94\n      16.92,19.94M14.91,22C14.87,22 14.82,22 14.78,22C13.19,21.54 12.15,20.95\n      11.06,19.88C9.66,18.5 8.89,16.64 8.89,14.66C8.89,13.04 10.27,11.72\n      11.97,11.72C13.67,11.72 15.05,13.04 15.05,14.66C15.05,15.73 16,16.6\n      17.13,16.6C18.28,16.6 19.21,15.73 19.21,14.66C19.21,10.89 15.96,7.83\n      11.96,7.83C9.12,7.83 6.5,9.41 5.35,11.86C4.96,12.67 4.76,13.62\n      4.76,14.66C4.76,15.44 4.83,16.67 5.43,18.27C5.53,18.53 5.4,18.82\n      5.14,18.91C4.88,19 4.59,18.87 4.5,18.62C4,17.31 3.77,16\n      3.77,14.66C3.77,13.46 4,12.37 4.45,11.42C5.78,8.63 8.73,6.82\n      11.96,6.82C16.5,6.82 20.21,10.33 20.21,14.65C20.21,16.27 18.83,17.59\n      17.13,17.59C15.43,17.59 14.05,16.27 14.05,14.65C14.05,13.58 13.12,12.71\n      11.97,12.71C10.82,12.71 9.89,13.58 9.89,14.65C9.89,16.36 10.55,17.96\n      11.76,19.16C12.71,20.1 13.62,20.62 15.03,21C15.3,21.08 15.45,21.36\n      15.38,21.62C15.33,21.85 15.12,22 14.91,22Z" })),
-    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'fingerprint';
+    const size = props.size || 24;
+    return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+        index.h("title", null, label),
+        index.h("g", { fill: hex },
+            index.h("path", { d: "M17.81,4.47C17.73,4.47 17.65,4.45 17.58,4.41C15.66,3.42 14,3\n      12,3C10.03,3 8.15,3.47 6.44,4.41C6.2,4.54 5.9,4.45 5.76,4.21C5.63,3.97\n      5.72,3.66 5.96,3.53C7.82,2.5 9.86,2 12,2C14.14,2 16,2.47\n      18.04,3.5C18.29,3.65 18.38,3.95 18.25,4.19C18.16,4.37 18,4.47\n      17.81,4.47M3.5,9.72C3.4,9.72 3.3,9.69 3.21,9.63C3,9.47 2.93,9.16\n      3.09,8.93C4.08,7.53 5.34,6.43 6.84,5.66C10,4.04 14,4.03\n      17.15,5.65C18.65,6.42 19.91,7.5 20.9,8.9C21.06,9.12 21,9.44\n      20.78,9.6C20.55,9.76 20.24,9.71 20.08,9.5C19.18,8.22 18.04,7.23\n      16.69,6.54C13.82,5.07 10.15,5.07 7.29,6.55C5.93,7.25 4.79,8.25\n      3.89,9.5C3.81,9.65 3.66,9.72 3.5,9.72M9.75,21.79C9.62,21.79 9.5,21.74\n      9.4,21.64C8.53,20.77 8.06,20.21 7.39,19C6.7,17.77 6.34,16.27\n      6.34,14.66C6.34,11.69 8.88,9.27 12,9.27C15.12,9.27 17.66,11.69\n      17.66,14.66A0.5,0.5 0 0,1 17.16,15.16A0.5,0.5 0 0,1\n      16.66,14.66C16.66,12.24 14.57,10.27 12,10.27C9.43,10.27 7.34,12.24\n      7.34,14.66C7.34,16.1 7.66,17.43 8.27,18.5C8.91,19.66 9.35,20.15\n      10.12,20.93C10.31,21.13 10.31,21.44 10.12,21.64C10,21.74 9.88,21.79\n      9.75,21.79M16.92,19.94C15.73,19.94 14.68,19.64 13.82,19.05C12.33,18.04\n      11.44,16.4 11.44,14.66A0.5,0.5 0 0,1 11.94,14.16A0.5,0.5 0 0,1\n      12.44,14.66C12.44,16.07 13.16,17.4 14.38,18.22C15.09,18.7 15.92,18.93\n      16.92,18.93C17.16,18.93 17.56,18.9 17.96,18.83C18.23,18.78 18.5,18.96\n      18.54,19.24C18.59,19.5 18.41,19.77 18.13,19.82C17.56,19.93 17.06,19.94\n      16.92,19.94M14.91,22C14.87,22 14.82,22 14.78,22C13.19,21.54 12.15,20.95\n      11.06,19.88C9.66,18.5 8.89,16.64 8.89,14.66C8.89,13.04 10.27,11.72\n      11.97,11.72C13.67,11.72 15.05,13.04 15.05,14.66C15.05,15.73 16,16.6\n      17.13,16.6C18.28,16.6 19.21,15.73 19.21,14.66C19.21,10.89 15.96,7.83\n      11.96,7.83C9.12,7.83 6.5,9.41 5.35,11.86C4.96,12.67 4.76,13.62\n      4.76,14.66C4.76,15.44 4.83,16.67 5.43,18.27C5.53,18.53 5.4,18.82\n      5.14,18.91C4.88,19 4.59,18.87 4.5,18.62C4,17.31 3.77,16\n      3.77,14.66C3.77,13.46 4,12.37 4.45,11.42C5.78,8.63 8.73,6.82\n      11.96,6.82C16.5,6.82 20.21,10.33 20.21,14.65C20.21,16.27 18.83,17.59\n      17.13,17.59C15.43,17.59 14.05,16.27 14.05,14.65C14.05,13.58 13.12,12.71\n      11.97,12.71C10.82,12.71 9.89,13.58 9.89,14.65C9.89,16.36 10.55,17.96\n      11.76,19.16C12.71,20.1 13.62,20.62 15.03,21C15.3,21.08 15.45,21.36\n      15.38,21.62C15.33,21.85 15.12,22 14.91,22Z" })),
+        index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
 const url = 'https://eswat2.dev';
 const who = 'eswat2';
 const Eswat2Io = _props => {
-  return (index.h("a", { class: "absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, target: "blank", title: who },
-    index.h(Fingerprint, { label: "eswat2" })));
+    return (index.h("a", { class: "absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, target: "blank", title: who },
+        index.h(Fingerprint, { label: "eswat2" })));
 };
 
 const Header = props => {
-  return (index.h("h1", { class: "mb-11 ml-0 mr-0 mt-11 text-center text-6xl font-thin uppercase text-clrs-red" }, props.label));
+    return (index.h("h1", { class: "mb-11 ml-0 mr-0 mt-11 text-center text-6xl font-thin uppercase text-clrs-red" }, props.label));
 };
 
 const protoTinkerCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.ds1-main{display:flex;flex-direction:column;padding:1rem;font-family:ui-sans-serif,\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    'Helvetica Neue',\n    Arial,\n    'Noto Sans',\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol',\n    'Noto Color Emoji';color:var(--clrs-navy, #001f3f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ds1-button{display:flex;align-items:center;border-style:solid;border-color:var(--clrs-slate, #708090);color:var(--clrs-white, #ffffff)}.ds1-button:active{background-color:var(--clrs-gray, #aaaaaa);color:var(--clrs-navy, #001f3f)}.absolute{position:absolute}.right-8{right:2rem}.top-8{top:2rem}.mb-10px{margin-bottom:10px}.mb-11{margin-bottom:2.75rem}.ml-0{margin-left:0px}.ml-auto{margin-left:auto}.mr-0{margin-right:0px}.mr-10px{margin-right:10px}.mt-11{margin-top:2.75rem}.mt-3{margin-top:0.75rem}.mt-5px{margin-top:5px}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.bg-clrs-blue{background-color:var(--clrs-blue, #0074d9)}.bg-clrs-red{background-color:var(--clrs-red, #ff4136)}.text-center{text-align:center}.align-top{vertical-align:top}.text-6xl{font-size:3.75rem;line-height:1}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-thin{font-weight:100}.uppercase{text-transform:uppercase}.italic{font-style:italic}.text-clrs-gray{color:var(--clrs-gray, #aaaaaa)}.text-clrs-red{color:var(--clrs-red, #ff4136)}.text-clrs-slate4{color:var(--clrs-slate4, #4e5964)}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),\n    0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.data-button{border-radius:5px;border-width:1px;padding:5px;margin:0px;margin-right:5px;cursor:pointer}.hover\\:text-clrs-navy:hover{color:var(--clrs-navy, #001f3f)}";
 
 const ProtoTinker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tag = 'proto-tinker';
-  }
-  componentDidLoad() {
-    actions.initApp();
-  }
-  render() {
-    return (index.h("div", { id: "app", class: "ds1-main" }, index.h(Header, { label: "tinker wc" }), index.h(Eswat2Io, null), index.h(DataSource, { actions: actions, state: state }), index.h(ColorPicker, { actions: actions, state: state }), index.h("hr", { class: "ml-0 mr-0" }), index.h(DataValues, { state: state })));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tag = 'proto-tinker';
+    }
+    componentDidLoad() {
+        actions.initApp();
+    }
+    render() {
+        return (index.h("div", { id: "app", class: "ds1-main" }, index.h(Header, { label: "tinker wc" }), index.h(Eswat2Io, null), index.h(DataSource, { actions: actions, state: state }), index.h(ColorPicker, { actions: actions, state: state }), index.h("hr", { class: "ml-0 mr-0" }), index.h(DataValues, { state: state })));
+    }
 };
 ProtoTinker.style = protoTinkerCss;
 

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/proto-tinker/chevron-double-left.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 const ChevronDoubleLeft = props => {
-  const hex = props.hex || 'currentColor';
-  const klass = props.class;
-  const label = props.label || 'chevron-double-left';
-  const size = props.size || 24;
-  return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), h("g", { fill: hex }, h("path", { d: "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z" })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'chevron-double-left';
+    const size = props.size || 24;
+    return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), h("g", { fill: hex }, h("path", { d: "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z" })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 export { ChevronDoubleLeft };
 export default ChevronDoubleLeft;

package/dist/collection/components/proto-tinker/close.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 const Close = props => {
-  const hex = props.hex || 'currentColor';
-  const klass = props.class;
-  const label = props.label || 'close';
-  const size = props.size || 24;
-  return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), h("g", { fill: hex }, h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+    const hex = props.hex || 'currentColor';
+    const klass = props.class;
+    const label = props.label || 'close';
+    const size = props.size || 24;
+    return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" }, h("title", null, label), h("g", { fill: hex }, h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })), h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 export { Close };
 export default Close;

package/dist/collection/components/proto-tinker/color-picker.js

@@ -2,15 +2,15 @@ import { h } from "@stencil/core";
 import { Radio } from "./radio";
 import { colorKeys, colorFor } from "../../utils";
 const ColorPicker = props => {
-  const { actions, state } = props;
-  const { pick } = state;
-  return (h("div", { id: "toolbar", class: "flex flex-wrap", role: "radiogroup" }, colorKeys.map((key) => {
-    const hex = colorFor(key);
-    const selected = pick === key;
-    return (h("div", { "aria-label": key, "aria-checked": selected ? 'true' : 'false', role: "radio", onClick: () => {
-        actions.updatePick(key);
-      } }, h(Radio, { hex: hex, selected: selected, label: key })));
-  })));
+    const { actions, state } = props;
+    const { pick } = state;
+    return (h("div", { id: "toolbar", class: "flex flex-wrap", role: "radiogroup" }, colorKeys.map((key) => {
+        const hex = colorFor(key);
+        const selected = pick === key;
+        return (h("div", { "aria-label": key, "aria-checked": selected ? 'true' : 'false', role: "radio", onClick: () => {
+                actions.updatePick(key);
+            } }, h(Radio, { hex: hex, selected: selected, label: key })));
+    })));
 };
 export { ColorPicker };
 export default ColorPicker;

package/dist/collection/components/proto-tinker/data-source.js

@@ -4,13 +4,13 @@ import { Close } from "./close";
 import { Refresh } from "./refresh";
 const help = 'click a button... ';
 const DataSource = props => {
-  const { actions, state } = props;
-  const { count } = state;
-  return (h("div", { class: "mb-10px mt-3 flex items-center" }, h("button", { "aria-label": "Refresh", class: "ds1-button data-button bg-clrs-blue", onClick: () => {
-      actions.refresh();
-    } }, h(Refresh, { label: "Refresh" })), h("button", { "aria-label": "Reset", class: "ds1-button data-button bg-clrs-red", onClick: () => {
-      actions.reset();
-    } }, h(Close, { label: "Reset" })), h("span", { class: "flex items-center" }, h(ChevronDoubleLeft, { size: 28 }), h("span", { class: "italic" }, help, h("sup", null, count)))));
+    const { actions, state } = props;
+    const { count } = state;
+    return (h("div", { class: "mb-10px mt-3 flex items-center" }, h("button", { "aria-label": "Refresh", class: "ds1-button data-button bg-clrs-blue", onClick: () => {
+            actions.refresh();
+        } }, h(Refresh, { label: "Refresh" })), h("button", { "aria-label": "Reset", class: "ds1-button data-button bg-clrs-red", onClick: () => {
+            actions.reset();
+        } }, h(Close, { label: "Reset" })), h("span", { class: "flex items-center" }, h(ChevronDoubleLeft, { size: 28 }), h("span", { class: "italic" }, help, h("sup", null, count)))));
 };
 export { DataSource };
 export default DataSource;

package/dist/collection/components/proto-tinker/data-values.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 import { TwLabel } from "./tw-label";
 const DataValues = props => {
-  const { state } = props;
-  const { values, pick, count } = state;
-  return (h("div", { class: "flex" }, h("div", { class: "flex flex-col" }, h("div", { class: "flex" }, h("span", { class: "mr-10px font-bold" }, "color:"), h("span", { class: "italic text-clrs-slate4" }, pick)), h("div", { class: "mt-5px flex" }, h("span", { class: "mr-10px font-bold" }, "sample:"), h("span", { class: "italic text-clrs-slate4" }, `${count > 0 ? values : '...'}`))), h(TwLabel, null)));
+    const { state } = props;
+    const { values, pick, count } = state;
+    return (h("div", { class: "flex" }, h("div", { class: "flex flex-col" }, h("div", { class: "flex" }, h("span", { class: "mr-10px font-bold" }, "color:"), h("span", { class: "italic text-clrs-slate4" }, pick)), h("div", { class: "mt-5px flex" }, h("span", { class: "mr-10px font-bold" }, "sample:"), h("span", { class: "italic text-clrs-slate4" }, `${count > 0 ? values : '...'}`))), h(TwLabel, null)));
 };
 export { DataValues };
 export default DataValues;

package/dist/collection/components/proto-tinker/eswat2-io.js

@@ -3,7 +3,7 @@ import { Fingerprint } from "./fingerprint";
 const url = 'https://eswat2.dev';
 const who = 'eswat2';
 const Eswat2Io = _props => {
-  return (h("a", { class: "absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, target: "blank", title: who }, h(Fingerprint, { label: "eswat2" })));
+    return (h("a", { class: "absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, target: "blank", title: who }, h(Fingerprint, { label: "eswat2" })));
 };
 export { Eswat2Io };
 export default Eswat2Io;