bareframe 0.1.0

package/dist/components/calendar.css

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

package/dist/components/calendar.js

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

package/dist/components/canvas.css

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

package/dist/components/canvas.js

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

package/dist/components/card.css

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

package/dist/components/card.js

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

package/dist/components/carousel.css

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

package/dist/components/carousel.js

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

package/dist/components/chart.css

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

package/dist/components/chart.js

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

package/dist/components/checkbox.css

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

package/dist/components/checkbox.js

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

package/dist/components/chip.css

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

package/dist/components/chip.js

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

package/dist/components/code-block.css

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

package/dist/components/code-block.js

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

package/dist/components/color-picker.css

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

package/dist/components/color-picker.js

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

package/dist/components/combobox.css

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

package/dist/components/combobox.js

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

package/dist/components/command-palette.css

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