bareframe 0.1.2 → 0.1.3

package/dist/components/action-list.js

@@ -20,9 +20,6 @@ class BfActionList extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'action list';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/anchor.js

@@ -20,9 +20,6 @@ class BfAnchor extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'anchor';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/bottom-navigation.js

@@ -20,9 +20,6 @@ class BfBottomNavigation extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'bottom navigation';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/breadcrumb.js

@@ -123,10 +123,6 @@ class BfBreadcrumb extends HTMLElement {
 
 		this._list.replaceChildren();
 		if (!items.length) {
-			const fallback = document.createElement('li');
-			fallback.className = 'item';
-			fallback.textContent = 'breadcrumb';
-			this._list.append(fallback);
 			return;
 		}
 

package/dist/components/button.js

@@ -13,7 +13,7 @@ class BfButton extends HTMLElement {
 			return;
 		}
 		this._initialized = true;
-		const label = this.getAttribute('label') || 'Button';
+		const label = this.getAttribute('label') || '';
 		const cssUrl = new URL('./button.css', import.meta.url);
 
 		this.shadowRoot.innerHTML = '';
@@ -52,7 +52,7 @@ class BfButton extends HTMLElement {
 
 	_onClick() {
 		this._applyGroupSelection();
-		const label = this.getAttribute('label') || 'Button';
+		const label = this.getAttribute('label') || '';
 		const variant = this.getAttribute('variant') || 'primary';
 		this.dispatchEvent(
 			new CustomEvent('bf-click', {

package/dist/components/calendar.js

@@ -20,9 +20,6 @@ class BfCalendar extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'calendar';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/canvas.js

@@ -20,9 +20,6 @@ class BfCanvas extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'canvas';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/card.js

@@ -20,9 +20,6 @@ class BfCard extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'card';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/carousel.js

@@ -20,9 +20,6 @@ class BfCarousel extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'carousel';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/combobox.js

@@ -20,9 +20,6 @@ class BfCombobox extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'combobox';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/command-palette.js

@@ -20,9 +20,6 @@ class BfCommandPalette extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'command palette';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/countdown.js

@@ -20,9 +20,6 @@ class BfCountdown extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'countdown';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/data-grid.js

@@ -20,9 +20,6 @@ class BfDataGrid extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'data grid';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/date-picker.js

@@ -20,9 +20,6 @@ class BfDatePicker extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'date picker';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

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

@@ -20,9 +20,6 @@ class BfDateRangePicker extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'date range picker';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/dialog.js

@@ -49,9 +49,6 @@ class BfDialog extends HTMLElement {
 		this._panel = root.querySelector('.panel');
 		this._backdrop.addEventListener('click', this._onBackdropClick);
 
-		if (!this.textContent?.trim()) {
-			this.textContent = 'dialog';
-		}
 
 		this._sync();
 	}

package/dist/components/drawer.js

@@ -32,9 +32,6 @@ class BfDrawer extends HTMLElement {
 		this._backdrop = root.querySelector('.backdrop');
 		this._backdrop.addEventListener('click', this._onBackdropClick);
 
-		if (!this.textContent?.trim()) {
-			this.textContent = 'drawer';
-		}
 
 		this._sync();
 	}

package/dist/components/dropdown.js

@@ -20,9 +20,6 @@ class BfDropdown extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'dropdown';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/edge.js

@@ -23,9 +23,6 @@ class BfEdge extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'edge';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 		this._syncPosition();

package/dist/components/editor.css

@@ -0,0 +1,111 @@
+:host {
+	--bf-editor-font: var(--bf-theme-font-family, inherit);
+	--bf-editor-radius: var(--bf-theme-radius-md, 8px);
+	--bf-editor-border-width: var(--bf-theme-border-width, 1px);
+	--bf-editor-border-style: var(--bf-theme-border-style, solid);
+	--bf-editor-border-color: var(--bf-theme-editor-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-editor-bg: var(--bf-theme-editor-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-editor-color: var(--bf-theme-editor-color, var(--bf-theme-text-1, #0f172a));
+	--bf-editor-muted: var(--bf-theme-text-2, #64748b);
+	--bf-editor-code-bg: color-mix(in srgb, var(--bf-editor-bg) 86%, #0f172a 14%);
+	--bf-editor-code-color: #e2e8f0;
+
+	display: block;
+	font: var(--bf-editor-font);
+	color: var(--bf-editor-color);
+}
+
+.root {
+	background: var(--bf-editor-bg);
+	color: var(--bf-editor-color);
+	border-width: var(--bf-editor-border-width);
+	border-style: var(--bf-editor-border-style);
+	border-color: var(--bf-editor-border-color);
+	border-radius: var(--bf-editor-radius);
+	overflow: hidden;
+}
+
+.toolbar {
+	display: none;
+	gap: 0.35rem;
+	padding: 0.5rem;
+	border-bottom: 1px solid var(--bf-editor-border-color);
+	background: color-mix(in srgb, var(--bf-editor-bg) 92%, var(--bf-editor-border-color));
+}
+
+.toolbar button {
+	border: 1px solid var(--bf-editor-border-color);
+	background: var(--bf-editor-bg);
+	color: var(--bf-editor-color);
+	border-radius: 6px;
+	padding: 0.22rem 0.45rem;
+	cursor: pointer;
+	font: inherit;
+	font-size: 0.85rem;
+}
+
+.code-wrap {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	min-height: 220px;
+	background: var(--bf-editor-code-bg);
+}
+
+.line-numbers {
+	padding: 0.8rem 0.55rem;
+	margin: 0;
+	white-space: pre;
+	line-height: 1.45;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	font-size: 0.85rem;
+	color: color-mix(in srgb, var(--bf-editor-code-color) 55%, transparent);
+	border-right: 1px solid color-mix(in srgb, var(--bf-editor-border-color) 80%, transparent);
+	user-select: none;
+}
+
+.code {
+	width: 100%;
+	min-height: 220px;
+	resize: vertical;
+	padding: 0.8rem;
+	border: 0;
+	outline: 0;
+	background: transparent;
+	color: var(--bf-editor-code-color);
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	font-size: 0.9rem;
+	line-height: 1.45;
+}
+
+.rich {
+	display: none;
+	min-height: 220px;
+	padding: 0.8rem;
+	outline: none;
+	line-height: 1.5;
+}
+
+.rich:empty::before {
+	content: attr(data-placeholder);
+	color: var(--bf-editor-muted);
+}
+
+.root[data-variant='richtext'] .toolbar {
+	display: flex;
+}
+
+.root[data-variant='richtext'] .code-wrap {
+	display: none;
+}
+
+.root[data-variant='richtext'] .rich {
+	display: block;
+}
+
+:host([disabled]) {
+	opacity: 0.72;
+}
+
+:host([disabled]) .toolbar button {
+	cursor: not-allowed;
+}

package/dist/components/editor.js

@@ -0,0 +1,173 @@
+class BfEditor extends HTMLElement {
+	static observedAttributes = ['variant', 'code', 'richtext', 'placeholder', 'value', 'disabled'];
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		this._onInput = this._onInput.bind(this);
+		this._onToolbarClick = this._onToolbarClick.bind(this);
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			this._sync();
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./editor.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 = `
+			<div class="toolbar" part="toolbar">
+				<button type="button" data-cmd="bold" title="Bold"><b>B</b></button>
+				<button type="button" data-cmd="italic" title="Italic"><i>I</i></button>
+				<button type="button" data-cmd="underline" title="Underline"><u>U</u></button>
+				<button type="button" data-cmd="insertUnorderedList" title="Bullet List">• List</button>
+				<button type="button" data-cmd="insertOrderedList" title="Numbered List">1. List</button>
+			</div>
+			<div class="code-wrap" part="code-wrap">
+				<div class="line-numbers" part="line-numbers"></div>
+				<textarea class="code" part="code"></textarea>
+			</div>
+			<div class="rich" part="rich" contenteditable="true"></div>
+		</div>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._toolbar = root.querySelector('.toolbar');
+		this._codeWrap = root.querySelector('.code-wrap');
+		this._lineNumbers = root.querySelector('.line-numbers');
+		this._code = root.querySelector('.code');
+		this._rich = root.querySelector('.rich');
+
+		this._code.addEventListener('input', this._onInput);
+		this._rich.addEventListener('input', this._onInput);
+		this._toolbar.addEventListener('click', this._onToolbarClick);
+
+		this._sync();
+	}
+
+	disconnectedCallback() {
+		if (!this._code || !this._rich || !this._toolbar) {
+			return;
+		}
+		this._code.removeEventListener('input', this._onInput);
+		this._rich.removeEventListener('input', this._onInput);
+		this._toolbar.removeEventListener('click', this._onToolbarClick);
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	_variant() {
+		const explicit = (this.getAttribute('variant') || '').toLowerCase();
+		if (explicit === 'richtext' || this.hasAttribute('richtext')) {
+			return 'richtext';
+		}
+		if (explicit === 'code' || this.hasAttribute('code')) {
+			return 'code';
+		}
+		return 'code';
+	}
+
+	_sync() {
+		if (!this._root || !this._code || !this._rich || !this._toolbar) {
+			return;
+		}
+
+		const variant = this._variant();
+		this._root.dataset.variant = variant;
+
+		const disabled = this.hasAttribute('disabled');
+		this._code.disabled = disabled;
+		this._rich.setAttribute('contenteditable', disabled ? 'false' : 'true');
+
+		const placeholder = this.getAttribute('placeholder') ||
+			(variant === 'richtext' ? 'Write rich content…' : 'Write code…');
+		this._code.placeholder = placeholder;
+		this._rich.dataset.placeholder = placeholder;
+
+		const value = this.getAttribute('value');
+		if (value != null && this._lastSyncedValue !== value) {
+			if (variant === 'richtext') {
+				this._rich.innerHTML = value;
+			} else {
+				this._code.value = value;
+				this._renderLineNumbers();
+			}
+			this._lastSyncedValue = value;
+		} else if (value == null && !this._hasUserInput) {
+			const initial = this.textContent.trim();
+			if (initial) {
+				if (variant === 'richtext') {
+					this._rich.innerHTML = initial;
+				} else {
+					this._code.value = initial;
+					this._renderLineNumbers();
+				}
+				this._hasUserInput = true;
+			}
+		}
+
+		if (variant === 'code') {
+			this._renderLineNumbers();
+		}
+	}
+
+	_onInput() {
+		const variant = this._variant();
+		this._hasUserInput = true;
+		if (variant === 'code') {
+			this._renderLineNumbers();
+			this.setAttribute('value', this._code.value);
+			this._lastSyncedValue = this._code.value;
+			this._emitChange(this._code.value, 'code');
+			return;
+		}
+		this.setAttribute('value', this._rich.innerHTML);
+		this._lastSyncedValue = this._rich.innerHTML;
+		this._emitChange(this._rich.innerHTML, 'richtext');
+	}
+
+	_renderLineNumbers() {
+		const lineCount = Math.max(1, this._code.value.split('\n').length);
+		const text = Array.from({ length: lineCount }, (_, i) => String(i + 1)).join('\n');
+		this._lineNumbers.textContent = text;
+	}
+
+	_onToolbarClick(event) {
+		const button = event.target instanceof Element
+			? event.target.closest('button[data-cmd]')
+			: null;
+		if (!button || this._variant() !== 'richtext' || this.hasAttribute('disabled')) {
+			return;
+		}
+		const command = button.getAttribute('data-cmd');
+		if (!command) {
+			return;
+		}
+		this._rich.focus();
+		document.execCommand(command, false);
+		this._onInput();
+	}
+
+	_emitChange(value, mode) {
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: { value, mode },
+			}),
+		);
+	}
+}
+
+customElements.define('bf-editor', BfEditor);

package/dist/components/empty-state.js

@@ -20,9 +20,6 @@ class BfEmptyState extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'empty state';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/error-summary.js

@@ -20,9 +20,6 @@ class BfErrorSummary extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'error summary';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/fab.js

@@ -20,9 +20,6 @@ class BfFab extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'fab';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/filter-bar.js

@@ -20,9 +20,6 @@ class BfFilterBar extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'filter bar';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/form-field.js

@@ -20,9 +20,6 @@ class BfFormField extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'form field';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/grid.js

@@ -20,9 +20,6 @@ class BfGrid extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'grid';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/hero.js

@@ -20,9 +20,6 @@ class BfHero extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'hero';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/icon.js

@@ -20,9 +20,6 @@ class BfIcon extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'icon';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/image.js

@@ -20,9 +20,6 @@ class BfImage extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'image';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/key-value-list.js

@@ -20,9 +20,6 @@ class BfKeyValueList extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'key-value list';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/link.js

@@ -20,9 +20,6 @@ class BfLink extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'link';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/list.js

@@ -21,9 +21,6 @@ class BfList extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'list';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 		this._slot = root.querySelector('slot');

package/dist/components/loading-indicator.js

@@ -20,9 +20,6 @@ class BfLoadingIndicator extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'loading indicator';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/map.js

@@ -20,9 +20,6 @@ class BfMap extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'map';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 	}

package/dist/components/menu.js

@@ -26,9 +26,6 @@ class BfMenu extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'menu';
-		}
 
 		this.shadowRoot.replaceChildren(link, root);
 		this._root = root;