bareframe 0.1.0

package/README.md

@@ -0,0 +1,197 @@
+# bareframe
+
+Lightweight, dependency-free Web Components for building reusable UI across applications.
+
+## Install
+
+```bash
+npm install bareframe
+```
+
+## Package Usage
+
+Register everything:
+
+```js
+import 'bareframe';
+```
+
+Or import one component:
+
+```js
+import 'bareframe/components/button.js';
+```
+
+Load a theme:
+
+```js
+import 'bareframe/themes/system.css';
+```
+
+`system` is the default/recommended theme for bareframe.
+
+## Why bareframe
+
+`bareframe` is built for one purpose: create components once and reuse them everywhere.
+
+- Lightweight by design
+- Zero runtime dependencies
+- Native Web Components approach
+- Reusable across multiple internal and external apps
+- Easy to extend without framework lock-in
+
+## Philosophy
+
+- Keep components small and focused
+- Favor native browser APIs
+- Prioritize portability and long-term maintainability
+- Build reusable primitives first, then compose upward
+
+## Package Goals
+
+- Provide a clean foundation for shared UI components
+- Reduce duplication between projects
+- Keep implementation straightforward and easy to reason about
+
+## Example
+
+```js
+import './src/button/button.js';
+import './src/accordion/accordion.js';
+```
+
+```html
+<bf-button label="Save" variant="primary"></bf-button>
+<bf-button label="Cancel" variant="secondary"></bf-button>
+
+<bf-accordion>
+	<section title="Section One" open>
+		<p>Accordion content one.</p>
+	</section>
+	<section title="Section Two">
+		<p>Accordion content two.</p>
+	</section>
+</bf-accordion>
+```
+
+## Theming (CSS Variables)
+
+`bf-button` is themeable through CSS custom properties on the host element.
+
+```css
+bf-button {
+	--bf-button-border-radius: 999px;
+	--bf-button-padding-y: 0.6rem;
+	--bf-button-padding-x: 1.1rem;
+	--bf-button-primary-bg: #0f766e;
+	--bf-button-primary-color: #f0fdfa;
+	--bf-button-focus-outline-color: #5eead4;
+}
+
+bf-button[variant='secondary'] {
+	--bf-button-secondary-bg: #ecfeff;
+	--bf-button-secondary-color: #115e59;
+	--bf-button-secondary-border-color: #14b8a6;
+}
+```
+
+## Built-in Themes
+
+Theme files live in `themes/`:
+
+- `themes/light.css`
+- `themes/dark.css`
+- `themes/sprint.css`
+- `themes/system.css` (follows OS preference with `prefers-color-scheme`)
+
+Use `system` as the default theme for apps:
+
+```html
+<link rel="stylesheet" href="./themes/system.css" />
+```
+
+Load one theme globally:
+
+```html
+<link rel="stylesheet" href="./themes/dark.css" />
+```
+
+Or use system theme:
+
+```html
+<link rel="stylesheet" href="./themes/system.css" />
+```
+
+Optional runtime switch:
+
+```js
+document.documentElement.setAttribute('data-bf-theme', 'sprint');
+```
+
+## Theme Standard For All Components
+
+All components should be fully replaceable through CSS variables:
+
+- Component tokens: `--bf-<component>-*`
+- Global theme tokens: `--bf-theme-*`
+- Component defaults should map to global tokens, then fall back
+
+Reference:
+
+- `docs/theming-contract.md`
+- `src/_template/component.css`
+- `src/_template/component.js`
+
+## Button Test Example
+
+An example test harness is included at `examples/button-test.html`.
+
+From the project root, run:
+
+```bash
+python3 -m http.server 8080
+```
+
+Then open:
+
+`http://localhost:8080/examples/button-test.html`
+
+This page lets you:
+
+- Click `bf-button` components and inspect emitted `bf-click` event payloads
+- Run quick checks for element registration, label rendering, and variant classes
+
+## Accordion Test Example
+
+An example test harness is included at `examples/accordion-test.html`.
+
+Open:
+
+`http://localhost:8080/examples/accordion-test.html`
+
+This page lets you:
+
+- Test accordion open/close behavior
+- Inspect `bf-accordion-toggle` event payloads
+- Switch `light`, `dark`, `sprint`, and `system` themes
+
+## Full Component Examples
+
+All generated component demos are listed at:
+
+`http://localhost:8080/examples/index.html`
+
+## Build Package
+
+```bash
+npm run build
+npm run pack:preview
+```
+
+## Status
+
+Early development. API and component patterns may evolve as the system grows.
+
+## License
+
+MIT

package/dist/components/accordion.css

@@ -0,0 +1,107 @@
+:host {
+	--bf-accordion-font: var(--bf-theme-font-family, inherit);
+	--bf-accordion-gap: var(--bf-theme-space-2, 0.5rem);
+	--bf-accordion-radius: var(--bf-theme-radius-md, 8px);
+	--bf-accordion-border-width: var(--bf-theme-border-width, 1px);
+	--bf-accordion-border-style: var(--bf-theme-border-style, solid);
+	--bf-accordion-border-color: var(--bf-theme-accordion-border-color, #cbd5e1);
+	--bf-accordion-bg: var(--bf-theme-accordion-bg, #ffffff);
+	--bf-accordion-color: var(--bf-theme-accordion-color, #0f172a);
+	--bf-accordion-trigger-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-accordion-trigger-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-accordion-panel-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-accordion-panel-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-accordion-trigger-bg: var(--bf-theme-accordion-trigger-bg, #f8fafc);
+	--bf-accordion-trigger-hover-bg: var(
+		--bf-theme-accordion-trigger-hover-bg,
+		#f1f5f9
+	);
+	--bf-accordion-trigger-open-bg: var(
+		--bf-theme-accordion-trigger-open-bg,
+		#eff6ff
+	);
+	--bf-accordion-trigger-color: var(--bf-theme-accordion-trigger-color, #0f172a);
+	--bf-accordion-panel-bg: var(--bf-theme-accordion-panel-bg, #ffffff);
+	--bf-accordion-focus-ring-width: var(--bf-theme-focus-ring-width, 2px);
+	--bf-accordion-focus-ring-style: var(--bf-theme-focus-ring-style, solid);
+	--bf-accordion-focus-ring-color: var(--bf-theme-focus-ring-color, #93c5fd);
+	--bf-accordion-focus-ring-offset: var(--bf-theme-focus-ring-offset, 2px);
+	--bf-accordion-chevron-color: var(--bf-theme-accordion-chevron-color, #475569);
+	--bf-accordion-transition:
+		var(--bf-theme-transition-bg, background-color 120ms ease),
+		var(--bf-theme-transition-color, color 120ms ease),
+		var(--bf-theme-transition-border, border-color 120ms ease);
+
+	display: block;
+	font: var(--bf-accordion-font);
+	color: var(--bf-accordion-color);
+}
+
+.accordion {
+	display: grid;
+	gap: var(--bf-accordion-gap);
+}
+
+.accordion-item {
+	border-width: var(--bf-accordion-border-width);
+	border-style: var(--bf-accordion-border-style);
+	border-color: var(--bf-accordion-border-color);
+	border-radius: var(--bf-accordion-radius);
+	background: var(--bf-accordion-bg);
+	overflow: clip;
+}
+
+.accordion-trigger {
+	list-style: none;
+	cursor: pointer;
+	padding: var(--bf-accordion-trigger-padding-y)
+		var(--bf-accordion-trigger-padding-x);
+	background: var(--bf-accordion-trigger-bg);
+	color: var(--bf-accordion-trigger-color);
+	transition: var(--bf-accordion-transition);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.accordion-trigger::-webkit-details-marker {
+	display: none;
+}
+
+.accordion-trigger::after {
+	content: '+';
+	color: var(--bf-accordion-chevron-color);
+	font-weight: 700;
+	line-height: 1;
+}
+
+.accordion-item[open] > .accordion-trigger::after {
+	content: '-';
+}
+
+.accordion-trigger:hover {
+	background: var(--bf-accordion-trigger-hover-bg);
+}
+
+.accordion-trigger:focus-visible {
+	outline-width: var(--bf-accordion-focus-ring-width);
+	outline-style: var(--bf-accordion-focus-ring-style);
+	outline-color: var(--bf-accordion-focus-ring-color);
+	outline-offset: calc(var(--bf-accordion-focus-ring-offset) * -1);
+}
+
+.accordion-item[open] > .accordion-trigger {
+	background: var(--bf-accordion-trigger-open-bg);
+}
+
+.accordion-panel {
+	padding: var(--bf-accordion-panel-padding-y) var(--bf-accordion-panel-padding-x);
+	background: var(--bf-accordion-panel-bg);
+	border-top-width: var(--bf-accordion-border-width);
+	border-top-style: var(--bf-accordion-border-style);
+	border-top-color: var(--bf-accordion-border-color);
+}
+
+.accordion-panel ::slotted(*) {
+	margin: 0;
+}

package/dist/components/accordion.js

@@ -0,0 +1,92 @@
+class BfAccordion extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		this._details = [];
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./accordion.css', import.meta.url);
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = cssUrl.href;
+
+		const container = document.createElement('div');
+		container.className = 'accordion';
+		container.setAttribute('part', 'accordion');
+
+		const items = [...this.children].filter(
+			(node) => node.nodeType === Node.ELEMENT_NODE,
+		);
+
+		items.forEach((item, index) => {
+			const title =
+				item.getAttribute('title') ||
+				item.getAttribute('data-title') ||
+				`Section ${index + 1}`;
+			const slotName = `item-${index + 1}`;
+			const openByDefault = item.hasAttribute('open');
+
+			item.setAttribute('slot', slotName);
+
+			const details = document.createElement('details');
+			details.className = 'accordion-item';
+			details.setAttribute('part', 'item');
+			if (openByDefault) {
+				details.open = true;
+			}
+
+			const summary = document.createElement('summary');
+			summary.className = 'accordion-trigger';
+			summary.setAttribute('part', 'trigger');
+			summary.textContent = title;
+
+			const panel = document.createElement('div');
+			panel.className = 'accordion-panel';
+			panel.setAttribute('part', 'panel');
+
+			const slot = document.createElement('slot');
+			slot.name = slotName;
+			panel.append(slot);
+
+			details.append(summary, panel);
+			container.append(details);
+			this._details.push(details);
+
+			details.addEventListener('toggle', () => {
+				if (!this.multiple && details.open) {
+					this._details.forEach((other) => {
+						if (other !== details) {
+							other.open = false;
+						}
+					});
+				}
+
+				this.dispatchEvent(
+					new CustomEvent('bf-accordion-toggle', {
+						bubbles: true,
+						composed: true,
+						detail: {
+							index,
+							title,
+							open: details.open,
+						},
+					}),
+				);
+			});
+		});
+
+		this.shadowRoot.replaceChildren(link, container);
+	}
+
+	get multiple() {
+		return this.hasAttribute('multiple');
+	}
+}
+
+customElements.define('bf-accordion', BfAccordion);

package/dist/components/action-list.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-action-list-font: var(--bf-theme-font-family, inherit);
+	--bf-action-list-radius: var(--bf-theme-radius-md, 8px);
+	--bf-action-list-border-width: var(--bf-theme-border-width, 1px);
+	--bf-action-list-border-style: var(--bf-theme-border-style, solid);
+	--bf-action-list-border-color: var(--bf-theme-action-list-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-action-list-bg: var(--bf-theme-action-list-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-action-list-color: var(--bf-theme-action-list-color, var(--bf-theme-text-1, #0f172a));
+	--bf-action-list-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-action-list-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-action-list-transition:
+		var(--bf-theme-transition-bg, background-color 120ms ease),
+		var(--bf-theme-transition-color, color 120ms ease),
+		var(--bf-theme-transition-border, border-color 120ms ease);
+
+	display: block;
+	font: var(--bf-action-list-font);
+	color: var(--bf-action-list-color);
+}
+
+.root {
+	background: var(--bf-action-list-bg);
+	color: var(--bf-action-list-color);
+	border-width: var(--bf-action-list-border-width);
+	border-style: var(--bf-action-list-border-style);
+	border-color: var(--bf-action-list-border-color);
+	border-radius: var(--bf-action-list-radius);
+	padding: var(--bf-action-list-padding-y) var(--bf-action-list-padding-x);
+	transition: var(--bf-action-list-transition);
+}

package/dist/components/action-list.js

@@ -0,0 +1,31 @@
+class BfActionList extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./action-list.css', import.meta.url);
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = cssUrl.href;
+
+		const root = document.createElement('div');
+		root.className = 'root';
+		root.setAttribute('part', 'root');
+		root.innerHTML = '<slot></slot>';
+
+		if (!this.innerHTML.trim()) {
+			root.textContent = 'action list';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-action-list', BfActionList);

package/dist/components/alert.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-alert-font: var(--bf-theme-font-family, inherit);
+	--bf-alert-radius: var(--bf-theme-radius-md, 8px);
+	--bf-alert-border-width: var(--bf-theme-border-width, 1px);
+	--bf-alert-border-style: var(--bf-theme-border-style, solid);
+	--bf-alert-border-color: var(--bf-theme-alert-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-alert-bg: var(--bf-theme-alert-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-alert-color: var(--bf-theme-alert-color, var(--bf-theme-text-1, #0f172a));
+	--bf-alert-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-alert-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-alert-transition:
+		var(--bf-theme-transition-bg, background-color 120ms ease),
+		var(--bf-theme-transition-color, color 120ms ease),
+		var(--bf-theme-transition-border, border-color 120ms ease);
+
+	display: block;
+	font: var(--bf-alert-font);
+	color: var(--bf-alert-color);
+}
+
+.root {
+	background: var(--bf-alert-bg);
+	color: var(--bf-alert-color);
+	border-width: var(--bf-alert-border-width);
+	border-style: var(--bf-alert-border-style);
+	border-color: var(--bf-alert-border-color);
+	border-radius: var(--bf-alert-radius);
+	padding: var(--bf-alert-padding-y) var(--bf-alert-padding-x);
+	transition: var(--bf-alert-transition);
+}

package/dist/components/alert.js

@@ -0,0 +1,31 @@
+class BfAlert extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./alert.css', import.meta.url);
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = cssUrl.href;
+
+		const root = document.createElement('div');
+		root.className = 'root';
+		root.setAttribute('part', 'root');
+		root.innerHTML = '<slot></slot>';
+
+		if (!this.innerHTML.trim()) {
+			root.textContent = 'alert';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-alert', BfAlert);

package/dist/components/anchor.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-anchor-font: var(--bf-theme-font-family, inherit);
+	--bf-anchor-radius: var(--bf-theme-radius-md, 8px);
+	--bf-anchor-border-width: var(--bf-theme-border-width, 1px);
+	--bf-anchor-border-style: var(--bf-theme-border-style, solid);
+	--bf-anchor-border-color: var(--bf-theme-anchor-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-anchor-bg: var(--bf-theme-anchor-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-anchor-color: var(--bf-theme-anchor-color, var(--bf-theme-text-1, #0f172a));
+	--bf-anchor-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-anchor-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-anchor-transition:
+		var(--bf-theme-transition-bg, background-color 120ms ease),
+		var(--bf-theme-transition-color, color 120ms ease),
+		var(--bf-theme-transition-border, border-color 120ms ease);
+
+	display: block;
+	font: var(--bf-anchor-font);
+	color: var(--bf-anchor-color);
+}
+
+.root {
+	background: var(--bf-anchor-bg);
+	color: var(--bf-anchor-color);
+	border-width: var(--bf-anchor-border-width);
+	border-style: var(--bf-anchor-border-style);
+	border-color: var(--bf-anchor-border-color);
+	border-radius: var(--bf-anchor-radius);
+	padding: var(--bf-anchor-padding-y) var(--bf-anchor-padding-x);
+	transition: var(--bf-anchor-transition);
+}

package/dist/components/anchor.js

@@ -0,0 +1,31 @@
+class BfAnchor extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./anchor.css', import.meta.url);
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = cssUrl.href;
+
+		const root = document.createElement('div');
+		root.className = 'root';
+		root.setAttribute('part', 'root');
+		root.innerHTML = '<slot></slot>';
+
+		if (!this.innerHTML.trim()) {
+			root.textContent = 'anchor';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-anchor', BfAnchor);

package/dist/components/autocomplete.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-autocomplete-font: var(--bf-theme-font-family, inherit);
+	--bf-autocomplete-radius: var(--bf-theme-radius-md, 8px);
+	--bf-autocomplete-border-width: var(--bf-theme-border-width, 1px);
+	--bf-autocomplete-border-style: var(--bf-theme-border-style, solid);
+	--bf-autocomplete-border-color: var(--bf-theme-autocomplete-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-autocomplete-bg: var(--bf-theme-autocomplete-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-autocomplete-color: var(--bf-theme-autocomplete-color, var(--bf-theme-text-1, #0f172a));
+	--bf-autocomplete-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-autocomplete-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-autocomplete-transition:
+		var(--bf-theme-transition-bg, background-color 120ms ease),
+		var(--bf-theme-transition-color, color 120ms ease),
+		var(--bf-theme-transition-border, border-color 120ms ease);
+
+	display: block;
+	font: var(--bf-autocomplete-font);
+	color: var(--bf-autocomplete-color);
+}
+
+.root {
+	background: var(--bf-autocomplete-bg);
+	color: var(--bf-autocomplete-color);
+	border-width: var(--bf-autocomplete-border-width);
+	border-style: var(--bf-autocomplete-border-style);
+	border-color: var(--bf-autocomplete-border-color);
+	border-radius: var(--bf-autocomplete-radius);
+	padding: var(--bf-autocomplete-padding-y) var(--bf-autocomplete-padding-x);
+	transition: var(--bf-autocomplete-transition);
+}

package/dist/components/autocomplete.js

@@ -0,0 +1,31 @@
+class BfAutocomplete extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./autocomplete.css', import.meta.url);
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = cssUrl.href;
+
+		const root = document.createElement('div');
+		root.className = 'root';
+		root.setAttribute('part', 'root');
+		root.innerHTML = '<slot></slot>';
+
+		if (!this.innerHTML.trim()) {
+			root.textContent = 'autocomplete';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-autocomplete', BfAutocomplete);

package/dist/components/avatar.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-avatar-font: var(--bf-theme-font-family, inherit);
+	--bf-avatar-radius: var(--bf-theme-radius-md, 8px);
+	--bf-avatar-border-width: var(--bf-theme-border-width, 1px);
+	--bf-avatar-border-style: var(--bf-theme-border-style, solid);
+	--bf-avatar-border-color: var(--bf-theme-avatar-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-avatar-bg: var(--bf-theme-avatar-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-avatar-color: var(--bf-theme-avatar-color, var(--bf-theme-text-1, #0f172a));
+	--bf-avatar-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-avatar-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-avatar-transition:
+		var(--bf-theme-transition-bg, background-color 120ms ease),
+		var(--bf-theme-transition-color, color 120ms ease),
+		var(--bf-theme-transition-border, border-color 120ms ease);
+
+	display: block;
+	font: var(--bf-avatar-font);
+	color: var(--bf-avatar-color);
+}
+
+.root {
+	background: var(--bf-avatar-bg);
+	color: var(--bf-avatar-color);
+	border-width: var(--bf-avatar-border-width);
+	border-style: var(--bf-avatar-border-style);
+	border-color: var(--bf-avatar-border-color);
+	border-radius: var(--bf-avatar-radius);
+	padding: var(--bf-avatar-padding-y) var(--bf-avatar-padding-x);
+	transition: var(--bf-avatar-transition);
+}