bareframe 0.1.0

package/dist/components/textfield.css

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

package/dist/components/textfield.js

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

package/dist/components/timeline.css

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

package/dist/components/timeline.js

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

package/dist/components/toast.css

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

package/dist/components/toast.js

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

package/dist/components/toggle.css

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

package/dist/components/toggle.js

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

package/dist/components/toolbar.css

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

package/dist/components/toolbar.js

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

package/dist/components/tooltip.css

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

package/dist/components/tooltip.js

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

package/dist/components/tree-view.css

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

package/dist/components/tree-view.js

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

package/dist/components/treemap.css

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

package/dist/components/treemap.js

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

package/dist/components/upload-dropzone.css

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

package/dist/components/upload-dropzone.js

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

package/dist/components/video-player.css

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

package/dist/components/video-player.js

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

package/dist/components/virtual-list.css

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