bareframe 0.1.0 → 0.1.1

package/dist/components/breadcrumb.css

@@ -1,19 +1,14 @@
 :host {
 	--bf-breadcrumb-font: var(--bf-theme-font-family, inherit);
-	--bf-breadcrumb-radius: var(--bf-theme-radius-md, 8px);
-	--bf-breadcrumb-border-width: var(--bf-theme-border-width, 1px);
-	--bf-breadcrumb-border-style: var(--bf-theme-border-style, solid);
+	--bf-breadcrumb-radius: var(--bf-theme-radius-md, 7px);
 	--bf-breadcrumb-border-color: var(--bf-theme-breadcrumb-border-color, var(--bf-theme-border-1, #cbd5e1));
-	--bf-breadcrumb-bg: var(--bf-theme-breadcrumb-bg, var(--bf-theme-surface-1, #ffffff));
+	--bf-breadcrumb-bg: var(--bf-theme-breadcrumb-bg, transparent);
 	--bf-breadcrumb-color: var(--bf-theme-breadcrumb-color, var(--bf-theme-text-1, #0f172a));
-	--bf-breadcrumb-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-breadcrumb-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-breadcrumb-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;
+	--bf-breadcrumb-muted: var(--bf-theme-text-2, #64748b);
+	--bf-breadcrumb-link: var(--bf-theme-button-primary-bg, #2563eb);
+	--bf-breadcrumb-pill-bg: var(--bf-theme-surface-1, #ffffff);
+
+	display: inline-block;
 	font: var(--bf-breadcrumb-font);
 	color: var(--bf-breadcrumb-color);
 }
@@ -21,10 +16,61 @@
 .root {
 	background: var(--bf-breadcrumb-bg);
 	color: var(--bf-breadcrumb-color);
-	border-width: var(--bf-breadcrumb-border-width);
-	border-style: var(--bf-breadcrumb-border-style);
-	border-color: var(--bf-breadcrumb-border-color);
+}
+
+.list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.45rem;
+}
+
+.item {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45rem;
+	color: inherit;
+}
+
+.item a,
+.item span {
+	font: inherit;
+	color: inherit;
+	text-decoration: none;
+}
+
+.item a {
+	color: var(--bf-breadcrumb-link);
+}
+
+.item .current {
+	color: var(--bf-breadcrumb-color);
+	font-weight: 600;
+}
+
+.item .ellipsis {
+	color: var(--bf-breadcrumb-muted);
+}
+
+.separator {
+	color: var(--bf-breadcrumb-muted);
+}
+
+.root[data-variant='minimal'] .separator {
+	opacity: 0.55;
+}
+
+.root[data-variant='pills'] .item a,
+.root[data-variant='pills'] .item span {
+	border: 1px solid var(--bf-breadcrumb-border-color);
+	background: var(--bf-breadcrumb-pill-bg);
 	border-radius: var(--bf-breadcrumb-radius);
-	padding: var(--bf-breadcrumb-padding-y) var(--bf-breadcrumb-padding-x);
-	transition: var(--bf-breadcrumb-transition);
+	padding: 0.2rem 0.5rem;
+}
+
+.root[data-variant='pills'] .separator {
+	margin-inline: -0.1rem 0.1rem;
 }

package/dist/components/breadcrumb.js

@@ -1,11 +1,15 @@
 class BfBreadcrumb extends HTMLElement {
+	static observedAttributes = ['variant', 'separator', 'separator-icon', 'max'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onSlotChange = this._onSlotChange.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._render();
 			return;
 		}
 		this._initialized = true;
@@ -15,16 +19,147 @@ class BfBreadcrumb extends HTMLElement {
 		link.rel = 'stylesheet';
 		link.href = cssUrl.href;
 
-		const root = document.createElement('div');
+		const root = document.createElement('nav');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.setAttribute('aria-label', 'Breadcrumb');
+		root.innerHTML = `
+			<ol class="list" part="list"></ol>
+			<slot hidden></slot>
+		`;
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'breadcrumb';
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._list = root.querySelector('.list');
+		this._slot = root.querySelector('slot');
+		this._slot.addEventListener('slotchange', this._onSlotChange);
+		this._render();
+	}
+
+	attributeChangedCallback() {
+		this._render();
+	}
+
+	_onSlotChange() {
+		this._render();
+	}
+
+	_variant() {
+		const value = (this.getAttribute('variant') || 'default').toLowerCase();
+		if (['default', 'pills', 'minimal'].includes(value)) {
+			return value;
 		}
+		return 'default';
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	_separatorText() {
+		const icon = this.getAttribute('separator-icon');
+		if (icon) {
+			return icon;
+		}
+		const raw = this.getAttribute('separator');
+		if (!raw) {
+			return '›';
+		}
+		const value = raw.toLowerCase();
+		if (value === 'chevron') {
+			return '›';
+		}
+		if (value === 'slash') {
+			return '/';
+		}
+		if (value === 'dot') {
+			return '•';
+		}
+		if (value === 'pipe') {
+			return '|';
+		}
+		return raw;
+	}
+
+	_max() {
+		const parsed = Number.parseInt(this.getAttribute('max') || '', 10);
+		if (Number.isFinite(parsed) && parsed >= 2) {
+			return parsed;
+		}
+		return Infinity;
+	}
+
+	_itemsFromDom() {
+		const items = [];
+		const children = [...this.children];
+		for (const child of children) {
+			const text = child.textContent?.trim();
+			if (!text) {
+				continue;
+			}
+			const isLink = child.tagName.toLowerCase() === 'a' && child.getAttribute('href');
+			items.push({
+				label: text,
+				href: isLink ? child.getAttribute('href') : '',
+				current: child.hasAttribute('current'),
+			});
+		}
+		return items;
+	}
+
+	_applyCollapse(items) {
+		const max = this._max();
+		if (max === Infinity || items.length <= max || max < 3) {
+			return items;
+		}
+		const head = items[0];
+		const tailCount = max - 2;
+		const tail = items.slice(items.length - tailCount);
+		return [head, { label: '...', href: '', current: false, ellipsis: true }, ...tail];
+	}
+
+	_render() {
+		if (!this._list || !this._root) {
+			return;
+		}
+		const items = this._applyCollapse(this._itemsFromDom());
+		this._root.setAttribute('data-variant', this._variant());
+
+		this._list.replaceChildren();
+		if (!items.length) {
+			const fallback = document.createElement('li');
+			fallback.className = 'item';
+			fallback.textContent = 'breadcrumb';
+			this._list.append(fallback);
+			return;
+		}
+
+		items.forEach((item, index) => {
+			const li = document.createElement('li');
+			li.className = 'item';
+			if (item.ellipsis) {
+				const span = document.createElement('span');
+				span.className = 'ellipsis';
+				span.textContent = item.label;
+				li.append(span);
+			} else if (item.href && !item.current) {
+				const link = document.createElement('a');
+				link.href = item.href;
+				link.textContent = item.label;
+				li.append(link);
+			} else {
+				const span = document.createElement('span');
+				span.className = item.current || index === items.length - 1 ? 'current' : '';
+				span.textContent = item.label;
+				if (item.current || index === items.length - 1) {
+					span.setAttribute('aria-current', 'page');
+				}
+				li.append(span);
+			}
+			if (index < items.length - 1) {
+				const sep = document.createElement('span');
+				sep.className = 'separator';
+				sep.textContent = this._separatorText();
+				li.append(sep);
+			}
+			this._list.append(li);
+		});
 	}
 }
 

package/dist/components/button.css

@@ -134,3 +134,7 @@ button.secondary {
 		--bf-button-secondary-active-border-color
 	);
 }
+
+button.is-selected {
+	box-shadow: inset 0 0 0 2px var(--bf-theme-focus-ring-color, #93c5fd);
+}

package/dist/components/button.js

@@ -1,12 +1,19 @@
 class BfButton extends HTMLElement {
+	static observedAttributes = ['selected', 'disabled', 'variant', 'label', 'group'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onClick = this._onClick.bind(this);
 	}
 
 	connectedCallback() {
+		if (this._initialized) {
+			this._syncState();
+			return;
+		}
+		this._initialized = true;
 		const label = this.getAttribute('label') || 'Button';
-		const variant = this.getAttribute('variant') || 'primary';
 		const cssUrl = new URL('./button.css', import.meta.url);
 
 		this.shadowRoot.innerHTML = '';
@@ -16,26 +23,99 @@ class BfButton extends HTMLElement {
 		link.href = cssUrl.href;
 
 		const button = document.createElement('button');
-		button.className = variant;
+		button.className = this.getAttribute('variant') || 'primary';
 		button.type = 'button';
 		button.textContent = label;
 		button.append(document.createElement('slot'));
 
 		this.shadowRoot.append(link, button);
+		this._button = button;
+		button.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');
+	}
+
+	_onClick() {
+		this._applyGroupSelection();
+		const label = this.getAttribute('label') || 'Button';
+		const variant = this.getAttribute('variant') || 'primary';
+		this.dispatchEvent(
+			new CustomEvent('bf-click', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					label,
+					variant,
+					selected: this.selected,
+					group: this.getAttribute('group') || '',
+					at: new Date().toISOString(),
+				},
+			}),
+		);
+	}
+
+	_groupLimit() {
+		const multiple = this.getAttribute('multiple');
+		if (multiple === null) {
+			return 1;
+		}
+		if (multiple === '') {
+			return Infinity;
+		}
+		const parsed = Number.parseInt(multiple, 10);
+		return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
+	}
+
+	_applyGroupSelection() {
+		const group = this.getAttribute('group');
+		if (!group) {
+			return;
+		}
+		const peers = [...document.querySelectorAll(`bf-button[group="${CSS.escape(group)}"]`)];
+		const cap = this._groupLimit();
+
+		if (cap === 1) {
+			for (const peer of peers) {
+				peer.selected = peer === this;
+			}
+			return;
+		}
+
+		if (this.selected) {
+			this.selected = false;
+			return;
+		}
+
+		const selectedCount = peers.filter((peer) => peer.selected).length;
+		if (selectedCount >= cap) {
+			return;
+		}
+		this.selected = true;
+	}
 
-		button.addEventListener('click', () => {
-			this.dispatchEvent(
-				new CustomEvent('bf-click', {
-					bubbles: true,
-					composed: true,
-					detail: {
-						label,
-						variant,
-						at: new Date().toISOString(),
-					},
-				}),
-			);
-		});
+	_syncState() {
+		if (!this._button) {
+			return;
+		}
+		this._button.className = this.getAttribute('variant') || 'primary';
+		this._button.disabled = this.hasAttribute('disabled');
+		this._button.setAttribute('aria-pressed', String(this.selected));
+		this._button.classList.toggle('is-selected', this.selected);
 	}
 }
 

package/dist/components/chart.css

@@ -1,17 +1,11 @@
 :host {
 	--bf-chart-font: var(--bf-theme-font-family, inherit);
-	--bf-chart-radius: var(--bf-theme-radius-md, 8px);
-	--bf-chart-border-width: var(--bf-theme-border-width, 1px);
-	--bf-chart-border-style: var(--bf-theme-border-style, solid);
+	--bf-chart-radius: var(--bf-theme-radius-md, 10px);
 	--bf-chart-border-color: var(--bf-theme-chart-border-color, var(--bf-theme-border-1, #cbd5e1));
 	--bf-chart-bg: var(--bf-theme-chart-bg, var(--bf-theme-surface-1, #ffffff));
 	--bf-chart-color: var(--bf-theme-chart-color, var(--bf-theme-text-1, #0f172a));
-	--bf-chart-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-chart-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-chart-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-chart-accent: var(--bf-theme-button-primary-bg, #2563eb);
+	--bf-chart-muted: var(--bf-theme-surface-2, #e2e8f0);
 
 	display: block;
 	font: var(--bf-chart-font);
@@ -21,10 +15,165 @@
 .root {
 	background: var(--bf-chart-bg);
 	color: var(--bf-chart-color);
-	border-width: var(--bf-chart-border-width);
-	border-style: var(--bf-chart-border-style);
-	border-color: var(--bf-chart-border-color);
+	border: 1px solid var(--bf-chart-border-color);
 	border-radius: var(--bf-chart-radius);
-	padding: var(--bf-chart-padding-y) var(--bf-chart-padding-x);
-	transition: var(--bf-chart-transition);
+	padding: 0.75rem;
+	display: grid;
+	gap: 0.55rem;
+}
+
+.viz {
+	display: grid;
+	height: 130px;
+	align-items: end;
+}
+
+.bar {
+	display: none;
+	background: var(--bf-chart-accent);
+	border-radius: 6px 6px 0 0;
+}
+
+.viz .bar:nth-child(1) { height: 35%; }
+.viz .bar:nth-child(2) { height: 52%; }
+.viz .bar:nth-child(3) { height: 74%; }
+.viz .bar:nth-child(4) { height: 46%; }
+.viz .bar:nth-child(5) { height: 62%; }
+
+.line,
+.pie,
+.donut,
+.gauge,
+.heatmap,
+.treemap,
+.gantt,
+.graph {
+	display: none;
+}
+
+.root[data-variant='bar'] .viz,
+.root[data-variant='sparkline'] .viz {
+	grid-template-columns: repeat(5, 1fr);
+	gap: 0.45rem;
+}
+
+.root[data-variant='bar'] .bar {
+	display: block;
+}
+
+.root[data-variant='line'] .line,
+.root[data-variant='sparkline'] .line {
+	display: block;
+	height: 70%;
+	border-bottom: 3px solid var(--bf-chart-accent);
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	clip-path: polygon(0 70%, 18% 48%, 36% 58%, 56% 28%, 76% 42%, 100% 12%, 100% 100%, 0 100%);
+	background: linear-gradient(to top, color-mix(in srgb, var(--bf-chart-accent) 20%, transparent), transparent);
+}
+
+.root[data-variant='line'] .viz,
+.root[data-variant='sparkline'] .viz {
+	grid-template-columns: 1fr;
+}
+
+.root[data-variant='pie'] .pie,
+.root[data-variant='donut'] .donut,
+.root[data-variant='gauge'] .gauge {
+	display: block;
+	justify-self: center;
+	width: 108px;
+	height: 108px;
+	border-radius: 50%;
+}
+
+.root[data-variant='pie'] .pie {
+	background: conic-gradient(var(--bf-chart-accent) 0 62%, var(--bf-chart-muted) 62% 100%);
+}
+
+.root[data-variant='donut'] .donut {
+	background:
+		radial-gradient(circle at center, var(--bf-chart-bg) 46%, transparent 47%),
+		conic-gradient(var(--bf-chart-accent) 0 68%, var(--bf-chart-muted) 68% 100%);
+}
+
+.root[data-variant='gauge'] .gauge {
+	height: 64px;
+	border-radius: 64px 64px 0 0;
+	background: conic-gradient(from 180deg at 50% 100%, var(--bf-chart-accent) 0 58%, var(--bf-chart-muted) 58% 100%);
+}
+
+.root[data-variant='heatmap'] .heatmap {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 0.35rem;
+}
+
+.root[data-variant='heatmap'] .heatmap span {
+	aspect-ratio: 1;
+	border-radius: 4px;
+	background: color-mix(in srgb, var(--bf-chart-accent) 20%, var(--bf-chart-muted));
+}
+
+.root[data-variant='heatmap'] .heatmap span:nth-child(3n) {
+	background: color-mix(in srgb, var(--bf-chart-accent) 60%, var(--bf-chart-muted));
+}
+
+.root[data-variant='treemap'] .treemap {
+	display: grid;
+	grid-template-columns: 1.2fr 1fr;
+	gap: 0.35rem;
+}
+
+.root[data-variant='treemap'] .treemap span {
+	min-height: 56px;
+	background: color-mix(in srgb, var(--bf-chart-accent) 35%, var(--bf-chart-muted));
+	border-radius: 6px;
+}
+
+.root[data-variant='treemap'] .treemap span:first-child {
+	grid-row: span 2;
+}
+
+.root[data-variant='gantt'] .gantt {
+	display: grid;
+	gap: 0.45rem;
+}
+
+.root[data-variant='gantt'] .gantt span {
+	height: 0.65rem;
+	border-radius: 999px;
+	background: var(--bf-chart-muted);
+	position: relative;
+}
+
+.root[data-variant='gantt'] .gantt span::after {
+	content: '';
+	position: absolute;
+	inset: 0 auto 0 0;
+	width: 45%;
+	border-radius: inherit;
+	background: var(--bf-chart-accent);
+}
+
+.root[data-variant='gantt'] .gantt span:nth-child(2)::after { width: 70%; }
+.root[data-variant='gantt'] .gantt span:nth-child(3)::after { width: 32%; }
+
+.root[data-variant='graph'] .graph {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	align-items: center;
+	justify-items: center;
+	gap: 0.45rem;
+}
+
+.root[data-variant='graph'] .graph span {
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+	background: var(--bf-chart-accent);
+}
+
+.meta:empty {
+	display: none;
 }

package/dist/components/chart.js

@@ -1,4 +1,18 @@
 class BfChart extends HTMLElement {
+	static observedAttributes = [
+		'variant',
+		'bar',
+		'line',
+		'pie',
+		'donut',
+		'graph',
+		'sparkline',
+		'gauge',
+		'heatmap',
+		'treemap',
+		'gantt',
+	];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -6,6 +20,7 @@ class BfChart extends HTMLElement {
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +33,53 @@ class BfChart extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<div class="viz" part="viz">
+				<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+				<div class="line"></div>
+				<div class="pie"></div>
+				<div class="donut"></div>
+				<div class="gauge"></div>
+				<div class="heatmap">
+					<span></span><span></span><span></span><span></span>
+					<span></span><span></span><span></span><span></span>
+					<span></span><span></span><span></span><span></span>
+				</div>
+				<div class="treemap"><span></span><span></span><span></span></div>
+				<div class="gantt"><span></span><span></span><span></span></div>
+				<div class="graph"><span></span><span></span><span></span></div>
+			</div>
+			<div class="meta" part="meta"><slot></slot></div>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'chart';
+	_variant() {
+		const explicit = (this.getAttribute('variant') || '').toLowerCase();
+		const valid = ['bar', 'line', 'pie', 'donut', 'graph', 'sparkline', 'gauge', 'heatmap', 'treemap', 'gantt'];
+		if (valid.includes(explicit)) {
+			return explicit;
 		}
+		for (const item of valid) {
+			if (this.hasAttribute(item)) {
+				return item;
+			}
+		}
+		return 'bar';
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+		this._root.setAttribute('data-variant', this._variant());
 	}
 }