bareframe 0.1.0

package/dist/components/list-item.css

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

package/dist/components/list-item.js

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

package/dist/components/list.css

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

package/dist/components/list.js

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

package/dist/components/loading-indicator.css

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

package/dist/components/loading-indicator.js

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

package/dist/components/map.css

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

package/dist/components/map.js

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

package/dist/components/menu-item.css

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

package/dist/components/menu-item.js

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

package/dist/components/menu.css

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

package/dist/components/menu.js

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

package/dist/components/message.css

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

package/dist/components/message.js

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

package/dist/components/metric-card.css

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

package/dist/components/metric-card.js

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

package/dist/components/modal.css

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

package/dist/components/modal.js

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

package/dist/components/multi-select.css

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

package/dist/components/multi-select.js

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

package/dist/components/nav.css

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