bareframe 0.1.0

package/dist/components/graph.js

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

package/dist/components/grid.css

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

package/dist/components/grid.js

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

package/dist/components/header.css

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

package/dist/components/header.js

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

package/dist/components/heatmap.css

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

package/dist/components/heatmap.js

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

package/dist/components/hero.css

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

package/dist/components/hero.js

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

package/dist/components/icon.css

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

package/dist/components/icon.js

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

package/dist/components/image.css

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

package/dist/components/image.js

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

package/dist/components/input.css

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

package/dist/components/input.js

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

package/dist/components/key-value-list.css

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

package/dist/components/key-value-list.js

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

package/dist/components/line-chart.css

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

package/dist/components/line-chart.js

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

package/dist/components/link.css

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

package/dist/components/link.js

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