bareframe 0.1.0 → 0.1.2

package/dist/components/tag.js

@@ -1,4 +1,6 @@
 class BfTag extends HTMLElement {
+	static observedAttributes = ['variant', 'badge', 'chip', 'pill', 'size'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -6,6 +8,7 @@ class BfTag extends HTMLElement {
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -25,6 +28,35 @@ class BfTag extends HTMLElement {
 		}
 
 		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+
+		const explicit = (this.getAttribute('variant') || '').toLowerCase();
+		let variant = 'tag';
+		if (['tag', 'badge', 'chip', 'pill'].includes(explicit)) {
+			variant = explicit;
+		} else if (this.hasAttribute('badge')) {
+			variant = 'badge';
+		} else if (this.hasAttribute('chip')) {
+			variant = 'chip';
+		} else if (this.hasAttribute('pill')) {
+			variant = 'pill';
+		}
+
+		this._root.dataset.variant = variant;
+
+		const size = (this.getAttribute('size') || 'md').toLowerCase();
+		this._root.dataset.size = ['sm', 'md', 'lg'].includes(size) ? size : 'md';
 	}
 }
 

package/dist/components/toast.css

@@ -13,12 +13,30 @@
 		var(--bf-theme-transition-color, color 120ms ease),
 		var(--bf-theme-transition-border, border-color 120ms ease);
 
+	--bf-toast-success-bg: var(--bf-theme-success-bg, #dcfce7);
+	--bf-toast-success-color: var(--bf-theme-success-color, #166534);
+	--bf-toast-warning-bg: var(--bf-theme-warning-bg, #fef3c7);
+	--bf-toast-warning-color: var(--bf-theme-warning-color, #92400e);
+	--bf-toast-error-bg: var(--bf-theme-error-bg, #fee2e2);
+	--bf-toast-error-color: var(--bf-theme-error-color, #991b1b);
+	--bf-toast-info-bg: var(--bf-theme-info-bg, var(--bf-toast-bg));
+	--bf-toast-info-color: var(--bf-theme-info-color, var(--bf-toast-color));
+	--bf-toast-snackbar-bg: var(--bf-theme-snackbar-bg, #111827);
+	--bf-toast-snackbar-color: var(--bf-theme-snackbar-color, #f8fafc);
+
 	display: block;
 	font: var(--bf-toast-font);
 	color: var(--bf-toast-color);
+	z-index: 1000;
 }
 
 .root {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	align-items: start;
+	gap: 0.5rem;
+	min-width: 16rem;
+	max-width: 30rem;
 	background: var(--bf-toast-bg);
 	color: var(--bf-toast-color);
 	border-width: var(--bf-toast-border-width);
@@ -27,4 +45,99 @@
 	border-radius: var(--bf-toast-radius);
 	padding: var(--bf-toast-padding-y) var(--bf-toast-padding-x);
 	transition: var(--bf-toast-transition);
+	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
+}
+
+.icon {
+	width: 1.1rem;
+	height: 1.1rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 700;
+	line-height: 1;
+	margin-top: 0.1rem;
+}
+
+.content {
+	min-width: 0;
+}
+
+.close {
+	border: 0;
+	background: transparent;
+	color: currentColor;
+	font: inherit;
+	line-height: 1;
+	cursor: pointer;
+	padding: 0;
+	opacity: 0.75;
+}
+
+.close:hover {
+	opacity: 1;
+}
+
+.root[data-open='false'] {
+	display: none;
+}
+
+.root[data-variant='alert'] {
+	border-left-width: 4px;
+}
+
+.root[data-variant='notification'] {
+	border-radius: calc(var(--bf-toast-radius) + 4px);
+}
+
+.root[data-variant='snackbar'] {
+	background: var(--bf-toast-snackbar-bg);
+	color: var(--bf-toast-snackbar-color);
+	border-color: transparent;
+	border-radius: 999px;
+	padding-inline: 0.9rem;
+	min-width: 14rem;
+}
+
+.root[data-variant='snackbar'] .icon {
+	display: none;
+}
+
+.root[data-variant='banner'] {
+	width: min(100%, 64rem);
+	max-width: 64rem;
+	border-radius: 10px;
+	box-shadow: none;
+}
+
+.root[data-variant='banner'] .icon {
+	display: none;
+}
+
+.root[data-type='success'] {
+	background: var(--bf-toast-success-bg);
+	color: var(--bf-toast-success-color);
+}
+
+.root[data-type='warning'] {
+	background: var(--bf-toast-warning-bg);
+	color: var(--bf-toast-warning-color);
+}
+
+.root[data-type='error'] {
+	background: var(--bf-toast-error-bg);
+	color: var(--bf-toast-error-color);
+}
+
+.root[data-type='info'] {
+	background: var(--bf-toast-info-bg);
+	color: var(--bf-toast-info-color);
+}
+
+.root[data-variant='snackbar'][data-type='success'],
+.root[data-variant='snackbar'][data-type='warning'],
+.root[data-variant='snackbar'][data-type='error'],
+.root[data-variant='snackbar'][data-type='info'] {
+	background: var(--bf-toast-snackbar-bg);
+	color: var(--bf-toast-snackbar-color);
 }

package/dist/components/toast.js

@@ -1,11 +1,34 @@
 class BfToast extends HTMLElement {
+	static observedAttributes = [
+		'variant',
+		'position',
+		'type',
+		'duration',
+		'open',
+		'alert',
+		'notification',
+		'snackbar',
+		'banner',
+		'top',
+		'bottom',
+		'left',
+		'right',
+		'center',
+		'success',
+		'warning',
+		'error',
+		'info',
+	];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onCloseClick = this._onCloseClick.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._syncState();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +41,251 @@ class BfToast extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<span class="icon" part="icon" aria-hidden="true"></span>
+			<div class="content" part="content"><slot></slot></div>
+			<button class="close" part="close" type="button" aria-label="Close">&times;</button>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._icon = root.querySelector('.icon');
+		this._close = root.querySelector('.close');
+		this._close.addEventListener('click', this._onCloseClick);
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'toast';
+		if (!this.textContent?.trim()) {
+			this.textContent = 'toast';
 		}
+		this._syncState();
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	disconnectedCallback() {
+		this._clearDurationTimer();
+	}
+
+	attributeChangedCallback() {
+		this._syncState();
+	}
+
+	get open() {
+		return this.hasAttribute('open');
+	}
+
+	set open(next) {
+		if (next) {
+			this.setAttribute('open', '');
+			return;
+		}
+		this.removeAttribute('open');
+	}
+
+	show() {
+		this.open = true;
+	}
+
+	hide() {
+		this.open = false;
+	}
+
+	_onCloseClick() {
+		this.hide();
+		this.dispatchEvent(
+			new CustomEvent('bf-close', {
+				bubbles: true,
+				composed: true,
+				detail: { id: this.id || '' },
+			}),
+		);
+	}
+
+	_variant() {
+		const explicit = (this.getAttribute('variant') || '').toLowerCase();
+		if (['toast', 'alert', 'notification', 'snackbar', 'banner'].includes(explicit)) {
+			return explicit;
+		}
+		if (this.hasAttribute('alert')) {
+			return 'alert';
+		}
+		if (this.hasAttribute('notification')) {
+			return 'notification';
+		}
+		if (this.hasAttribute('snackbar')) {
+			return 'snackbar';
+		}
+		if (this.hasAttribute('banner')) {
+			return 'banner';
+		}
+		return 'toast';
+	}
+
+	_type() {
+		const explicit = (this.getAttribute('type') || '').toLowerCase();
+		if (['success', 'warning', 'error', 'info'].includes(explicit)) {
+			return explicit;
+		}
+		if (this.hasAttribute('success')) {
+			return 'success';
+		}
+		if (this.hasAttribute('warning')) {
+			return 'warning';
+		}
+		if (this.hasAttribute('error')) {
+			return 'error';
+		}
+		return 'info';
+	}
+
+	_position() {
+		const variant = this._variant();
+		const explicit = (this.getAttribute('position') || '').toLowerCase().replace(/\s+/g, '-');
+		if (explicit && this._isValidPosition(explicit)) {
+			return explicit;
+		}
+		if (
+			variant === 'snackbar'
+			&& !this.hasAttribute('top')
+			&& !this.hasAttribute('bottom')
+			&& !this.hasAttribute('left')
+			&& !this.hasAttribute('right')
+			&& !this.hasAttribute('center')
+			&& !this.hasAttribute('position')
+		) {
+			return 'bottom-center';
+		}
+		if (
+			variant === 'banner'
+			&& !this.hasAttribute('top')
+			&& !this.hasAttribute('bottom')
+			&& !this.hasAttribute('left')
+			&& !this.hasAttribute('right')
+			&& !this.hasAttribute('center')
+			&& !this.hasAttribute('position')
+		) {
+			return 'top-center';
+		}
+		const y = this.hasAttribute('bottom') ? 'bottom' : 'top';
+		let x = 'right';
+		if (this.hasAttribute('left')) {
+			x = 'left';
+		}
+		if (this.hasAttribute('center')) {
+			x = 'center';
+		}
+		if (this.hasAttribute('right')) {
+			x = 'right';
+		}
+		return `${y}-${x}`;
+	}
+
+	_isValidPosition(position) {
+		return [
+			'top-left',
+			'top-center',
+			'top-right',
+			'bottom-left',
+			'bottom-center',
+			'bottom-right',
+		].includes(position);
+	}
+
+	_duration() {
+		const parsed = Number.parseInt(this.getAttribute('duration') || '', 10);
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+	}
+
+	_iconSymbol() {
+		const type = this._type();
+		if (type === 'success') {
+			return '✓';
+		}
+		if (type === 'warning') {
+			return '!';
+		}
+		if (type === 'error') {
+			return 'x';
+		}
+		return 'i';
+	}
+
+	_clearDurationTimer() {
+		if (!this._durationTimer) {
+			return;
+		}
+		clearTimeout(this._durationTimer);
+		this._durationTimer = null;
+	}
+
+	_scheduleAutoHide() {
+		this._clearDurationTimer();
+		const ms = this._duration();
+		if (!this.open || ms <= 0) {
+			return;
+		}
+		this._durationTimer = setTimeout(() => {
+			this.hide();
+		}, ms);
+	}
+
+	_syncState() {
+		if (!this._root) {
+			return;
+		}
+
+		const variant = this._variant();
+		const type = this._type();
+		const position = this._position();
+		if (!this.hasAttribute('open')) {
+			this.setAttribute('open', '');
+		}
+
+		this._root.setAttribute('data-variant', variant);
+		this._root.setAttribute('data-type', type);
+		this._root.setAttribute('data-position', position);
+		this._root.setAttribute('data-open', this.open ? 'true' : 'false');
+		this._icon.textContent = this._iconSymbol();
+		this._applyPosition(position);
+
+		this.setAttribute('role', variant === 'alert' ? 'alert' : 'status');
+		this.setAttribute('aria-live', variant === 'alert' ? 'assertive' : 'polite');
+
+		this._scheduleAutoHide();
+	}
+
+	_applyPosition(position) {
+		const anchored = this.hasAttribute('position')
+			|| this.hasAttribute('top')
+			|| this.hasAttribute('bottom')
+			|| this.hasAttribute('left')
+			|| this.hasAttribute('right')
+			|| this.hasAttribute('center');
+		if (!anchored) {
+			this.style.position = '';
+			this.style.top = '';
+			this.style.bottom = '';
+			this.style.left = '';
+			this.style.right = '';
+			this.style.transform = '';
+			return;
+		}
+
+		this.style.position = 'fixed';
+		this.style.zIndex = '1000';
+		this.style.top = '';
+		this.style.bottom = '';
+		this.style.left = '';
+		this.style.right = '';
+		this.style.transform = '';
+
+		const [y, x] = position.split('-');
+		this.style[y] = '1rem';
+		if (x === 'left') {
+			this.style.left = '1rem';
+		} else if (x === 'right') {
+			this.style.right = '1rem';
+		} else {
+			this.style.left = '50%';
+			this.style.transform = 'translateX(-50%)';
+		}
 	}
 }
 

package/dist/components/toggle.css

@@ -19,6 +19,9 @@
 }
 
 .root {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.55rem;
 	background: var(--bf-toggle-bg);
 	color: var(--bf-toggle-color);
 	border-width: var(--bf-toggle-border-width);
@@ -27,4 +30,54 @@
 	border-radius: var(--bf-toggle-radius);
 	padding: var(--bf-toggle-padding-y) var(--bf-toggle-padding-x);
 	transition: var(--bf-toggle-transition);
+	cursor: pointer;
+}
+
+.track {
+	display: none;
+}
+
+.root[data-variant='switch'] {
+	border-color: transparent;
+	background: transparent;
+	padding: 0;
+}
+
+.root[data-variant='switch'] .track {
+	display: inline-flex;
+	align-items: center;
+	width: 2.2rem;
+	height: 1.3rem;
+	border-radius: 999px;
+	background: var(--bf-theme-surface-2, #cbd5e1);
+	padding: 0.15rem;
+	transition: background-color 140ms ease;
+}
+
+.root[data-variant='switch'] .thumb {
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+	background: #fff;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+	transform: translateX(0);
+	transition: transform 140ms ease;
+}
+
+.root[data-variant='switch'].is-checked .track {
+	background: var(--bf-theme-button-primary-bg, #2563eb);
+}
+
+.root[data-variant='switch'].is-checked .thumb {
+	transform: translateX(0.9rem);
+}
+
+.root[data-variant='toggle'].is-checked {
+	background: color-mix(in srgb, var(--bf-theme-button-primary-bg, #2563eb) 12%, var(--bf-toggle-bg));
+	border-color: var(--bf-theme-button-primary-bg, #2563eb);
+}
+
+.root:disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
 }

package/dist/components/toggle.js

@@ -1,11 +1,15 @@
 class BfToggle extends HTMLElement {
+	static observedAttributes = ['checked', 'disabled', 'label', 'switch', 'variant'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onClick = this._onClick.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -15,16 +19,80 @@ class BfToggle 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.innerHTML = '<slot></slot>';
+		root.type = 'button';
+		root.innerHTML = `
+			<span class="track" part="track"><span class="thumb" part="thumb"></span></span>
+			<span class="text" part="text"><slot></slot></span>
+		`;
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'toggle';
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._text = root.querySelector('.text');
+		this._root.addEventListener('click', this._onClick);
+		if (!this.textContent?.trim()) {
+			this.textContent = 'toggle';
 		}
+		this._sync();
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	get checked() {
+		return this.hasAttribute('checked');
+	}
+
+	set checked(next) {
+		if (next) {
+			this.setAttribute('checked', '');
+			return;
+		}
+		this.removeAttribute('checked');
+	}
+
+	_onClick() {
+		if (this.hasAttribute('disabled')) {
+			return;
+		}
+		this.checked = !this.checked;
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					checked: this.checked,
+				},
+			}),
+		);
+	}
+
+	_variant() {
+		const variant = (this.getAttribute('variant') || '').toLowerCase();
+		if (variant === 'switch' || this.hasAttribute('switch')) {
+			return 'switch';
+		}
+		return 'toggle';
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+		const variant = this._variant();
+		this._root.setAttribute('data-variant', variant);
+		this._root.setAttribute('aria-pressed', String(this.checked));
+		this._root.setAttribute('role', 'switch');
+		this._root.setAttribute('aria-checked', String(this.checked));
+		this._root.disabled = this.hasAttribute('disabled');
+		this._root.classList.toggle('is-checked', this.checked);
+		if (this.getAttribute('label')) {
+			this._root.setAttribute('aria-label', this.getAttribute('label'));
+		}
+		this._text.hidden = variant === 'switch' && !(this.textContent || '').trim();
 	}
 }