bareframe 0.1.0

package/dist/components/command-palette.js

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

package/dist/components/context-menu.css

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

package/dist/components/context-menu.js

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

package/dist/components/countdown.css

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

package/dist/components/countdown.js

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

package/dist/components/data-grid.css

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

package/dist/components/data-grid.js

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

package/dist/components/date-picker.css

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

package/dist/components/date-picker.js

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

package/dist/components/date-range-picker.css

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

package/dist/components/date-range-picker.js

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

package/dist/components/dialog.css

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

package/dist/components/dialog.js

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

package/dist/components/divider.css

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

package/dist/components/divider.js

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

package/dist/components/donut-chart.css

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

package/dist/components/donut-chart.js

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

package/dist/components/drawer.css

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

package/dist/components/drawer.js

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

package/dist/components/dropdown.css

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

package/dist/components/dropdown.js

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