bareframe 0.1.0 → 0.1.1

package/dist/components/wizard.css

@@ -1,17 +1,11 @@
 :host {
 	--bf-wizard-font: var(--bf-theme-font-family, inherit);
-	--bf-wizard-radius: var(--bf-theme-radius-md, 8px);
-	--bf-wizard-border-width: var(--bf-theme-border-width, 1px);
-	--bf-wizard-border-style: var(--bf-theme-border-style, solid);
+	--bf-wizard-radius: var(--bf-theme-radius-md, 10px);
 	--bf-wizard-border-color: var(--bf-theme-wizard-border-color, var(--bf-theme-border-1, #cbd5e1));
 	--bf-wizard-bg: var(--bf-theme-wizard-bg, var(--bf-theme-surface-1, #ffffff));
 	--bf-wizard-color: var(--bf-theme-wizard-color, var(--bf-theme-text-1, #0f172a));
-	--bf-wizard-padding-y: var(--bf-theme-space-2, 0.6rem);
-	--bf-wizard-padding-x: var(--bf-theme-space-3, 0.9rem);
-	--bf-wizard-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-wizard-accent: var(--bf-theme-button-primary-bg, #2563eb);
+	--bf-wizard-muted: var(--bf-theme-text-2, #64748b);
 
 	display: block;
 	font: var(--bf-wizard-font);
@@ -21,10 +15,81 @@
 .root {
 	background: var(--bf-wizard-bg);
 	color: var(--bf-wizard-color);
-	border-width: var(--bf-wizard-border-width);
-	border-style: var(--bf-wizard-border-style);
-	border-color: var(--bf-wizard-border-color);
+	border: 1px solid var(--bf-wizard-border-color);
 	border-radius: var(--bf-wizard-radius);
-	padding: var(--bf-wizard-padding-y) var(--bf-wizard-padding-x);
-	transition: var(--bf-wizard-transition);
+	padding: 0.85rem;
+	display: grid;
+	gap: 0.8rem;
+}
+
+.steps {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.55rem;
+}
+
+.steps li {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	color: var(--bf-wizard-muted);
+}
+
+.steps .dot {
+	width: 1.4rem;
+	height: 1.4rem;
+	border-radius: 999px;
+	border: 1px solid var(--bf-wizard-border-color);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.78rem;
+}
+
+.steps li.current {
+	color: var(--bf-wizard-color);
+	font-weight: 600;
+}
+
+.steps li.current .dot {
+	background: var(--bf-wizard-accent);
+	color: #fff;
+	border-color: var(--bf-wizard-accent);
+}
+
+.steps li.done .dot {
+	border-color: var(--bf-wizard-accent);
+	color: var(--bf-wizard-accent);
+}
+
+.content.is-empty {
+	display: none;
+}
+
+.actions {
+	display: flex;
+	justify-content: space-between;
+	gap: 0.6rem;
+}
+
+.actions button {
+	border: 1px solid var(--bf-wizard-border-color);
+	background: var(--bf-theme-surface-1, #fff);
+	color: inherit;
+	border-radius: 7px;
+	padding: 0.35rem 0.7rem;
+	cursor: pointer;
+}
+
+.actions button:disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+
+.root[data-mode='stepper'] .content,
+.root[data-mode='stepper'] .actions {
+	display: none;
 }

package/dist/components/wizard.js

@@ -1,11 +1,16 @@
 class BfWizard extends HTMLElement {
+	static observedAttributes = ['mode', 'step', 'steps', 'linear', 'stepper'];
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
+		this._onPrev = this._onPrev.bind(this);
+		this._onNext = this._onNext.bind(this);
 	}
 
 	connectedCallback() {
 		if (this._initialized) {
+			this._sync();
 			return;
 		}
 		this._initialized = true;
@@ -18,13 +23,145 @@ class BfWizard extends HTMLElement {
 		const root = document.createElement('div');
 		root.className = 'root';
 		root.setAttribute('part', 'root');
-		root.innerHTML = '<slot></slot>';
+		root.innerHTML = `
+			<ol class="steps" part="steps"></ol>
+			<div class="content" part="content"><slot></slot></div>
+			<div class="actions" part="actions">
+				<button class="prev" type="button" part="prev">Back</button>
+				<button class="next" type="button" part="next">Next</button>
+			</div>
+		`;
+
+		this.shadowRoot.replaceChildren(link, root);
+		this._root = root;
+		this._stepsEl = root.querySelector('.steps');
+		this._content = root.querySelector('.content');
+		this._prevBtn = root.querySelector('.prev');
+		this._nextBtn = root.querySelector('.next');
+		this._slot = root.querySelector('slot');
+		this._prevBtn.addEventListener('click', this._onPrev);
+		this._nextBtn.addEventListener('click', this._onNext);
+		this._slot.addEventListener('slotchange', () => this._sync());
+		this._sync();
+	}
+
+	attributeChangedCallback() {
+		this._sync();
+	}
+
+	get step() {
+		return this._step();
+	}
+
+	set step(next) {
+		this.setAttribute('step', `${next}`);
+	}
 
-		if (!this.innerHTML.trim()) {
-			root.textContent = 'wizard';
+	next() {
+		this.step = Math.min(this._items().length, this._step() + 1);
+	}
+
+	prev() {
+		this.step = Math.max(1, this._step() - 1);
+	}
+
+	_onPrev() {
+		this.prev();
+		this._emitChange();
+	}
+
+	_onNext() {
+		this.next();
+		this._emitChange();
+	}
+
+	_emitChange() {
+		this.dispatchEvent(
+			new CustomEvent('bf-change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					step: this._step(),
+					mode: this._mode(),
+				},
+			}),
+		);
+	}
+
+	_mode() {
+		const mode = (this.getAttribute('mode') || '').toLowerCase();
+		if (mode === 'stepper' || this.hasAttribute('stepper')) {
+			return 'stepper';
 		}
+		return 'wizard';
+	}
 
-		this.shadowRoot.replaceChildren(link, root);
+	_items() {
+		const explicit = (this.getAttribute('steps') || '')
+			.split(',')
+			.map((item) => item.trim())
+			.filter(Boolean);
+		if (explicit.length) {
+			return explicit;
+		}
+		const panels = [...this.children]
+			.filter((child) => child.tagName.toLowerCase() === 'section')
+			.map((panel) => panel.getAttribute('title') || panel.id || 'Step');
+		if (panels.length) {
+			return panels;
+		}
+		return ['Step 1', 'Step 2', 'Step 3'];
+	}
+
+	_step() {
+		const parsed = Number.parseInt(this.getAttribute('step') || '1', 10);
+		if (!Number.isFinite(parsed) || parsed < 1) {
+			return 1;
+		}
+		return Math.min(parsed, this._items().length);
+	}
+
+	_renderSteps(items, current) {
+		this._stepsEl.replaceChildren();
+		items.forEach((label, index) => {
+			const li = document.createElement('li');
+			const stepNumber = index + 1;
+			if (stepNumber === current) {
+				li.classList.add('current');
+			} else if (stepNumber < current) {
+				li.classList.add('done');
+			}
+			li.innerHTML = `<span class="dot">${stepNumber}</span><span class="label">${label}</span>`;
+			this._stepsEl.append(li);
+		});
+	}
+
+	_syncPanels(current) {
+		const panels = [...this.children].filter((child) => child.tagName.toLowerCase() === 'section');
+		if (!panels.length) {
+			this._content.classList.add('is-empty');
+			return;
+		}
+		this._content.classList.remove('is-empty');
+		panels.forEach((panel, index) => {
+			panel.hidden = index + 1 !== current;
+		});
+	}
+
+	_sync() {
+		if (!this._root) {
+			return;
+		}
+		const mode = this._mode();
+		const items = this._items();
+		const current = this._step();
+		this._root.setAttribute('data-mode', mode);
+		this._renderSteps(items, current);
+		this._syncPanels(current);
+		this._prevBtn.hidden = mode === 'stepper';
+		this._nextBtn.hidden = mode === 'stepper';
+		this._prevBtn.disabled = current <= 1;
+		this._nextBtn.disabled = current >= items.length;
 	}
 }