proto-tinker-wc 0.0.1

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/proto-tinker/proto-tinker.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.12.0",
+    "typescriptVersion": "4.3.5"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,14 @@
+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" })));
+};
+export { ChevronDoubleLeft };
+export default ChevronDoubleLeft;

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

@@ -0,0 +1,14 @@
+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" })));
+};
+export { Close };
+export default Close;

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

@@ -0,0 +1,16 @@
+import { h } from '@stencil/core';
+import { Radio } from './radio';
+import { colorKeys, colorFor, store, actions } from '../../utils';
+const ColorPicker = _props => {
+  const { pick } = store.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, role: "radio", title: key, onClick: () => {
+        actions.updatePick(key);
+      } },
+      h(Radio, { hex: hex, selected: selected })));
+  })));
+};
+export { ColorPicker };
+export default ColorPicker;

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

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core';
+import { ChevronDoubleLeft } from './chevron-double-left';
+import { Close } from './close';
+import { Refresh } from './refresh';
+import { store, actions } from '../../utils';
+const help = 'click a button... ';
+const DataSource = _props => {
+  const { count } = store.state;
+  return (h("div", { class: "flex mt-3 mb-10px items-center" },
+    h("button", { "aria-label": "Refresh", title: "Refresh", class: "ds1-button data-button bg-clrs-blue", onClick: () => {
+        actions.refresh();
+      } },
+      h(Refresh, null)),
+    h("button", { "aria-label": "Reset", title: "Reset", class: "ds1-button data-button bg-clrs-red", onClick: () => {
+        actions.reset();
+      } },
+      h(Close, null)),
+    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

@@ -0,0 +1,17 @@
+import { h } from '@stencil/core';
+import { TwLabel } from './tw-label';
+import { store } from '../../utils';
+const DataValues = _props => {
+  const { values, pick, count } = store.state;
+  return (h("div", { class: "flex" },
+    h("div", { class: "flex flex-col" },
+      h("div", { class: "flex" },
+        h("span", { class: "font-bold mr-10px" }, "color:"),
+        h("span", { class: "italic text-clrs-slate4" }, pick)),
+      h("div", { class: "flex mt-5px" },
+        h("span", { class: "font-bold mr-10px" }, "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

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

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

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+const Fingerprint = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'fingerprint';
+  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: "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" })),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
+export { Fingerprint };
+export default Fingerprint;

package/dist/collection/components/proto-tinker/proto-tinker.css

@@ -0,0 +1,152 @@
+*,
+::before,
+::after {
+  --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, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', '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;
+}
+
+.top-8 {
+  top: 2rem;
+}
+
+.right-8 {
+  right: 2rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mb-10px {
+  margin-bottom: 10px;
+}
+
+.mr-10px {
+  margin-right: 10px;
+}
+
+.mt-5px {
+  margin-top: 5px;
+}
+
+.mr-0 {
+  margin-right: 0px;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.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);
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.text-clrs-slate4 {
+  color: var(--clrs-slate4, #4e5964);
+}
+
+.text-clrs-gray {
+  color: var(--clrs-gray, #aaaaaa);
+}
+
+.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),
+    0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    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;
+}
+
+.funnel {
+  width: calc(100% - 20px);
+  height: 100%;
+  padding: 10px;
+  padding-bottom: 7px;
+  border-radius: 10px;
+  border-width: 1px;
+}
+
+.hover\:text-clrs-navy:hover {
+  color: var(--clrs-navy, #001f3f);
+}

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

@@ -0,0 +1,46 @@
+import { Component, h, Prop } from '@stencil/core';
+import { ColorPicker } from './color-picker';
+import { DataSource } from './data-source';
+import { DataValues } from './data-values';
+import { Eswat2Io } from './eswat2-io';
+export class ProtoTinker {
+  constructor() {
+    this.tag = 'proto-tinker';
+  }
+  render() {
+    return (h("div", { id: "app", class: "ds1-main" },
+      h(Eswat2Io, null),
+      h(DataSource, null),
+      h(ColorPicker, null),
+      h("hr", { class: "mr-0 ml-0" }),
+      h(DataValues, null)));
+  }
+  static get is() { return "proto-tinker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./proto-tinker.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["proto-tinker.css"]
+  }; }
+  static get properties() { return {
+    "tag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tag",
+      "reflect": false,
+      "defaultValue": "'proto-tinker'"
+    }
+  }; }
+}

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

@@ -0,0 +1,15 @@
+import { h } from '@stencil/core';
+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 (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 }, selected ? (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" })) : (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" }))),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
+export { Radio };
+export default Radio;

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

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+const Refresh = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'refresh';
+  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: "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" })),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
+export { Refresh };
+export default Refresh;

package/dist/collection/components/proto-tinker/tw-label.js

@@ -0,0 +1,9 @@
+import { h } from '@stencil/core';
+const TW_VERSION = '3.0.2';
+const TwLabel = _props => {
+  return (h("label", { class: "ml-auto align-top text-xs italic text-clrs-slate4" },
+    "Tailwind ",
+    TW_VERSION));
+};
+export { TwLabel };
+export default TwLabel;

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/color-plugin.js

@@ -0,0 +1,36 @@
+import Color from 'color';
+import colorString from 'color-string';
+import lerp from 'lerp';
+const ColorPlugin = {
+  name: 'color',
+  test(startValue) {
+    // rgb(255, 0, 0)
+    return (typeof startValue === 'string' &&
+      (startValue.indexOf('rgb') >= 0 ||
+        startValue.indexOf('#') >= 0 ||
+        startValue.indexOf('hsl') >= 0 ||
+        colorString.get.rgb(startValue))); // true
+  },
+  initialize(startValue, destValue) {
+    return {
+      data: {
+        format: (startValue.indexOf('rgba') >= 0 && 'rgba') ||
+          (startValue.indexOf('rgb') >= 0 && 'rgb') ||
+          (startValue.indexOf('#') >= 0 && 'hex') ||
+          Color(startValue).model,
+      },
+      startValue: Color(startValue).rgb(),
+      destValue: Color(destValue).rgb(),
+    };
+  },
+  interpolate(startValue, destValue, progress, data) {
+    const r = lerp(startValue.color[0], destValue.color[0], progress);
+    const g = lerp(startValue.color[1], destValue.color[1], progress);
+    const b = lerp(startValue.color[2], destValue.color[2], progress);
+    const a = lerp(startValue.valpha, destValue.valpha, progress);
+    const color = Color.rgb(r, g, b, a)[data.format === 'rgba' ? 'rgb' : data.format]();
+    return typeof color === 'string' ? color : color.string();
+  },
+};
+export { ColorPlugin };
+export default ColorPlugin;

package/dist/collection/utils/funnel-defs.js

@@ -0,0 +1,10 @@
+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 },
+];
+const sample = funnelDefs.map(() => 0);
+export { funnelDefs, sample };
+export default funnelDefs;

package/dist/collection/utils/index.js

@@ -0,0 +1,5 @@
+export * from './color-plugin';
+export * from './funnel-defs';
+export * from './named-colors';
+export * from './store';
+export * from './types';

package/dist/collection/utils/named-colors.js

@@ -0,0 +1,51 @@
+/* NOTE: colors from clrs.cc - A nicer color palette for the web...
+ */
+const navy = '#001f3f';
+const blue = '#0074d9';
+const aqua = '#7fdbff';
+const teal = '#39cccc';
+const olive = '#3d9970';
+const green = '#2ecc40';
+const lime = '#01ff70';
+const yellow = '#ffdc00';
+const orange = '#ff851b';
+const red = '#ff4136';
+const maroon = '#85144b';
+const fuchsia = '#f012be';
+const purple = '#b10dc9';
+const black = '#111111';
+const gray = '#aaaaaa';
+const silver = '#dddddd';
+const bada55 = '#bada55';
+const slate = '#708090';
+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,
+};
+const _altColors = {
+  slate,
+  slate4,
+  white,
+};
+const colorFor = (key) => _namedColors[key] || _altColors[key];
+const colorKeys = Object.keys(_namedColors);
+export { navy, blue, aqua, teal, olive, green, lime, yellow, orange, red, maroon, fuchsia, purple, black, gray, silver, bada55, slate, slate4, white, colorFor, colorKeys, };
+export default colorFor;

package/dist/collection/utils/store.js

@@ -0,0 +1,25 @@
+import { createStore } from '@stencil/store';
+import { sample } from './funnel-defs';
+const initStore = {
+  count: 0,
+  pick: 'bada55',
+  values: [...sample],
+};
+const store = createStore(initStore);
+const { state } = store;
+const actions = {
+  refresh: () => {
+    const values = sample.map(() => Math.floor(Math.random() * 100));
+    state.count = state.count + 1;
+    state.values = values;
+  },
+  reset: () => {
+    state.count = 0;
+    state.values = [...sample];
+  },
+  updatePick: pick => {
+    state.pick = pick;
+  },
+};
+export { store, actions };
+export default store;

package/dist/collection/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* ProtoTinkerWc custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/proto-tinker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ProtoTinker extends Components.ProtoTinker, HTMLElement {}
+export const ProtoTinker: {
+  prototype: ProtoTinker;
+  new (): ProtoTinker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;