bareframe 0.1.0

package/dist/components/nav.js

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

package/dist/components/notification.css

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

package/dist/components/notification.js

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

package/dist/components/number-field.css

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

package/dist/components/number-field.js

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

package/dist/components/otp-input.css

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

package/dist/components/otp-input.js

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

package/dist/components/pagination.css

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

package/dist/components/pagination.js

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

package/dist/components/pie-chart.css

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

package/dist/components/pie-chart.js

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

package/dist/components/popover.css

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

package/dist/components/popover.js

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

package/dist/components/progress-bar.css

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

package/dist/components/progress-bar.js

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

package/dist/components/progress-circle.css

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

package/dist/components/progress-circle.js

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

package/dist/components/quick-actions.css

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

package/dist/components/quick-actions.js

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

package/dist/components/radio-group.css

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

package/dist/components/radio-group.js

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