bareframe 0.1.0 → 0.1.1

package/dist/components/drawer.js

@@ -1,11 +1,15 @@
 class BfDrawer extends HTMLElement {
+	static observedAttributes = ['open', 'side', 'label', 'left', 'right', 'top', 'bottom'];
+
 	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,89 @@ class BfDrawer 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 = 'drawer';
+		if (!this.textContent?.trim()) {
+			this.textContent = 'drawer';
 		}
 
-		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();
+	}
+
+	_side() {
+		const explicit = (this.getAttribute('side') || '').toLowerCase();
+		if (['left', 'right', 'top', 'bottom'].includes(explicit)) {
+			return explicit;
+		}
+		if (this.hasAttribute('left')) {
+			return 'left';
+		}
+		if (this.hasAttribute('top')) {
+			return 'top';
+		}
+		if (this.hasAttribute('bottom')) {
+			return 'bottom';
+		}
+		return 'right';
+	}
+
+	_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._root.setAttribute('data-side', this._side());
+		this.setAttribute('aria-hidden', String(!isOpen));
+		this.setAttribute('role', 'dialog');
+		if (this.getAttribute('label')) {
+			this.setAttribute('aria-label', this.getAttribute('label'));
+		}
 	}
 }
 

package/dist/components/edge.css

@@ -0,0 +1,54 @@
+:host {
+	--bf-edge-font: var(--bf-theme-font-family, inherit);
+	--bf-edge-radius: var(--bf-theme-radius-md, 8px);
+	--bf-edge-border-width: var(--bf-theme-border-width, 1px);
+	--bf-edge-border-style: var(--bf-theme-border-style, solid);
+	--bf-edge-border-color: var(--bf-theme-header-border-color, var(--bf-theme-footer-border-color, var(--bf-theme-border-1, #cbd5e1)));
+	--bf-edge-bg: var(--bf-theme-header-bg, var(--bf-theme-footer-bg, var(--bf-theme-surface-1, #ffffff)));
+	--bf-edge-color: var(--bf-theme-header-color, var(--bf-theme-footer-color, var(--bf-theme-text-1, #0f172a)));
+	--bf-edge-padding-y: var(--bf-theme-space-2, 0.6rem);
+	--bf-edge-padding-x: var(--bf-theme-space-3, 0.9rem);
+	--bf-edge-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;
+	font: var(--bf-edge-font);
+	color: var(--bf-edge-color);
+}
+
+.root {
+	background: var(--bf-edge-bg);
+	color: var(--bf-edge-color);
+	border-width: var(--bf-edge-border-width);
+	border-style: var(--bf-edge-border-style);
+	border-color: var(--bf-edge-border-color);
+	border-radius: var(--bf-edge-radius);
+	padding: var(--bf-edge-padding-y) var(--bf-edge-padding-x);
+	transition: var(--bf-edge-transition);
+}
+
+:host([sticky]) {
+	position: sticky;
+	z-index: var(--bf-theme-z-sticky, 100);
+}
+
+:host([fixed]) {
+	position: fixed;
+	left: 0;
+	right: 0;
+	z-index: var(--bf-theme-z-fixed, 200);
+}
+
+:host([header][sticky]),
+:host([header][fixed]) {
+	top: 0;
+	bottom: auto;
+}
+
+:host([footer][sticky]),
+:host([footer][fixed]) {
+	bottom: 0;
+	top: auto;
+}

package/dist/components/edge.js

@@ -0,0 +1,55 @@
+class BfEdge extends HTMLElement {
+	static observedAttributes = ['position', 'sticky', 'fixed', 'header', 'footer'];
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			this._syncPosition();
+			return;
+		}
+		this._initialized = true;
+
+		const cssUrl = new URL('./edge.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 = '<slot></slot>';
+
+		if (!this.innerHTML.trim()) {
+			root.textContent = 'edge';
+		}
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._syncPosition();
+	}
+
+	attributeChangedCallback() {
+		this._syncPosition();
+	}
+
+	_syncPosition() {
+		if (!this.hasAttribute('header') && !this.hasAttribute('footer') && !this.getAttribute('position')) {
+			this.setAttribute('header', '');
+		}
+
+		const position = this.getAttribute('position');
+		if (position === 'bottom') {
+			this.removeAttribute('header');
+			this.setAttribute('footer', '');
+		}
+		if (position === 'top') {
+			this.removeAttribute('footer');
+			this.setAttribute('header', '');
+		}
+	}
+}
+
+customElements.define('bf-edge', BfEdge);

package/dist/components/file-upload.css

@@ -3,9 +3,18 @@
 	--bf-file-upload-radius: var(--bf-theme-radius-md, 8px);
 	--bf-file-upload-border-width: var(--bf-theme-border-width, 1px);
 	--bf-file-upload-border-style: var(--bf-theme-border-style, solid);
-	--bf-file-upload-border-color: var(--bf-theme-file-upload-border-color, var(--bf-theme-border-1, #cbd5e1));
-	--bf-file-upload-bg: var(--bf-theme-file-upload-bg, var(--bf-theme-surface-1, #ffffff));
-	--bf-file-upload-color: var(--bf-theme-file-upload-color, var(--bf-theme-text-1, #0f172a));
+	--bf-file-upload-border-color: var(
+		--bf-theme-file-upload-border-color,
+		var(--bf-theme-upload-dropzone-border-color, var(--bf-theme-border-1, #cbd5e1))
+	);
+	--bf-file-upload-bg: var(
+		--bf-theme-file-upload-bg,
+		var(--bf-theme-upload-dropzone-bg, var(--bf-theme-surface-1, #ffffff))
+	);
+	--bf-file-upload-color: var(
+		--bf-theme-file-upload-color,
+		var(--bf-theme-upload-dropzone-color, var(--bf-theme-text-1, #0f172a))
+	);
 	--bf-file-upload-padding-y: var(--bf-theme-space-2, 0.6rem);
 	--bf-file-upload-padding-x: var(--bf-theme-space-3, 0.9rem);
 	--bf-file-upload-transition:
@@ -19,6 +28,8 @@
 }
 
 .root {
+	display: grid;
+	gap: 0.45rem;
 	background: var(--bf-file-upload-bg);
 	color: var(--bf-file-upload-color);
 	border-width: var(--bf-file-upload-border-width);
@@ -27,4 +38,62 @@
 	border-radius: var(--bf-file-upload-radius);
 	padding: var(--bf-file-upload-padding-y) var(--bf-file-upload-padding-x);
 	transition: var(--bf-file-upload-transition);
+	cursor: pointer;
+}
+
+.root[data-variant='dropzone'] {
+	min-height: 7rem;
+	align-content: center;
+	text-align: center;
+}
+
+.root[data-border='dotted'] {
+	border-style: dotted;
+}
+
+.root[data-border='dashed'] {
+	border-style: dashed;
+}
+
+.root[data-drag='over'] {
+	background: color-mix(in srgb, var(--bf-file-upload-bg) 70%, var(--bf-file-upload-border-color));
+}
+
+.root[data-disabled='true'] {
+	opacity: 0.65;
+	cursor: not-allowed;
+}
+
+.native {
+	display: none;
+}
+
+.label {
+	font-weight: 600;
+}
+
+.meta {
+	color: var(--bf-theme-text-2, #475569);
+	font-size: 0.9em;
+}
+
+.files {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.35rem;
+}
+
+.file {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	padding: 0.2rem 0.45rem;
+	border-radius: 999px;
+	border: 1px solid color-mix(in srgb, var(--bf-file-upload-border-color) 90%, transparent);
+	background: color-mix(in srgb, var(--bf-file-upload-bg) 82%, var(--bf-file-upload-border-color));
+	font-size: 0.82em;
+}
+
+slot:not(:empty) {
+	display: block;
 }

package/dist/components/file-upload.js

@@ -1,11 +1,27 @@
 class BfFileUpload extends HTMLElement {
+	static observedAttributes = [
+		'variant',
+		'dropzone',
+		'multiple',
+		'accept',
+		'dotted',
+		'dashed',
+		'disabled',
+	];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onRootClick = this._onRootClick.bind(this);
+		this._onInputChange = this._onInputChange.bind(this);
+		this._onDragOver = this._onDragOver.bind(this);
+		this._onDragLeave = this._onDragLeave.bind(this);
+		this._onDrop = this._onDrop.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +34,179 @@ class BfFileUpload extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<input class="native" type="file" />
+			<div class="label" part="label"></div>
+			<div class="meta" part="meta"></div>
+			<div class="files" part="files"></div>
+			<slot></slot>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._input = root.querySelector('.native');
+		this._label = root.querySelector('.label');
+		this._meta = root.querySelector('.meta');
+		this._files = root.querySelector('.files');
+
+		root.addEventListener('click', this._onRootClick);
+		this._input.addEventListener('change', this._onInputChange);
+		root.addEventListener('dragover', this._onDragOver);
+		root.addEventListener('dragleave', this._onDragLeave);
+		root.addEventListener('drop', this._onDrop);
+
+		this._sync();
+	}
+
+	disconnectedCallback() {
+		if (!this._root || !this._input) {
+			return;
+		}
+		this._root.removeEventListener('click', this._onRootClick);
+		this._root.removeEventListener('dragover', this._onDragOver);
+		this._root.removeEventListener('dragleave', this._onDragLeave);
+		this._root.removeEventListener('drop', this._onDrop);
+		this._input.removeEventListener('change', this._onInputChange);
+	}
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'file upload';
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	_variant() {
+		const explicit = (this.getAttribute('variant') || '').toLowerCase();
+		if (explicit === 'dropzone' || this.hasAttribute('dropzone')) {
+			return 'dropzone';
 		}
+		return 'input';
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	_sync() {
+		if (!this._root || !this._input || !this._label || !this._meta || !this._files) {
+			return;
+		}
+
+		const variant = this._variant();
+		this._root.dataset.variant = variant;
+		this._root.dataset.border = this.hasAttribute('dotted')
+			? 'dotted'
+			: this.hasAttribute('dashed')
+				? 'dashed'
+				: 'solid';
+
+		const disabled = this.hasAttribute('disabled');
+		this._root.dataset.disabled = disabled ? 'true' : 'false';
+		this._input.disabled = disabled;
+
+		if (this.hasAttribute('multiple')) {
+			this._input.multiple = true;
+			this._root.dataset.multiple = 'true';
+		} else {
+			this._input.multiple = false;
+			this._root.dataset.multiple = 'false';
+		}
+
+		const accept = this.getAttribute('accept') || '';
+		if (accept) {
+			this._input.setAttribute('accept', accept);
+		} else {
+			this._input.removeAttribute('accept');
+		}
+
+		this._label.textContent =
+			this.getAttribute('label') ||
+			(variant === 'dropzone'
+				? 'Drop files here or click to browse'
+				: 'Choose file');
+
+		if (!this._selectedFiles || this._selectedFiles.length === 0) {
+			this._meta.textContent = this._input.multiple
+				? 'No files selected'
+				: 'No file selected';
+			this._files.replaceChildren();
+		}
+	}
+
+	_onRootClick(event) {
+		if (this.hasAttribute('disabled')) {
+			return;
+		}
+		if (event.target instanceof Element && event.target.tagName.toLowerCase() === 'a') {
+			return;
+		}
+		this._input.click();
+	}
+
+	_onInputChange() {
+		this._setFiles(this._input.files);
+	}
+
+	_onDragOver(event) {
+		if (this._variant() !== 'dropzone' || this.hasAttribute('disabled')) {
+			return;
+		}
+		event.preventDefault();
+		this._root.dataset.drag = 'over';
+	}
+
+	_onDragLeave() {
+		if (!this._root) {
+			return;
+		}
+		this._root.dataset.drag = 'off';
+	}
+
+	_onDrop(event) {
+		if (this._variant() !== 'dropzone' || this.hasAttribute('disabled')) {
+			return;
+		}
+		event.preventDefault();
+		this._root.dataset.drag = 'off';
+		const list = event.dataTransfer?.files;
+		if (!list || list.length === 0) {
+			return;
+		}
+		this._setFiles(list);
+	}
+
+	_setFiles(fileList) {
+		const all = Array.from(fileList || []);
+		this._selectedFiles = this._input.multiple ? all : all.slice(0, 1);
+
+		this._meta.textContent = this._selectedFiles.length
+			? `${this._selectedFiles.length} file${this._selectedFiles.length === 1 ? '' : 's'} selected`
+			: this._input.multiple
+				? 'No files selected'
+				: 'No file selected';
+
+		const chips = this._selectedFiles.slice(0, 3).map((file) => {
+			const item = document.createElement('span');
+			item.className = 'file';
+			item.textContent = file.name;
+			return item;
+		});
+		if (this._selectedFiles.length > 3) {
+			const more = document.createElement('span');
+			more.className = 'file';
+			more.textContent = `+${this._selectedFiles.length - 3} more`;
+			chips.push(more);
+		}
+		this._files.replaceChildren(...chips);
+
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					count: this._selectedFiles.length,
+					files: this._selectedFiles.map((file) => ({
+						name: file.name,
+						size: file.size,
+						type: file.type,
+					})),
+				},
+			}),
+		);
 	}
 }
 

package/dist/components/input.css

@@ -19,6 +19,9 @@
 }
 
 .root {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
 	background: var(--bf-input-bg);
 	color: var(--bf-input-color);
 	border-width: var(--bf-input-border-width);
@@ -28,3 +31,59 @@
 	padding: var(--bf-input-padding-y) var(--bf-input-padding-x);
 	transition: var(--bf-input-transition);
 }
+
+.field {
+	width: 100%;
+	min-width: 0;
+	border: 0;
+	outline: 0;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	padding: 0;
+}
+
+.swatch,
+.format {
+	display: none;
+}
+
+.root.is-color .swatch,
+.root.is-color .format {
+	display: inline-flex;
+}
+
+.swatch {
+	width: 1.25rem;
+	height: 1.25rem;
+	border: 1px solid var(--bf-theme-border-1, #94a3b8);
+	border-radius: 4px;
+	cursor: pointer;
+	flex: 0 0 auto;
+}
+
+.format {
+	border: 0;
+	outline: 0;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+	flex: 0 0 auto;
+}
+
+.picker {
+	position: absolute;
+	opacity: 0;
+	pointer-events: none;
+	width: 0;
+	height: 0;
+}
+
+.root.is-color.swatch-right .swatch {
+	order: 3;
+}
+
+.root.is-color.swatch-hidden .swatch {
+	display: none;
+}