bareframe 0.1.0 → 0.1.1

package/dist/components/accordion.js

@@ -1,8 +1,11 @@
 class BfAccordion extends HTMLElement {
+	static observedAttributes = ['active-id'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 		this._details = [];
+		this._itemIds = [];
 	}
 
 	connectedCallback() {
@@ -31,12 +34,14 @@ class BfAccordion extends HTMLElement {
 				`Section ${index + 1}`;
 			const slotName = `item-${index + 1}`;
 			const openByDefault = item.hasAttribute('open');
+			const itemId = this._ensureItemId(item, index);
 
 			item.setAttribute('slot', slotName);
 
 			const details = document.createElement('details');
 			details.className = 'accordion-item';
 			details.setAttribute('part', 'item');
+			details.dataset.itemId = itemId;
 			if (openByDefault) {
 				details.open = true;
 			}
@@ -57,6 +62,7 @@ class BfAccordion extends HTMLElement {
 			details.append(summary, panel);
 			container.append(details);
 			this._details.push(details);
+			this._itemIds.push(itemId);
 
 			details.addEventListener('toggle', () => {
 				if (!this.multiple && details.open) {
@@ -73,6 +79,7 @@ class BfAccordion extends HTMLElement {
 						composed: true,
 						detail: {
 							index,
+							id: itemId,
 							title,
 							open: details.open,
 						},
@@ -82,11 +89,70 @@ class BfAccordion extends HTMLElement {
 		});
 
 		this.shadowRoot.replaceChildren(link, container);
+		const activeId = this.getAttribute('active-id');
+		if (activeId) {
+			this.openItem(activeId);
+		}
 	}
 
 	get multiple() {
 		return this.hasAttribute('multiple');
 	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (!this._initialized) {
+			return;
+		}
+		if (name === 'active-id' && oldValue !== newValue && newValue) {
+			this.openItem(newValue);
+		}
+	}
+
+	openItem(itemId) {
+		const details = this._details.find((entry) => entry.dataset.itemId === itemId);
+		if (!details) {
+			return;
+		}
+		details.open = true;
+	}
+
+	closeItem(itemId) {
+		const details = this._details.find((entry) => entry.dataset.itemId === itemId);
+		if (!details) {
+			return;
+		}
+		details.open = false;
+	}
+
+	toggleItem(itemId) {
+		const details = this._details.find((entry) => entry.dataset.itemId === itemId);
+		if (!details) {
+			return;
+		}
+		details.open = !details.open;
+	}
+
+	_ensureItemId(item, index) {
+		const explicit = item.getAttribute('id');
+		if (explicit && !this._itemIds.includes(explicit)) {
+			return explicit;
+		}
+
+		const hostId = this.getAttribute('id') || 'bf-accordion';
+		let counter = index + 1;
+		let candidate = `${hostId}-item-${counter}`;
+		while (
+			this._itemIds.includes(candidate) ||
+			(this.querySelector(`#${CSS.escape(candidate)}`) &&
+				this.querySelector(`#${CSS.escape(candidate)}`) !== item)
+		) {
+			counter += 1;
+			candidate = `${hostId}-item-${counter}`;
+		}
+
+		item.setAttribute('id', candidate);
+		return candidate;
+	}
 }
 
 customElements.define('bf-accordion', BfAccordion);

package/dist/components/autocomplete.css

@@ -3,28 +3,91 @@
 	--bf-autocomplete-radius: var(--bf-theme-radius-md, 8px);
 	--bf-autocomplete-border-width: var(--bf-theme-border-width, 1px);
 	--bf-autocomplete-border-style: var(--bf-theme-border-style, solid);
-	--bf-autocomplete-border-color: var(--bf-theme-autocomplete-border-color, var(--bf-theme-border-1, #cbd5e1));
-	--bf-autocomplete-bg: var(--bf-theme-autocomplete-bg, var(--bf-theme-surface-1, #ffffff));
-	--bf-autocomplete-color: var(--bf-theme-autocomplete-color, var(--bf-theme-text-1, #0f172a));
-	--bf-autocomplete-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-autocomplete-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-autocomplete-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;
+	--bf-autocomplete-border-color: var(
+		--bf-theme-autocomplete-border-color,
+		var(--bf-theme-border-1, #d1d5db)
+	);
+	--bf-autocomplete-bg: var(
+		--bf-theme-autocomplete-bg,
+		var(--bf-theme-surface-1, #ffffff)
+	);
+	--bf-autocomplete-color: var(
+		--bf-theme-autocomplete-color,
+		var(--bf-theme-text-1, #111827)
+	);
+	--bf-autocomplete-placeholder: var(--bf-theme-text-2, #6b7280);
+	--bf-autocomplete-focus: var(--bf-theme-focus-ring-color, #9ca3af);
+	--bf-autocomplete-list-max-height: 220px;
+	--bf-autocomplete-item-hover-bg: var(--bf-theme-surface-2, #f3f4f6);
+	--bf-autocomplete-item-active-bg: var(--bf-theme-surface-2, #e5e7eb);
+	--bf-autocomplete-shadow: 0 8px 26px rgba(15, 23, 42, 0.12);
+
+	display: inline-block;
+	width: min(100%, 420px);
 	font: var(--bf-autocomplete-font);
-	color: var(--bf-autocomplete-color);
 }
 
 .root {
-	background: var(--bf-autocomplete-bg);
+	position: relative;
+}
+
+.input {
+	width: 100%;
+	box-sizing: border-box;
+	font: inherit;
 	color: var(--bf-autocomplete-color);
+	background: var(--bf-autocomplete-bg);
 	border-width: var(--bf-autocomplete-border-width);
 	border-style: var(--bf-autocomplete-border-style);
 	border-color: var(--bf-autocomplete-border-color);
 	border-radius: var(--bf-autocomplete-radius);
-	padding: var(--bf-autocomplete-padding-y) var(--bf-autocomplete-padding-x);
-	transition: var(--bf-autocomplete-transition);
+	padding: 0.62rem 0.8rem;
+	outline: none;
+}
+
+.input::placeholder {
+	color: var(--bf-autocomplete-placeholder);
+}
+
+.input:focus-visible {
+	border-color: var(--bf-autocomplete-focus);
+	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-autocomplete-focus) 30%, transparent);
+}
+
+.list {
+	position: absolute;
+	top: calc(100% + 0.35rem);
+	left: 0;
+	right: 0;
+	margin: 0;
+	padding: 0.35rem;
+	list-style: none;
+	border-width: var(--bf-autocomplete-border-width);
+	border-style: var(--bf-autocomplete-border-style);
+	border-color: var(--bf-autocomplete-border-color);
+	border-radius: calc(var(--bf-autocomplete-radius) - 2px);
+	background: var(--bf-autocomplete-bg);
+	max-height: var(--bf-autocomplete-list-max-height);
+	overflow: auto;
+	box-shadow: var(--bf-autocomplete-shadow);
+	z-index: 20;
+}
+
+.item {
+	padding: 0.48rem 0.55rem;
+	border-radius: calc(var(--bf-autocomplete-radius) - 4px);
+	cursor: pointer;
+}
+
+.item:hover {
+	background: var(--bf-autocomplete-item-hover-bg);
+}
+
+.item.active {
+	background: var(--bf-autocomplete-item-active-bg);
+}
+
+.item.empty {
+	cursor: default;
+	color: var(--bf-autocomplete-placeholder);
 }

package/dist/components/autocomplete.js

@@ -2,6 +2,11 @@ class BfAutocomplete extends HTMLElement {
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._items = [];
+		this._filtered = [];
+		this._activeIndex = -1;
+		this._listOpen = false;
+		this._boundOnDocumentClick = this._onDocumentClick.bind(this);
 	}
 
 	connectedCallback() {
@@ -11,20 +16,225 @@ class BfAutocomplete extends HTMLElement {
 		this._initialized = true;
 
 		const cssUrl = new URL('./autocomplete.css', import.meta.url);
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = cssUrl.href;
+		const placeholder = this.getAttribute('placeholder') || 'Search...';
+		const value = this.getAttribute('value') || '';
+		const listId = `ac-list-${Math.random().toString(36).slice(2, 10)}`;
 
-		const root = document.createElement('div');
-		root.className = 'root';
-		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		this.shadowRoot.innerHTML = `
+			<link rel="stylesheet" href="${cssUrl.href}" />
+			<div class="root" part="root">
+				<input
+					class="input"
+					part="input"
+					type="text"
+					placeholder="${placeholder.replace(/"/g, '&quot;')}"
+					autocomplete="off"
+					spellcheck="false"
+					role="combobox"
+					aria-expanded="false"
+					aria-controls="${listId}"
+					aria-autocomplete="list"
+				/>
+				<ul class="list" part="list" id="${listId}" role="listbox" hidden></ul>
+			</div>
+		`;
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'autocomplete';
+		this._input = this.shadowRoot.querySelector('.input');
+		this._list = this.shadowRoot.querySelector('.list');
+		this._input.value = value;
+		this._setItemsFromAttributes();
+		this._filtered = [...this._items];
+		this._renderList();
+
+		this._input.addEventListener('focus', () => {
+			this._filter(this._input.value);
+			this._openList();
+		});
+
+		this._input.addEventListener('input', () => {
+			const text = this._input.value;
+			this._filter(text);
+			this._openList();
+			this.dispatchEvent(
+				new CustomEvent('bf-change', {
+					bubbles: true,
+					composed: true,
+					detail: { value: text },
+				}),
+			);
+		});
+
+		this._input.addEventListener('keydown', (event) => {
+			if (!this._listOpen && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+				this._openList();
+			}
+
+			if (event.key === 'ArrowDown') {
+				event.preventDefault();
+				this._moveActive(1);
+			}
+
+			if (event.key === 'ArrowUp') {
+				event.preventDefault();
+				this._moveActive(-1);
+			}
+
+			if (event.key === 'Enter' && this._activeIndex >= 0) {
+				event.preventDefault();
+				const item = this._filtered[this._activeIndex];
+				if (item) {
+					this._select(item);
+				}
+			}
+
+			if (event.key === 'Escape') {
+				this._closeList();
+			}
+		});
+
+		document.addEventListener('click', this._boundOnDocumentClick);
+	}
+
+	disconnectedCallback() {
+		document.removeEventListener('click', this._boundOnDocumentClick);
+	}
+
+	_setItemsFromAttributes() {
+		const json = this.getAttribute('options');
+		if (json) {
+			try {
+				const parsed = JSON.parse(json);
+				if (Array.isArray(parsed)) {
+					this._items = parsed.map((item) => String(item));
+					return;
+				}
+			} catch {
+				// Fall through to csv parsing.
+			}
+		}
+
+		const csv = this.getAttribute('options-csv');
+		if (csv) {
+			this._items = csv
+				.split(',')
+				.map((part) => part.trim())
+				.filter(Boolean);
+			return;
+		}
+
+		this._items = [
+			'Accessibility',
+			'Accordion',
+			'Autocomplete',
+			'Button',
+			'Card',
+			'Color Picker',
+			'Data Grid',
+			'Dropdown',
+			'Modal',
+			'Typography',
+		];
+	}
+
+	_filter(query) {
+		const lower = query.trim().toLowerCase();
+		if (!lower) {
+			this._filtered = [...this._items];
+		} else {
+			this._filtered = this._items.filter((item) =>
+				item.toLowerCase().includes(lower),
+			);
+		}
+		this._activeIndex = -1;
+		this._renderList();
+	}
+
+	_renderList() {
+		this._list.innerHTML = '';
+
+		if (!this._filtered.length) {
+			const li = document.createElement('li');
+			li.className = 'item empty';
+			li.textContent = 'No matches';
+			li.setAttribute('part', 'item empty');
+			this._list.append(li);
+			return;
 		}
 
-		this.shadowRoot.replaceChildren(link, root);
+		this._filtered.forEach((item, index) => {
+			const li = document.createElement('li');
+			li.className = 'item';
+			li.textContent = item;
+			li.role = 'option';
+			li.id = `ac-opt-${index}`;
+			li.setAttribute('part', 'item');
+			li.addEventListener('mousedown', (event) => {
+				event.preventDefault();
+				this._select(item);
+			});
+			this._list.append(li);
+		});
+	}
+
+	_moveActive(step) {
+		if (!this._filtered.length) {
+			return;
+		}
+
+		const next = this._activeIndex + step;
+		if (next < 0) {
+			this._activeIndex = this._filtered.length - 1;
+		} else if (next >= this._filtered.length) {
+			this._activeIndex = 0;
+		} else {
+			this._activeIndex = next;
+		}
+
+		const items = [...this.shadowRoot.querySelectorAll('.item:not(.empty)')];
+		items.forEach((itemEl, idx) => {
+			itemEl.classList.toggle('active', idx === this._activeIndex);
+		});
+
+		const activeEl = items[this._activeIndex];
+		if (activeEl) {
+			this._input.setAttribute('aria-activedescendant', activeEl.id);
+			activeEl.scrollIntoView({ block: 'nearest' });
+		}
+	}
+
+	_select(value) {
+		this._input.value = value;
+		this._closeList();
+		this.dispatchEvent(
+			new CustomEvent('bf-select', {
+				bubbles: true,
+				composed: true,
+				detail: { value },
+			}),
+		);
+	}
+
+	_openList() {
+		this._listOpen = true;
+		this._input.setAttribute('aria-expanded', 'true');
+		this._list.hidden = false;
+	}
+
+	_closeList() {
+		this._listOpen = false;
+		this._activeIndex = -1;
+		this._input.setAttribute('aria-expanded', 'false');
+		this._input.removeAttribute('aria-activedescendant');
+		this._list.hidden = true;
+		this.shadowRoot.querySelectorAll('.item.active').forEach((itemEl) => {
+			itemEl.classList.remove('active');
+		});
+	}
+
+	_onDocumentClick(event) {
+		if (!this.contains(event.target) && !this.shadowRoot.contains(event.target)) {
+			this._closeList();
+		}
 	}
 }
 

package/dist/components/avatar.css

@@ -1,30 +1,142 @@
 :host {
 	--bf-avatar-font: var(--bf-theme-font-family, inherit);
-	--bf-avatar-radius: var(--bf-theme-radius-md, 8px);
+	--bf-avatar-size-sm: 2rem;
+	--bf-avatar-size-md: 2.5rem;
+	--bf-avatar-size-lg: 3rem;
+	--bf-avatar-size-xl: 3.75rem;
+	--bf-avatar-radius: 999px;
 	--bf-avatar-border-width: var(--bf-theme-border-width, 1px);
 	--bf-avatar-border-style: var(--bf-theme-border-style, solid);
-	--bf-avatar-border-color: var(--bf-theme-avatar-border-color, var(--bf-theme-border-1, #cbd5e1));
-	--bf-avatar-bg: var(--bf-theme-avatar-bg, var(--bf-theme-surface-1, #ffffff));
-	--bf-avatar-color: var(--bf-theme-avatar-color, var(--bf-theme-text-1, #0f172a));
-	--bf-avatar-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-avatar-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-avatar-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);
+	--bf-avatar-border-color: var(
+		--bf-theme-avatar-border-color,
+		var(--bf-theme-border-1, #d1d5db)
+	);
+	--bf-avatar-bg: var(
+		--bf-theme-avatar-bg,
+		var(--bf-theme-surface-2, #f3f4f6)
+	);
+	--bf-avatar-color: var(
+		--bf-theme-avatar-color,
+		var(--bf-theme-text-1, #111827)
+	);
+	--bf-avatar-fallback-bg: var(
+		--bf-theme-avatar-fallback-bg,
+		color-mix(in srgb, var(--bf-avatar-bg) 75%, #94a3b8 25%)
+	);
+	--bf-avatar-fallback-color: var(
+		--bf-theme-avatar-fallback-color,
+		var(--bf-avatar-color)
+	);
+	--bf-avatar-shadow: var(--bf-theme-avatar-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
+	--bf-avatar-status-size: 0.62rem;
+	--bf-avatar-status-ring: var(--bf-theme-surface-1, #ffffff);
+	--bf-avatar-status-online: #16a34a;
+	--bf-avatar-status-away: #f59e0b;
+	--bf-avatar-status-busy: #ef4444;
+	--bf-avatar-status-offline: #64748b;
 
-	display: block;
+	display: inline-block;
 	font: var(--bf-avatar-font);
-	color: var(--bf-avatar-color);
 }
 
 .root {
-	background: var(--bf-avatar-bg);
-	color: var(--bf-avatar-color);
+	position: relative;
+	width: var(--bf-avatar-size-md);
+	height: var(--bf-avatar-size-md);
+	border-radius: var(--bf-avatar-radius);
 	border-width: var(--bf-avatar-border-width);
 	border-style: var(--bf-avatar-border-style);
 	border-color: var(--bf-avatar-border-color);
-	border-radius: var(--bf-avatar-radius);
-	padding: var(--bf-avatar-padding-y) var(--bf-avatar-padding-x);
-	transition: var(--bf-avatar-transition);
+	overflow: hidden;
+	background: var(--bf-avatar-bg);
+	color: var(--bf-avatar-color);
+	box-shadow: var(--bf-avatar-shadow);
+}
+
+.root.size-sm {
+	width: var(--bf-avatar-size-sm);
+	height: var(--bf-avatar-size-sm);
+}
+
+.root.size-md {
+	width: var(--bf-avatar-size-md);
+	height: var(--bf-avatar-size-md);
+}
+
+.root.size-lg {
+	width: var(--bf-avatar-size-lg);
+	height: var(--bf-avatar-size-lg);
+}
+
+.root.size-xl {
+	width: var(--bf-avatar-size-xl);
+	height: var(--bf-avatar-size-xl);
+}
+
+.image,
+.fallback {
+	width: 100%;
+	height: 100%;
+}
+
+.image {
+	display: block;
+	object-fit: cover;
+	background: var(--bf-avatar-bg);
+}
+
+.fallback {
+	display: grid;
+	place-items: center;
+	font-weight: 700;
+	letter-spacing: 0.02em;
+	background: var(--bf-avatar-fallback-bg);
+	color: var(--bf-avatar-fallback-color);
+	user-select: none;
+}
+
+.root.size-sm .fallback {
+	font-size: 0.7rem;
+}
+
+.root.size-md .fallback {
+	font-size: 0.85rem;
+}
+
+.root.size-lg .fallback {
+	font-size: 1rem;
+}
+
+.root.size-xl .fallback {
+	font-size: 1.15rem;
+}
+
+.hidden {
+	display: none;
+}
+
+.status {
+	position: absolute;
+	right: 0.02rem;
+	bottom: 0.02rem;
+	width: var(--bf-avatar-status-size);
+	height: var(--bf-avatar-status-size);
+	border-radius: 999px;
+	border: 2px solid var(--bf-avatar-status-ring);
+}
+
+.status.online {
+	background: var(--bf-avatar-status-online);
+}
+
+.status.away {
+	background: var(--bf-avatar-status-away);
+}
+
+.status.busy {
+	background: var(--bf-avatar-status-busy);
+}
+
+.status.offline {
+	background: var(--bf-avatar-status-offline);
 }

package/dist/components/avatar.js

@@ -1,4 +1,8 @@
 class BfAvatar extends HTMLElement {
+	static get observedAttributes() {
+		return ['name', 'src', 'alt', 'initials', 'size', 'status'];
+	}
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -9,22 +13,55 @@ class BfAvatar extends HTMLElement {
 			return;
 		}
 		this._initialized = true;
+		this._render();
+	}
 
+	attributeChangedCallback() {
+		if (!this._initialized) {
+			return;
+		}
+		this._render();
+	}
+
+	_render() {
 		const cssUrl = new URL('./avatar.css', import.meta.url);
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = cssUrl.href;
+		const name = this.getAttribute('name') || '';
+		const src = this.getAttribute('src') || '';
+		const alt = this.getAttribute('alt') || name || 'Avatar';
+		const explicitInitials = this.getAttribute('initials');
+		const initials = explicitInitials || this._buildInitials(name);
+		const size = this.getAttribute('size') || 'md';
+		const status = this.getAttribute('status') || '';
+		const showStatus = status && ['online', 'away', 'busy', 'offline'].includes(status);
 
-		const root = document.createElement('div');
-		root.className = 'root';
-		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		this.shadowRoot.innerHTML = `
+			<link rel="stylesheet" href="${cssUrl.href}" />
+			<div class="root size-${size}" part="root">
+				${src ? `<img class="image" part="image" src="${src}" alt="${alt.replace(/"/g, '&quot;')}" />` : ''}
+				<div class="fallback ${src ? 'hidden' : ''}" part="fallback" aria-label="${alt.replace(/"/g, '&quot;')}">${initials || '?'}</div>
+				${showStatus ? `<span class="status ${status}" part="status"></span>` : ''}
+			</div>
+		`;
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'avatar';
+		if (src) {
+			const image = this.shadowRoot.querySelector('.image');
+			const fallback = this.shadowRoot.querySelector('.fallback');
+			image.addEventListener('error', () => {
+				image.classList.add('hidden');
+				fallback.classList.remove('hidden');
+			});
 		}
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	_buildInitials(name) {
+		if (!name.trim()) {
+			return '';
+		}
+		const parts = name
+			.trim()
+			.split(/\s+/)
+			.slice(0, 2);
+		return parts.map((part) => part.charAt(0).toUpperCase()).join('');
 	}
 }