bareframe 0.1.0

package/dist/components/radio.css

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

package/dist/components/radio.js

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

package/dist/components/range-slider.css

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

package/dist/components/range-slider.js

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

package/dist/components/rating.css

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

package/dist/components/rating.js

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

package/dist/components/search.css

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

package/dist/components/search.js

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

package/dist/components/segmented-control.css

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

package/dist/components/segmented-control.js

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

package/dist/components/select.css

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

package/dist/components/select.js

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

package/dist/components/sheet.css

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

package/dist/components/sheet.js

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

package/dist/components/skeleton.css

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

package/dist/components/skeleton.js

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

package/dist/components/slider.css

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

package/dist/components/slider.js

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

package/dist/components/snackbar.css

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

package/dist/components/snackbar.js

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

package/dist/components/sparkline.css

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