bareframe 0.1.0 → 0.1.1

package/dist/components/modal.js

@@ -1,11 +1,15 @@
 class BfModal extends HTMLElement {
+	static observedAttributes = ['open', 'label'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onBackdropClick = this._onBackdropClick.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +22,73 @@ class BfModal extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<div class="backdrop" part="backdrop"></div>
+			<div class="panel" part="panel"><slot></slot></div>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._backdrop = root.querySelector('.backdrop');
+		this._backdrop.addEventListener('click', this._onBackdropClick);
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'modal';
+		if (!this.textContent?.trim()) {
+			this.textContent = 'modal';
 		}
 
-		this.shadowRoot.replaceChildren(link, root);
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	open() {
+		this.setAttribute('open', '');
+	}
+
+	close() {
+		this.removeAttribute('open');
+	}
+
+	toggle() {
+		if (this.hasAttribute('open')) {
+			this.close();
+			return;
+		}
+		this.open();
+	}
+
+	_onBackdropClick() {
+		if (this.hasAttribute('persistent')) {
+			return;
+		}
+		this.close();
+	}
+
+	_shouldOpenByDefault() {
+		return !this.hasAttribute('id');
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+
+		if (!this.hasAttribute('open') && this._shouldOpenByDefault()) {
+			this.setAttribute('open', '');
+			return;
+		}
+
+		const isOpen = this.hasAttribute('open');
+		this.hidden = !isOpen;
+		this._root.setAttribute('data-open', isOpen ? 'true' : 'false');
+		this.setAttribute('aria-hidden', String(!isOpen));
+		this.setAttribute('role', 'dialog');
+		this.setAttribute('aria-modal', 'true');
+		if (this.getAttribute('label')) {
+			this.setAttribute('aria-label', this.getAttribute('label'));
+		}
 	}
 }
 

package/dist/components/nav.css

@@ -19,6 +19,10 @@
 }
 
 .root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--bf-nav-padding-x);
 	background: var(--bf-nav-bg);
 	color: var(--bf-nav-color);
 	border-width: var(--bf-nav-border-width);
@@ -28,3 +32,38 @@
 	padding: var(--bf-nav-padding-y) var(--bf-nav-padding-x);
 	transition: var(--bf-nav-transition);
 }
+
+::slotted([col]),
+::slotted([nav-col]) {
+	display: flex;
+	align-items: center;
+	gap: var(--bf-nav-padding-x);
+	min-width: 0;
+}
+
+::slotted([col]:first-child),
+::slotted([nav-col]:first-child) {
+	justify-content: flex-start;
+	flex: 1 1 0;
+}
+
+::slotted([col]:nth-child(2)),
+::slotted([nav-col]:nth-child(2)) {
+	justify-content: center;
+	flex: 1 1 0;
+}
+
+::slotted([col]:last-child),
+::slotted([nav-col]:last-child) {
+	justify-content: flex-end;
+	flex: 1 1 0;
+}
+
+::slotted([row]),
+::slotted([nav-row]) {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--bf-nav-padding-x);
+	width: 100%;
+}

package/dist/components/progress.css

@@ -0,0 +1,196 @@
+:host {
+	--bf-progress-font: var(--bf-theme-font-family, inherit);
+	--bf-progress-bg: var(--bf-theme-progress-bar-bg, var(--bf-theme-surface-2, #e2e8f0));
+	--bf-progress-color: var(--bf-theme-progress-bar-color, var(--bf-theme-button-primary-bg, #2563eb));
+	--bf-progress-ring-bg: var(--bf-theme-progress-circle-bg, var(--bf-theme-surface-2, #e2e8f0));
+	--bf-progress-ring-color: var(--bf-theme-progress-circle-color, var(--bf-theme-button-primary-bg, #2563eb));
+	--bf-progress-radius: var(--bf-theme-radius-md, 999px);
+	--bf-progress-track-height: 0.7rem;
+	--bf-progress-size-sm: 2rem;
+	--bf-progress-size-md: 3rem;
+	--bf-progress-size-lg: 4rem;
+
+	display: inline-flex;
+	font: var(--bf-progress-font);
+	color: var(--bf-theme-text-1, #0f172a);
+}
+
+.root {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.linear {
+	display: inline-block;
+	min-width: 8rem;
+}
+
+.track {
+	width: 100%;
+	height: var(--bf-progress-track-height);
+	border-radius: var(--bf-progress-radius);
+	background: var(--bf-progress-bg);
+	overflow: hidden;
+}
+
+.fill {
+	height: 100%;
+	width: 0;
+	background: var(--bf-progress-color);
+	transition: width 160ms ease;
+}
+
+.circular {
+	display: none;
+}
+
+.circular svg {
+	width: var(--bf-progress-size-md);
+	height: var(--bf-progress-size-md);
+	transform: rotate(-90deg);
+}
+
+.ring,
+.meter {
+	fill: none;
+	stroke-width: 10;
+}
+
+.ring {
+	stroke: var(--bf-progress-ring-bg);
+}
+
+.meter {
+	stroke: var(--bf-progress-ring-color);
+	stroke-linecap: round;
+	transition: stroke-dashoffset 180ms ease;
+}
+
+.meta:empty {
+	display: none;
+}
+
+.root[data-variant='circular'] .linear {
+	display: none;
+}
+
+.root[data-variant='circular'] .circular {
+	display: inline-block;
+}
+
+.root[data-variant='striped'] .fill {
+	background-image: linear-gradient(
+		45deg,
+		rgba(255, 255, 255, 0.25) 25%,
+		transparent 25%,
+		transparent 50%,
+		rgba(255, 255, 255, 0.25) 50%,
+		rgba(255, 255, 255, 0.25) 75%,
+		transparent 75%,
+		transparent
+	);
+	background-size: 0.9rem 0.9rem;
+}
+
+.root[data-tone='primary'] {
+	--bf-progress-color: var(--bf-theme-button-primary-bg, #2563eb);
+	--bf-progress-ring-color: var(--bf-theme-button-primary-bg, #2563eb);
+}
+
+.root[data-tone='secondary'] {
+	--bf-progress-color: var(--bf-theme-button-secondary-color, #1d4ed8);
+	--bf-progress-ring-color: var(--bf-theme-button-secondary-color, #1d4ed8);
+}
+
+.root[data-loading='true'][data-variant='striped'] .fill,
+.root[data-loading='true'][data-loading-variant='stripe'] .fill {
+	animation: bf-progress-stripes 700ms linear infinite;
+}
+
+.root[data-loading='true'][data-loading-variant='pulse'] .fill {
+	animation: bf-progress-pulse 900ms ease-in-out infinite;
+}
+
+.root[data-loading='true'][data-loading-variant='bounce'] .fill {
+	transform-origin: left center;
+	animation: bf-progress-bounce 900ms ease-in-out infinite;
+}
+
+.root[data-loading='true'][data-variant='circular'] .circular svg,
+.root[data-loading='true'][data-loading-variant='spin'][data-variant='circular'] .circular svg {
+	animation: bf-progress-spin 1s linear infinite;
+}
+
+.root[data-loading='true'][data-variant='circular'] .meter {
+	animation: bf-progress-meter 1.1s ease-in-out infinite;
+}
+
+.root[data-size='sm'] .circular svg {
+	width: var(--bf-progress-size-sm);
+	height: var(--bf-progress-size-sm);
+}
+
+.root[data-size='lg'] .circular svg {
+	width: var(--bf-progress-size-lg);
+	height: var(--bf-progress-size-lg);
+}
+
+@keyframes bf-progress-indeterminate {
+	0% {
+		transform: translateX(-120%);
+	}
+	100% {
+		transform: translateX(260%);
+	}
+}
+
+@keyframes bf-progress-stripes {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 0.9rem 0;
+	}
+}
+
+@keyframes bf-progress-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.45;
+	}
+}
+
+@keyframes bf-progress-bounce {
+	0%,
+	100% {
+		transform: scaleX(1);
+	}
+	50% {
+		transform: scaleX(0.7);
+	}
+}
+
+@keyframes bf-progress-spin {
+	0% {
+		transform: rotate(-90deg);
+	}
+	100% {
+		transform: rotate(270deg);
+	}
+}
+
+@keyframes bf-progress-meter {
+	0% {
+		stroke-dashoffset: 220;
+	}
+	50% {
+		stroke-dashoffset: 80;
+	}
+	100% {
+		stroke-dashoffset: 220;
+	}
+}

package/dist/components/progress.js

@@ -0,0 +1,304 @@
+class BfProgress extends HTMLElement {
+	static observedAttributes = [
+		'variant',
+		'value',
+		'max',
+		'label',
+		'size',
+		'loading',
+		'loading-variant',
+		'loading-ms',
+		'linear',
+		'circular',
+		'indeterminate',
+		'striped',
+		'tone',
+		'primary',
+		'secondary',
+	];
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+		this._onSlotChange = this._onSlotChange.bind(this);
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			this._sync();
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./progress.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="linear" part="linear">
+				<div class="track" part="track">
+					<div class="fill" part="fill"></div>
+				</div>
+			</div>
+			<div class="circular" part="circular">
+				<svg viewBox="0 0 100 100" aria-hidden="true">
+					<circle class="ring" cx="50" cy="50" r="42"></circle>
+					<circle class="meter" cx="50" cy="50" r="42"></circle>
+				</svg>
+			</div>
+			<div class="meta" part="meta"><slot></slot></div>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._fill = root.querySelector('.fill');
+		this._meter = root.querySelector('.meter');
+		this._slot = root.querySelector('slot');
+		this._slot.addEventListener('slotchange', this._onSlotChange);
+		this._sync();
+	}
+
+	disconnectedCallback() {
+		this._stopLoading();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	get value() {
+		return this._value();
+	}
+
+	set value(nextValue) {
+		this.setAttribute('value', String(nextValue));
+	}
+
+	get max() {
+		return this._max();
+	}
+
+	set max(nextValue) {
+		this.setAttribute('max', String(nextValue));
+	}
+
+	get variant() {
+		return this._variant();
+	}
+
+	set variant(nextValue) {
+		this.setAttribute('variant', String(nextValue));
+	}
+
+	get size() {
+		return this.getAttribute('size') || 'md';
+	}
+
+	set size(nextValue) {
+		this.setAttribute('size', String(nextValue));
+	}
+
+	get tone() {
+		return this._tone();
+	}
+
+	set tone(nextValue) {
+		this.setAttribute('tone', String(nextValue));
+	}
+
+	get loading() {
+		return this.hasAttribute('loading');
+	}
+
+	set loading(nextValue) {
+		if (nextValue) {
+			this.setAttribute('loading', '');
+			return;
+		}
+		this.removeAttribute('loading');
+	}
+
+	_onSlotChange() {
+		this._renderValueTokens();
+	}
+
+	_variant() {
+		let variant = (this.getAttribute('variant') || '').toLowerCase();
+		if (!variant) {
+			if (this.hasAttribute('circular')) {
+				variant = 'circular';
+			} else if (this.hasAttribute('striped')) {
+				variant = 'striped';
+			} else if (this.hasAttribute('linear')) {
+				variant = 'linear';
+			}
+		}
+		if (!variant) {
+			variant = 'linear';
+		}
+		if (variant === 'circlular') {
+			variant = 'circular';
+		}
+		if (variant === 'indeterminate') {
+			return 'linear';
+		}
+		if (['linear', 'circular', 'striped'].includes(variant)) {
+			return variant;
+		}
+		return 'linear';
+	}
+
+	_tone() {
+		const explicit = (this.getAttribute('tone') || '').toLowerCase();
+		if (explicit === 'secondary') {
+			return 'secondary';
+		}
+		if (explicit === 'primary') {
+			return 'primary';
+		}
+		if (this.hasAttribute('secondary')) {
+			return 'secondary';
+		}
+		if (this.hasAttribute('primary')) {
+			return 'primary';
+		}
+		return 'default';
+	}
+
+	_hasMax() {
+		return this.hasAttribute('max');
+	}
+
+	_max() {
+		const parsed = Number.parseFloat(this.getAttribute('max') || '');
+		if (!Number.isFinite(parsed) || parsed <= 0) {
+			return 100;
+		}
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : 100;
+	}
+
+	_value() {
+		const parsed = Number.parseFloat(this.getAttribute('value') || '0');
+		if (!Number.isFinite(parsed)) {
+			return 0;
+		}
+		const upper = this._hasMax() ? this._max() : 100;
+		return Math.min(upper, Math.max(0, parsed));
+	}
+
+	_percent() {
+		if (!this._hasMax()) {
+			return this._value();
+		}
+		return (this._value() / this._max()) * 100;
+	}
+
+	_loadingVariant() {
+		const explicit = (this.getAttribute('loading-variant') || '').toLowerCase();
+		const attrValue = (this.getAttribute('loading') || '').toLowerCase();
+		const candidate = explicit || attrValue || 'loop';
+		if (['loop', 'pulse', 'stripe', 'bounce', 'spin'].includes(candidate)) {
+			return candidate;
+		}
+		return 'loop';
+	}
+
+	_loadingMs() {
+		const parsed = Number.parseInt(this.getAttribute('loading-ms') || '450', 10);
+		return Number.isFinite(parsed) && parsed >= 80 ? parsed : 450;
+	}
+
+	_isLoading() {
+		const legacyVariant = (this.getAttribute('variant') || '').toLowerCase() === 'indeterminate';
+		return this.hasAttribute('loading') || this.hasAttribute('indeterminate') || legacyVariant;
+	}
+
+	_startLoading() {
+		const ms = this._loadingMs();
+		if (this._loadingTimer && this._loadingTimerMs === ms) {
+			return;
+		}
+		this._stopLoading();
+		this._loadingTimerMs = ms;
+		this._loadingTimer = setInterval(() => {
+			const ceiling = this._hasMax() ? this._max() : 100;
+			const step = ceiling / 10;
+			let next = this._value() + step;
+			if (next > ceiling) {
+				next = 0;
+			}
+			this.value = Number(next.toFixed(4));
+		}, ms);
+	}
+
+	_stopLoading() {
+		if (!this._loadingTimer) {
+			return;
+		}
+		clearInterval(this._loadingTimer);
+		this._loadingTimer = null;
+		this._loadingTimerMs = null;
+	}
+
+	_formatValueLabel() {
+		if (this._hasMax()) {
+			return `${Math.round(this._percent())}%`;
+		}
+		const raw = this._value();
+		return Number.isInteger(raw) ? `${raw}` : `${raw.toFixed(2)}`;
+	}
+
+	_renderValueTokens() {
+		const tokens = this.querySelectorAll('value');
+		if (!tokens.length) {
+			return;
+		}
+		const display = this._formatValueLabel();
+		for (const token of tokens) {
+			token.textContent = display;
+		}
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+		const variant = this._variant();
+		const percent = this._percent();
+		const size = this.getAttribute('size') || 'md';
+		const tone = this._tone();
+		const loading = this._isLoading();
+		const loadingVariant = this._loadingVariant();
+
+		this._root.setAttribute('data-variant', variant);
+		this._root.setAttribute('data-size', size);
+		this._root.setAttribute('data-tone', tone);
+		this._root.setAttribute('data-loading', loading ? 'true' : 'false');
+		this._root.setAttribute('data-loading-variant', loadingVariant);
+		this.setAttribute('role', 'progressbar');
+		this.setAttribute('aria-valuemin', '0');
+		this.setAttribute('aria-valuemax', String(this._hasMax() ? this._max() : 100));
+		this.setAttribute('aria-valuenow', String(this._value()));
+		if (this.getAttribute('label')) {
+			this.setAttribute('aria-label', this.getAttribute('label'));
+		}
+
+		this._fill.style.width = `${percent}%`;
+		const circumference = 2 * Math.PI * 42;
+		const dash = circumference - (percent / 100) * circumference;
+		this._meter.style.strokeDasharray = `${circumference}`;
+		this._meter.style.strokeDashoffset = `${dash}`;
+		this._renderValueTokens();
+		if (loading) {
+			this._startLoading();
+		} else {
+			this._stopLoading();
+		}
+	}
+}
+
+customElements.define('bf-progress', BfProgress);

package/dist/components/radio.css

@@ -13,12 +13,16 @@
 		var(--bf-theme-transition-color, color 120ms ease),
 		var(--bf-theme-transition-border, border-color 120ms ease);
 
-	display: block;
+	display: inline-block;
 	font: var(--bf-radio-font);
 	color: var(--bf-radio-color);
 }
 
 .root {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
 	background: var(--bf-radio-bg);
 	color: var(--bf-radio-color);
 	border-width: var(--bf-radio-border-width);
@@ -28,3 +32,33 @@
 	padding: var(--bf-radio-padding-y) var(--bf-radio-padding-x);
 	transition: var(--bf-radio-transition);
 }
+
+input {
+	position: absolute;
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.dot {
+	width: 0.95rem;
+	height: 0.95rem;
+	border-radius: 999px;
+	border: 2px solid var(--bf-radio-border-color);
+	display: inline-block;
+	position: relative;
+}
+
+.dot::after {
+	content: '';
+	position: absolute;
+	inset: 0.15rem;
+	border-radius: 999px;
+	background: var(--bf-theme-button-primary-bg, #2563eb);
+	transform: scale(0);
+	transition: transform 120ms ease;
+}
+
+input:checked + .dot::after {
+	transform: scale(1);
+}