diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..2c47b5e
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,30 @@
+name: App CI
+
+on:
+ push:
+ branches: [ main ]
+ pull_request:
+ branches: [ main ]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v5
+ - uses: actions/setup-node@v5
+ with:
+ node-version: lts/*
+
+ - name: Install dependencies
+ run: npm install
+
+ - name: Install Playwright Browsers
+ run: npx playwright install --with-deps
+
+ - name: Run tests
+ run: npm run test
+
+ - uses: codecov/codecov-action@v5
+ with:
+ token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 485dee6..7bc8887 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,17 @@
+node_modules/
+*.tgz
+*.tsbuildinfo
+.DS_Store
+.wireit
+/temp
.idea
+/scripts/check-size-out.md
+/playground/p/**/package-lock.json
+/playground/p/scratch/*/
+!/playground/p/scratch/*.*
+/.direnv/
+/.envrc
+/.actrc
+dist
+coverage
+__screenshots__
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..6fa7527
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+ "singleQuote": true,
+ "bracketSpacing": true
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..f21f4fb
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,12 @@
+{
+ "recommendations": [
+ "dbaeumer.vscode-eslint",
+ "esbenp.prettier-vscode",
+ "bierner.lit-html",
+ "bashmish.es6-string-css",
+ "runem.lit-plugin",
+ "ryanluker.vscode-coverage-gutters",
+ "google.wireit",
+ "vitest.explorer"
+ ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..09b3977
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,14 @@
+{
+ // See https://go.microsoft.com/fwlink/?LinkId=733558
+ // for the documentation about the tasks.json format
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "label": "Watch coverage on open",
+ "command": "${command:coverage-gutters.watchCoverageAndVisibleEditors}",
+ "runOptions": {
+ "runOn": "folderOpen"
+ }
+ }
+ ]
+}
diff --git a/README.md b/README.md
index 0217e3a..6df5e41 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,103 @@
-# 📚 _ia-components_ 🏛️
-
+# 📚 _elements_ 🏛️
+
+## Installation
+
+```zsh
+npm i -S @internetarchive/elements
+```
+
+## Usage
+
+```typescript
+import "@internetarchive/elements/ia-button/ia-button";
+
+...
+
+ alert('Clicked!')>Click Me
+```
+
+## Development
+
+```zsh
+npm i
+npm run dev
+```
+
+## Adding a Component
+
+### Structure
+Each component has its own directory in `src/elements` (or `src/labs` if it's still in development). The basic structure looks like this, though components can have additional files and directories if neededd. Take a look at other elements to see what they each contain.
+```
+src
+- elements
+ - ia-foobar // the name of the element
+ - ia-foobar.ts // the main element class
+ - ia-foobar.test.ts // the element's tests
+ - ia-foobar-story.ts // an element that demos your element
+```
+Export your component in `src/index.ts`
+
+### Story
+To demo your component, we have a component catalog that you can add your demo to. Create a component in your component directory. Name it `COMPONENT-NAME-story.ts`, ie `ia-button-story.ts`.
+
+We have a story template you can use for consistency. [More info on `story-template`](#story-template). The easiest way to use this is to copy an existing story and modify it for your needs.
+
+Import your story in `/demo/app-root.ts` and add it to the page.
+
+#### Story Template
+
+ alert('Button clicked!')}
+ >Click Me
+
+
+
+
+ `;
+}
+
+// return a string of your element's usage and it will
+// be displayed with syntax highlighting
+// can be dynamic
+private get exampleUsage(): string {
+ return ` alert('Button clicked!')}>
+ Click Me
+ `;
+}
+
+private apply(): void {
+ // update component settings based on settings change
+}
+```
## Component Inventory
diff --git a/demo/app-root.ts b/demo/app-root.ts
new file mode 100644
index 0000000..84a0e7e
--- /dev/null
+++ b/demo/app-root.ts
@@ -0,0 +1,18 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '@src/elements/ia-button/ia-button-story';
+import '@src/labs/ia-snow/ia-snow-story';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+ render() {
+ return html`
+ 🏛️ Internet Archive Elements ⚛️
+
+
+
diff --git a/demo/index.css b/demo/index.css
new file mode 100644
index 0000000..a9ed120
--- /dev/null
+++ b/demo/index.css
@@ -0,0 +1,37 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 1rem;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+}
diff --git a/demo/story-template.ts b/demo/story-template.ts
new file mode 100644
index 0000000..0197de6
--- /dev/null
+++ b/demo/story-template.ts
@@ -0,0 +1,126 @@
+import { css, html, LitElement, type CSSResultGroup } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { when } from 'lit/directives/when.js';
+
+import './syntax-highlighter';
+
+import arrow from './arrow.svg';
+import testTube from './test-tube.svg';
+
+/**
+ * A template for demoing the use of a custom element.
+ */
+@customElement('story-template')
+export class StoryTemplate extends LitElement {
+ @property({ type: String }) elementTag = '';
+
+ @property({ type: String }) exampleUsage = '';
+
+ @property({ type: Boolean }) labs = false;
+
+ @state() private visible = false;
+
+ render() {
+ return html`
+
+ ${when(this.visible, () => this.elementDemoTemplate)}
+ `;
+ }
+
+ private get elementDemoTemplate() {
+ return html`
+
+
Demo
+
+
+
Import
+
+
Usage
+
+
Settings
+
+
+
${unsafeHTML(
+ this.highlightedCode,
+ )}
+
+
+
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..97a59e9
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,53 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import html from 'eslint-plugin-html';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+ recommendedConfig: js.configs.recommended,
+ allConfig: js.configs.all,
+});
+
+export default [
+ ...compat.extends('plugin:@typescript-eslint/recommended'),
+ {
+ plugins: {
+ '@typescript-eslint': typescriptEslint,
+ html,
+ },
+
+ languageOptions: {
+ parser: tsParser,
+ },
+
+ settings: {
+ 'import/resolver': {
+ node: {
+ extensions: ['.ts', '.tsx'],
+ moduleDirectory: ['node_modules', 'src', 'demo'],
+ },
+ },
+ },
+
+ rules: {
+ '@typescript-eslint/no-unsafe-function-type': 'warn',
+ '@typescript-eslint/no-unused-vars': 'warn',
+ '@typescript-eslint/no-explicit-any': 'warn',
+ },
+ },
+ {
+ ignores: ['**/*.js', '**/*.mjs', '**/*.d.ts'],
+ },
+ {
+ files: ['**/*.test.ts'],
+ rules: {
+ '@typescript-eslint/no-unused-expressions': 'off',
+ },
+ },
+];
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5d4bb83
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ Internet Archive Elements
+
+
+ alert('Button clicked!')}
+ >Click Me
+
+
+
+
+ `;
+ }
+
+ private get exampleUsage(): string {
+ return this.includeStyle
+ ? ` alert('Button clicked!')}
+ style="--ia-button-background-color: ${this.colorInput.value}">Click Me `
+ : ` alert('Button clicked!')}>Click Me `;
+ }
+
+ private apply() {
+ this.includeStyle = true;
+ this.button.style.setProperty(
+ '--ia-button-background-color',
+ this.colorInput.value,
+ );
+ }
+}
diff --git a/src/elements/ia-button/ia-button.test.ts b/src/elements/ia-button/ia-button.test.ts
new file mode 100644
index 0000000..cbd088d
--- /dev/null
+++ b/src/elements/ia-button/ia-button.test.ts
@@ -0,0 +1,14 @@
+import { fixture } from '@open-wc/testing-helpers';
+import { describe, expect, test } from 'vitest';
+import { html } from 'lit';
+
+import type { IAButton } from './ia-button';
+import './ia-button';
+
+describe('IA button', () => {
+ test('renders a basic button', async () => {
+ const el = await fixture(html`Click me `);
+ const button = el.shadowRoot?.querySelector('button');
+ expect(button).toBeDefined();
+ });
+});
diff --git a/src/elements/ia-button/ia-button.ts b/src/elements/ia-button/ia-button.ts
new file mode 100644
index 0000000..621945d
--- /dev/null
+++ b/src/elements/ia-button/ia-button.ts
@@ -0,0 +1,25 @@
+import { css, html, LitElement, type CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+
+/**
+ * A button element to demo the elements library
+ */
+@customElement('ia-button')
+export class IAButton extends LitElement {
+ render() {
+ return html`
+
+
+ `;
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ button {
+ padding: 8px 16px;
+ background-color: var(--ia-button-background-color, #007bff);
+ }
+ `;
+ }
+}
diff --git a/src/elements/index.ts b/src/elements/index.ts
new file mode 100644
index 0000000..bb0545f
--- /dev/null
+++ b/src/elements/index.ts
@@ -0,0 +1 @@
+export * from './ia-button/ia-button';
diff --git a/src/labs/ia-snow/flake.svg b/src/labs/ia-snow/flake.svg
new file mode 100644
index 0000000..dace58a
--- /dev/null
+++ b/src/labs/ia-snow/flake.svg
@@ -0,0 +1 @@
+
+
+
+
+
+
+ `;
+ }
+
+ private get exampleUsage(): string {
+ return this.config
+ ? `
+ (html` {
+ if (this.snowing) {
+ this.stopSnowing();
+ } else {
+ this.startSnowing();
+ }
+ }}
+ >
+ ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}
+
+
+ {
+ this.stopSnowing();
+ this.snowflakes?.destroy();
+ this.snowflakes = undefined;
+ }}
+ >
+ Clear Snowflakes
+
+
+