Import template

Author: aarongustafson

.editorconfig

@@ -0,0 +1,16 @@
+# .editorconfig
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,json,md,yml,yaml}]
+indent_style = tab
+indent_size = 4
+
+[*.{yml,yaml}]
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1,6 @@
+* text=auto eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.md text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+title: '[BUG] '
+labels: bug
+assignees: ''
+---
+
+## Description
+
+A clear and concise description of what the bug is.
+
+## Steps to Reproduce
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## Expected Behavior
+
+A clear and concise description of what you expected to happen.
+
+## Actual Behavior
+
+A clear and concise description of what actually happened.
+
+## Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+## Environment
+
+- Browser: [e.g. Chrome 120, Firefox 121, Safari 17]
+- OS: [e.g. macOS 14.0, Windows 11, Ubuntu 22.04]
+- Component Version: [e.g. 1.0.0]
+
+## Additional Context
+
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,27 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+title: '[FEATURE] '
+labels: enhancement
+assignees: ''
+---
+
+## Problem Statement
+
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+## Proposed Solution
+
+A clear and concise description of what you want to happen.
+
+## Alternatives Considered
+
+A clear and concise description of any alternative solutions or features you've considered.
+
+## Additional Context
+
+Add any other context or screenshots about the feature request here.
+
+## Possible Implementation
+
+If you have ideas about how this could be implemented, please share them here.

.github/workflows/ci.yml

@@ -0,0 +1,37 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Run tests
+        run: npm run test:run
+
+      - name: Generate coverage report
+        run: npm run test:coverage
+        if: matrix.node-version == '20.x'

.github/workflows/publish.yml

@@ -0,0 +1,34 @@
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:run
+
+      - name: Publish to npm
+        run: npm publish --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

.npmignore

@@ -0,0 +1,17 @@
+node_modules/
+package-lock.json
+test/
+demo/
+scripts/
+.prettierrc
+.editorconfig
+.gitattributes
+eslint.config.js
+vitest.config.js
+.git
+.gitignore
+.github/
+SETUP.md
+TEMPLATE_README.md
+CONTRIBUTING.md
+coverage/

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"arrowParens": "always",
+	"singleQuote": true,
+	"tabWidth": 4,
+	"useTabs": true
+}

COMPONENT-NAME.js

@@ -0,0 +1,44 @@
+/**
+ * ComponentNameElement - COMPONENT_DESCRIPTION
+ * 
+ * @element COMPONENT-NAME
+ * 
+ * @attr {string} example-attribute - Description of the attribute
+ * 
+ * @fires COMPONENT-NAME:event-name - Description of the event
+ * 
+ * @slot - Default slot for content
+ * 
+ * @cssprop --component-name-color - Description of CSS custom property
+ */
+export class ComponentNameElement extends HTMLElement {
+	static get observedAttributes() {
+		return ['example-attribute'];
+	}
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.render();
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue !== newValue) {
+			this.render();
+		}
+	}
+
+	render() {
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					display: block;
+				}
+			</style>
+			<slot></slot>
+		`;
+	}
+}