bareframe 0.1.0 → 0.1.1

package/dist/components/checkbox.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-checkbox-font);
 	color: var(--bf-checkbox-color);
 }
 
 .root {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
 	background: var(--bf-checkbox-bg);
 	color: var(--bf-checkbox-color);
 	border-width: var(--bf-checkbox-border-width);
@@ -28,3 +32,41 @@
 	padding: var(--bf-checkbox-padding-y) var(--bf-checkbox-padding-x);
 	transition: var(--bf-checkbox-transition);
 }
+
+input {
+	position: absolute;
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.box {
+	width: 0.95rem;
+	height: 0.95rem;
+	border-radius: 0.25rem;
+	border: 2px solid var(--bf-checkbox-border-color);
+	display: inline-block;
+	position: relative;
+}
+
+.box::after {
+	content: '';
+	position: absolute;
+	left: 0.2rem;
+	top: 0.02rem;
+	width: 0.28rem;
+	height: 0.55rem;
+	border-right: 2px solid var(--bf-theme-button-primary-color, #fff);
+	border-bottom: 2px solid var(--bf-theme-button-primary-color, #fff);
+	transform: rotate(45deg) scale(0);
+	transition: transform 120ms ease;
+}
+
+input:checked + .box {
+	background: var(--bf-theme-button-primary-bg, #2563eb);
+	border-color: var(--bf-theme-button-primary-bg, #2563eb);
+}
+
+input:checked + .box::after {
+	transform: rotate(45deg) scale(1);
+}

package/dist/components/checkbox.js

@@ -1,11 +1,15 @@
 class BfCheckbox extends HTMLElement {
+	static observedAttributes = ['checked', 'disabled', 'label', 'value'];
+
 	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,105 @@ class BfCheckbox 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="checkbox" part="input" />
+			<span class="box" part="box"></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 = 'checkbox';
+	set checked(value) {
+		if (value) {
+			this.setAttribute('checked', '');
+			return;
 		}
+		this.removeAttribute('checked');
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	get value() {
+		return this.getAttribute('value') || this.textContent?.trim() || '';
+	}
+
+	_onInputChange() {
+		const nextChecked = this._input.checked;
+		if (nextChecked && !this._canSelectMore()) {
+			this._input.checked = false;
+			return;
+		}
+		this.checked = nextChecked;
+
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					group: this._effectiveGroup(),
+					value: this.value,
+					checked: this.checked,
+				},
+			}),
+		);
+	}
+
+	_effectiveGroup() {
+		return this.getAttribute('group') || '';
+	}
+
+	_groupLimit() {
+		const multiple = this.getAttribute('multiple');
+		if (multiple === null) {
+			return Infinity;
+		}
+		if (multiple === '') {
+			return Infinity;
+		}
+		const parsed = Number.parseInt(multiple, 10);
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : Infinity;
+	}
+
+	_canSelectMore() {
+		const group = this._effectiveGroup();
+		if (!group) {
+			return true;
+		}
+		const cap = this._groupLimit();
+		if (cap === Infinity) {
+			return true;
+		}
+		const selected = [
+			...document.querySelectorAll(
+				`bf-checkbox[group="${CSS.escape(group)}"][checked]`,
+			),
+		];
+		return selected.length < cap || selected.includes(this);
+	}
+
+	_syncState() {
+		if (!this._input) {
+			return;
+		}
+		this._input.checked = this.checked;
+		this._input.disabled = this.hasAttribute('disabled');
+		this._input.value = this.value;
+		if (this.getAttribute('label')) {
+			this.setAttribute('aria-label', this.getAttribute('label'));
+		}
 	}
 }
 

package/dist/components/dialog.css

@@ -13,12 +13,34 @@
 		var(--bf-theme-transition-color, color 120ms ease),
 		var(--bf-theme-transition-border, border-color 120ms ease);
 
+	--bf-dialog-backdrop: rgba(2, 6, 23, 0.45);
+	--bf-dialog-max-w: 36rem;
+	--bf-dialog-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
+
 	display: block;
 	font: var(--bf-dialog-font);
 	color: var(--bf-dialog-color);
+	z-index: 1100;
 }
 
 .root {
+	position: fixed;
+	inset: 0;
+	display: grid;
+	align-items: center;
+	justify-items: center;
+	padding: 1rem;
+}
+
+.backdrop {
+	position: absolute;
+	inset: 0;
+	background: var(--bf-dialog-backdrop);
+}
+
+.panel {
+	position: relative;
+	width: min(100%, var(--bf-dialog-max-w));
 	background: var(--bf-dialog-bg);
 	color: var(--bf-dialog-color);
 	border-width: var(--bf-dialog-border-width);
@@ -27,4 +49,77 @@
 	border-radius: var(--bf-dialog-radius);
 	padding: var(--bf-dialog-padding-y) var(--bf-dialog-padding-x);
 	transition: var(--bf-dialog-transition);
+	box-shadow: var(--bf-dialog-shadow);
+}
+
+.root[data-open='false'] {
+	display: none;
+}
+
+.root[data-variant='tooltip'] .backdrop,
+.root[data-variant='popover'] .backdrop,
+.root[data-variant='panel'] .backdrop,
+.root[data-variant='sheet'] .backdrop,
+.root[data-variant='bottom-sheet'] .backdrop {
+	background: transparent;
+}
+
+.root[data-variant='tooltip'] .panel {
+	width: auto;
+	max-width: 18rem;
+	padding: 0.35rem 0.55rem;
+	border-radius: 6px;
+}
+
+.root[data-variant='popover'] .panel {
+	width: min(24rem, 100%);
+}
+
+.root[data-variant='sheet'] {
+	align-items: center;
+}
+
+.root[data-variant='bottom-sheet'] {
+	align-items: end;
+}
+
+.root[data-variant='bottom-sheet'] .panel {
+	width: min(100%, 42rem);
+	border-radius: 14px 14px 0 0;
+}
+
+.root[data-position='top'] {
+	align-items: start;
+}
+
+.root[data-position='bottom'] {
+	align-items: end;
+}
+
+.root[data-position='left'] {
+	justify-items: start;
+}
+
+.root[data-position='right'] {
+	justify-items: end;
+}
+
+.root[data-position='top-left'] {
+	align-items: start;
+	justify-items: start;
+}
+
+.root[data-position='top-right'] {
+	align-items: start;
+	justify-items: end;
+}
+
+.root[data-position='bottom-left'] {
+	align-items: end;
+	justify-items: start;
+}
+
+.root[data-position='bottom-right'] {
+	align-items: end;
+	justify-items: end;
 }

package/dist/components/dialog.js

@@ -1,11 +1,31 @@
 class BfDialog extends HTMLElement {
+	static observedAttributes = [
+		'open',
+		'variant',
+		'position',
+		'modal',
+		'sheet',
+		'bottom-sheet',
+		'popover',
+		'tooltip',
+		'panel',
+		'top',
+		'bottom',
+		'left',
+		'right',
+		'center',
+		'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 +38,161 @@ class BfDialog 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._panel = root.querySelector('.panel');
+		this._backdrop.addEventListener('click', this._onBackdropClick);
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'dialog';
+		if (!this.textContent?.trim()) {
+			this.textContent = 'dialog';
 		}
 
-		this.shadowRoot.replaceChildren(link, root);
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	get openState() {
+		return this.hasAttribute('open');
+	}
+
+	open() {
+		this.setAttribute('open', '');
+	}
+
+	close() {
+		this.removeAttribute('open');
+	}
+
+	toggle() {
+		if (this.hasAttribute('open')) {
+			this.close();
+			return;
+		}
+		this.open();
+	}
+
+	_onBackdropClick() {
+		const variant = this._variant();
+		if (variant === 'tooltip' || variant === 'popover') {
+			return;
+		}
+		if (this.hasAttribute('persistent')) {
+			return;
+		}
+		this.close();
+		this.dispatchEvent(
+			new CustomEvent('bf-close', {
+				bubbles: true,
+				composed: true,
+				detail: { id: this.id || '' },
+			}),
+		);
+	}
+
+	_variant() {
+		const explicit = (this.getAttribute('variant') || '').toLowerCase();
+		if (
+			[
+				'dialog',
+				'sheet',
+				'bottom-sheet',
+				'popover',
+				'tooltip',
+				'panel',
+			].includes(explicit)
+		) {
+			return explicit;
+		}
+		if (this.hasAttribute('sheet')) {
+			return 'sheet';
+		}
+		if (this.hasAttribute('bottom-sheet')) {
+			return 'bottom-sheet';
+		}
+		if (this.hasAttribute('popover')) {
+			return 'popover';
+		}
+		if (this.hasAttribute('tooltip')) {
+			return 'tooltip';
+		}
+		if (this.hasAttribute('panel')) {
+			return 'panel';
+		}
+		return 'dialog';
+	}
+
+	_position() {
+		const explicit = (this.getAttribute('position') || '').toLowerCase().replace(/\s+/g, '-');
+		if (
+			[
+				'center',
+				'left',
+				'right',
+				'top',
+				'bottom',
+				'top-left',
+				'top-right',
+				'bottom-left',
+				'bottom-right',
+			].includes(explicit)
+		) {
+			return explicit;
+		}
+		if (this.hasAttribute('left')) {
+			return 'left';
+		}
+		if (this.hasAttribute('right')) {
+			return 'right';
+		}
+		if (this.hasAttribute('top')) {
+			return 'top';
+		}
+		if (this.hasAttribute('bottom')) {
+			return 'bottom';
+		}
+		if (this.hasAttribute('center')) {
+			return 'center';
+		}
+		return 'center';
+	}
+
+	_shouldOpenByDefault() {
+		return !this.hasAttribute('id');
+	}
+
+	_sync() {
+		if (!this._root || !this._panel) {
+			return;
+		}
+
+		if (!this.hasAttribute('open') && this._shouldOpenByDefault()) {
+			this.setAttribute('open', '');
+			return;
+		}
+
+		const isOpen = this.hasAttribute('open');
+		const variant = this._variant();
+		const position = this._position();
+
+		this._root.setAttribute('data-open', isOpen ? 'true' : 'false');
+		this._root.setAttribute('data-variant', variant);
+		this._root.setAttribute('data-position', position);
+
+		this.hidden = !isOpen;
+		this.setAttribute('aria-hidden', String(!isOpen));
+		this.setAttribute('role', variant === 'tooltip' ? 'tooltip' : 'dialog');
+		if (this.getAttribute('label')) {
+			this.setAttribute('aria-label', this.getAttribute('label'));
+		}
 	}
 }
 

package/dist/components/divider.css

@@ -1,30 +1,26 @@
 :host {
-	--bf-divider-font: var(--bf-theme-font-family, inherit);
-	--bf-divider-radius: var(--bf-theme-radius-md, 8px);
-	--bf-divider-border-width: var(--bf-theme-border-width, 1px);
-	--bf-divider-border-style: var(--bf-theme-border-style, solid);
 	--bf-divider-border-color: var(--bf-theme-divider-border-color, var(--bf-theme-border-1, #cbd5e1));
-	--bf-divider-bg: var(--bf-theme-divider-bg, var(--bf-theme-surface-1, #ffffff));
-	--bf-divider-color: var(--bf-theme-divider-color, var(--bf-theme-text-1, #0f172a));
-	--bf-divider-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-divider-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-divider-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-divider-thickness: 1px;
+	--bf-divider-min-length: 2rem;
 
 	display: block;
-	font: var(--bf-divider-font);
-	color: var(--bf-divider-color);
 }
 
 .root {
-	background: var(--bf-divider-bg);
-	color: var(--bf-divider-color);
-	border-width: var(--bf-divider-border-width);
-	border-style: var(--bf-divider-border-style);
-	border-color: var(--bf-divider-border-color);
-	border-radius: var(--bf-divider-radius);
-	padding: var(--bf-divider-padding-y) var(--bf-divider-padding-x);
-	transition: var(--bf-divider-transition);
+	box-sizing: border-box;
+	border-radius: 999px;
+	background: var(--bf-divider-border-color);
+	min-width: var(--bf-divider-min-length);
+}
+
+.root[data-orientation='horizontal'] {
+	height: var(--bf-divider-thickness);
+	width: 100%;
+}
+
+.root[data-orientation='vertical'] {
+	width: var(--bf-divider-thickness);
+	height: 100%;
+	min-height: var(--bf-divider-min-length);
+	min-width: 0;
 }

package/dist/components/divider.js

@@ -1,4 +1,6 @@
 class BfDivider extends HTMLElement {
+	static observedAttributes = ['vertical', 'thickness'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -6,6 +8,7 @@ class BfDivider extends HTMLElement {
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -20,11 +23,36 @@ class BfDivider extends HTMLElement {
 		root.setAttribute('part', 'root');
 		root.innerHTML = '<slot></slot>';
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'divider';
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
 		}
 
-		this.shadowRoot.replaceChildren(link, root);
+		const isVertical = this.hasAttribute('vertical');
+		this._root.dataset.orientation = isVertical ? 'vertical' : 'horizontal';
+
+		const raw = this.getAttribute('thickness');
+		if (!raw) {
+			this.style.removeProperty('--bf-divider-thickness');
+			return;
+		}
+
+		const parsed = Number.parseFloat(raw);
+		if (Number.isFinite(parsed)) {
+			this.style.setProperty('--bf-divider-thickness', `${parsed}px`);
+			return;
+		}
+
+		this.style.setProperty('--bf-divider-thickness', raw);
 	}
 }
 

package/dist/components/drawer.css

@@ -1,30 +1,80 @@
 :host {
 	--bf-drawer-font: var(--bf-theme-font-family, inherit);
-	--bf-drawer-radius: var(--bf-theme-radius-md, 8px);
-	--bf-drawer-border-width: var(--bf-theme-border-width, 1px);
-	--bf-drawer-border-style: var(--bf-theme-border-style, solid);
-	--bf-drawer-border-color: var(--bf-theme-drawer-border-color, var(--bf-theme-border-1, #cbd5e1));
 	--bf-drawer-bg: var(--bf-theme-drawer-bg, var(--bf-theme-surface-1, #ffffff));
 	--bf-drawer-color: var(--bf-theme-drawer-color, var(--bf-theme-text-1, #0f172a));
-	--bf-drawer-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-drawer-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-drawer-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-drawer-border-color: var(--bf-theme-drawer-border-color, var(--bf-theme-border-1, #cbd5e1));
+	--bf-drawer-backdrop: rgba(2, 6, 23, 0.35);
+	--bf-drawer-width: min(90vw, 22rem);
+	--bf-drawer-height: min(75vh, 24rem);
+	--bf-drawer-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
 	display: block;
 	font: var(--bf-drawer-font);
-	color: var(--bf-drawer-color);
+	z-index: 1190;
 }
 
 .root {
+	position: fixed;
+	inset: 0;
+	display: grid;
+}
+
+.root[data-open='false'] {
+	display: none;
+}
+
+.backdrop {
+	position: absolute;
+	inset: 0;
+	background: var(--bf-drawer-backdrop);
+}
+
+.panel {
+	position: relative;
 	background: var(--bf-drawer-bg);
 	color: var(--bf-drawer-color);
-	border-width: var(--bf-drawer-border-width);
-	border-style: var(--bf-drawer-border-style);
-	border-color: var(--bf-drawer-border-color);
-	border-radius: var(--bf-drawer-radius);
-	padding: var(--bf-drawer-padding-y) var(--bf-drawer-padding-x);
-	transition: var(--bf-drawer-transition);
+	border: 1px solid var(--bf-drawer-border-color);
+	box-shadow: var(--bf-drawer-shadow);
+	padding: 1rem;
+}
+
+.root[data-side='right'] {
+	justify-items: end;
+}
+
+.root[data-side='right'] .panel {
+	width: var(--bf-drawer-width);
+	height: 100%;
+	border-radius: 0;
+}
+
+.root[data-side='left'] {
+	justify-items: start;
+}
+
+.root[data-side='left'] .panel {
+	width: var(--bf-drawer-width);
+	height: 100%;
+	border-radius: 0;
+}
+
+.root[data-side='top'] {
+	align-items: start;
+}
+
+.root[data-side='top'] .panel {
+	width: 100%;
+	max-width: 100%;
+	height: var(--bf-drawer-height);
+	border-radius: 0 0 12px 12px;
+}
+
+.root[data-side='bottom'] {
+	align-items: end;
+}
+
+.root[data-side='bottom'] .panel {
+	width: 100%;
+	max-width: 100%;
+	height: var(--bf-drawer-height);
+	border-radius: 12px 12px 0 0;
 }