bareframe 0.1.0 → 0.1.1

package/dist/components/select.js

@@ -1,11 +1,25 @@
 class BfSelect extends HTMLElement {
+	static observedAttributes = [
+		'value',
+		'multi',
+		'disabled',
+		'required',
+		'placeholder',
+		'label',
+		'name',
+	];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onChange = this._onChange.bind(this);
+		this._onLightDomMutate = this._onLightDomMutate.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._syncOptions();
+			this._syncState();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +32,250 @@ class BfSelect extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<select part="select"></select>
+			<span class="chevron" part="chevron" aria-hidden="true"></span>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._select = root.querySelector('select');
+		this._select.addEventListener('change', this._onChange);
+
+		this._observer = new MutationObserver(this._onLightDomMutate);
+		this._observer.observe(this, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: ['value', 'selected', 'disabled', 'label'],
+		});
+
+		this._syncOptions();
+		this._syncState();
+	}
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'select';
+	disconnectedCallback() {
+		if (this._observer) {
+			this._observer.disconnect();
 		}
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	attributeChangedCallback(name) {
+		if (name === 'value' && this._reflectingValue) {
+			return;
+		}
+		this._syncState();
+	}
+
+	get value() {
+		if (this._isMulti()) {
+			return this.values;
+		}
+		return this._select?.value || '';
+	}
+
+	set value(nextValue) {
+		if (Array.isArray(nextValue)) {
+			this.setAttribute('value', nextValue.join(','));
+			return;
+		}
+		this.setAttribute('value', `${nextValue ?? ''}`);
+	}
+
+	get values() {
+		if (!this._select) {
+			return [];
+		}
+		return [...this._select.selectedOptions].map((option) => option.value);
+	}
+
+	_onLightDomMutate() {
+		this._syncOptions();
+		this._syncState();
+	}
+
+	_onChange() {
+		this._enforceMultiLimit();
+		this._reflectValueAttribute();
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					value: this._isMulti() ? this.values : this._select.value,
+					values: this.values,
+					multiple: this._isMulti(),
+					multi: this._multiLimit(),
+				},
+			}),
+		);
+	}
+
+	_isMulti() {
+		return this.hasAttribute('multi');
+	}
+
+	_multiLimit() {
+		if (!this._isMulti()) {
+			return 1;
+		}
+		const raw = this.getAttribute('multi');
+		if (raw === '' || raw === null) {
+			return Infinity;
+		}
+		const parsed = Number.parseInt(raw, 10);
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : Infinity;
+	}
+
+	_parsedValueAttribute() {
+		const raw = this.getAttribute('value');
+		if (raw === null) {
+			return [];
+		}
+		if (this._isMulti()) {
+			return raw
+				.split(',')
+				.map((value) => value.trim())
+				.filter(Boolean);
+		}
+		return [raw];
+	}
+
+	cloneLightDomOptions() {
+		const fragment = document.createDocumentFragment();
+		let count = 0;
+
+		for (const child of this.children) {
+			const tag = child.tagName.toLowerCase();
+			if (tag === 'option') {
+				fragment.append(this._cloneOption(child));
+				count += 1;
+				continue;
+			}
+			if (tag === 'optgroup') {
+				const group = document.createElement('optgroup');
+				const label = child.getAttribute('label');
+				if (label) {
+					group.label = label;
+				}
+				for (const option of child.querySelectorAll('option')) {
+					group.append(this._cloneOption(option));
+					count += 1;
+				}
+				fragment.append(group);
+			}
+		}
+
+		return { fragment, count };
+	}
+
+	_cloneOption(option) {
+		const clone = document.createElement('option');
+		clone.value = option.getAttribute('value') ?? option.textContent?.trim() ?? '';
+		clone.textContent = option.textContent?.trim() ?? '';
+		clone.disabled = option.hasAttribute('disabled');
+		clone.defaultSelected = option.hasAttribute('selected');
+		clone.selected = option.hasAttribute('selected');
+		return clone;
+	}
+
+	_syncOptions() {
+		if (!this._select) {
+			return;
+		}
+
+		const { fragment, count } = this.cloneLightDomOptions();
+		this._select.replaceChildren();
+
+		const placeholder = this.getAttribute('placeholder');
+		const hasPlaceholder = Boolean(placeholder && !this._isMulti());
+		if (hasPlaceholder) {
+			const placeholderOption = document.createElement('option');
+			placeholderOption.value = '';
+			placeholderOption.textContent = placeholder;
+			this._select.append(placeholderOption);
+		}
+
+		if (count > 0) {
+			this._select.append(fragment);
+		} else {
+			const fallback = this.textContent?.trim();
+			if (fallback) {
+				const option = document.createElement('option');
+				option.value = fallback;
+				option.textContent = fallback;
+				this._select.append(option);
+			}
+		}
+	}
+
+	_applyValueAttribute() {
+		if (!this.hasAttribute('value')) {
+			return;
+		}
+
+		const values = new Set(this._parsedValueAttribute());
+		if (this._isMulti()) {
+			for (const option of this._select.options) {
+				option.selected = values.has(option.value);
+			}
+			return;
+		}
+
+		const first = this._parsedValueAttribute()[0] ?? '';
+		this._select.value = first;
+	}
+
+	_enforceMultiLimit() {
+		if (!this._isMulti()) {
+			return;
+		}
+		const limit = this._multiLimit();
+		if (limit === Infinity) {
+			return;
+		}
+		const selected = [...this._select.options].filter((option) => option.selected);
+		if (selected.length <= limit) {
+			return;
+		}
+		for (let index = limit; index < selected.length; index += 1) {
+			selected[index].selected = false;
+		}
+	}
+
+	_reflectValueAttribute() {
+		if (!this._select) {
+			return;
+		}
+		const nextValue = this._isMulti() ? this.values.join(',') : this._select.value;
+		if (this.getAttribute('value') === nextValue) {
+			return;
+		}
+		this._reflectingValue = true;
+		this.setAttribute('value', nextValue);
+		this._reflectingValue = false;
+	}
+
+	_syncState() {
+		if (!this._select || !this._root) {
+			return;
+		}
+
+		this._select.multiple = this._isMulti();
+		this._root.classList.toggle('is-multi', this._isMulti());
+		this._select.disabled = this.hasAttribute('disabled');
+		this._select.required = this.hasAttribute('required');
+		this._select.name = this.getAttribute('name') || '';
+		if (this.getAttribute('label')) {
+			this._select.setAttribute('aria-label', this.getAttribute('label'));
+		} else {
+			this._select.removeAttribute('aria-label');
+		}
+
+		this._applyValueAttribute();
+		this._enforceMultiLimit();
+		this._reflectValueAttribute();
 	}
 }
 

package/dist/components/skeleton.css

@@ -1,30 +1,117 @@
 :host {
-	--bf-skeleton-font: var(--bf-theme-font-family, inherit);
 	--bf-skeleton-radius: var(--bf-theme-radius-md, 8px);
-	--bf-skeleton-border-width: var(--bf-theme-border-width, 1px);
-	--bf-skeleton-border-style: var(--bf-theme-border-style, solid);
-	--bf-skeleton-border-color: var(--bf-theme-skeleton-border-color, var(--bf-theme-border-1, #cbd5e1));
-	--bf-skeleton-bg: var(--bf-theme-skeleton-bg, var(--bf-theme-surface-1, #ffffff));
-	--bf-skeleton-color: var(--bf-theme-skeleton-color, var(--bf-theme-text-1, #0f172a));
-	--bf-skeleton-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-skeleton-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-skeleton-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-skeleton-width: 100%;
+	--bf-skeleton-height: 0.9rem;
+	--bf-skeleton-base: color-mix(in srgb, var(--bf-theme-border-1, #cbd5e1) 55%, var(--bf-theme-surface-1, #ffffff));
+	--bf-skeleton-highlight: color-mix(in srgb, var(--bf-theme-surface-1, #ffffff) 86%, transparent);
+	--bf-skeleton-speed: 1.15s;
 
 	display: block;
-	font: var(--bf-skeleton-font);
-	color: var(--bf-skeleton-color);
 }
 
 .root {
-	background: var(--bf-skeleton-bg);
-	color: var(--bf-skeleton-color);
-	border-width: var(--bf-skeleton-border-width);
-	border-style: var(--bf-skeleton-border-style);
-	border-color: var(--bf-skeleton-border-color);
+	position: relative;
+	overflow: hidden;
+	width: var(--bf-skeleton-width);
+	height: var(--bf-skeleton-height);
+	background: var(--bf-skeleton-base);
 	border-radius: var(--bf-skeleton-radius);
-	padding: var(--bf-skeleton-padding-y) var(--bf-skeleton-padding-x);
-	transition: var(--bf-skeleton-transition);
+	color: transparent;
+	user-select: none;
+}
+
+.root[data-animate='on']::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		100deg,
+		transparent 0%,
+		var(--bf-skeleton-highlight) 45%,
+		transparent 80%
+	);
+	transform: translateX(-100%);
+	animation: bf-skeleton-shimmer var(--bf-skeleton-speed) ease-in-out infinite;
+}
+
+.root[data-variant='title'] {
+	--bf-skeleton-height: 1.05rem;
+	--bf-skeleton-width: 58%;
+}
+
+.root[data-variant='avatar'] {
+	--bf-skeleton-width: 2.5rem;
+	--bf-skeleton-height: 2.5rem;
+	--bf-skeleton-radius: 999px;
+}
+
+.root[data-variant='button'] {
+	--bf-skeleton-width: 8rem;
+	--bf-skeleton-height: 2.1rem;
+	--bf-skeleton-radius: 10px;
+}
+
+.root[data-variant='image'] {
+	--bf-skeleton-height: auto;
+	--bf-skeleton-width: 100%;
+	aspect-ratio: 16 / 9;
+	border-radius: 12px;
+}
+
+.root[data-variant='paragraph'] {
+	--bf-skeleton-height: auto;
+	background: transparent;
+	display: grid;
+	gap: 0.45rem;
+}
+
+.root[data-variant='paragraph']::after {
+	display: none;
+}
+
+.lines {
+	display: none;
+}
+
+.root[data-variant='paragraph'] .lines {
+	display: grid;
+	gap: 0.45rem;
+}
+
+.line {
+	position: relative;
+	display: block;
+	height: 0.78rem;
+	border-radius: 999px;
+	background: var(--bf-skeleton-base);
+	overflow: hidden;
+}
+
+.root[data-variant='paragraph'][data-animate='on'] .line::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		100deg,
+		transparent 0%,
+		var(--bf-skeleton-highlight) 45%,
+		transparent 80%
+	);
+	transform: translateX(-100%);
+	animation: bf-skeleton-shimmer var(--bf-skeleton-speed) ease-in-out infinite;
+}
+
+slot {
+	display: none;
+}
+
+@keyframes bf-skeleton-shimmer {
+	100% { transform: translateX(120%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.root::after,
+	.line::after {
+		animation: none !important;
+	}
 }

package/dist/components/skeleton.js

@@ -1,4 +1,6 @@
 class BfSkeleton extends HTMLElement {
+	static observedAttributes = ['variant', 'lines', 'width', 'height', 'radius', 'static'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -6,6 +8,7 @@ class BfSkeleton extends HTMLElement {
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +21,63 @@ class BfSkeleton extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = '<div class="lines" part="lines"></div><slot></slot>';
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._lines = root.querySelector('.lines');
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'skeleton';
+	_sync() {
+		if (!this._root || !this._lines) {
+			return;
 		}
 
-		this.shadowRoot.replaceChildren(link, root);
+		const rawVariant = (this.getAttribute('variant') || 'text').toLowerCase();
+		const lines = Math.max(1, Number.parseInt(this.getAttribute('lines') || '1', 10) || 1);
+		const variant = rawVariant === 'text' && lines > 1 ? 'paragraph' : rawVariant;
+		this._root.dataset.variant = variant;
+		this._root.dataset.animate = this.hasAttribute('static') ? 'off' : 'on';
+
+		this._setSizeVar('--bf-skeleton-width', this.getAttribute('width'));
+		this._setSizeVar('--bf-skeleton-height', this.getAttribute('height'));
+		this._setSizeVar('--bf-skeleton-radius', this.getAttribute('radius'));
+
+		if (variant !== 'paragraph') {
+			this._lines.replaceChildren();
+			return;
+		}
+
+		const widths = ['96%', '90%', '94%', '86%', '92%', '84%'];
+		const nodes = [];
+		for (let i = 0; i < lines; i += 1) {
+			const line = document.createElement('span');
+			line.className = 'line';
+			const width = i === lines - 1 ? '68%' : widths[i % widths.length];
+			line.style.width = width;
+			nodes.push(line);
+		}
+		this._lines.replaceChildren(...nodes);
+	}
+
+	_setSizeVar(name, value) {
+		if (!value) {
+			this.style.removeProperty(name);
+			return;
+		}
+
+		const trimmed = value.trim();
+		if (/^-?\d*\.?\d+$/.test(trimmed)) {
+			this.style.setProperty(name, `${trimmed}px`);
+			return;
+		}
+
+		this.style.setProperty(name, trimmed);
 	}
 }
 

package/dist/components/tab.css

@@ -13,12 +13,14 @@
 		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-tab-font);
 	color: var(--bf-tab-color);
 }
 
 .root {
+	font: inherit;
+	cursor: pointer;
 	background: var(--bf-tab-bg);
 	color: var(--bf-tab-color);
 	border-width: var(--bf-tab-border-width);
@@ -28,3 +30,9 @@
 	padding: var(--bf-tab-padding-y) var(--bf-tab-padding-x);
 	transition: var(--bf-tab-transition);
 }
+
+.root.is-selected {
+	background: var(--bf-theme-button-primary-bg, #2563eb);
+	color: var(--bf-theme-button-primary-color, #ffffff);
+	border-color: var(--bf-theme-button-primary-border-color, #1d4ed8);
+}

package/dist/components/tab.js

@@ -1,11 +1,15 @@
 class BfTab extends HTMLElement {
+	static observedAttributes = ['selected', 'disabled', 'group', 'label', 'value'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onClick = this._onClick.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._syncState();
 			return;
 		}
 		this._initialized = true;
@@ -15,9 +19,10 @@ class BfTab extends HTMLElement {
 		link.rel = 'stylesheet';
 		link.href = cssUrl.href;
 
-		const root = document.createElement('div');
+		const root = document.createElement('button');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
+		root.type = 'button';
 		root.innerHTML = '<slot></slot>';
 
 		if (!this.innerHTML.trim()) {
@@ -25,6 +30,66 @@ class BfTab extends HTMLElement {
 		}
 
 		this.shadowRoot.replaceChildren(link, root);
+		this._button = root;
+		root.addEventListener('click', this._onClick);
+		this._syncState();
+	}
+
+	attributeChangedCallback() {
+		this._syncState();
+	}
+
+	get selected() {
+		return this.hasAttribute('selected');
+	}
+
+	set selected(value) {
+		if (value) {
+			this.setAttribute('selected', '');
+			return;
+		}
+		this.removeAttribute('selected');
+	}
+
+	get value() {
+		return this.getAttribute('value') || this.textContent?.trim() || '';
+	}
+
+	_onClick() {
+		const group = this.getAttribute('group');
+		if (group) {
+			const peers = document.querySelectorAll(`bf-tab[group="${CSS.escape(group)}"]`);
+			for (const peer of peers) {
+				peer.selected = peer === this;
+			}
+		} else {
+			this.selected = true;
+		}
+
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					group: group || '',
+					value: this.value,
+					selected: this.selected,
+				},
+			}),
+		);
+	}
+
+	_syncState() {
+		if (!this._button) {
+			return;
+		}
+		if (this.getAttribute('label')) {
+			this._button.setAttribute('aria-label', this.getAttribute('label'));
+		}
+		this._button.disabled = this.hasAttribute('disabled');
+		this._button.setAttribute('aria-selected', String(this.selected));
+		this._button.setAttribute('role', 'tab');
+		this._button.classList.toggle('is-selected', this.selected);
 	}
 }
 

package/dist/components/tag.css

@@ -6,19 +6,26 @@
 	--bf-tag-border-color: var(--bf-theme-tag-border-color, var(--bf-theme-border-1, #cbd5e1));
 	--bf-tag-bg: var(--bf-theme-tag-bg, var(--bf-theme-surface-1, #ffffff));
 	--bf-tag-color: var(--bf-theme-tag-color, var(--bf-theme-text-1, #0f172a));
-	--bf-tag-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-tag-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-tag-padding-y: 0.35rem;
+	--bf-tag-padding-x: 0.55rem;
 	--bf-tag-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;
+	display: inline-block;
 	font: var(--bf-tag-font);
 	color: var(--bf-tag-color);
 }
 
 .root {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.3rem;
+	line-height: 1;
+	font-size: 0.82rem;
+	font-weight: 600;
 	background: var(--bf-tag-bg);
 	color: var(--bf-tag-color);
 	border-width: var(--bf-tag-border-width);
@@ -28,3 +35,29 @@
 	padding: var(--bf-tag-padding-y) var(--bf-tag-padding-x);
 	transition: var(--bf-tag-transition);
 }
+
+.root[data-size='sm'] {
+	font-size: 0.74rem;
+	padding: 0.22rem 0.42rem;
+}
+
+.root[data-size='lg'] {
+	font-size: 0.9rem;
+	padding: 0.45rem 0.68rem;
+}
+
+.root[data-variant='badge'] {
+	font-size: 0.72rem;
+	font-weight: 700;
+	min-width: 1.35rem;
+	padding: 0.14rem 0.42rem;
+	border-radius: 999px;
+}
+
+.root[data-variant='pill'] {
+	border-radius: 999px;
+}
+
+.root[data-variant='chip'] {
+	padding-right: 0.75rem;
+}