bareframe 0.1.0

package/dist/components/sparkline.js

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

package/dist/components/split-button.css

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

package/dist/components/split-button.js

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

package/dist/components/splitter.css

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

package/dist/components/splitter.js

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

package/dist/components/stack.css

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

package/dist/components/stack.js

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

package/dist/components/stepper.css

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

package/dist/components/stepper.js

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

package/dist/components/switch.css

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

package/dist/components/switch.js

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

package/dist/components/tab-group.css

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

package/dist/components/tab-group.js

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

package/dist/components/tab.css

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

package/dist/components/tab.js

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

package/dist/components/table.css

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

package/dist/components/table.js

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

package/dist/components/tag.css

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

package/dist/components/tag.js

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

package/dist/components/textarea.css

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

package/dist/components/textarea.js

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