bareframe 0.1.0 → 0.1.2

package/dist/themes/noir.css

@@ -0,0 +1,37 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='noir'] {
+	color-scheme: dark;
+
+	--bf-theme-font-family: 'Helvetica Neue', 'Segoe UI', sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 8px;
+	--bf-theme-space-2: 0.55rem;
+	--bf-theme-space-3: 0.9rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.97;
+	--bf-theme-active-translate-y: 1px;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #f59e0b;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #111111;
+	--bf-theme-surface-2: #1a1a1a;
+	--bf-theme-text-1: #f3f3f3;
+	--bf-theme-text-2: #b0b0b0;
+	--bf-theme-border-1: #3a3a3a;
+
+	--bf-theme-button-primary-bg: #f59e0b;
+	--bf-theme-button-primary-color: #1a1200;
+	--bf-theme-button-primary-border-color: #d97706;
+	--bf-theme-button-secondary-bg: #1a1a1a;
+	--bf-theme-button-secondary-color: #f3f3f3;
+	--bf-theme-button-secondary-border-color: #505050;
+
+	--bf-theme-accordion-trigger-bg: #1f1f1f;
+	--bf-theme-accordion-trigger-hover-bg: #2a2a2a;
+	--bf-theme-accordion-trigger-open-bg: #343434;
+	--bf-theme-accordion-chevron-color: #f8b84e;
+}

package/dist/themes/oceanic.css

@@ -0,0 +1,37 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='oceanic'] {
+	color-scheme: light;
+
+	--bf-theme-font-family: 'Segoe UI', 'Trebuchet MS', sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 12px;
+	--bf-theme-space-2: 0.56rem;
+	--bf-theme-space-3: 0.92rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.96;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #0284c7;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #f3fbff;
+	--bf-theme-surface-2: #e6f4fb;
+	--bf-theme-text-1: #113246;
+	--bf-theme-text-2: #3b6278;
+	--bf-theme-border-1: #a8ccdf;
+
+	--bf-theme-button-primary-bg: #0ea5e9;
+	--bf-theme-button-primary-color: #f1fbff;
+	--bf-theme-button-primary-border-color: #0284c7;
+	--bf-theme-button-secondary-bg: #ffffff;
+	--bf-theme-button-secondary-color: #113246;
+	--bf-theme-button-secondary-border-color: #7db2ce;
+
+	--bf-theme-accordion-trigger-bg: #dff1fa;
+	--bf-theme-accordion-trigger-hover-bg: #cbe8f6;
+	--bf-theme-accordion-trigger-open-bg: #b8dff2;
+	--bf-theme-accordion-chevron-color: #1f6c94;
+}

package/dist/themes/retro.css

@@ -0,0 +1,47 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='retro'] {
+	color-scheme: light;
+
+	--bf-theme-font-family: 'Courier New', 'Lucida Console', monospace;
+	--bf-theme-border-width: 2px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 2px;
+	--bf-theme-space-2: 0.5rem;
+	--bf-theme-space-3: 0.85rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.94;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: dashed;
+	--bf-theme-focus-ring-color: #22c55e;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #fffbe6;
+	--bf-theme-surface-2: #fef3c7;
+	--bf-theme-text-1: #1f2937;
+	--bf-theme-text-2: #92400e;
+	--bf-theme-border-1: #d97706;
+
+	--bf-theme-button-primary-bg: #f97316;
+	--bf-theme-button-primary-color: #111827;
+	--bf-theme-button-primary-border-color: #9a3412;
+	--bf-theme-button-secondary-bg: #fffbe6;
+	--bf-theme-button-secondary-color: #7c2d12;
+	--bf-theme-button-secondary-border-color: #d97706;
+
+	--bf-theme-accordion-trigger-bg: #fde68a;
+	--bf-theme-accordion-trigger-hover-bg: #fcd34d;
+	--bf-theme-accordion-trigger-open-bg: #fdba74;
+	--bf-theme-accordion-chevron-color: #78350f;
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.4;
+	--bf-theme-typography-display-size: 2.2rem;
+	--bf-theme-typography-h1-size: 1.75rem;
+	--bf-theme-typography-h2-size: 1.35rem;
+	--bf-theme-typography-h3-size: 1.1rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
+}

package/dist/themes/simple.css

@@ -0,0 +1,47 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='simple'] {
+	color-scheme: light;
+
+	--bf-theme-font-family: 'Segoe UI', Arial, sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 4px;
+	--bf-theme-space-2: 0.5rem;
+	--bf-theme-space-3: 0.85rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.96;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #111111;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #ffffff;
+	--bf-theme-surface-2: #f5f5f5;
+	--bf-theme-text-1: #111111;
+	--bf-theme-text-2: #4a4a4a;
+	--bf-theme-border-1: #d0d0d0;
+
+	--bf-theme-button-primary-bg: #111111;
+	--bf-theme-button-primary-color: #ffffff;
+	--bf-theme-button-primary-border-color: #111111;
+	--bf-theme-button-secondary-bg: #ffffff;
+	--bf-theme-button-secondary-color: #111111;
+	--bf-theme-button-secondary-border-color: #b3b3b3;
+
+	--bf-theme-accordion-trigger-bg: #fafafa;
+	--bf-theme-accordion-trigger-hover-bg: #f0f0f0;
+	--bf-theme-accordion-trigger-open-bg: #e8e8e8;
+	--bf-theme-accordion-chevron-color: #3a3a3a;
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.45;
+	--bf-theme-typography-display-size: 2.1rem;
+	--bf-theme-typography-h1-size: 1.7rem;
+	--bf-theme-typography-h2-size: 1.35rem;
+	--bf-theme-typography-h3-size: 1.1rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
+}

package/dist/themes/sprint.css

@@ -1,3 +1,5 @@
+@import './layout.css';
+
 :root,
 [data-bf-theme='sprint'] {
 	color-scheme: light;
@@ -37,6 +39,16 @@
 	--bf-theme-accordion-trigger-color: #111827;
 	--bf-theme-accordion-panel-bg: #fff7ed;
 	--bf-theme-accordion-chevron-color: #9a3412;
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.4;
+	--bf-theme-typography-display-size: 2.35rem;
+	--bf-theme-typography-h1-size: 1.85rem;
+	--bf-theme-typography-h2-size: 1.45rem;
+	--bf-theme-typography-h3-size: 1.2rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.88rem;
+	--bf-theme-typography-label-size: 0.88rem;
+	--bf-theme-typography-code-size: 0.9rem;
 	/* Bareframe component defaults */
 	--bf-theme-wizard-bg: var(--bf-theme-surface-1);
 	--bf-theme-wizard-color: var(--bf-theme-text-1);

package/dist/themes/sunrise.css

@@ -0,0 +1,37 @@
+@import './layout.css';
+
+:root,
+[data-bf-theme='sunrise'] {
+	color-scheme: light;
+
+	--bf-theme-font-family: 'Avenir Next', 'Segoe UI', sans-serif;
+	--bf-theme-border-width: 1px;
+	--bf-theme-border-style: solid;
+	--bf-theme-radius-md: 12px;
+	--bf-theme-space-2: 0.56rem;
+	--bf-theme-space-3: 0.92rem;
+	--bf-theme-cursor-button: pointer;
+	--bf-theme-opacity-hover: 0.95;
+	--bf-theme-active-translate-y: 0;
+	--bf-theme-focus-ring-width: 2px;
+	--bf-theme-focus-ring-style: solid;
+	--bf-theme-focus-ring-color: #ea580c;
+	--bf-theme-focus-ring-offset: 2px;
+	--bf-theme-surface-1: #fff8f2;
+	--bf-theme-surface-2: #ffeede;
+	--bf-theme-text-1: #5a2d0c;
+	--bf-theme-text-2: #8d5a34;
+	--bf-theme-border-1: #e4b08a;
+
+	--bf-theme-button-primary-bg: #f97316;
+	--bf-theme-button-primary-color: #fff7f2;
+	--bf-theme-button-primary-border-color: #ea580c;
+	--bf-theme-button-secondary-bg: #fffaf5;
+	--bf-theme-button-secondary-color: #5a2d0c;
+	--bf-theme-button-secondary-border-color: #d79a6f;
+
+	--bf-theme-accordion-trigger-bg: #ffe3c9;
+	--bf-theme-accordion-trigger-hover-bg: #ffd4ad;
+	--bf-theme-accordion-trigger-open-bg: #ffc695;
+	--bf-theme-accordion-chevron-color: #9a4e19;
+}

package/dist/themes/system.css

@@ -1,3 +1,5 @@
+@import './layout.css';
+
 :root,
 [data-bf-theme='system'] {
 	color-scheme: light dark;
@@ -37,6 +39,16 @@
 	--bf-theme-accordion-trigger-color: var(--bf-theme-text-1);
 	--bf-theme-accordion-panel-bg: var(--bf-theme-surface-1);
 	--bf-theme-accordion-chevron-color: var(--bf-theme-text-2);
+	--bf-theme-typography-color: var(--bf-theme-text-1);
+	--bf-theme-typography-line-height: 1.45;
+	--bf-theme-typography-display-size: 2.25rem;
+	--bf-theme-typography-h1-size: 1.75rem;
+	--bf-theme-typography-h2-size: 1.375rem;
+	--bf-theme-typography-h3-size: 1.125rem;
+	--bf-theme-typography-body-size: 1rem;
+	--bf-theme-typography-caption-size: 0.875rem;
+	--bf-theme-typography-label-size: 0.875rem;
+	--bf-theme-typography-code-size: 0.9rem;
 	/* Bareframe component defaults */
 	--bf-theme-wizard-bg: var(--bf-theme-surface-1);
 	--bf-theme-wizard-color: var(--bf-theme-text-1);
@@ -394,5 +406,6 @@
 		--bf-theme-accordion-trigger-color: var(--bf-theme-text-1);
 		--bf-theme-accordion-panel-bg: var(--bf-theme-surface-1);
 		--bf-theme-accordion-chevron-color: var(--bf-theme-text-2);
+		--bf-theme-typography-color: var(--bf-theme-text-1);
 	}
 }

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "bareframe",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Lightweight, dependency-free Web Components for reusable app UI.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
     ".": "./dist/index.js",
+    "./min": "./dist/bareframe.min.js",
+    "./bareframe.min.js": "./dist/bareframe.min.js",
     "./components/*.js": "./dist/components/*.js",
     "./themes/*.css": "./dist/themes/*.css",
     "./manifest.json": "./dist/manifest.json"
@@ -17,6 +19,8 @@
   ],
   "scripts": {
     "build": "node ./scripts/build.mjs",
+    "watch": "node --watch --watch-path=src --watch-path=themes --watch-path=scripts ./scripts/build.mjs",
+    "serve": "cd examples && ln -sfn ../src src && ln -sfn ../themes themes && ln -sfn ../dist dist && python3 -m http.server 8088",
     "generate:index": "node ./scripts/generate-index.mjs",
     "prepack": "npm run build",
     "pack:preview": "npm pack --dry-run"
@@ -28,5 +32,8 @@
     "design-system",
     "bareframe"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "esbuild": "^0.27.3"
+  }
 }

package/dist/components/alert.css

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

package/dist/components/alert.js

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

package/dist/components/badge.css

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

package/dist/components/badge.js

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

package/dist/components/banner.css

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

package/dist/components/banner.js

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

package/dist/components/bar-chart.css

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

package/dist/components/bar-chart.js

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

package/dist/components/bottom-sheet.css

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

package/dist/components/bottom-sheet.js

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

package/dist/components/button-group.css

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

package/dist/components/button-group.js

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