bareframe 0.1.0 → 0.1.1

package/dist/components/input.js

@@ -1,11 +1,40 @@
 class BfInput extends HTMLElement {
+	static observedAttributes = [
+		'type',
+		'value',
+		'placeholder',
+		'disabled',
+		'required',
+		'readonly',
+		'name',
+		'label',
+		'min',
+		'max',
+		'step',
+		'swatch',
+		'swatch-hidden',
+		'left',
+		'right',
+		'format',
+		'hex',
+		'rgba',
+	];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onInput = this._onInput.bind(this);
+		this._onChange = this._onChange.bind(this);
+		this._onFormatChange = this._onFormatChange.bind(this);
+		this._onPickerInput = this._onPickerInput.bind(this);
+		this._onSwatchClick = this._onSwatchClick.bind(this);
+		this._color = { r: 0, g: 0, b: 0, a: 1 };
+		this._colorFormat = 'hex';
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._syncState();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +47,349 @@ class BfInput extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<button class="swatch" part="swatch" type="button" aria-label="Pick color"></button>
+			<input class="field" part="input" />
+			<select class="format" part="format" aria-label="Color format">
+				<option value="hex">HEX</option>
+				<option value="rgba">RGBA</option>
+			</select>
+			<input class="picker" part="picker" type="color" tabindex="-1" aria-hidden="true" />
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._field = root.querySelector('.field');
+		this._swatch = root.querySelector('.swatch');
+		this._format = root.querySelector('.format');
+		this._picker = root.querySelector('.picker');
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'input';
+		this._field.addEventListener('input', this._onInput);
+		this._field.addEventListener('change', this._onChange);
+		this._format.addEventListener('change', this._onFormatChange);
+		this._picker.addEventListener('input', this._onPickerInput);
+		this._swatch.addEventListener('click', this._onSwatchClick);
+
+		if (!this.hasAttribute('value')) {
+			const fallbackValue = this.textContent?.trim();
+			if (fallbackValue) {
+				this.setAttribute('value', fallbackValue);
+			}
 		}
 
-		this.shadowRoot.replaceChildren(link, root);
+		this._syncState();
+	}
+
+	attributeChangedCallback(name) {
+		if (name === 'value' && this._reflectingValue) {
+			return;
+		}
+		this._syncState();
+	}
+
+	get value() {
+		return this._field?.value || '';
+	}
+
+	set value(nextValue) {
+		this.setAttribute('value', `${nextValue ?? ''}`);
+	}
+
+	_reflectValueAttribute() {
+		const next = this._field.value;
+		if (this.getAttribute('value') === next) {
+			return;
+		}
+		this._reflectingValue = true;
+		this.setAttribute('value', next);
+		this._reflectingValue = false;
+	}
+
+	_onInput() {
+		if (this._isColorType()) {
+			this._tryConsumeColorString(this._field.value);
+		}
+		this._reflectValueAttribute();
+		this.dispatchEvent(
+			new CustomEvent('bf-input', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					value: this._field.value,
+				},
+			}),
+		);
+	}
+
+	_onChange() {
+		if (this._isColorType()) {
+			if (!this._tryConsumeColorString(this._field.value)) {
+				this._field.value = this._serializeColor(this._colorFormat, this._color);
+			}
+			this._renderColorUi();
+		}
+		this._reflectValueAttribute();
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					value: this._field.value,
+				},
+			}),
+		);
+	}
+
+	_onFormatChange() {
+		if (!this._isColorType()) {
+			return;
+		}
+		this._colorFormat = this._format.value;
+		this._field.value = this._serializeColor(this._colorFormat, this._color);
+		this._reflectValueAttribute();
+	}
+
+	_onPickerInput() {
+		if (!this._isColorType()) {
+			return;
+		}
+		const parsed = this._parseHex(this._picker.value);
+		if (!parsed) {
+			return;
+		}
+		this._color = { ...parsed, a: this._color.a };
+		this._field.value = this._serializeColor(this._colorFormat, this._color);
+		this._renderColorUi();
+		this._reflectValueAttribute();
+		this.dispatchEvent(
+			new CustomEvent('bf-input', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					value: this._field.value,
+				},
+			}),
+		);
+	}
+
+	_onSwatchClick() {
+		if (this._isColorType() && !this.hasAttribute('disabled')) {
+			this._picker.click();
+		}
+	}
+
+	_isColorType() {
+		return (this.getAttribute('type') || 'text').toLowerCase() === 'color';
+	}
+
+	_allowedColorFormats() {
+		const hasHex = this.hasAttribute('hex');
+		const hasRgba = this.hasAttribute('rgba');
+		if (hasHex && hasRgba) {
+			return ['hex', 'rgba'];
+		}
+		if (hasHex) {
+			return ['hex'];
+		}
+		if (hasRgba) {
+			return ['rgba'];
+		}
+		const explicit = (this.getAttribute('format') || '').toLowerCase();
+		if (explicit === 'hex') {
+			return ['hex'];
+		}
+		if (explicit === 'rgba') {
+			return ['rgba'];
+		}
+		return ['hex', 'rgba'];
+	}
+
+	_resolveColorFormat(allowed) {
+		const explicit = (this.getAttribute('format') || '').toLowerCase();
+		if (allowed.includes(explicit)) {
+			return explicit;
+		}
+		if (allowed.includes(this._colorFormat)) {
+			return this._colorFormat;
+		}
+		return allowed[0] || 'hex';
+	}
+
+	_resolveSwatchPosition() {
+		const explicit = (this.getAttribute('swatch') || '').toLowerCase();
+		if (explicit === 'left' || explicit === 'right' || explicit === 'hidden') {
+			return explicit;
+		}
+		if (this.hasAttribute('swatch-hidden')) {
+			return 'hidden';
+		}
+		if (this.hasAttribute('right')) {
+			return 'right';
+		}
+		if (this.hasAttribute('left')) {
+			return 'left';
+		}
+		return 'left';
+	}
+
+	_normalizeHex(hexValue) {
+		return this._serializeColor('hex', this._parseHex(hexValue) || this._color);
+	}
+
+	_renderColorUi() {
+		const swatchPosition = this._resolveSwatchPosition();
+		const allowedFormats = this._allowedColorFormats();
+		this._colorFormat = this._resolveColorFormat(allowedFormats);
+
+		this._root.classList.add('is-color');
+		this._root.classList.toggle('swatch-right', swatchPosition === 'right');
+		this._root.classList.toggle('swatch-hidden', swatchPosition === 'hidden');
+		this._format.innerHTML = allowedFormats
+			.map((value) => `<option value="${value}">${value.toUpperCase()}</option>`)
+			.join('');
+		this._format.value = this._colorFormat;
+		this._format.hidden = allowedFormats.length <= 1;
+		this._picker.value = this._normalizeHex(this._serializeColor('hex', this._color));
+		this._swatch.style.background = this._serializeColor('rgba', this._color);
+	}
+
+	_renderDefaultUi() {
+		this._root.classList.remove('is-color', 'swatch-right', 'swatch-hidden');
+	}
+
+	_clampChannel(value) {
+		return Math.min(255, Math.max(0, value));
+	}
+
+	_clampAlpha(value) {
+		return Math.min(1, Math.max(0, value));
+	}
+
+	_parseHex(value) {
+		const raw = `${value || ''}`.trim().replace(/^#/, '');
+		if (!raw) {
+			return null;
+		}
+		if (raw.length === 3 || raw.length === 4) {
+			const r = Number.parseInt(raw[0] + raw[0], 16);
+			const g = Number.parseInt(raw[1] + raw[1], 16);
+			const b = Number.parseInt(raw[2] + raw[2], 16);
+			const a = raw.length === 4 ? Number.parseInt(raw[3] + raw[3], 16) / 255 : 1;
+			if ([r, g, b, a].some((v) => Number.isNaN(v))) {
+				return null;
+			}
+			return { r, g, b, a };
+		}
+		if (raw.length === 6 || raw.length === 8) {
+			const r = Number.parseInt(raw.slice(0, 2), 16);
+			const g = Number.parseInt(raw.slice(2, 4), 16);
+			const b = Number.parseInt(raw.slice(4, 6), 16);
+			const a = raw.length === 8 ? Number.parseInt(raw.slice(6, 8), 16) / 255 : 1;
+			if ([r, g, b, a].some((v) => Number.isNaN(v))) {
+				return null;
+			}
+			return { r, g, b, a };
+		}
+		return null;
+	}
+
+	_parseRgba(value) {
+		const match = `${value || ''}`
+			.trim()
+			.match(/^rgba?\(\s*([^\)]+)\s*\)$/i);
+		if (!match) {
+			return null;
+		}
+		const parts = match[1].split(',').map((part) => part.trim());
+		if (parts.length !== 3 && parts.length !== 4) {
+			return null;
+		}
+		const r = Number.parseFloat(parts[0]);
+		const g = Number.parseFloat(parts[1]);
+		const b = Number.parseFloat(parts[2]);
+		const a = parts.length === 4 ? Number.parseFloat(parts[3]) : 1;
+		if ([r, g, b, a].some((v) => Number.isNaN(v))) {
+			return null;
+		}
+		return {
+			r: this._clampChannel(r),
+			g: this._clampChannel(g),
+			b: this._clampChannel(b),
+			a: this._clampAlpha(a),
+		};
+	}
+
+	_tryConsumeColorString(value) {
+		const parsedHex = this._parseHex(value);
+		if (parsedHex) {
+			this._color = parsedHex;
+			this._renderColorUi();
+			return true;
+		}
+		const parsedRgba = this._parseRgba(value);
+		if (parsedRgba) {
+			this._color = parsedRgba;
+			this._renderColorUi();
+			return true;
+		}
+		return false;
+	}
+
+	_toHexChannel(value) {
+		return Math.round(this._clampChannel(value))
+			.toString(16)
+			.padStart(2, '0');
+	}
+
+	_toAlphaString(value) {
+		const rounded = Math.round(this._clampAlpha(value) * 1000) / 1000;
+		return `${rounded}`;
+	}
+
+	_serializeColor(format, color) {
+		if (format === 'rgba') {
+			return `rgba(${Math.round(color.r)}, ${Math.round(color.g)}, ${Math.round(
+				color.b,
+			)}, ${this._toAlphaString(color.a)})`;
+		}
+		return `#${this._toHexChannel(color.r)}${this._toHexChannel(color.g)}${this._toHexChannel(color.b)}`;
+	}
+
+	_syncState() {
+		if (!this._field || !this._root) {
+			return;
+		}
+
+		const type = (this.getAttribute('type') || 'text').toLowerCase();
+		const value = this.getAttribute('value') || '';
+		this._field.type = type === 'color' ? 'text' : type;
+		this._field.value = value;
+		this._field.placeholder = this.getAttribute('placeholder') || '';
+		this._field.disabled = this.hasAttribute('disabled');
+		this._field.required = this.hasAttribute('required');
+		this._field.readOnly = this.hasAttribute('readonly');
+		this._field.name = this.getAttribute('name') || '';
+		this._field.min = this.getAttribute('min') || '';
+		this._field.max = this.getAttribute('max') || '';
+		this._field.step = this.getAttribute('step') || '';
+		if (this.getAttribute('label')) {
+			this._field.setAttribute('aria-label', this.getAttribute('label'));
+		} else {
+			this._field.removeAttribute('aria-label');
+		}
+
+		if (type === 'color') {
+			if (!this._tryConsumeColorString(value)) {
+				if (!value) {
+					this._color = { r: 0, g: 0, b: 0, a: 1 };
+				}
+			}
+			this._renderColorUi();
+			this._field.value = this._serializeColor(this._colorFormat, this._color);
+			this._reflectValueAttribute();
+		} else {
+			this._renderDefaultUi();
+		}
 	}
 }
 

package/dist/components/list.css

@@ -28,3 +28,14 @@
 	padding: var(--bf-list-padding-y) var(--bf-list-padding-x);
 	transition: var(--bf-list-transition);
 }
+
+.root ::slotted([item]) {
+	display: block;
+	padding: 0.45rem 0.6rem;
+	border-radius: 0.4rem;
+	cursor: pointer;
+}
+
+.root ::slotted([item]:hover) {
+	background: var(--bf-theme-surface-2, #f8fafc);
+}

package/dist/components/list.js

@@ -2,6 +2,7 @@ class BfList extends HTMLElement {
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onSlotChange = this._onSlotChange.bind(this);
 	}
 
 	connectedCallback() {
@@ -25,6 +26,50 @@ class BfList extends HTMLElement {
 		}
 
 		this.shadowRoot.replaceChildren(link, root);
+		this._slot = root.querySelector('slot');
+		this._slot.addEventListener('slotchange', this._onSlotChange);
+		this._onSlotChange();
+	}
+
+	_onSlotChange() {
+		if (!this._slot) {
+			return;
+		}
+		const items = this._slot
+			.assignedElements({ flatten: true })
+			.filter((element) => element.hasAttribute('item'));
+
+		for (const [index, item] of items.entries()) {
+			item.setAttribute('role', item.getAttribute('role') || 'listitem');
+			if (!item.hasAttribute('tabindex')) {
+				item.setAttribute('tabindex', '0');
+			}
+			if (item.dataset.bfListBound === 'true') {
+				continue;
+			}
+			item.dataset.bfListBound = 'true';
+			item.addEventListener('click', () => this._emitSelect(item, index));
+			item.addEventListener('keydown', (event) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault();
+					this._emitSelect(item, index);
+				}
+			});
+		}
+	}
+
+	_emitSelect(item, index) {
+		this.dispatchEvent(
+			new CustomEvent('bf-select', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					index,
+					id: item.id || '',
+					value: item.getAttribute('value') || item.textContent?.trim() || '',
+				},
+			}),
+		);
 	}
 }
 

package/dist/components/menu.css

@@ -28,3 +28,23 @@
 	padding: var(--bf-menu-padding-y) var(--bf-menu-padding-x);
 	transition: var(--bf-menu-transition);
 }
+
+.root[data-variant='context'][data-open='false'] {
+	display: none;
+}
+
+.root[data-variant='context'] {
+	min-width: 11rem;
+	box-shadow: 0 14px 36px rgba(2, 6, 23, 0.2);
+}
+
+.root ::slotted([item]) {
+	display: block;
+	padding: 0.45rem 0.6rem;
+	border-radius: 0.4rem;
+	cursor: pointer;
+}
+
+.root ::slotted([item]:hover) {
+	background: var(--bf-theme-surface-2, #f8fafc);
+}

package/dist/components/menu.js

@@ -1,11 +1,17 @@
 class BfMenu extends HTMLElement {
+	static observedAttributes = ['variant', 'context', 'open', 'x', 'y', 'for'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onSlotChange = this._onSlotChange.bind(this);
+		this._onDocumentClick = this._onDocumentClick.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
+			this._onSlotChange();
 			return;
 		}
 		this._initialized = true;
@@ -25,6 +31,144 @@ class BfMenu extends HTMLElement {
 		}
 
 		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._slot = root.querySelector('slot');
+		this._slot.addEventListener('slotchange', this._onSlotChange);
+		this._bindContextTarget();
+		document.addEventListener('click', this._onDocumentClick);
+		this._onSlotChange();
+		this._sync();
+	}
+
+	disconnectedCallback() {
+		document.removeEventListener('click', this._onDocumentClick);
+		if (this._contextTarget) {
+			this._contextTarget.removeEventListener('contextmenu', this._boundContextMenuHandler);
+		}
+	}
+
+	attributeChangedCallback(name) {
+		if (name === 'for') {
+			this._bindContextTarget();
+		}
+		this._sync();
+	}
+
+	open() {
+		this.setAttribute('open', '');
+	}
+
+	close() {
+		this.removeAttribute('open');
+	}
+
+	toggle() {
+		if (this.hasAttribute('open')) {
+			this.close();
+			return;
+		}
+		this.open();
+	}
+
+	_isContextMode() {
+		const variant = (this.getAttribute('variant') || '').toLowerCase();
+		return variant === 'context' || this.hasAttribute('context');
+	}
+
+	_bindContextTarget() {
+		if (!this._isContextMode()) {
+			return;
+		}
+		if (this._contextTarget && this._boundContextMenuHandler) {
+			this._contextTarget.removeEventListener('contextmenu', this._boundContextMenuHandler);
+		}
+		const targetId = this.getAttribute('for');
+		this._contextTarget = targetId ? document.getElementById(targetId) : this.parentElement;
+		if (!this._contextTarget) {
+			return;
+		}
+		this._boundContextMenuHandler = (event) => {
+			event.preventDefault();
+			this.setAttribute('x', `${event.clientX}`);
+			this.setAttribute('y', `${event.clientY}`);
+			this.open();
+		};
+		this._contextTarget.addEventListener('contextmenu', this._boundContextMenuHandler);
+	}
+
+	_onDocumentClick(event) {
+		if (!this._isContextMode() || !this.hasAttribute('open')) {
+			return;
+		}
+		const path = event.composedPath();
+		if (path.includes(this)) {
+			return;
+		}
+		this.close();
+	}
+
+	_onSlotChange() {
+		if (!this._slot) {
+			return;
+		}
+		const items = this._slot
+			.assignedElements({ flatten: true })
+			.filter((element) => element.hasAttribute('item'));
+
+		for (const [index, item] of items.entries()) {
+			item.setAttribute('role', item.getAttribute('role') || 'menuitem');
+			if (!item.hasAttribute('tabindex')) {
+				item.setAttribute('tabindex', '0');
+			}
+			if (item.dataset.bfMenuBound === 'true') {
+				continue;
+			}
+			item.dataset.bfMenuBound = 'true';
+			item.addEventListener('click', () => this._emitSelect(item, index));
+			item.addEventListener('keydown', (event) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault();
+					this._emitSelect(item, index);
+				}
+			});
+		}
+	}
+
+	_emitSelect(item, index) {
+		this.dispatchEvent(
+			new CustomEvent('bf-select', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					index,
+					id: item.id || '',
+					value: item.getAttribute('value') || item.textContent?.trim() || '',
+				},
+			}),
+		);
+		if (this._isContextMode()) {
+			this.close();
+		}
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+		const context = this._isContextMode();
+		this._root.setAttribute('data-variant', context ? 'context' : 'menu');
+		this._root.setAttribute('data-open', this.hasAttribute('open') ? 'true' : 'false');
+		if (context) {
+			this.style.position = 'fixed';
+			this.style.left = `${Number.parseFloat(this.getAttribute('x') || '0') || 0}px`;
+			this.style.top = `${Number.parseFloat(this.getAttribute('y') || '0') || 0}px`;
+			this.style.zIndex = '1300';
+		} else {
+			this.style.position = '';
+			this.style.left = '';
+			this.style.top = '';
+			this.style.zIndex = '';
+		}
 	}
 }
 

package/dist/components/modal.css

@@ -1,30 +1,43 @@
 :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);
-
+	--bf-modal-border-color: var(--bf-theme-modal-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-modal-radius: var(--bf-theme-radius-md, 10px);
+	--bf-modal-backdrop: rgba(2, 6, 23, 0.48);
+	--bf-modal-max-w: 34rem;
+	--bf-modal-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
 	display: block;
 	font: var(--bf-modal-font);
-	color: var(--bf-modal-color);
+	z-index: 1200;
 }
 
 .root {
+	position: fixed;
+	inset: 0;
+	display: grid;
+	align-items: center;
+	justify-items: center;
+	padding: 1rem;
+}
+
+.root[data-open='false'] {
+	display: none;
+}
+
+.backdrop {
+	position: absolute;
+	inset: 0;
+	background: var(--bf-modal-backdrop);
+}
+
+.panel {
+	position: relative;
+	width: min(100%, var(--bf-modal-max-w));
 	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: 1px solid 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);
+	padding: 1rem;
+	box-shadow: var(--bf-modal-shadow);
 }