@mhmo91/schmancy 0.10.35 → 0.10.36

package/src/form/fields/date-range/date-range.test.ts

@@ -68,6 +68,50 @@ describe('schmancy-date-range', () => {
 		expect(form.checkValidity()).toBe(true)
 	})
 
+	it('paints both validity surfaces when required, empty, and submitted', async () => {
+		host.innerHTML = `<form><schmancy-date-range name="w" required></schmancy-date-range></form>`
+		const form = host.querySelector('form') as HTMLFormElement
+		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
+			dateFrom: { label: string; value: string }
+			dateTo: { label: string; value: string }
+			markSubmitted(): void
+			checkValidity(): boolean
+		}
+		await nextUpdate()
+		await nextUpdate()
+		dr.dateFrom = { label: 'From', value: '' }
+		dr.dateTo = { label: 'To', value: '' }
+		await nextUpdate()
+
+		// Platform surface: the form blocks submit.
+		expect(form.checkValidity()).toBe(false)
+
+		// Rendered surface is gated until submit (validateOn default 'dirty').
+		dr.markSubmitted()
+		dr.checkValidity()
+		await nextUpdate()
+		await nextUpdate()
+
+		const root = (dr as unknown as { shadowRoot: ShadowRoot }).shadowRoot
+		const alert = root.querySelector('[role="alert"]')
+		expect(alert, 'a role=alert message must render').not.toBeNull()
+		expect(alert?.textContent?.trim()).toBe('Please select a date range.')
+		// Control itself carries a visible invalid treatment.
+		expect(
+			root.querySelector('section.outline-error-default'),
+			'the control must carry an invalid treatment',
+		).not.toBeNull()
+
+		// Filling the range clears both surfaces.
+		dr.dateFrom = { label: 'From', value: '2026-01-01' }
+		dr.dateTo = { label: 'To', value: '2026-01-31' }
+		await nextUpdate()
+		await nextUpdate()
+		expect(form.checkValidity()).toBe(true)
+		expect(root.querySelector('[role="alert"]')).toBeNull()
+		expect(root.querySelector('section.outline-error-default')).toBeNull()
+	})
+
 	it('has no axe-core a11y violations', async () => {
 		host.innerHTML = `<schmancy-date-range name="window"></schmancy-date-range>`
 		await nextUpdate()

package/src/form/fields/date-range/date-range.ts

@@ -1,8 +1,8 @@
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
-import { html, PropertyValues } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { fromEvent, Subscription, takeUntil, timer } from 'rxjs'
+import { concat, exhaustMap, finalize, fromEvent, map, merge, of, Subject, switchMap, takeUntil, tap, timer } from 'rxjs'
 import { SchmancyFormField } from '@mixins/index'
 import { show } from '../../../overlay/overlay.service'
 import { detectDateRangeType, formatDateRange } from './date-range-helpers'
@@ -55,6 +55,12 @@ export class SchmancyDateRange extends SchmancyFormField() {
 	/** When true, collapses to just an icon button on mobile screens */
 	@property({ type: Boolean }) collapse = false
 
+	// Session inputs — driven by handlers, consumed by the single pipeline
+	// in connectedCallback (rxjs ONE_PIPELINE_ONE_SUBSCRIBE / SESSIONS).
+	private readonly open$ = new Subject<MouseEvent | undefined>()
+	private readonly close$ = new Subject<void>()
+	private readonly announce$ = new Subject<string>()
+
 	// Internal states
 	@state() private isOpen = false
 	@state() private selectedDateRange: string = ''
@@ -95,17 +101,71 @@ export class SchmancyDateRange extends SchmancyFormField() {
 			this.updateSelectedDateRange()
 		}
 
-		// Set up global event handlers using RxJS
-		this.setupEventHandlers()
-	}
-
-	private setupEventHandlers() {
-		// Handle keyboard navigation
-		fromEvent<KeyboardEvent>(document, 'keydown')
+		// One pipeline, one subscribe (rxjs ONE_PIPELINE_ONE_SUBSCRIBE): the
+		// dropdown open/close session, screen-reader announcements, and
+		// document keyboard navigation merge into a single chain torn down by
+		// takeUntil(this.disconnecting).
+		merge(
+			// Dropdown is a session (rxjs SESSIONS_USE_HIGHER_ORDER_OBSERVABLES):
+			// open$ opens the overlay; show() completes when an inner handler
+			// dispatches `close`, close$ dismisses it externally; finalize
+			// resets isOpen on either teardown path.
+			this.open$.pipe(
+				tap(() => {
+					this.dispatchEvent(new CustomEvent('beforeopen', { bubbles: true, composed: true }))
+					this.isOpen = true
+				}),
+				exhaustMap(anchor =>
+					show(
+						html`
+							<schmancy-date-range-dialog
+								.type="${this.type}"
+								.dateFrom="${this.dateFrom}"
+								.dateTo="${this.dateTo}"
+								.minDate="${this.minDate}"
+								.maxDate="${this.maxDate}"
+								.activePreset="${this.activePreset}"
+								.presetCategories="${this.presetCategories}"
+								@preset-select="${(ev: CustomEvent) => {
+									this.activePreset = ev.detail.preset.label
+									this.setDateRange(ev.detail.preset.range.dateFrom, ev.detail.preset.range.dateTo)
+									dispatchClose(ev.currentTarget)
+								}}"
+								@date-change="${() => this.updateSelectedDateRange()}"
+								@apply-dates="${(ev: CustomEvent) => {
+									const { dateFrom, dateTo, swapIfNeeded } = ev.detail
+									if (swapIfNeeded) {
+										this.setDateRange(dateTo, dateFrom)
+									} else {
+										this.setDateRange(dateFrom, dateTo)
+									}
+									dispatchClose(ev.currentTarget)
+								}}"
+								@announce="${(ev: CustomEvent) => this.announce$.next(ev.detail.message)}"
+							></schmancy-date-range-dialog>
+						`,
+						{ anchor },
+					).pipe(
+						takeUntil(this.close$),
+						finalize(() => {
+							this.isOpen = false
+						}),
+					),
+				),
+			),
+			// Announcements (rxjs LIFT_EVERY_ASYNC_SOURCE): one Subject, one
+			// switchMap-cleared timer — not a fresh timer().subscribe() per call.
+			this.announce$.pipe(
+				switchMap(message => concat(of(message), timer(100).pipe(map(() => '')))),
+				tap(message => {
+					this.announceMessage = message
+				}),
+			),
+			// Document keyboard navigation.
+			fromEvent<KeyboardEvent>(document, 'keydown').pipe(tap(event => this.handleKeyboardNavigation(event))),
+		)
 			.pipe(takeUntil(this.disconnecting))
-			.subscribe(event => {
-				this.handleKeyboardNavigation(event)
-			})
+			.subscribe()
 	}
 
 	updated(changedProps: PropertyValues) {
@@ -182,23 +242,23 @@ export class SchmancyDateRange extends SchmancyFormField() {
 	}
 
 	/** `dirty` tracks the underlying date strings, not the wide-union value. */
-	private _dateFromDefault: string = ''
-	private _dateToDefault: string = ''
+	private dateFromDefault: string = ''
+	private dateToDefault: string = ''
 	override firstUpdated(changed: PropertyValues): void {
 		super.firstUpdated(changed)
-		this._dateFromDefault = this.dateFrom?.value ?? ''
-		this._dateToDefault = this.dateTo?.value ?? ''
+		this.dateFromDefault = this.dateFrom?.value ?? ''
+		this.dateToDefault = this.dateTo?.value ?? ''
 	}
 	override get dirty(): boolean {
 		return (
-			(this.dateFrom?.value ?? '') !== this._dateFromDefault ||
-			(this.dateTo?.value ?? '') !== this._dateToDefault
+			(this.dateFrom?.value ?? '') !== this.dateFromDefault ||
+			(this.dateTo?.value ?? '') !== this.dateToDefault
 		)
 	}
 
 	override resetForm(): void {
-		this.dateFrom = { ...this.dateFrom, value: this._dateFromDefault }
-		this.dateTo = { ...this.dateTo, value: this._dateToDefault }
+		this.dateFrom = { ...this.dateFrom, value: this.dateFromDefault }
+		this.dateTo = { ...this.dateTo, value: this.dateToDefault }
 		super.resetForm()
 	}
 
@@ -282,7 +342,7 @@ export class SchmancyDateRange extends SchmancyFormField() {
 		this.updateSelectedDateRange()
 
 		// Announce change to screen readers
-		this.announceToScreenReader(`Date range updated: ${this.selectedDateRange}`)
+		this.announce$.next(`Date range updated: ${this.selectedDateRange}`)
 
 		this.dispatchEvent(
 			new CustomEvent<{ dateFrom: string; dateTo: string }>('change', {
@@ -296,72 +356,15 @@ export class SchmancyDateRange extends SchmancyFormField() {
 	private toggleDropdown(e: MouseEvent) {
 		e.stopPropagation()
 		if (this.disabled || this.step !== undefined) return
-
+		// Drive the session pipeline (connectedCallback) — no imperative
+		// open/close, no manual subscription field.
 		if (this.isOpen) {
-			this.closeDropdown()
+			this.close$.next()
 		} else {
-			this.openDropdown(e)
+			this.open$.next(e)
 		}
 	}
 
-	private _overlaySubscription: Subscription | null = null
-
-	private openDropdown(e?: MouseEvent) {
-		if (this.disabled || this.step !== undefined) return
-
-		this.dispatchEvent(new CustomEvent('beforeopen', { bubbles: true, composed: true }))
-		this.isOpen = true
-
-		// Inline-template overlay. Inner handlers dispatch a 'close' event
-		// from the dialog itself (via the module-scoped `dispatchClose`),
-		// which `show()` translates into observable completion + an emission.
-		// Layout (centered vs sheet) is chosen by the overlay system based on
-		// viewport / anchor presence.
-		const dialogContent = html`
-			<schmancy-date-range-dialog
-				.type="${this.type}"
-				.dateFrom="${this.dateFrom}"
-				.dateTo="${this.dateTo}"
-				.minDate="${this.minDate}"
-				.maxDate="${this.maxDate}"
-				.activePreset="${this.activePreset}"
-				.presetCategories="${this.presetCategories}"
-				@preset-select="${(ev: CustomEvent) => {
-					this.activePreset = ev.detail.preset.label
-					this.setDateRange(ev.detail.preset.range.dateFrom, ev.detail.preset.range.dateTo)
-					dispatchClose(ev.currentTarget)
-				}}"
-				@date-change="${() => this.updateSelectedDateRange()}"
-				@apply-dates="${(ev: CustomEvent) => {
-					const { dateFrom, dateTo, swapIfNeeded } = ev.detail
-					if (swapIfNeeded) {
-						this.setDateRange(dateTo, dateFrom)
-					} else {
-						this.setDateRange(dateFrom, dateTo)
-					}
-					dispatchClose(ev.currentTarget)
-				}}"
-				@announce="${(ev: CustomEvent) => this.announceToScreenReader(ev.detail.message)}"
-			></schmancy-date-range-dialog>
-		`
-
-		this._overlaySubscription?.unsubscribe()
-		this._overlaySubscription = show(dialogContent, { anchor: e })
-			.pipe(takeUntil(this.disconnecting))
-			.subscribe({
-				complete: () => {
-					this.isOpen = false
-					this._overlaySubscription = null
-				},
-			})
-	}
-
-	private closeDropdown() {
-		this._overlaySubscription?.unsubscribe()
-		this._overlaySubscription = null
-		this.isOpen = false
-	}
-
 	/**
 	 * Shifts the date range based on the step property
 	 */
@@ -522,20 +525,15 @@ export class SchmancyDateRange extends SchmancyFormField() {
 		return toDate.isBefore(maxDate)
 	}
 
-	/**
-	 * Announce messages to screen readers
-	 */
-	private announceToScreenReader(message: string) {
-		this.announceMessage = message
-		// Clear the message after announcement
-		timer(100)
-			.pipe(takeUntil(this.disconnecting))
-			.subscribe(() => {
-				this.announceMessage = ''
-			})
-	}
 
 	render() {
+		// Step 6 — validity is two surfaces: when checkValidity() has flipped
+		// `error` (gated by `_shouldShowError`), the control must visibly carry
+		// the invalid treatment AND render the message. Platform validity is
+		// set in checkValidity(); this paints the user-facing half.
+		const showError = this.error && !!this.validationMessage
+		const errorRing = showError ? ' rounded outline outline-2 outline-error-default' : ''
+
 		return html`
 			<div class="relative ${this.disabled ? 'opacity-60 pointer-events-none' : ''}">
 				<!-- Screen reader announcements -->
@@ -545,18 +543,22 @@ export class SchmancyDateRange extends SchmancyFormField() {
 
 				<!-- Collapsed: icon-only on mobile when collapse=true -->
 				<schmancy-icon-button
-					class="${this.collapse ? 'lg:hidden' : 'hidden'}"
+					class="${this.collapse ? 'lg:hidden' : 'hidden'}${errorRing}"
 					variant="outlined"
 					type="button"
+					aria-invalid=${showError ? 'true' : 'false'}
 					aria-label="Select date range. Current: ${this.selectedDateRange || 'No date selected'}"
 					@click=${(e: MouseEvent) => this.toggleDropdown(e)}
 					?disabled=${this.disabled}
 				>
-					date_range
+				date_range
 				</schmancy-icon-button>
 
 				<!-- Full UI: always visible when collapse=false, or lg+ when collapse=true -->
-				<section @click=${(event: Event) => event.stopPropagation()} class="${this.collapse ? 'hidden lg:flex' : 'flex'}">
+				<section
+					@click=${(event: Event) => event.stopPropagation()}
+					aria-invalid=${showError ? 'true' : 'false'}
+					class="${this.collapse ? 'hidden lg:flex' : 'flex'}${errorRing}">
 						<schmancy-icon-button
 							type="button"
 							aria-label="Previous ${this.activePreset ? this.activePreset.toLowerCase() : 'date range'}"
@@ -590,6 +592,10 @@ export class SchmancyDateRange extends SchmancyFormField() {
 							arrow_right
 						</schmancy-icon-button>
 				</section>
+
+				${showError
+					? html`<div role="alert" class="text-error-default text-sm mt-1">${this.validationMessage}</div>`
+					: nothing}
 			</div>
 		`
 	}

package/src/form/fields/index.ts

@@ -1,5 +1,6 @@
 export * from './autocomplete'
 export * from './checkbox'
+export * from './chips'
 export * from './date-range'
 export * from './input'
 export * from './radio-group'

package/src/index.ts

@@ -7,7 +7,7 @@ export * from './busy';
 export * from './button';
 export * from './card';
 export * from './form/fields/checkbox';
-export * from './chips';
+export * from './form/fields/chips';
 export * from './connectivity';
 export * from './content-drawer';
 export * from './form/fields/date-range';
@@ -19,6 +19,7 @@ export * from './discovery';
 export * from './divider';
 export * from './dropdown';
 export * from './expand';
+export * from './fab';
 export * from './float';
 export * from './window';
 export * from './form';

package/src/overlay/overlay.animations.ts

@@ -1,7 +1,6 @@
 import {
 	DURATION_EXIT,
 	getEasing,
-	SPRING_GENTLE,
 	SPRING_SMOOTH,
 	SPRING_SNAPPY,
 } from '../utils/animation'
@@ -162,8 +161,8 @@ export function surfaceAnimation(layout: OverlayLayout, direction: 'in' | 'out')
 							{ opacity: 1, transform: 'translateY(0)' },
 						],
 						options: {
-							duration: SPRING_GENTLE.duration,
-							easing: getEasing(SPRING_GENTLE),
+							duration: SPRING_SNAPPY.duration,
+							easing: getEasing(SPRING_SNAPPY),
 							fill: 'forwards',
 						},
 					}

package/src/overlay/overlay.component.ts

@@ -119,6 +119,7 @@ export class SchmancyOverlay extends SchmancyElement {
 	@property({ type: String, reflect: true }) tier: OverlayTier = 'modal'
 
 	@state() private _active = false
+	@state() private _full = false
 
 	@query('.backdrop') private _backdrop?: HTMLDivElement
 	@query('.surface') private _surface!: HTMLElement
@@ -152,6 +153,7 @@ export class SchmancyOverlay extends SchmancyElement {
 		this._mounted = true
 
 		this.dismissable = options.dismissable !== false
+		this._full = options.full ?? false
 		this._rawAnchor = options.anchor
 		this._anchorOriginAnchor = options.anchor
 		this._resolvedAnchor = resolveAnchorRef(options.anchor)
@@ -278,13 +280,15 @@ export class SchmancyOverlay extends SchmancyElement {
 	protected render(): TemplateResult {
 		if (!this._active) return html``
 		const baseClasses =
-			'surface fixed pointer-events-auto overflow-auto ' +
+			'surface fixed pointer-events-auto ' +
 			'bg-surface-container/85 text-surface-on backdrop-blur-md ' +
 			'border border-surface-on/8'
 		const layoutClasses =
 			this.layout === 'sheet'
-				? 'left-0 right-0 bottom-0 w-full max-h-[90dvh] rounded-t-[28px] shadow-overlay'
-				: 'max-w-[min(480px,calc(100vw-2rem))] max-h-[90dvh] rounded-3xl shadow-overlay-anchored'
+				? this._full
+					? 'left-0 right-0 bottom-0 w-full h-[90dvh] rounded-t-[28px] shadow-overlay flex flex-col overflow-hidden'
+					: 'left-0 right-0 bottom-0 w-full max-h-[90dvh] rounded-t-[28px] shadow-overlay overflow-auto'
+				: 'max-w-[min(480px,calc(100vw-2rem))] max-h-[90dvh] rounded-3xl shadow-overlay-anchored overflow-auto'
 		return html`
 			<div class="shell fixed inset-0 pointer-events-none" part="shell">
 				${when(
@@ -300,7 +304,7 @@ export class SchmancyOverlay extends SchmancyElement {
 					aria-modal=${this.modal ? 'true' : 'false'}
 					tabindex="-1"
 				>
-					<div id=${MOUNT_POINT_ID}></div>
+					<div id=${MOUNT_POINT_ID} class=${this.layout === 'sheet' && this._full ? 'flex-1 min-h-0 overflow-hidden' : ''}></div>
 				</section>
 			</div>
 		`

package/src/overlay/overlay.types.ts

@@ -1,7 +1,6 @@
 import type { TemplateResult } from 'lit'
 import type { Observable } from 'rxjs'
-import type { ComponentType } from '../area/router.types'
-import type { THistoryStrategy } from '../area/router.types'
+import type { ComponentType, THistoryStrategy } from '../area/router.types'
 
 /**
  * Sync factory that returns a TemplateResult. Called at mount time so closed-over
@@ -103,6 +102,19 @@ export interface ShowOptions {
 	 *  takeover view that doesn't have an anchor. */
 	as?: OverlayLayout
 
+	/** When `true` and layout resolves to `'sheet'`, the surface takes the
+	 *  full available height (`h-[90dvh]`) instead of sizing to content.
+	 *  The mount point becomes `flex-1 min-h-0 overflow-hidden` so the
+	 *  mounted component can fill it via `height: 100%`. Default `false`. */
+	full?: boolean
+
+	/** When `true` and layout is `'sheet'`, the surface takes the full
+	 *  available height (`h-[90dvh]`) rather than sizing to content. The
+	 *  mount point becomes `flex-1` so the mounted component can fill it
+	 *  via `height: 100%`. Use for immersive full-height panels (e.g. a
+	 *  document review). Default `false`. */
+	fillHeight?: boolean
+
 	/** Default `'push'`. Same vocabulary as `area.push()`.
 	 *  - `'push'` — new history entry; back dismisses, forward re-opens.
 	 *  - `'replace'` — replace current entry; back skips the overlay.

package/src/theme/theme.component.ts

@@ -9,6 +9,7 @@ import { formatTheme } from './theme.format'
 import { TSchmancyTheme } from './theme.interface'
 import { ThemeHereIAm, ThemeWhereAreYou, ThemeWhereAreYouEvent } from './theme.events'
 import style from './theme.style.css?inline'
+import '../surface/surface'
 export const tailwindStyles = unsafeCSS(style)
 const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 const $colorScheme = new Observable<string>(subscriber => {

package/src/theme/theme.style.css

@@ -407,6 +407,9 @@
 	--tracking-wide: 0.025em;
 	--tracking-wider: 0.05em;
 	--tracking-widest: 0.1em;
+	--tracking-eyebrow: 0.18em;
+	--tracking-label: 0.14em;
+	--leading-display: 0.95;
 	--leading-tight: 1.25;
 	--leading-snug: 1.375;
 	--leading-normal: 1.5;

package/types/src/boat/boat.d.ts

@@ -2,34 +2,51 @@ import { SchmancyElement } from '@mixins/index';
 import { type PropertyValues } from 'lit';
 type Corner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 /**
- * Material-3 extended FAB that delegates its expanded panel to the `show()`
- * overlay service. Collapsed: a draggable, corner-anchored pill (icon + label,
- * circular when no label). Activated: the default-slot content blooms from the
- * FAB as an overlay (backdrop / Esc / back-button / sheet-on-narrow handled by
- * the overlay primitive).
+ * Corner-anchored launcher that delegates its expanded panel to the `show()`
+ * overlay service.
+ *
+ * Three slots, three non-overlapping intents — no element-type sniffing,
+ * ever:
+ *
+ *   - `trigger`  — pure consumer content. A native click anywhere on it
+ *     opens the panel; interactive children (buttons, FABs, inputs) work
+ *     with zero special-casing because the boat never calls
+ *     `preventDefault` / `stopPropagation` / `setPointerCapture` here.
+ *   - `drag-handle` — opt-in. Pointer-drag is wired ONLY to this slot's
+ *     boat-owned wrapper. Slot it to make the boat draggable; omit it and
+ *     the boat is static at its corner. (A no-move tap on the handle also
+ *     opens, so the grip doubles as a launcher.)
+ *   - _(default)_ — the panel body; parked hidden while collapsed,
+ *     relocated into the `show()` overlay on open.
+ *
+ * The boat owns drag, corner-snapping, position persistence and the glass
+ * surface — never the collapsed shape.
  */
 export default class SchmancyBoat extends SchmancyElement {
     #private;
-    static styles: import("lit").CSSResult[];
     /** Identity for localStorage drag-position persistence. */
     id: string;
-    /** Corner the FAB is anchored to. */
+    /** Corner the launcher is anchored to. */
     corner: Corner;
     /** Open state. Bind `?open=${…}` to drive the overlay; reflected to the attribute. */
     open: boolean;
     private isDragging;
     private currentCorner;
+    private hasHandle;
+    /** Default-slot nodes — the overlay body. */
     private slotted;
+    /** Slotted drag-handle nodes — presence toggles draggability. */
+    private handleNodes;
     private position;
     private containerRef;
-    private headerRef;
+    private triggerRef;
+    private handleRef;
     private currentAnimation?;
     private applyContainerPosition;
     private loadPosition;
     private savePosition;
     private validateBounds;
     private reorientToNearestCorner;
-    private setupDrag;
     private openOverlay;
     private restoreSlotted;
     connectedCallback(): void;
@@ -38,6 +55,7 @@ export default class SchmancyBoat extends SchmancyElement {
     disconnectedCallback(): void;
     /** Flip open ↔ closed. */
     toggle(): void;
+    private onHandleSlotChange;
     protected render(): unknown;
 }
 declare global {

package/types/src/boat/boat.test.d.ts

@@ -0,0 +1,2 @@
+import './boat';
+import '../surface/surface';

package/types/src/button/icon-button.d.ts

@@ -68,9 +68,10 @@ export declare class SchmnacyIconButton extends SchmancyElement {
      */
     icon?: string;
     private _capturedIcon?;
+    private _observer?;
     connectedCallback(): void;
-    private _captureIconFromChildren;
-    private _handleSlotChange;
+    disconnectedCallback(): void;
+    private _captureIcon;
     set ariaLabel(value: string);
     get ariaLabel(): string;
     /** Sets focus in the button. */

package/types/src/chips/assist-chip.d.ts

@@ -1,47 +1 @@
-import { SchmancyElement } from '@mixins/index';
-/**
- * Assist chip component - prompts user actions like opening calendar events or sharing content
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
- */
-export declare class SchmancyAssistChip extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    /** Value identifier for the chip */
-    value: string;
-    /** Optional icon name (Material Symbols) */
-    icon: string;
-    /** Optional href for navigation */
-    href: string;
-    /** Target for navigation (e.g., '_blank') */
-    target: string;
-    /** Disable the chip */
-    disabled: boolean;
-    /** Elevated style variant - true by default per M3 spec for assist chips */
-    elevated: boolean;
-    private hover$;
-    private pressed$;
-    private focused$;
-    private ripples;
-    protected static shadowRootOptions: {
-        delegatesFocus: boolean;
-        clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    private nextRippleId;
-    connectedCallback(): void;
-    private handleClick;
-    private handleKeyDown;
-    private handleFocus;
-    private handleBlur;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-assist-chip': SchmancyAssistChip;
-    }
-}
-export type AssistChipActionEvent = {
-    value: string;
-};
+export * from '../form/fields/chips/assist-chip';

package/types/src/chips/chips.d.ts

@@ -1,43 +1 @@
-import { SchmancyElement } from '@mixins/index';
-import { PropertyValues } from 'lit';
-import type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip';
-import { SchmancyFilterChip as SchmancyChip } from './filter-chip';
-export default class SchmancyChips extends SchmancyElement {
-    static styles: import("lit").CSSResult[];
-    private value$;
-    private values$;
-    private _value;
-    private _values;
-    private _multi;
-    private _valueSet;
-    private _valuesSet;
-    /**
-     * @deprecated Use .values for multi-selection or .value for single-selection instead.
-     * The mode is now automatically determined based on which property is used.
-     */
-    get multi(): boolean;
-    set multi(value: boolean);
-    /**
-     * Automatically determines the selection mode based on which properties are in use
-     */
-    private get mode();
-    get values(): string[];
-    set values(value: string[]);
-    get value(): string;
-    set value(value: string);
-    chips: (SchmancyChip | HTMLElement)[];
-    wrap: boolean;
-    required: boolean;
-    justify: 'start' | 'center' | 'end';
-    connectedCallback(): void;
-    private updateChipStates;
-    change(e: CustomEvent<SchmancyChipChangeEvent>): Promise<void>;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    protected render(): unknown;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-chips': SchmancyChips;
-    }
-}
-export type SchmancyChipsChangeEvent = string | Array<string>;
+export * from '../form/fields/chips/chips';