bareframe 0.1.0

package/dist/components/avatar.js

@@ -0,0 +1,31 @@
+class BfAvatar extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./avatar.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 = 'avatar';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-avatar', BfAvatar);

package/dist/components/badge.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-badge-font: var(--bf-theme-font-family, inherit);
+	--bf-badge-radius: var(--bf-theme-radius-md, 8px);
+	--bf-badge-border-width: var(--bf-theme-border-width, 1px);
+	--bf-badge-border-style: var(--bf-theme-border-style, solid);
+	--bf-badge-border-color: var(--bf-theme-badge-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-badge-bg: var(--bf-theme-badge-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-badge-color: var(--bf-theme-badge-color, var(--bf-theme-text-1, #0f172a));
+	--bf-badge-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-badge-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-badge-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-badge-font);
+	color: var(--bf-badge-color);
+}
+
+.root {
+	background: var(--bf-badge-bg);
+	color: var(--bf-badge-color);
+	border-width: var(--bf-badge-border-width);
+	border-style: var(--bf-badge-border-style);
+	border-color: var(--bf-badge-border-color);
+	border-radius: var(--bf-badge-radius);
+	padding: var(--bf-badge-padding-y) var(--bf-badge-padding-x);
+	transition: var(--bf-badge-transition);
+}

package/dist/components/badge.js

@@ -0,0 +1,31 @@
+class BfBadge extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./badge.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 = 'badge';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-badge', BfBadge);

package/dist/components/banner.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-banner-font: var(--bf-theme-font-family, inherit);
+	--bf-banner-radius: var(--bf-theme-radius-md, 8px);
+	--bf-banner-border-width: var(--bf-theme-border-width, 1px);
+	--bf-banner-border-style: var(--bf-theme-border-style, solid);
+	--bf-banner-border-color: var(--bf-theme-banner-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-banner-bg: var(--bf-theme-banner-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-banner-color: var(--bf-theme-banner-color, var(--bf-theme-text-1, #0f172a));
+	--bf-banner-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-banner-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-banner-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-banner-font);
+	color: var(--bf-banner-color);
+}
+
+.root {
+	background: var(--bf-banner-bg);
+	color: var(--bf-banner-color);
+	border-width: var(--bf-banner-border-width);
+	border-style: var(--bf-banner-border-style);
+	border-color: var(--bf-banner-border-color);
+	border-radius: var(--bf-banner-radius);
+	padding: var(--bf-banner-padding-y) var(--bf-banner-padding-x);
+	transition: var(--bf-banner-transition);
+}

package/dist/components/banner.js

@@ -0,0 +1,31 @@
+class BfBanner extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./banner.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 = 'banner';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-banner', BfBanner);

package/dist/components/bar-chart.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-bar-chart-font: var(--bf-theme-font-family, inherit);
+	--bf-bar-chart-radius: var(--bf-theme-radius-md, 8px);
+	--bf-bar-chart-border-width: var(--bf-theme-border-width, 1px);
+	--bf-bar-chart-border-style: var(--bf-theme-border-style, solid);
+	--bf-bar-chart-border-color: var(--bf-theme-bar-chart-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-bar-chart-bg: var(--bf-theme-bar-chart-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-bar-chart-color: var(--bf-theme-bar-chart-color, var(--bf-theme-text-1, #0f172a));
+	--bf-bar-chart-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-bar-chart-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-bar-chart-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-bar-chart-font);
+	color: var(--bf-bar-chart-color);
+}
+
+.root {
+	background: var(--bf-bar-chart-bg);
+	color: var(--bf-bar-chart-color);
+	border-width: var(--bf-bar-chart-border-width);
+	border-style: var(--bf-bar-chart-border-style);
+	border-color: var(--bf-bar-chart-border-color);
+	border-radius: var(--bf-bar-chart-radius);
+	padding: var(--bf-bar-chart-padding-y) var(--bf-bar-chart-padding-x);
+	transition: var(--bf-bar-chart-transition);
+}

package/dist/components/bar-chart.js

@@ -0,0 +1,31 @@
+class BfBarChart extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./bar-chart.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 = 'bar chart';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-bar-chart', BfBarChart);

package/dist/components/bottom-navigation.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-bottom-navigation-font: var(--bf-theme-font-family, inherit);
+	--bf-bottom-navigation-radius: var(--bf-theme-radius-md, 8px);
+	--bf-bottom-navigation-border-width: var(--bf-theme-border-width, 1px);
+	--bf-bottom-navigation-border-style: var(--bf-theme-border-style, solid);
+	--bf-bottom-navigation-border-color: var(--bf-theme-bottom-navigation-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-bottom-navigation-bg: var(--bf-theme-bottom-navigation-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-bottom-navigation-color: var(--bf-theme-bottom-navigation-color, var(--bf-theme-text-1, #0f172a));
+	--bf-bottom-navigation-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-bottom-navigation-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-bottom-navigation-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-bottom-navigation-font);
+	color: var(--bf-bottom-navigation-color);
+}
+
+.root {
+	background: var(--bf-bottom-navigation-bg);
+	color: var(--bf-bottom-navigation-color);
+	border-width: var(--bf-bottom-navigation-border-width);
+	border-style: var(--bf-bottom-navigation-border-style);
+	border-color: var(--bf-bottom-navigation-border-color);
+	border-radius: var(--bf-bottom-navigation-radius);
+	padding: var(--bf-bottom-navigation-padding-y) var(--bf-bottom-navigation-padding-x);
+	transition: var(--bf-bottom-navigation-transition);
+}

package/dist/components/bottom-navigation.js

@@ -0,0 +1,31 @@
+class BfBottomNavigation extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./bottom-navigation.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 = 'bottom navigation';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-bottom-navigation', BfBottomNavigation);

package/dist/components/bottom-sheet.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-bottom-sheet-font: var(--bf-theme-font-family, inherit);
+	--bf-bottom-sheet-radius: var(--bf-theme-radius-md, 8px);
+	--bf-bottom-sheet-border-width: var(--bf-theme-border-width, 1px);
+	--bf-bottom-sheet-border-style: var(--bf-theme-border-style, solid);
+	--bf-bottom-sheet-border-color: var(--bf-theme-bottom-sheet-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-bottom-sheet-bg: var(--bf-theme-bottom-sheet-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-bottom-sheet-color: var(--bf-theme-bottom-sheet-color, var(--bf-theme-text-1, #0f172a));
+	--bf-bottom-sheet-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-bottom-sheet-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-bottom-sheet-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-bottom-sheet-font);
+	color: var(--bf-bottom-sheet-color);
+}
+
+.root {
+	background: var(--bf-bottom-sheet-bg);
+	color: var(--bf-bottom-sheet-color);
+	border-width: var(--bf-bottom-sheet-border-width);
+	border-style: var(--bf-bottom-sheet-border-style);
+	border-color: var(--bf-bottom-sheet-border-color);
+	border-radius: var(--bf-bottom-sheet-radius);
+	padding: var(--bf-bottom-sheet-padding-y) var(--bf-bottom-sheet-padding-x);
+	transition: var(--bf-bottom-sheet-transition);
+}

package/dist/components/bottom-sheet.js

@@ -0,0 +1,31 @@
+class BfBottomSheet extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./bottom-sheet.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 = 'bottom sheet';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-bottom-sheet', BfBottomSheet);

package/dist/components/breadcrumb.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-breadcrumb-font: var(--bf-theme-font-family, inherit);
+	--bf-breadcrumb-radius: var(--bf-theme-radius-md, 8px);
+	--bf-breadcrumb-border-width: var(--bf-theme-border-width, 1px);
+	--bf-breadcrumb-border-style: var(--bf-theme-border-style, solid);
+	--bf-breadcrumb-border-color: var(--bf-theme-breadcrumb-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-breadcrumb-bg: var(--bf-theme-breadcrumb-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-breadcrumb-color: var(--bf-theme-breadcrumb-color, var(--bf-theme-text-1, #0f172a));
+	--bf-breadcrumb-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-breadcrumb-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-breadcrumb-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-breadcrumb-font);
+	color: var(--bf-breadcrumb-color);
+}
+
+.root {
+	background: var(--bf-breadcrumb-bg);
+	color: var(--bf-breadcrumb-color);
+	border-width: var(--bf-breadcrumb-border-width);
+	border-style: var(--bf-breadcrumb-border-style);
+	border-color: var(--bf-breadcrumb-border-color);
+	border-radius: var(--bf-breadcrumb-radius);
+	padding: var(--bf-breadcrumb-padding-y) var(--bf-breadcrumb-padding-x);
+	transition: var(--bf-breadcrumb-transition);
+}

package/dist/components/breadcrumb.js

@@ -0,0 +1,31 @@
+class BfBreadcrumb extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./breadcrumb.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 = 'breadcrumb';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-breadcrumb', BfBreadcrumb);

package/dist/components/button-group.css

@@ -0,0 +1,30 @@
+:host {
+	--bf-button-group-font: var(--bf-theme-font-family, inherit);
+	--bf-button-group-radius: var(--bf-theme-radius-md, 8px);
+	--bf-button-group-border-width: var(--bf-theme-border-width, 1px);
+	--bf-button-group-border-style: var(--bf-theme-border-style, solid);
+	--bf-button-group-border-color: var(--bf-theme-button-group-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-button-group-bg: var(--bf-theme-button-group-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-button-group-color: var(--bf-theme-button-group-color, var(--bf-theme-text-1, #0f172a));
+	--bf-button-group-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-button-group-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-button-group-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-button-group-font);
+	color: var(--bf-button-group-color);
+}
+
+.root {
+	background: var(--bf-button-group-bg);
+	color: var(--bf-button-group-color);
+	border-width: var(--bf-button-group-border-width);
+	border-style: var(--bf-button-group-border-style);
+	border-color: var(--bf-button-group-border-color);
+	border-radius: var(--bf-button-group-radius);
+	padding: var(--bf-button-group-padding-y) var(--bf-button-group-padding-x);
+	transition: var(--bf-button-group-transition);
+}

package/dist/components/button-group.js

@@ -0,0 +1,31 @@
+class BfButtonGroup extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./button-group.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 = 'button group';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+	}
+}
+
+customElements.define('bf-button-group', BfButtonGroup);

package/dist/components/button.css

@@ -0,0 +1,136 @@
+:host {
+	--bf-button-font: var(--bf-theme-font-family, inherit);
+	--bf-button-border-width: var(--bf-theme-border-width, 1px);
+	--bf-button-border-style: var(--bf-theme-border-style, solid);
+	--bf-button-border-radius: var(--bf-theme-radius-md, 6px);
+	--bf-button-padding-y: var(--bf-theme-space-2, 0.5rem);
+	--bf-button-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-button-cursor: var(--bf-theme-cursor-button, pointer);
+	--bf-button-opacity-hover: var(--bf-theme-opacity-hover, 0.95);
+	--bf-button-active-translate-y: var(--bf-theme-active-translate-y, 1px);
+	--bf-button-focus-outline-width: var(--bf-theme-focus-ring-width, 2px);
+	--bf-button-focus-outline-style: var(--bf-theme-focus-ring-style, solid);
+	--bf-button-focus-outline-color: var(--bf-theme-focus-ring-color, #93c5fd);
+	--bf-button-focus-outline-offset: var(--bf-theme-focus-ring-offset, 2px);
+	--bf-button-transition:
+		var(--bf-theme-transition-transform, transform 120ms ease),
+		var(--bf-theme-transition-opacity, opacity 120ms ease),
+		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);
+
+	--bf-button-primary-bg: var(--bf-theme-button-primary-bg, #1d4ed8);
+	--bf-button-primary-color: var(--bf-theme-button-primary-color, #ffffff);
+	--bf-button-primary-border-color: var(
+		--bf-theme-button-primary-border-color,
+		transparent
+	);
+	--bf-button-primary-hover-bg: var(--bf-button-primary-bg);
+	--bf-button-primary-hover-color: var(--bf-button-primary-color);
+	--bf-button-primary-hover-border-color: var(--bf-button-primary-border-color);
+	--bf-button-primary-active-bg: var(--bf-button-primary-bg);
+	--bf-button-primary-active-color: var(--bf-button-primary-color);
+	--bf-button-primary-active-border-color: var(
+		--bf-button-primary-border-color
+	);
+
+	--bf-button-secondary-bg: var(--bf-theme-button-secondary-bg, #ffffff);
+	--bf-button-secondary-color: var(--bf-theme-button-secondary-color, #1d4ed8);
+	--bf-button-secondary-border-color: var(
+		--bf-theme-button-secondary-border-color,
+		#1d4ed8
+	);
+	--bf-button-secondary-hover-bg: var(--bf-button-secondary-bg);
+	--bf-button-secondary-hover-color: var(--bf-button-secondary-color);
+	--bf-button-secondary-hover-border-color: var(
+		--bf-button-secondary-border-color
+	);
+	--bf-button-secondary-active-bg: var(--bf-button-secondary-bg);
+	--bf-button-secondary-active-color: var(--bf-button-secondary-color);
+	--bf-button-secondary-active-border-color: var(
+		--bf-button-secondary-border-color
+	);
+
+	display: inline-block;
+}
+
+button {
+	--_bf-button-bg: var(--bf-button-primary-bg);
+	--_bf-button-color: var(--bf-button-primary-color);
+	--_bf-button-border-color: var(--bf-button-primary-border-color);
+	--_bf-button-hover-bg: var(--bf-button-primary-hover-bg);
+	--_bf-button-hover-color: var(--bf-button-primary-hover-color);
+	--_bf-button-hover-border-color: var(--bf-button-primary-hover-border-color);
+	--_bf-button-active-bg: var(--bf-button-primary-active-bg);
+	--_bf-button-active-color: var(--bf-button-primary-active-color);
+	--_bf-button-active-border-color: var(
+		--bf-button-primary-active-border-color
+	);
+
+	font: var(--bf-button-font);
+	border-width: var(--bf-button-border-width);
+	border-style: var(--bf-button-border-style);
+	border-color: var(--_bf-button-border-color);
+	border-radius: var(--bf-button-border-radius);
+	cursor: var(--bf-button-cursor);
+	padding: var(--bf-button-padding-y) var(--bf-button-padding-x);
+	transition: var(--bf-button-transition);
+	background: var(--_bf-button-bg);
+	color: var(--_bf-button-color);
+}
+
+button:hover {
+	opacity: var(--bf-button-opacity-hover);
+	background: var(--_bf-button-hover-bg);
+	color: var(--_bf-button-hover-color);
+	border-color: var(--_bf-button-hover-border-color);
+}
+
+button:active {
+	transform: translateY(var(--bf-button-active-translate-y));
+	background: var(--_bf-button-active-bg);
+	color: var(--_bf-button-active-color);
+	border-color: var(--_bf-button-active-border-color);
+}
+
+button:focus-visible {
+	outline-width: var(--bf-button-focus-outline-width);
+	outline-style: var(--bf-button-focus-outline-style);
+	outline-color: var(--bf-button-focus-outline-color);
+	outline-offset: var(--bf-button-focus-outline-offset);
+}
+
+button:disabled {
+	opacity: var(--bf-button-disabled-opacity, 0.55);
+	cursor: var(--bf-button-disabled-cursor, not-allowed);
+}
+
+button.primary {
+	--_bf-button-bg: var(--bf-button-primary-bg);
+	--_bf-button-color: var(--bf-button-primary-color);
+	--_bf-button-border-color: var(--bf-button-primary-border-color);
+	--_bf-button-hover-bg: var(--bf-button-primary-hover-bg);
+	--_bf-button-hover-color: var(--bf-button-primary-hover-color);
+	--_bf-button-hover-border-color: var(--bf-button-primary-hover-border-color);
+	--_bf-button-active-bg: var(--bf-button-primary-active-bg);
+	--_bf-button-active-color: var(--bf-button-primary-active-color);
+	--_bf-button-active-border-color: var(
+		--bf-button-primary-active-border-color
+	);
+}
+
+button.secondary {
+	--_bf-button-bg: var(--bf-button-secondary-bg);
+	--_bf-button-color: var(--bf-button-secondary-color);
+	--_bf-button-border-color: var(--bf-button-secondary-border-color);
+	--_bf-button-hover-bg: var(--bf-button-secondary-hover-bg);
+	--_bf-button-hover-color: var(--bf-button-secondary-hover-color);
+	--_bf-button-hover-border-color: var(
+		--bf-button-secondary-hover-border-color
+	);
+	--_bf-button-active-bg: var(--bf-button-secondary-active-bg);
+	--_bf-button-active-color: var(--bf-button-secondary-active-color);
+	--_bf-button-active-border-color: var(
+		--bf-button-secondary-active-border-color
+	);
+}

package/dist/components/button.js

@@ -0,0 +1,42 @@
+class BfButton extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		const label = this.getAttribute('label') || 'Button';
+		const variant = this.getAttribute('variant') || 'primary';
+		const cssUrl = new URL('./button.css', import.meta.url);
+
+		this.shadowRoot.innerHTML = '';
+
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = cssUrl.href;
+
+		const button = document.createElement('button');
+		button.className = variant;
+		button.type = 'button';
+		button.textContent = label;
+		button.append(document.createElement('slot'));
+
+		this.shadowRoot.append(link, button);
+
+		button.addEventListener('click', () => {
+			this.dispatchEvent(
+				new CustomEvent('bf-click', {
+					bubbles: true,
+					composed: true,
+					detail: {
+						label,
+						variant,
+						at: new Date().toISOString(),
+					},
+				}),
+			);
+		});
+	}
+}
+
+customElements.define('bf-button', BfButton);