@mhmo91/schmancy 0.9.4 → 0.9.6

package/src/breadcrumb/breadcrumb.ts

@@ -0,0 +1,109 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+/**
+ * Breadcrumb navigation container. Wraps a list of `schmancy-breadcrumb-item`
+ * elements with the correct ARIA landmark and semantics.
+ *
+ * @element schmancy-breadcrumb
+ * @slot - Default slot for `<schmancy-breadcrumb-item>` children.
+ * @attr separator - Character or string rendered between items. Default `/`.
+ * @csspart separator - The separator element.
+ */
+@customElement('schmancy-breadcrumb')
+export class SchmancyBreadcrumb extends TailwindElement(css`
+	:host {
+		display: block;
+	}
+	nav {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem;
+	}
+	.sep {
+		color: var(--schmancy-sys-color-surface-onVariant, #79747e);
+		user-select: none;
+		padding: 0 0.25rem;
+	}
+	::slotted(schmancy-breadcrumb-item:last-of-type) {
+		font-weight: 500;
+	}
+`) {
+	@property({ type: String }) separator = '/'
+
+	connectedCallback(): void {
+		super.connectedCallback()
+		if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'Breadcrumb')
+	}
+
+	render() {
+		// Render separators between slotted items by manipulating after render.
+		// The simpler approach uses the CSS adjacent-sibling pattern so the
+		// separator is visually present without affecting the accessible name.
+		return html`
+			<nav role="navigation">
+				<slot @slotchange=${() => this._insertSeparators()}></slot>
+			</nav>
+		`
+	}
+
+	private _insertSeparators() {
+		const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null
+		if (!slot) return
+		const items = slot.assignedElements({ flatten: true })
+		// Remove any previously-inserted separators.
+		this.querySelectorAll('[data-schmancy-sep]').forEach(el => el.remove())
+		items.forEach((el, idx) => {
+			if (idx === items.length - 1) return
+			const sep = document.createElement('span')
+			sep.setAttribute('data-schmancy-sep', '')
+			sep.setAttribute('aria-hidden', 'true')
+			sep.setAttribute('part', 'separator')
+			sep.className = 'sep'
+			sep.textContent = this.separator
+			el.insertAdjacentElement('afterend', sep)
+		})
+	}
+}
+
+/**
+ * Individual breadcrumb item. Renders as a link when `href` is provided,
+ * otherwise as a plain span (represents the current page).
+ *
+ * @element schmancy-breadcrumb-item
+ * @slot - Label content.
+ * @attr href - If set, renders as an anchor.
+ * @attr current - Marks as `aria-current="page"`.
+ */
+@customElement('schmancy-breadcrumb-item')
+export class SchmancyBreadcrumbItem extends TailwindElement(css`
+	:host {
+		display: inline-block;
+	}
+	a, span {
+		color: inherit;
+		text-decoration: none;
+	}
+	a:hover {
+		text-decoration: underline;
+	}
+`) {
+	@property({ type: String }) href = ''
+	@property({ type: Boolean, reflect: true }) current = false
+
+	render() {
+		if (this.href && !this.current) {
+			return html`<a href=${this.href}><slot></slot></a>`
+		}
+		return html`<span aria-current=${this.current ? 'page' : 'false'}><slot></slot></span>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-breadcrumb': SchmancyBreadcrumb
+		'schmancy-breadcrumb-item': SchmancyBreadcrumbItem
+	}
+}

package/src/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb'

package/src/button/button.ts

@@ -19,6 +19,7 @@ export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warni
  * @slot - The default slot.
  * @slot prefix - The prefix slot.
  * @slot suffix - The suffix slot.
+ * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).
  */
 @customElement('schmancy-button')
 export class SchmancyButton extends $LitElement(
@@ -57,6 +58,45 @@ export class SchmancyButton extends $LitElement(
 		delegatesFocus: true,
 	}
 
+	static formAssociated = true
+	private internals: ElementInternals | undefined
+
+	constructor() {
+		super()
+		try {
+			this.internals = this.attachInternals()
+		} catch {
+			this.internals = undefined
+		}
+		// Translate clicks into native form semantics so the button works
+		// inside any <form>, not just inside <schmancy-form>.
+		this.addEventListener('click', (e: MouseEvent) => {
+			if (this.disabled) {
+				e.preventDefault()
+				e.stopImmediatePropagation()
+				return
+			}
+			const form = this.internals?.form
+			if (!form) return
+			if (this.type === 'submit') {
+				e.preventDefault()
+				form.requestSubmit()
+			} else if (this.type === 'reset') {
+				e.preventDefault()
+				form.reset()
+			}
+		})
+	}
+
+	/** Associated form, when placed inside a <form>. */
+	get form(): HTMLFormElement | null {
+		return this.internals?.form ?? null
+	}
+
+	formDisabledCallback(disabled: boolean): void {
+		this.disabled = disabled
+	}
+
 	@query('[part="base"]', true)
 	private nativeElement!: HTMLElement
 

package/src/button/icon-button.ts

@@ -9,7 +9,8 @@ import { ButtonVariant } from './button'
 /**
  * An icon button component.
  * @element schmancy-icon-button
- * @slot - The default slot.
+ * @slot - The default slot (usually an icon or glyph).
+ * @csspart base - The underlying native `<button>` (or `<a>` when `href` is set).
  */
 @customElement('schmancy-icon-button')
 export class SchmnacyIconButton extends $LitElement(css`

package/src/checkbox/checkbox.test.ts

@@ -0,0 +1,113 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { expectNoA11yViolations } from '../test-utils/a11y'
+import './checkbox'
+
+describe('schmancy-checkbox', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+	it('is defined on the element registry', () => {
+		expect(customElements.get('schmancy-checkbox')).toBeDefined()
+	})
+
+	it('has no axe-core a11y violations in default state', async () => {
+		host.innerHTML = `<schmancy-checkbox label="Accept terms"></schmancy-checkbox>`
+		await nextUpdate()
+		await nextUpdate()
+		await expectNoA11yViolations(host)
+	})
+
+	it('has no axe-core a11y violations when required + invalid', async () => {
+		host.innerHTML = `
+			<form>
+				<schmancy-checkbox name="agree" label="I agree" required></schmancy-checkbox>
+			</form>
+		`
+		await nextUpdate()
+		await nextUpdate()
+		await expectNoA11yViolations(host)
+	})
+
+	it('is form-associated and exposes an ElementInternals form', async () => {
+		host.innerHTML = `
+			<form id="f">
+				<schmancy-checkbox name="agree" required></schmancy-checkbox>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		const cb = host.querySelector('schmancy-checkbox') as HTMLElement & { value: boolean; form: HTMLFormElement | null }
+		await nextUpdate()
+		expect(cb.form).toBe(form)
+	})
+
+	it('contributes its value to FormData when checked', async () => {
+		host.innerHTML = `
+			<form id="f">
+				<schmancy-checkbox name="agree"></schmancy-checkbox>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		const cb = host.querySelector('schmancy-checkbox') as HTMLElement & { value: boolean }
+		cb.value = true
+		await nextUpdate()
+		await nextUpdate()
+		const fd = new FormData(form)
+		expect(fd.get('agree')).toBe('on')
+	})
+
+	it('omits its value when unchecked', async () => {
+		host.innerHTML = `
+			<form id="f">
+				<schmancy-checkbox name="agree"></schmancy-checkbox>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		await nextUpdate()
+		const fd = new FormData(form)
+		expect(fd.get('agree')).toBeNull()
+	})
+
+	it('broadcasts :state(checked) when value is true', async () => {
+		host.innerHTML = `<schmancy-checkbox></schmancy-checkbox>`
+		const cb = host.querySelector('schmancy-checkbox') as HTMLElement & { value: boolean }
+		cb.value = true
+		await nextUpdate()
+		await nextUpdate()
+		expect(cb.matches(':state(checked)')).toBe(true)
+		cb.value = false
+		await nextUpdate()
+		await nextUpdate()
+		expect(cb.matches(':state(checked)')).toBe(false)
+	})
+
+	it('fails constraint validation when required and unchecked', async () => {
+		host.innerHTML = `
+			<form id="f">
+				<schmancy-checkbox name="agree" required></schmancy-checkbox>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		const cb = host.querySelector('schmancy-checkbox') as HTMLElement & {
+			value: boolean
+			checkValidity(): boolean
+		}
+		await nextUpdate()
+		expect(cb.checkValidity()).toBe(false)
+		expect(form.checkValidity()).toBe(false)
+		cb.value = true
+		await nextUpdate()
+		await nextUpdate()
+		expect(cb.checkValidity()).toBe(true)
+		expect(form.checkValidity()).toBe(true)
+	})
+})

package/src/checkbox/checkbox.ts

@@ -21,8 +21,17 @@ class SchmancyCheckboxElement extends TailwindElement() {
 		delegatesFocus: true,
 	}
 	static formAssociated = true
-	// private internals
 	internals: ElementInternals | undefined
+
+	constructor() {
+		super()
+		try {
+			this.internals = this.attachInternals()
+		} catch {
+			// attachInternals can throw if the element does not support form association
+		}
+	}
+
 	get form() {
 		return this.internals?.form
 	}
@@ -76,6 +85,37 @@ class SchmancyCheckboxElement extends TailwindElement() {
 
 	connectedCallback() {
 		super.connectedCallback()
+		this._syncFormValue()
+	}
+
+	updated(changed: Map<string, unknown>) {
+		super.updated?.(changed)
+		if (changed.has('value') || changed.has('name')) this._syncFormValue()
+		if (changed.has('required') || changed.has('value')) this._syncValidity()
+		if (changed.has('value')) {
+			if (this.value) this.internals?.states.add('checked')
+			else this.internals?.states.delete('checked')
+		}
+	}
+
+	private _syncFormValue() {
+		this.internals?.setFormValue(this.value ? (this.getAttribute('true-value') ?? 'on') : null)
+	}
+
+	private _syncValidity() {
+		if (this.required && !this.value) {
+			this.internals?.setValidity({ valueMissing: true }, 'Please check this box if you want to proceed.')
+		} else {
+			this.internals?.setValidity({})
+		}
+	}
+
+	public checkValidity(): boolean {
+		return this.internals?.checkValidity() ?? true
+	}
+
+	public reportValidity(): boolean {
+		return this.internals?.reportValidity() ?? true
 	}
 
 	/**

package/src/chips/filter-chip.ts

@@ -113,6 +113,21 @@ export class SchmancyFilterChip extends TailwindElement(css`
 		super.connectedCallback()
 	}
 
+	protected updated(changed: Map<string, unknown>) {
+		super.updated?.(changed)
+		if (changed.has('value') || changed.has('selected')) {
+			this.internals?.setFormValue(this._selected ? (this.value || 'on') : null)
+		}
+	}
+
+	formResetCallback(): void {
+		this._selected = this.hasAttribute('selected')
+	}
+
+	formDisabledCallback(disabled: boolean): void {
+		this.disabled = disabled
+	}
+
 	private handleClick = () => {
 		if (this.disabled) return
 

package/src/chips/input-chip.ts

@@ -172,6 +172,13 @@ export class SchmancyInputChip extends TailwindElement(css`
 		return this.internals?.form
 	}
 
+	protected updated(changed: Map<string, unknown>) {
+		super.updated?.(changed)
+		if (changed.has('value')) {
+			this.internals?.setFormValue(this.value || null)
+		}
+	}
+
 	connectedCallback() {
 		super.connectedCallback()
 

package/src/date-range/date-range-helpers.ts

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs'
-import { PresetUnit } from './date-range-presets'
 
 /**
  * Format a date range into a human-readable string
@@ -63,73 +62,3 @@ export function detectDateRangeType(fromDate: dayjs.Dayjs, toDate: dayjs.Dayjs):
 	}
 }
 
-/**
- * Calculate the appropriate shift unit and amount for a date range
- */
-export function calculateShiftParams(
-	fromDate: dayjs.Dayjs,
-	toDate: dayjs.Dayjs,
-	activePresetStep?: PresetUnit
-): { unit: PresetUnit; amount: number } {
-	if (activePresetStep) {
-		return { unit: activePresetStep, amount: 1 }
-	}
-
-	const rangeDurationInDays = toDate.diff(fromDate, 'day')
-
-	// For very long ranges, use years
-	if (rangeDurationInDays >= 360) {
-		return { unit: 'year', amount: Math.round(rangeDurationInDays / 365) }
-	}
-	// For long ranges, use quarters
-	else if (rangeDurationInDays >= 90) {
-		return { unit: 'quarter', amount: Math.round(rangeDurationInDays / 90) }
-	}
-	// For medium-long ranges, use months
-	else if (rangeDurationInDays >= 30) {
-		return { unit: 'month', amount: Math.round(rangeDurationInDays / 30) }
-	}
-	// For medium ranges, use weeks
-	else if (rangeDurationInDays >= 7) {
-		return { unit: 'week', amount: Math.round(rangeDurationInDays / 7) }
-	}
-	// For shorter ranges, use days
-	else {
-		return { unit: 'day', amount: rangeDurationInDays + 1 }
-	}
-}
-
-/**
- * Helper method to safely add/subtract quarter values
- */
-export function adjustQuarter(date: dayjs.Dayjs, amount: number, direction: 1 | -1): dayjs.Dayjs {
-	// Get current quarter (1-4)
-	const currentQuarter = date.quarter()
-
-	// Calculate new quarter
-	let newQuarter = currentQuarter + direction * amount
-	let yearAdjustment = 0
-
-	// Handle year boundaries
-	while (newQuarter > 4) {
-		newQuarter -= 4
-		yearAdjustment += 1
-	}
-
-	while (newQuarter < 1) {
-		newQuarter += 4
-		yearAdjustment -= 1
-	}
-
-	// Adjust year if needed
-	const adjustedDate = date.add(yearAdjustment, 'year')
-
-	// Set to the start of the new quarter
-	const newDate = adjustedDate.month((newQuarter - 1) * 3)
-
-	// Maintain the same day of month if possible
-	const daysInMonth = newDate.daysInMonth()
-	const targetDay = Math.min(date.date(), daysInMonth)
-
-	return newDate.date(targetDay)
-}

package/src/dialog/dialog-base.mixin.ts

@@ -77,6 +77,15 @@ export const DialogBase = <T extends Constructor<LitElement & IBaseMixin>>(super
 		// Animation guard
 		private animating = false
 
+		/** ElementInternals — used for broadcasting `:state(open)` to consumers. */
+		protected dialogInternals: ElementInternals | undefined = (() => {
+			try {
+				return this.attachInternals()
+			} catch {
+				return undefined
+			}
+		})()
+
 		/**
 		 * Check if the dialog is currently animating
 		 */
@@ -285,6 +294,7 @@ export const DialogBase = <T extends Constructor<LitElement & IBaseMixin>>(super
 			await this.updateComplete
 
 			this.setAttribute('active', '')
+			this.dialogInternals?.states.add('open')
 			await this.updateComplete
 
 			// Save focus and set siblings to inert for focus trap
@@ -443,6 +453,7 @@ export const DialogBase = <T extends Constructor<LitElement & IBaseMixin>>(super
 			this.animating = false
 
 			this.removeAttribute('active')
+			this.dialogInternals?.states.delete('open')
 
 			// Restore inert siblings
 			for (const el of this.inertSiblings) {

package/src/dialog/dialog.component.ts

@@ -1,5 +1,5 @@
 import { $LitElement } from '@mixins/index'
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
 import { cursorGlow } from '../directives/cursor-glow'
 import { createRef, ref, type Ref } from 'lit/directives/ref.js'
@@ -126,6 +126,13 @@ export class SchmancyDialog extends DialogBase(
 	 */
 	private _dragHandleRef: Ref<HTMLElement> = createRef()
 
+	/**
+	 * Stable per-instance id used for ARIA labelledby/describedby wiring
+	 */
+	private readonly _a11yId = `schmancy-dialog-${Math.random().toString(36).slice(2, 10)}`
+	private get _titleId() { return `${this._a11yId}-title` }
+	private get _descId() { return `${this._a11yId}-desc` }
+
 	/**
 	 * Return the dialog element for positioning/size measurement.
 	 * In content mode, returns the first slotted child (the actual component).
@@ -268,10 +275,23 @@ export class SchmancyDialog extends DialogBase(
 
 		// Confirm mode: with title/buttons
 		if (this.isConfirmMode) {
+			const hasTitle = !!this.title?.trim()
+			const hasSubtitle = !!this.subtitle?.trim()
+			const hasMessage = !!this.message?.trim()
+			const describedBy = [hasSubtitle && this._descId + '-sub', hasMessage && this._descId + '-msg']
+				.filter(Boolean)
+				.join(' ') || ''
 			return html`
 				<div ${ref(this._backdropRef)} class="fixed inset-0 bg-surface-container/10 backdrop-blur-lg backdrop-saturate-150 backdrop-brightness-105" @click=${this.handleClose}></div>
 
-				<div ${ref(this._confirmDialogRef)} class=${this.classMap(dialogClasses)} role="alertdialog" aria-modal="true">
+				<div
+					${ref(this._confirmDialogRef)}
+					class=${this.classMap(dialogClasses)}
+					role="alertdialog"
+					aria-modal="true"
+					aria-labelledby=${hasTitle ? this._titleId : nothing}
+					aria-describedby=${describedBy || nothing}
+				>
 					<schmancy-surface
 						${cursorGlow({ radius: 250, intensity: 0.1 })}
 						rounded=${this.isMobile ? 'top' : 'all'}
@@ -283,13 +303,13 @@ export class SchmancyDialog extends DialogBase(
 						<schmancy-scroll direction="vertical" hide class="p-4 pt-2">
 							<schmancy-form @submit=${this.handleConfirm}>
 								${when(
-									this.title?.trim(),
+									hasTitle,
 									() => html`
-										<schmancy-typography type="title" token="md" class="mb-1">${this.title}</schmancy-typography>
+										<schmancy-typography id=${this._titleId} type="title" token="md" class="mb-1">${this.title}</schmancy-typography>
 										${when(
-											this.subtitle?.trim(),
+											hasSubtitle,
 											() => html`
-												<schmancy-typography type="subtitle" token="xs" class="mb-2">
+												<schmancy-typography id="${this._descId}-sub" type="subtitle" token="xs" class="mb-2">
 													${this.subtitle}
 												</schmancy-typography>
 											`,
@@ -299,8 +319,8 @@ export class SchmancyDialog extends DialogBase(
 								${hasCustomContent
 									? html`<div class="mb-4"><slot name="content"></slot></div>`
 									: when(
-											this.message?.trim(),
-											() => html`<schmancy-typography type="body" class="mb-4">${this.message}</schmancy-typography>`,
+											hasMessage,
+											() => html`<schmancy-typography id="${this._descId}-msg" type="body" class="mb-4">${this.message}</schmancy-typography>`,
 										)}
 								<div class=${buttonContainerClasses}>
 									<schmancy-button

package/src/dropdown/dropdown-content.ts

@@ -6,7 +6,9 @@ import { customElement, property } from 'lit/decorators.js'
  * Content container for the schmancy-dropdown component.
  *
  * @element schmancy-dropdown-content
- * @slot - Default slot for dropdown content
+ * @slot - Default slot for dropdown content.
+ * @csspart content - The inner wrapper element; style to override panel
+ *   backgrounds, shadows, padding, or borders without shadow-root piercing.
  */
 @customElement('schmancy-dropdown-content')
 export class SchmancyDropdownContent extends TailwindElement(css`