npm - @pairbo/ui-kit - Versions diffs - 0.0.1 - Mend

@pairbo/ui-kit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/.husky/pre-commit +1 -0
package/.prettierignore +16 -0
package/.prettierrc.json +17 -0
package/README.md +61 -0
package/cspell.json +9 -0
package/dev.html +101 -0
package/docs/README.md +1 -0
package/docs/_includes/component.njk +16 -0
package/docs/_includes/default.njk +39 -0
package/docs/_includes/sidebar.njk +16 -0
package/docs/eleventy.config.mjs +72 -0
package/docs/pages/components/message-selector.md +17 -0
package/docs/pages/fabric-example.html +46 -0
package/docs/pages/fabric-example.js +28 -0
package/docs/pages/index.md +76 -0
package/eslint.config.mjs +32 -0
package/ignote_temp +3 -0
package/index.html +162 -0
package/lint-stage.confg.js +6 -0
package/package.json +66 -0
package/pages/card-selection.html +65 -0
package/pages/drawer.html +47 -0
package/pages/editor.html +45 -0
package/pages/page-mgn.html +51 -0
package/pages/test_build.html +47 -0
package/public/Greeting Card from Pairbo.png +0 -0
package/scripts/plop/plopfile.js +51 -0
package/scripts/plop/templates/components/component.hbs +34 -0
package/scripts/plop/templates/components/define.hbs +10 -0
package/scripts/plop/templates/components/styles.hbs +7 -0
package/src/components/button/button.component.ts +93 -0
package/src/components/button/button.styles.ts +273 -0
package/src/components/button/button.ts +10 -0
package/src/components/button-group/button-group.component.ts +36 -0
package/src/components/button-group/button-group.styles.ts +7 -0
package/src/components/button-group/button-group.ts +10 -0
package/src/components/card-selection/card-selection.component.ts +43 -0
package/src/components/card-selection/card-selection.styles.ts +7 -0
package/src/components/card-selection/card-selection.ts +10 -0
package/src/components/category/category.component.ts +91 -0
package/src/components/category/category.styles.ts +27 -0
package/src/components/category/category.ts +10 -0
package/src/components/category-image/category-image.component.ts +38 -0
package/src/components/category-image/category-image.styles.ts +11 -0
package/src/components/category-image/category-image.ts +10 -0
package/src/components/drawer/drawer.component.ts +82 -0
package/src/components/drawer/drawer.styles.ts +54 -0
package/src/components/drawer/drawer.ts +10 -0
package/src/components/editor/editor.component.ts +135 -0
package/src/components/editor/editor.styles.ts +13 -0
package/src/components/editor/editor.ts +10 -0
package/src/components/fabric-example/fabric-example.component.ts +268 -0
package/src/components/fabric-example/fabric-example.styles.ts +23 -0
package/src/components/fabric-example/fabric-example.test.ts +0 -0
package/src/components/fabric-example/fabric-example.ts +12 -0
package/src/components/image-slider/editor-card-slider.component.ts +136 -0
package/src/components/image-slider/editor-card-slider.styles.ts +46 -0
package/src/components/image-slider/editor-card-slider.ts +9 -0
package/src/components/main.ts +17 -0
package/src/components/message-selector/message-selector.component.ts +154 -0
package/src/components/message-selector/message-selector.styles.ts +16 -0
package/src/components/message-selector/message-selector.test.ts +64 -0
package/src/components/message-selector/message-selector.ts +13 -0
package/src/components/page-manager/page-manager.component.ts +228 -0
package/src/components/page-manager/page-manager.styles.ts +9 -0
package/src/components/page-manager/page-manager.ts +10 -0
package/src/components/radio-button/radio-button.component.ts +118 -0
package/src/components/radio-button/radio-button.styles.ts +13 -0
package/src/components/radio-button/radio-button.ts +10 -0
package/src/components/radio-group/radio-group.component.ts +203 -0
package/src/components/radio-group/radio-group.styles.ts +19 -0
package/src/components/radio-group/radio-group.ts +10 -0
package/src/components/selector/selector.component.ts +115 -0
package/src/components/selector/selector.styles.ts +9 -0
package/src/components/selector/selector.ts +10 -0
package/src/components/textarea/textarea.component.ts +234 -0
package/src/components/textarea/textarea.styles.ts +178 -0
package/src/components/textarea/textarea.ts +10 -0
package/src/components/type-form/type-form.component.ts +121 -0
package/src/components/type-form/type-form.styles.ts +7 -0
package/src/components/type-form/type-form.ts +10 -0
package/src/declaration.d.ts +44 -0
package/src/events/events.ts +1 -0
package/src/events/pbo-category-card-select.ts +7 -0
package/src/internal/form.ts +376 -0
package/src/internal/pairbo-element.ts +85 -0
package/src/internal/slots.ts +54 -0
package/src/internal/watch.ts +79 -0
package/src/styles/component.styles.ts +17 -0
package/src/styles/form-control.styles.ts +59 -0
package/src/themes/default.css +414 -0
package/temp +20 -0
package/tsconfig.json +28 -0
package/vite.config.ts +26 -0

package/index.html ADDED Viewed

@@ -0,0 +1,162 @@
+<!doctype html>
+<html>
+<head>
+  <title>Development</title>
+  <link rel="stylesheet" href="src/themes/default.css">
+  <script type="module" src="src/components/main.ts"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
+  <script>
+    (() => {
+      document.documentElement.classList.toggle('pbo-theme-default', true);
+    })();
+  </script>
+</head>
+<body>
+  <a href="/index.html">Home</a>
+  <a href="/pages/editor.html">Editor</a>
+  <a href="/pages/card-selection.html">Card Selection</a>
+  <div style="
+        height: 100vh;
+        width: 100vw;
+        padding-left: auto;
+        padding-right: auto;
+        margin-left: auto;
+        margin-right: auto;
+      ">
+    <div style="
+          height: 60%;
+          width: 60%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        ">
+      <fabric-example backgroundUrl="./public/Greeting Card from Pairbo.png" alignment="right"></fabric-example>
+    </div>
+  </div>
+  <textarea id="message"></textarea>
+  <input type="color" id="color" value="#000000" />
+  <select name="alignment" id="alignment">
+    <option value="left">Left</option>
+    <option value="center">Center</option>
+    <option value="right">Right</option>
+  </select>
+  <!-- Example usage -->
+  <pbo-selector .fonts='${[
+  { value: "helvetica", label: "Helvetica", font: "Helvetica, Arial, sans-serif" },
+  { value: "georgia", label: "Georgia", font: "Georgia, serif" }
+]}'></pbo-selector>
+  <div style="display: inline-flex; flex-direction: column; gap:1rem">
+    <pbo-button outline>
+      <div>Click me</div>
+    </pbo-button>
+    <pbo-button-group>
+      <pbo-button outline>
+        left
+      </pbo-button>
+      <pbo-button outline>
+        center
+      </pbo-button>
+      <pbo-button>
+        right
+      </pbo-button>
+    </pbo-button-group>
+    <pbo-radio-button aria-disabled="true" disabled>
+      disabled
+    </pbo-radio-button>
+    <pbo-radio-button checked>
+      focused
+    </pbo-radio-button>
+    <form>
+      <input type="text" name="name" />
+      <input type="email" name="email" />
+      <input type="radio" name="align" />
+      <input type="radio" name="align" />
+      <input type="radio" name="align" />
+      <pbo-radio-group required id="alignment-group">
+        <pbo-radio-button value="left" size="small" circle>Left</pbo-radio-button>
+        <pbo-radio-button value="center">Center</pbo-radio-button>
+        <pbo-radio-button value="right">Right</pbo-radio-button>
+      </pbo-radio-group>
+      <pbo-radio-group required id="color-group">
+        <pbo-radio-button value="white" size="small" circle>White</pbo-radio-button>
+        <pbo-radio-button value="black">Black</pbo-radio-button>
+      </pbo-radio-group>
+      <pbo-textarea required rows="12" resize="none"></pbo-textarea>
+      <sl-radio-group required>
+        <sl-radio value="left">Left</sl-radio>
+        <sl-radio value="center">Center</sl-radio>
+        <sl-radio value="right">Right</sl-radio>
+      </sl-radio-group>
+      <button type="submit">Submit</button>
+    </form>
+    <pbo-button circle>Circle</pbo-button>
+  </div>
+  <script>
+    const textareaEl = document.querySelector("pbo-textarea");
+    textareaEl.addEventListener("pbo-input", () => {
+      fabricExample.message = textareaEl.value;
+    });
+    const message = document.getElementById("message");
+    const fabricExample = document.querySelector("fabric-example");
+    message.addEventListener("input", e => {
+      fabricExample.message = message.value;
+    });
+    const color = document.getElementById("color");
+    color.addEventListener("input", e => {
+      fabricExample.color = color.value;
+    });
+    const element = document.getElementById("alignment");
+    element.addEventListener("pbo-change", e => {
+      fabricExample.alignment = element.value;
+    });
+    const alignmentGroup = document.getElementById("alignment-group");
+    alignmentGroup.addEventListener("pbo-change", e => {
+      console.log(alignmentGroup.value);
+      fabricExample.alignment = alignmentGroup.value;
+      fabricExample.setAttribute("alignment", alignmentGroup.value);
+    });
+    const colorGroup = document.getElementById("color-group");
+    colorGroup.addEventListener("pbo-change", e => {
+      console.log(colorGroup.value);
+    });
+    const slGroupEl = document.querySelector("sl-radio-group");
+    slGroupEl.addEventListener("sl-change", e => {
+      console.log({ e })
+      console.log(slGroupEl.value);
+    });
+  </script>
+</body>
+</html>

package/lint-stage.confg.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  "*.{js,ts,json,html,xml,css,scss,sass,md}": "cspell --no-must-find-files",
+  "src/**/*.{js,ts}": "eslint --max-warnings 0 --fix",
+  "*": "prettier --write --ignore-unknown",
+  "dist/**/*": "ignore", // Add this line to ignore the dist directory
+};

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "name": "@pairbo/ui-kit",
+  "version": "0.0.01",
+  "description": "",
+  "exports": {
+    ".": {
+      "types": "./dist/src/components/main.d.ts",
+      "import": "./dist/pairbo.umd.js"
+    }
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepare": "husky",
+    "eleventy": "eleventy --config=./docs/eleventy.config.mjs",
+    "eleventy:serve": "eleventy --serve --config=./docs/eleventy.config.mjs",
+    "create": "plop --plopfile scripts/plop/plopfile.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@11ty/eleventy": "^3.0.0",
+    "@eslint/js": "^9.20.0",
+    "@open-wc/testing": "^4.0.0",
+    "@types/mocha": "^10.0.10",
+    "@types/sinon": "^17.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-promise": "^6.6.0",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "plop": "^4.0.1",
+    "prettier": "^3.5.0",
+    "sinon": "^19.0.2",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "lint-staged": {
+    "*.{ts,js}": [
+      "eslint --max-warnings 0 --fix --no-warn-ignored",
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@splidejs/splide": "^4.1.4",
+    "choices.js": "^11.0.3",
+    "fabric": "^6.5.4",
+    "lit": "^3.2.1",
+    "markdown-it": "^14.1.0",
+    "markdown-it-attrs": "^4.3.1"
+  }
+}

package/pages/card-selection.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+<head>
+  <title>Development</title>
+  <link rel="stylesheet" href="../src/themes/default.css">
+  <script type="module" src="../src/components/main.ts"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
+  <script>
+    (() => {
+      document.documentElement.classList.toggle('pbo-theme-default', true);
+    })();
+  </script>
+</head>
+<body>
+  <div class="container">
+    <pbo-category>
+      <h1 slot="title">Title</h1>
+    </pbo-category>
+  </div>
+</body>
+<script>
+  const categoryEl = document.querySelector('pbo-category');
+  categoryEl.cards = [
+    { cover_url: "https://picsum.photos/id/1/300/400", id: "1" },
+    { cover_url: "https://picsum.photos/id/10/300/400", id: "10" },
+    { cover_url: "https://picsum.photos/id/14/300/400", id: "10" },
+    { cover_url: "https://picsum.photos/id/20/300/400", id: "10" },
+    { cover_url: "https://picsum.photos/id/30/300/400", id: "10" },
+    { cover_url: "https://picsum.photos/id/40/300/400", id: "10" },
+    { cover_url: "https://picsum.photos/id/100/300/400", id: "100" },
+  ]
+</script>
+<style>
+  body {
+    height: 100vh;
+    width: 100vw;
+  }
+  .container {
+    height: 100%;
+    width: 100%;
+    padding-left: auto;
+    padding-right: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
+</html>

package/pages/drawer.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+  <title>Development</title>
+  <link rel="stylesheet" href="../src/themes/default.css">
+  <script type="module" src="../src/components/main.ts"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
+  <script>
+    (() => {
+      document.documentElement.classList.toggle('pbo-theme-default', true);
+    })();
+  </script>
+</head>
+<body>
+  <div class="container">
+    <pbo-drawer>
+      <div part="body">
+        <pbo-page-manager></pbo-page-manager>
+      </div>
+    </pbo-drawer>
+  </div>
+  <button>Toggle modal</button>
+</body>
+<script>
+  const buttonEl = document.querySelector('button');
+  const modalEl = document.querySelector('pbo-drawer');
+  buttonEl.addEventListener('click', () => {
+    modalEl.show();
+  });
+</script>
+</html>

package/pages/editor.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+  <title>Development</title>
+  <link rel="stylesheet" href="../src/themes/default.css">
+  <script type="module" src="../src/components/main.ts"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
+  <script>
+    (() => {
+      document.documentElement.classList.toggle('pbo-theme-default', true);
+    })();
+  </script>
+</head>
+<body>
+  <div class="container">
+    <pbo-editor></pbo-editor>
+  </div>
+</body>
+<style>
+  .container {
+    height: 100%;
+    width: 100%;
+    padding-left: auto;
+    padding-right: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
+</html>

package/pages/page-mgn.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+<head>
+  <title>Development</title>
+  <link rel="stylesheet" href="../src/themes/default.css">
+  <script type="module" src="../src/components/main.ts"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
+  <script>
+    (() => {
+      document.documentElement.classList.toggle('pbo-theme-default', true);
+    })();
+  </script>
+</head>
+<body>
+  <div class="container">
+    <pbo-page-manager></pbo-page-manager>
+  </div>
+</body>
+<style>
+  html,
+  body {
+    height: 100vh;
+    width: 100wh;
+  }
+  .container {
+    height: 100%;
+    width: 100%;
+    padding-left: auto;
+    padding-right: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
+</html>

package/pages/test_build.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+  <title>Development</title>
+  <link rel="stylesheet" href="../src/themes/default.css">
+  <script src="https://cdn.jsdelivr.net/npm/@pairbo/ui-kit/dist/pairbo.umd.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
+  <script>
+    (() => {
+      document.documentElement.classList.toggle('pbo-theme-default', true);
+    })();
+  </script>
+</head>
+<body>
+  <div class="container">
+    <pbo-drawer>
+      <div part="body">
+        <pbo-page-manager></pbo-page-manager>
+      </div>
+    </pbo-drawer>
+  </div>
+  <button>Toggle modal</button>
+</body>
+<script>
+  const buttonEl = document.querySelector('button');
+  const modalEl = document.querySelector('pbo-drawer');
+  buttonEl.addEventListener('click', () => {
+    modalEl.show();
+  });
+</script>
+</html>

package/public/Greeting Card from Pairbo.png ADDED Viewed

Binary file

package/scripts/plop/plopfile.js ADDED Viewed

@@ -0,0 +1,51 @@
+export default function (plop) {
+  plop.setHelper("tagWithoutPrefix", tag => tag.replace(/^pbo-/, ""));
+  plop.setGenerator("controller", {
+    description: "application controller logic",
+    prompts: [
+      {
+        type: "input",
+        name: "tag",
+        message: "Tag name? (e.g. pbo-button)",
+        validate: value => {
+          if (!value || value.length === 0) {
+            return "Tag is required";
+          }
+          // start with pairbo- and include only a-z + dashes
+          if (!/^pbo-[a-z-]+$/.test(value)) {
+            return "Tag must start with 'pbo-' and contain only lowercase letters and dashes";
+          }
+          // No double dashes or ending dash
+          if (value.includes("--") || value.endsWith("-")) {
+            return "Tag cannot contain double dashes or end with a dash";
+          }
+          return true;
+        },
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.ts",
+        templateFile: "templates/components/define.hbs",
+      },
+      {
+        type: "add",
+        path: "../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts",
+        templateFile: "templates/components/styles.hbs",
+      },
+      {
+        type: "add",
+        path: "../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.component.ts",
+        templateFile: "templates/components/component.hbs",
+      },
+      {
+        type: "modify",
+        path: "../../src/components/main.ts",
+        pattern: /\/\* plop:component \*\//,
+        template: `export { default as {{ properCase tag }} } from './{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.js';\n/* plop:component */`,
+      },
+    ],
+  });
+}

package/scripts/plop/templates/components/component.hbs ADDED Viewed

@@ -0,0 +1,34 @@
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import PairboElement from "../../internal/pairbo-element.js";
+import styles from "./{{ tagWithoutPrefix tag }}.styles.js";
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ *
+ * @dependency pbo-example
+ *
+ * @event pbo-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+@customElement("{{ tag}}")
+export default class {{ properCase tag }} extends PairboElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+  /** An example attribute. */
+  @property() attr = 'example';
+  render() {
+    return html` <slot></slot> `;
+  }
+}

package/scripts/plop/templates/components/define.hbs ADDED Viewed

@@ -0,0 +1,10 @@
+import {{ properCase tag }} from "./{{ tagWithoutPrefix tag }}.component.js";
+export * from "./{{ tagWithoutPrefix tag }}.component.js";
+export default {{ properCase tag }};
+declare global {
+  interface HTMLElementTagNameMap {
+    "{{ tag }}": {{ properCase tag }};
+  }
+}

package/scripts/plop/templates/components/styles.hbs ADDED Viewed

@@ -0,0 +1,7 @@
+import { css } from "lit";
+export default css`
+  :host {
+    display: block;
+  }
+`;