@mhmo91/schmancy 0.9.5 → 0.9.6

package/src/switch/switch.test.ts

@@ -0,0 +1,93 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { expectNoA11yViolations } from '../test-utils/a11y'
+import './switch'
+
+describe('schmancy-switch', () => {
+	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 form-associated and contributes when checked', async () => {
+		host.innerHTML = `
+			<form>
+				<schmancy-switch name="notify" value="yes"></schmancy-switch>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		const sw = host.querySelector('schmancy-switch') as HTMLElement & { checked: boolean }
+		sw.checked = true
+		await nextUpdate()
+		await nextUpdate()
+		expect(new FormData(form).get('notify')).toBe('yes')
+	})
+
+	it('omits from FormData when unchecked', async () => {
+		host.innerHTML = `<form><schmancy-switch name="notify"></schmancy-switch></form>`
+		const form = host.querySelector('form') as HTMLFormElement
+		await nextUpdate()
+		expect(new FormData(form).get('notify')).toBeNull()
+	})
+
+	it('fires change on toggle and broadcasts :state(checked)', async () => {
+		host.innerHTML = `<schmancy-switch></schmancy-switch>`
+		const sw = host.querySelector('schmancy-switch') as HTMLElement & {
+			checked: boolean
+			updateComplete: Promise<boolean>
+		}
+		await sw.updateComplete
+		let detail: { value: boolean } | undefined
+		sw.addEventListener('change', (e: Event) => {
+			detail = (e as CustomEvent).detail
+		})
+		const btn = sw.shadowRoot!.querySelector('button') as HTMLButtonElement
+		btn.click()
+		await nextUpdate()
+		await nextUpdate()
+		expect(detail).toEqual({ value: true })
+		expect(sw.matches(':state(checked)')).toBe(true)
+	})
+
+	it('exposes role="switch" with aria-checked', async () => {
+		host.innerHTML = `<schmancy-switch></schmancy-switch>`
+		const sw = host.querySelector('schmancy-switch') as HTMLElement & {
+			updateComplete: Promise<boolean>
+		}
+		await sw.updateComplete
+		const btn = sw.shadowRoot!.querySelector('button') as HTMLButtonElement
+		expect(btn.getAttribute('role')).toBe('switch')
+		expect(btn.getAttribute('aria-checked')).toBe('false')
+	})
+
+	it('has no axe-core a11y violations', async () => {
+		host.innerHTML = `<schmancy-switch label="Notifications"></schmancy-switch>`
+		const sw = host.querySelector('schmancy-switch') as HTMLElement & {
+			updateComplete: Promise<boolean>
+		}
+		await sw.updateComplete
+		await expectNoA11yViolations(host)
+	})
+
+	it('fails validation when required and unchecked', async () => {
+		host.innerHTML = `<form><schmancy-switch name="agree" required></schmancy-switch></form>`
+		const form = host.querySelector('form') as HTMLFormElement
+		const sw = host.querySelector('schmancy-switch') as HTMLElement & {
+			checked: boolean
+			checkValidity(): boolean
+		}
+		await nextUpdate()
+		expect(form.checkValidity()).toBe(false)
+		sw.checked = true
+		await nextUpdate()
+		await nextUpdate()
+		expect(form.checkValidity()).toBe(true)
+	})
+})

package/src/switch/switch.ts

@@ -0,0 +1,180 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+export type SchmancySwitchChangeEvent = CustomEvent<{ value: boolean }>
+
+/**
+ * Binary on/off control. Form-associated, keyboard-accessible, semantically a
+ * switch (ARIA role="switch"). Distinct from `schmancy-checkbox`: a switch
+ * represents an immediate state change, a checkbox represents a selection in
+ * a form to be submitted.
+ *
+ * @element schmancy-switch
+ * @fires change - `CustomEvent<{ value: boolean }>` when the state changes.
+ * @attr checked - Initial checked state (also reflected via `value`).
+ * @attr disabled - Disables interaction.
+ * @attr required - Requires the switch to be on for form validity.
+ * @attr name - Form field name for submission.
+ * @csspart track - The background track.
+ * @csspart thumb - The moving thumb.
+ */
+@customElement('schmancy-switch')
+export class SchmancySwitch extends TailwindElement(css`
+	:host {
+		display: inline-block;
+	}
+	:host([disabled]) {
+		opacity: 0.38;
+		pointer-events: none;
+	}
+	button {
+		appearance: none;
+		background: none;
+		border: 0;
+		padding: 0;
+		cursor: pointer;
+		font: inherit;
+	}
+	.track {
+		width: 2.25rem;
+		height: 1.25rem;
+		border-radius: 999px;
+		background: var(--schmancy-sys-color-surface-containerHighest, #e0e0e0);
+		border: 1px solid var(--schmancy-sys-color-outline, #79747e);
+		position: relative;
+		transition: background 150ms ease, border-color 150ms ease;
+	}
+	:host(:state(checked)) .track {
+		background: var(--schmancy-sys-color-primary-default, #6750a4);
+		border-color: var(--schmancy-sys-color-primary-default, #6750a4);
+	}
+	.thumb {
+		position: absolute;
+		top: 50%;
+		left: 0.125rem;
+		width: 0.75rem;
+		height: 0.75rem;
+		border-radius: 999px;
+		background: var(--schmancy-sys-color-outline, #79747e);
+		transform: translateY(-50%);
+		transition: transform 150ms ease, background 150ms ease, width 150ms ease, height 150ms ease;
+	}
+	:host(:state(checked)) .thumb {
+		transform: translate(1rem, -50%);
+		width: 1rem;
+		height: 1rem;
+		background: var(--schmancy-sys-color-primary-on, #ffffff);
+	}
+	button:focus-visible .track {
+		outline: 2px solid var(--schmancy-sys-color-primary-default, #6750a4);
+		outline-offset: 2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.track, .thumb { transition: none; }
+	}
+`) {
+	static formAssociated = true
+	private internals: ElementInternals | undefined
+
+	@property({ type: Boolean, reflect: true }) checked = false
+	@property({ type: Boolean, reflect: true }) disabled = false
+	@property({ type: Boolean, reflect: true }) required = false
+	@property({ type: String }) name = ''
+	@property({ type: String }) value = 'on'
+	@property({ type: String }) label = ''
+
+	protected static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	}
+
+	constructor() {
+		super()
+		try {
+			this.internals = this.attachInternals()
+		} catch {
+			this.internals = undefined
+		}
+	}
+
+	get form(): HTMLFormElement | null {
+		return this.internals?.form ?? null
+	}
+
+	protected updated(changed: Map<string, unknown>) {
+		super.updated?.(changed)
+		if (changed.has('checked') || changed.has('value') || changed.has('name')) {
+			this.internals?.setFormValue(this.checked ? this.value : null)
+			if (this.checked) this.internals?.states.add('checked')
+			else this.internals?.states.delete('checked')
+		}
+		if (changed.has('required') || changed.has('checked')) {
+			if (this.required && !this.checked) {
+				this.internals?.setValidity({ valueMissing: true }, 'This switch is required.')
+			} else {
+				this.internals?.setValidity({})
+			}
+		}
+	}
+
+	formResetCallback() {
+		this.checked = this.hasAttribute('checked')
+	}
+
+	formDisabledCallback(disabled: boolean) {
+		this.disabled = disabled
+	}
+
+	public checkValidity(): boolean {
+		return this.internals?.checkValidity() ?? true
+	}
+
+	public reportValidity(): boolean {
+		return this.internals?.reportValidity() ?? true
+	}
+
+	private _toggle = () => {
+		if (this.disabled) return
+		this.checked = !this.checked
+		this.dispatchEvent(
+			new CustomEvent('change', {
+				detail: { value: this.checked },
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	private _onKeydown = (e: KeyboardEvent) => {
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault()
+			this._toggle()
+		}
+	}
+
+	render() {
+		return html`
+			<button
+				type="button"
+				role="switch"
+				aria-checked=${this.checked ? 'true' : 'false'}
+				aria-label=${this.label || nothing}
+				aria-required=${this.required ? 'true' : 'false'}
+				?disabled=${this.disabled}
+				@click=${this._toggle}
+				@keydown=${this._onKeydown}
+			>
+				<span part="track" class="track">
+					<span part="thumb" class="thumb"></span>
+				</span>
+			</button>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-switch': SchmancySwitch
+	}
+}

package/src/test-utils/a11y.ts

@@ -0,0 +1,35 @@
+import axe, { type ElementContext, type RunOptions, type Result } from 'axe-core'
+import { expect } from 'vitest'
+
+/**
+ * Run axe-core on the given element (or document) and assert no violations.
+ * Throws a readable failure with a summary of violations so test output is
+ * immediately actionable.
+ *
+ * Keep the axe rule set minimal and appropriate for component tests — the
+ * defaults include many rules that only make sense at the page level (e.g.
+ * `region`, `landmark-one-main`). Override via `options.rules` when needed.
+ */
+export async function expectNoA11yViolations(
+	context: ElementContext = document.body,
+	options: RunOptions = {
+		// Exclude page-level rules that don't apply to a component-in-isolation.
+		rules: {
+			region: { enabled: false },
+			'landmark-one-main': { enabled: false },
+			'page-has-heading-one': { enabled: false },
+			'html-has-lang': { enabled: false },
+			'document-title': { enabled: false },
+			bypass: { enabled: false },
+		},
+	},
+): Promise<Result[]> {
+	const results = await axe.run(context, options)
+	if (results.violations.length > 0) {
+		const summary = results.violations
+			.map(v => `  • ${v.id} (${v.impact}): ${v.help}\n    ${v.helpUrl}`)
+			.join('\n')
+		expect.fail(`axe-core found ${results.violations.length} a11y violation(s):\n${summary}`)
+	}
+	return results.violations
+}

package/src/textarea/textarea.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit'
+import { LitElement, html, nothing, type PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, ref } from 'lit/directives/ref.js'
@@ -30,6 +30,8 @@ export default class SchmancyTextarea extends TailwindElement(style) {
 	internals: ElementInternals | undefined
 	textareaRef = createRef<HTMLTextAreaElement>()
 
+	private readonly _a11yId = `schmancy-textarea-${Math.random().toString(36).slice(2, 10)}`
+
 	/**
 	 * The label of the control.
 	 * @attr
@@ -179,6 +181,29 @@ export default class SchmancyTextarea extends TailwindElement(style) {
 		}
 	}
 
+	protected willUpdate(changed: PropertyValues): void {
+		super.willUpdate?.(changed)
+		if (changed.has('value') || changed.has('name')) {
+			this.internals?.setFormValue(this.value ?? '')
+		}
+		if (changed.has('required') || changed.has('value')) {
+			if (this.required && !this.value) {
+				this.internals?.setValidity({ valueMissing: true }, 'Please fill out this field.')
+			} else {
+				this.internals?.setValidity({})
+			}
+		}
+	}
+
+	formResetCallback(): void {
+		this.value = this.getAttribute('value') ?? ''
+		this.error = false
+	}
+
+	formDisabledCallback(disabled: boolean): void {
+		this.disabled = disabled
+	}
+
 	firstUpdated() {
 		if (this.autofocus) {
 			this.focus()
@@ -375,6 +400,7 @@ export default class SchmancyTextarea extends TailwindElement(style) {
 			'w-full min-w-0': true,
 			'flex flex-col h-full': this.fillHeight,
 		}
+		const hintId = `${this._a11yId}-hint`
 		return html`
 		<div class="${this.classMap(containerClasses)}">
 			${when(
@@ -404,12 +430,16 @@ export default class SchmancyTextarea extends TailwindElement(style) {
 				rows=${ifDefined(this.rows)}
 				wrap=${ifDefined(this.wrap)}
 				dirname=${ifDefined(this.dirname)}
+				aria-invalid=${this.error ? 'true' : 'false'}
+				aria-required=${this.required ? 'true' : 'false'}
+				aria-describedby=${this.hint ? hintId : nothing}
+				aria-label=${!this.label && this.placeholder ? this.placeholder : nothing}
 			></textarea>
 
 			${when(
 				this.hint,
 				() => html`
-					<div class="mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}">
+					<div id=${hintId} class="mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}">
 						${this.hint}
 					</div>
 				`,

package/src/tooltip/index.ts

@@ -1,2 +1 @@
-export * from './tooltip.directive';
-export * from './tooltip';
+export * from './tooltip.directive'

package/src/tree/tree.ts

@@ -34,6 +34,22 @@ export class SchmancyTree extends TailwindElement(css`
 	// Since it's actually a <schmancy-button>, use HTMLElement or a custom type
 	@query('#chevron') chevron!: HTMLElement
 
+	private readonly _a11yId = `schmancy-tree-${Math.random().toString(36).slice(2, 10)}`
+	private get _contentId() { return `${this._a11yId}-content` }
+
+	/** ElementInternals — broadcasts `:state(open)` for consumer CSS. */
+	private readonly _internals: ElementInternals | undefined = (() => {
+		try { return this.attachInternals() } catch { return undefined }
+	})()
+
+	updated(changed: Map<string, unknown>) {
+		super.updated?.(changed)
+		if (changed.has('open')) {
+			if (this.open) this._internals?.states.add('open')
+			else this._internals?.states.delete('open')
+		}
+	}
+
 	firstUpdated() {
 		// Hide or show the slot initially based on `open`
 		if (!this.open) {
@@ -116,11 +132,20 @@ export class SchmancyTree extends TailwindElement(css`
 
 				<!-- The chevron or arrow symbol -->
 				<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->
-				<schmancy-button slot="trailing" id="chevron" @click=${(e: Event) => e.stopPropagation()}> ⌅ </schmancy-button>
+				<schmancy-button
+					slot="trailing"
+					id="chevron"
+					aria-expanded=${this.open ? 'true' : 'false'}
+					aria-controls=${this._contentId}
+					aria-label=${this.open ? 'Collapse' : 'Expand'}
+					@click=${(e: Event) => e.stopPropagation()}
+				>
+					⌅
+				</schmancy-button>
 			</div>
 
 			<!-- The default slot: tree children -->
-			<slot></slot>
+			<slot id=${this._contentId}></slot>
 		`
 	}
 }

package/src/visually-hidden/index.ts

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

package/src/visually-hidden/visually-hidden.ts

@@ -0,0 +1,39 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+/**
+ * Hides content visually while keeping it in the accessibility tree. Use for
+ * screen-reader-only labels, supplemental descriptions, and live-region text
+ * that sighted users don't need to see.
+ *
+ * Uses the WCAG-recommended clip pattern rather than `display: none` or
+ * `visibility: hidden` so assistive tech still reads the content.
+ *
+ * @element schmancy-visually-hidden
+ * @slot - Content hidden from sighted users but exposed to assistive tech.
+ */
+@customElement('schmancy-visually-hidden')
+export class SchmancyVisuallyHidden extends TailwindElement(css`
+	:host {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+`) {
+	render() {
+		return html`<slot></slot>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-visually-hidden': SchmancyVisuallyHidden
+	}
+}

package/src/window/window-position.ts

@@ -11,10 +11,9 @@
  *   // → { left: 144, top: 444, width: 360, height: 500 } (cascaded away from conflict)
  */
 
-import type { WindowBounds, WindowRecord, SnapCorner } from './window-registry.js'
+import type { WindowBounds, WindowRecord } from './window-registry.js'
 
 const HEAD_HEIGHT = 44
-const EDGE_GAP = 16
 const CASCADE_OFFSET = HEAD_HEIGHT
 const MAX_CASCADE_ATTEMPTS = 10
 
@@ -48,41 +47,6 @@ export function resolveOverlap(
 	return clampToViewport(bounds, viewport)
 }
 
-/**
- * Snap window bounds to a corner with standard edge gap.
- */
-export function snapToCorner(
-	bounds: WindowBounds,
-	corner: SnapCorner,
-	viewport: { width: number; height: number },
-	bottomOffset: number,
-): WindowBounds {
-	const isRight = corner.includes('right')
-	const isBottom = corner.includes('bottom')
-
-	return {
-		width: bounds.width,
-		height: bounds.height,
-		left: isRight ? viewport.width - bounds.width - EDGE_GAP : EDGE_GAP,
-		top: isBottom ? viewport.height - bounds.height - EDGE_GAP - bottomOffset : EDGE_GAP,
-	}
-}
-
-/**
- * Place a window flush beside a neighbor.
- */
-export function snapToNeighbor(
-	bounds: WindowBounds,
-	neighbor: WindowBounds,
-	side: 'left' | 'right',
-): WindowBounds {
-	return {
-		...bounds,
-		left: side === 'right' ? neighbor.left + neighbor.width + EDGE_GAP : neighbor.left - bounds.width - EDGE_GAP,
-		top: neighbor.top,
-	}
-}
-
 /**
  * Clamp bounds so the window stays fully within the viewport.
  */
@@ -97,40 +61,3 @@ export function clampToViewport(
 		top: Math.max(0, Math.min(bounds.top, viewport.height - bounds.height)),
 	}
 }
-
-/**
- * Convert corner-relative offset (used by the old float) to absolute viewport bounds.
- */
-export function cornerOffsetToAbsolute(
-	corner: SnapCorner,
-	offset: { x: number; y: number },
-	size: { width: number; height: number },
-	viewport: { width: number; height: number },
-	bottomOffset: number,
-): WindowBounds {
-	const isRight = corner.includes('right')
-	const isBottom = corner.includes('bottom')
-	return {
-		width: size.width,
-		height: size.height,
-		left: isRight ? viewport.width - offset.x - size.width : offset.x,
-		top: isBottom ? viewport.height - offset.y - size.height - bottomOffset : offset.y,
-	}
-}
-
-/**
- * Convert absolute viewport bounds back to corner-relative offset.
- */
-export function absoluteToCornerOffset(
-	corner: SnapCorner,
-	bounds: WindowBounds,
-	viewport: { width: number; height: number },
-	bottomOffset: number,
-): { x: number; y: number } {
-	const isRight = corner.includes('right')
-	const isBottom = corner.includes('bottom')
-	return {
-		x: isRight ? viewport.width - bounds.left - bounds.width : bounds.left,
-		y: isBottom ? viewport.height - bounds.top - bounds.height - bottomOffset : bounds.top,
-	}
-}

package/types/mixins/formField.mixin.d.ts

@@ -2,6 +2,12 @@ import { CSSResult, LitElement } from 'lit';
 import { IBaseMixin } from './baseElement';
 import { Constructor } from './constructor';
 import { ITailwindElementMixin } from './tailwind.mixin';
+/**
+ * Cross-realm brand used by `<schmancy-form>` to discover form fields by
+ * inheritance rather than tag-name allowlists. `Symbol.for` puts the symbol in
+ * the global registry so detection works across module realms/bundles.
+ */
+export declare const SCHMANCY_FORM_FIELD: unique symbol;
 /**
  * Interface defining the properties and methods that the FormFieldMixin adds.
  */
@@ -20,11 +26,19 @@ export interface IFormFieldMixin extends Element {
     checkValidity(): boolean;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
+    toFormEntries(): Array<[string, FormDataEntryValue]>;
+    resetForm(): void;
     emitChange(detail: any): void;
 }
+/** Predicate used by `<schmancy-form>` to detect mixin descendants. */
+export declare function isSchmancyFormField(el: unknown): el is IFormFieldMixin;
 /**
  * A mixin that adds form field capabilities to a LitElement class.
- * This provides common form field properties, validation, and form association.
+ * Components that extend this mixin are automatically discovered and
+ * collected by `<schmancy-form>` — no tag-name registration needed.
+ *
+ * Subclasses may override `toFormEntries()` to contribute multiple
+ * name/value pairs to FormData (e.g. date-range, tag-input).
  *
  * @example
  * ```ts
@@ -37,12 +51,5 @@ export declare function FormFieldMixin<T extends Constructor<LitElement>>(superC
 /**
  * A convenience function that composes FormFieldMixin with TailwindElement
  * to create a base class for Schmancy form components.
- *
- * @example
- * ```ts
- * class MyInput extends SchmancyFormField(css`...`) {
- *   // Your component code here
- * }
- * ```
  */
 export declare function SchmancyFormField<T extends CSSResult>(componentStyle?: T): Constructor<IFormFieldMixin> & Constructor<ITailwindElementMixin> & Constructor<LitElement> & Constructor<IBaseMixin>;

package/types/src/audio/emotional-sounds.d.ts

@@ -41,8 +41,6 @@ export type ConnectedFeeling = 'connected' | 'accepted' | 'included' | 'belongin
 export type MixedFeeling = 'conflicted' | 'confused' | 'ambivalent' | 'nostalgic' | 'guilty' | 'embarrassed' | 'surprised' | 'shocked' | 'awestruck' | 'skeptical';
 /** All feelings */
 export type Feeling = HappyFeeling | SadFeeling | AnxiousFeeling | AngryFeeling | TiredFeeling | CalmFeeling | ConnectedFeeling | MixedFeeling;
-/** Feeling category */
-export type FeelingCategory = 'happy' | 'sad' | 'anxious' | 'angry' | 'tired' | 'calm' | 'connected' | 'mixed';
 /**
  * Emotional Sound Generator
  * Creates soft, beautiful sounds using Web Audio API

package/types/src/autocomplete/autocomplete.d.ts

@@ -17,6 +17,12 @@ declare const SchmancyAutocomplete_base: CustomElementConstructor & import("@mix
  * @prop {string[]} values - Selected values (multi-select mode)
  */
 export default class SchmancyAutocomplete extends SchmancyAutocomplete_base {
+    static formAssociated: boolean;
+    internals: ElementInternals | undefined;
+    constructor();
+    get form(): HTMLFormElement | null;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
     _valueSet: boolean;
     _valuesSet: boolean;
     required: boolean;
@@ -32,6 +38,7 @@ export default class SchmancyAutocomplete extends SchmancyAutocomplete_base {
     similarityThreshold: number;
     error: boolean;
     validationMessage: string;
+    private readonly _a11yId;
     get values(): string[];
     set values(vals: string[]);
     get value(): string;

package/types/src/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,38 @@
+declare const SchmancyBreadcrumb_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * 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.
+ */
+export declare class SchmancyBreadcrumb extends SchmancyBreadcrumb_base {
+    separator: string;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _insertSeparators;
+}
+declare const SchmancyBreadcrumbItem_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * 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"`.
+ */
+export declare class SchmancyBreadcrumbItem extends SchmancyBreadcrumbItem_base {
+    href: string;
+    current: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-breadcrumb': SchmancyBreadcrumb;
+        'schmancy-breadcrumb-item': SchmancyBreadcrumbItem;
+    }
+}
+export {};

package/types/src/breadcrumb/index.d.ts

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