bareframe 0.1.0 → 0.1.1

package/dist/components/radio.js

@@ -1,11 +1,15 @@
 class BfRadio extends HTMLElement {
+	static observedAttributes = ['checked', 'disabled', 'label', 'value', 'group'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onInputChange = this._onInputChange.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._syncState();
 			return;
 		}
 		this._initialized = true;
@@ -15,16 +19,93 @@ class BfRadio extends HTMLElement {
 		link.rel = 'stylesheet';
 		link.href = cssUrl.href;
 
-		const root = document.createElement('div');
+		const root = document.createElement('label');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<input type="radio" part="input" />
+			<span class="dot" part="dot"></span>
+			<span class="text" part="text"><slot></slot></span>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._input = this.shadowRoot.querySelector('input');
+		this._input.addEventListener('change', this._onInputChange);
+		this._syncState();
+	}
+
+	attributeChangedCallback() {
+		this._syncState();
+	}
+
+	get checked() {
+		return this.hasAttribute('checked');
+	}
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'radio';
+	set checked(value) {
+		if (value) {
+			this.setAttribute('checked', '');
+			return;
 		}
+		this.removeAttribute('checked');
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	_onInputChange() {
+		if (this._input.checked) {
+			this.checked = true;
+			this._uncheckPeers();
+		}
+
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					group: this._effectiveGroup(),
+					value: this.value,
+					checked: this.checked,
+				},
+			}),
+		);
+	}
+
+	_uncheckPeers() {
+		const group = this._effectiveGroup();
+		if (!group) {
+			return;
+		}
+		const peers = document.querySelectorAll(`bf-radio[group="${CSS.escape(group)}"]`);
+		for (const peer of peers) {
+			if (peer !== this) {
+				peer.checked = false;
+			}
+		}
+	}
+
+	_effectiveGroup() {
+		return this.getAttribute('group') || '';
+	}
+
+	get value() {
+		return this.getAttribute('value') || this.textContent?.trim() || '';
+	}
+
+	_syncState() {
+		if (!this._input) {
+			return;
+		}
+		const group = this._effectiveGroup();
+		this._input.name = group;
+		this._input.value = this.value;
+		this._input.checked = this.checked;
+		this._input.disabled = this.hasAttribute('disabled');
+		const hasLabelText = (this.textContent || '').trim().length > 0;
+		if (!hasLabelText && !this.getAttribute('label')) {
+			this.setAttribute('label', 'radio');
+		}
+		if (this.getAttribute('label')) {
+			this.setAttribute('aria-label', this.getAttribute('label'));
+		}
 	}
 }
 

package/dist/components/range.css

@@ -0,0 +1,91 @@
+:host {
+	--bf-range-font: var(--bf-theme-font-family, inherit);
+	--bf-range-track: var(--bf-theme-surface-2, #e2e8f0);
+	--bf-range-fill: var(--bf-theme-button-primary-bg, #2563eb);
+	--bf-range-rating-active: var(--bf-theme-button-primary-bg, #2563eb);
+	--bf-range-rating-muted: var(--bf-theme-border-1, #cbd5e1);
+	display: inline-flex;
+	font: var(--bf-range-font);
+}
+
+.root {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 0.4rem;
+	min-width: 12rem;
+}
+
+.single,
+.dual,
+.rating {
+	display: none;
+}
+
+.root[data-mode='slider'] .single {
+	display: block;
+}
+
+.root[data-mode='range'] .dual {
+	display: block;
+	position: relative;
+	padding-block: 0.35rem;
+}
+
+.root[data-mode='rating'] .rating {
+	display: inline-flex;
+	gap: 0.25rem;
+}
+
+input[type='range'] {
+	width: 100%;
+	accent-color: var(--bf-range-fill);
+}
+
+.dual-track {
+	position: absolute;
+	inset: 50% 0 auto;
+	height: 0.35rem;
+	transform: translateY(-50%);
+	background: var(--bf-range-track);
+	border-radius: 999px;
+}
+
+.dual-fill {
+	position: absolute;
+	height: 100%;
+	background: var(--bf-range-fill);
+	border-radius: inherit;
+}
+
+.dual input[type='range'] {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	background: transparent;
+	pointer-events: none;
+}
+
+.dual input[type='range']::-webkit-slider-thumb {
+	pointer-events: auto;
+}
+
+.dual input[type='range']::-moz-range-thumb {
+	pointer-events: auto;
+}
+
+.star {
+	border: 0;
+	background: transparent;
+	color: var(--bf-range-rating-muted);
+	font: inherit;
+	font-size: 1.1rem;
+	cursor: pointer;
+	padding: 0;
+	line-height: 1;
+}
+
+.star.is-active {
+	color: var(--bf-range-rating-active);
+}

package/dist/components/range.js

@@ -0,0 +1,250 @@
+class BfRange extends HTMLElement {
+	static observedAttributes = [
+		'mode',
+		'slider',
+		'range',
+		'rating',
+		'value',
+		'low',
+		'high',
+		'min',
+		'max',
+		'step',
+		'count',
+		'disabled',
+		'label',
+		'name',
+	];
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		this._onSingleInput = this._onSingleInput.bind(this);
+		this._onRangeInput = this._onRangeInput.bind(this);
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			this._sync();
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./range.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="single" part="single">
+				<input class="single-input" type="range" part="input" />
+			</div>
+			<div class="dual" part="dual">
+				<div class="dual-track" part="track">
+					<div class="dual-fill" part="fill"></div>
+				</div>
+				<input class="dual-low" type="range" part="low" />
+				<input class="dual-high" type="range" part="high" />
+			</div>
+			<div class="rating" part="rating"></div>
+			<div class="meta" part="meta"><slot></slot></div>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._single = root.querySelector('.single-input');
+		this._dualLow = root.querySelector('.dual-low');
+		this._dualHigh = root.querySelector('.dual-high');
+		this._dualFill = root.querySelector('.dual-fill');
+		this._rating = root.querySelector('.rating');
+
+		this._single.addEventListener('input', this._onSingleInput);
+		this._single.addEventListener('change', this._onSingleInput);
+		this._dualLow.addEventListener('input', this._onRangeInput);
+		this._dualLow.addEventListener('change', this._onRangeInput);
+		this._dualHigh.addEventListener('input', this._onRangeInput);
+		this._dualHigh.addEventListener('change', this._onRangeInput);
+
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	_mode() {
+		const explicit = (this.getAttribute('mode') || '').toLowerCase();
+		if (['slider', 'range', 'rating'].includes(explicit)) {
+			return explicit;
+		}
+		if (this.hasAttribute('rating')) {
+			return 'rating';
+		}
+		if (this.hasAttribute('range')) {
+			return 'range';
+		}
+		return 'slider';
+	}
+
+	_min() {
+		const parsed = Number.parseFloat(this.getAttribute('min') || '0');
+		return Number.isFinite(parsed) ? parsed : 0;
+	}
+
+	_max() {
+		const parsed = Number.parseFloat(this.getAttribute('max') || '100');
+		return Number.isFinite(parsed) && parsed > this._min() ? parsed : this._min() + 100;
+	}
+
+	_step() {
+		const parsed = Number.parseFloat(this.getAttribute('step') || '1');
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
+	}
+
+	_parseValue(attrName, fallback) {
+		const parsed = Number.parseFloat(this.getAttribute(attrName) || `${fallback}`);
+		if (!Number.isFinite(parsed)) {
+			return fallback;
+		}
+		return Math.min(this._max(), Math.max(this._min(), parsed));
+	}
+
+	_count() {
+		const parsed = Number.parseInt(this.getAttribute('count') || '5', 10);
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : 5;
+	}
+
+	_setValueAttr(attrName, value) {
+		const next = `${value}`;
+		if (this.getAttribute(attrName) === next) {
+			return;
+		}
+		this.setAttribute(attrName, next);
+	}
+
+	_emit(kind) {
+		const mode = this._mode();
+		this.dispatchEvent(
+			new CustomEvent(kind, {
+				bubbles: true,
+				composed: true,
+				detail: {
+					mode,
+					value: mode === 'range'
+						? [this._parseValue('low', this._min()), this._parseValue('high', this._max())]
+						: this._parseValue('value', this._min()),
+				},
+			}),
+		);
+	}
+
+	_onSingleInput(event) {
+		this._setValueAttr('value', event.target.value);
+		this._emit(event.type === 'change' ? 'bf-change' : 'bf-input');
+	}
+
+	_onRangeInput(event) {
+		let low = this._parseValue('low', this._min());
+		let high = this._parseValue('high', this._max());
+		const next = Number.parseFloat(event.target.value);
+
+		if (event.target === this._dualLow) {
+			low = Math.min(next, high);
+		} else {
+			high = Math.max(next, low);
+		}
+
+		this._setValueAttr('low', low);
+		this._setValueAttr('high', high);
+		this._sync();
+		this._emit(event.type === 'change' ? 'bf-change' : 'bf-input');
+	}
+
+	_renderRating() {
+		this._rating.replaceChildren();
+		const count = this._count();
+		const current = this._parseValue('value', 0);
+		const disabled = this.hasAttribute('disabled');
+
+		for (let i = 1; i <= count; i += 1) {
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.className = 'star';
+			button.textContent = '*';
+			button.disabled = disabled;
+			button.setAttribute('aria-label', `${i}`);
+			if (i <= current) {
+				button.classList.add('is-active');
+			}
+			button.addEventListener('click', () => {
+				this._setValueAttr('value', i);
+				this._sync();
+				this._emit('bf-change');
+			});
+			this._rating.append(button);
+		}
+	}
+
+	_syncDualFill() {
+		const min = this._min();
+		const max = this._max();
+		const low = this._parseValue('low', min);
+		const high = this._parseValue('high', max);
+		const left = ((low - min) / (max - min)) * 100;
+		const width = ((high - low) / (max - min)) * 100;
+		this._dualFill.style.left = `${left}%`;
+		this._dualFill.style.width = `${width}%`;
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+
+		const mode = this._mode();
+		const min = this._min();
+		const max = this._max();
+		const step = this._step();
+		const disabled = this.hasAttribute('disabled');
+		const label = this.getAttribute('label') || '';
+		const name = this.getAttribute('name') || '';
+
+		this._root.setAttribute('data-mode', mode);
+
+		this._single.min = `${min}`;
+		this._single.max = `${max}`;
+		this._single.step = `${step}`;
+		this._single.value = `${this._parseValue('value', min)}`;
+		this._single.disabled = disabled;
+		this._single.name = name;
+
+		this._dualLow.min = `${min}`;
+		this._dualLow.max = `${max}`;
+		this._dualLow.step = `${step}`;
+		this._dualLow.value = `${this._parseValue('low', min)}`;
+		this._dualLow.disabled = disabled;
+		this._dualLow.name = `${name ? `${name}-` : ''}low`;
+
+		this._dualHigh.min = `${min}`;
+		this._dualHigh.max = `${max}`;
+		this._dualHigh.step = `${step}`;
+		this._dualHigh.value = `${this._parseValue('high', max)}`;
+		this._dualHigh.disabled = disabled;
+		this._dualHigh.name = `${name ? `${name}-` : ''}high`;
+
+		this._syncDualFill();
+		this._renderRating();
+
+		if (label) {
+			this._single.setAttribute('aria-label', label);
+			this._dualLow.setAttribute('aria-label', `${label} low`);
+			this._dualHigh.setAttribute('aria-label', `${label} high`);
+			this._rating.setAttribute('aria-label', label);
+		}
+	}
+}
+
+customElements.define('bf-range', BfRange);

package/dist/components/select.css

@@ -19,12 +19,46 @@
 }
 
 .root {
+	position: relative;
 	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);
 }
+
+select {
+	appearance: none;
+	-webkit-appearance: none;
+	width: 100%;
+	border: 0;
+	outline: 0;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	padding: var(--bf-select-padding-y) calc(var(--bf-select-padding-x) * 2.1)
+		var(--bf-select-padding-y) var(--bf-select-padding-x);
+}
+
+.root.is-multi select {
+	padding-right: var(--bf-select-padding-x);
+}
+
+.chevron {
+	position: absolute;
+	top: 50%;
+	right: var(--bf-select-padding-x);
+	width: 0.6rem;
+	height: 0.6rem;
+	transform: translateY(-60%) rotate(45deg);
+	border-right: 2px solid currentColor;
+	border-bottom: 2px solid currentColor;
+	opacity: 0.7;
+	pointer-events: none;
+}
+
+.root.is-multi .chevron {
+	display: none;
+}