@mhmo91/schmancy 0.10.35 → 0.10.37

package/src/steps/schmancy-step.ts

@@ -1,17 +1,16 @@
 import { consume } from '@lit/context'
+import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property, queryAssignedNodes, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
-import { Subscription } from 'rxjs'
-import { stepsContext, StepsController } from './steps.context'
-import { SchmancyElement } from '@mixins/index'
+import { takeUntil } from 'rxjs/operators'
+import { StepsController, stepsContext } from './steps.context'
 
 @customElement('schmancy-step')
 export class SchmancyStep extends SchmancyElement {
 	static styles = [css`
 	:host {
-		display: grid;
-		/* Base display is just grid, flex properties will be applied dynamically */
+		display: block;
 		transition: all 0.2s ease-in-out;
 	}
 `]
@@ -23,18 +22,11 @@ export class SchmancyStep extends SchmancyElement {
 	 */
 	@property({ type: Number }) position = 1
 
-	@property({ type: String }) title = ''
+	@property({ type: String }) label = ''
 	@property({ type: String }) description = ''
 
-	// NEW: Allow a step to be explicitly marked as complete.
 	@property({ type: Boolean, reflect: true }) completed = false
 
-	/**
-	 * NEW: Lock API to disable users from going back.
-	 * When set to true, clicking on a previous (completed) step is ignored.
-	 */
-	@property({ type: Boolean }) lockBack = false
-
 	/**
 	 * Consume the shared StepsController from context.
 	 */
@@ -47,80 +39,71 @@ export class SchmancyStep extends SchmancyElement {
 	@state()
 	private currentStep = 1
 
-	/**
-	 * Keep a reference to our subscription so we can unsubscribe cleanly.
-	 */
-	private subscription?: Subscription
+	@state()
+	private hasContent = false
+
+	@queryAssignedNodes({ flatten: true })
+	private assignedNodes!: Node[]
 
 	connectedCallback() {
 		super.connectedCallback()
+		this.steps.currentStep$
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe(step => {
+				this.currentStep = step
+				this.updateFlexProperties()
+			})
 	}
 
 	firstUpdated() {
-		// Subscribe to updates from the container's StepsController.
-		// Context is guaranteed to be available after first render
-		this.subscription = this.steps.currentStep$.subscribe(step => {
-			this.currentStep = step
-			// When the current step changes, update the flex properties
-			this.updateFlexProperties()
-		})
-		// Initial update of flex properties
 		this.updateFlexProperties()
 	}
 
-	disconnectedCallback(): void {
-		this.subscription?.unsubscribe()
-		super.disconnectedCallback()
+	private onSlotChange() {
+		this.hasContent = this.assignedNodes.some(
+			n => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''),
+		)
+		this.updateFlexProperties()
 	}
 
-	/**
-	 * Update the host element's flex properties based on active state
-	 */
 	private updateFlexProperties() {
 		const isActive = this.position === this.currentStep
-
-		if (isActive) {
-			// Apply flex-grow when active
-			this.style.flex = '1 1 auto'
-		} else {
-			// Make it shrink when not active
-			this.style.flex = '0 0 auto'
-		}
+		this.style.flex = isActive && this.hasContent ? '1 1 auto' : '0 0 auto'
 	}
 
-	/**
-	 * Compute visual status for styling purposes. Note that if a step is explicitly
-	 * marked as completed, it always appears as complete even if it's active.
-	 */
 	get status(): 'complete' | 'current' | 'upcoming' {
 		if (this.completed || this.position < this.currentStep) return 'complete'
 		if (this.position === this.currentStep) return 'current'
 		return 'upcoming'
 	}
 
-	/**
-	 * Click handler to allow navigation between completed (or active) steps.
-	 * With lockBack enabled, clicking on a previous step is ignored.
-	 */
-	private _onStepClick(_e: Event) {
-		// If lockBack is enabled and the user attempts to go back, do nothing.
-		if (this.lockBack && this.position < this.currentStep) {
-			return
-		}
+	private onStepClick() {
+		if (this.steps.lockBack && this.position < this.currentStep) return
 		if (this.status !== 'upcoming') {
 			this.steps.setStep(this.position)
 		}
 	}
 
+	private onStepKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			this.onStepClick()
+		}
+	}
+
 	render() {
-		// Determine if the step is currently active.
 		const isActive = this.position === this.currentStep
-
-		// Use computed status for visual styling.
 		const isComplete = this.status === 'complete'
 		const isUpcoming = this.status === 'upcoming'
+		const navigable = !isUpcoming && !(this.steps.lockBack && this.position < this.currentStep)
 
-		// Enhanced styling classes with better visual hierarchy
+		if (this.hasContent) {
+			return this.renderContentRow(isActive, isComplete, isUpcoming, navigable)
+		}
+		return this.renderRailRow(isActive, isComplete, isUpcoming, navigable)
+	}
+
+	private renderContentRow(isActive: boolean, isComplete: boolean, isUpcoming: boolean, navigable: boolean) {
 		const connectorClasses = {
 			'bg-tertiary-default': isComplete,
 			'bg-outlineVariant': !isComplete,
@@ -139,22 +122,19 @@ export class SchmancyStep extends SchmancyElement {
 			'text-surface-onVariant': isUpcoming,
 		}
 
-		// If the step is clickable (active or complete), add a pointer cursor.
-		const clickableClass = isActive || isComplete ? 'cursor-pointer' : ''
+		const clickableClass = navigable ? 'cursor-pointer' : ''
 
 		return html`
 			<li class="relative">
-				<!-- Connector line - responsive positioning -->
 				<div
 					class="absolute top-8 left-3 sm:left-4 -ml-px w-0.5 transition-colors duration-200 ${this.classMap(connectorClasses)}"
 					style="height: calc(100% + var(--steps-gap, 0px))"
 					aria-hidden="true"
 				></div>
 
-				<!-- Step Button/Label - adjusted padding for mobile -->
 				<button
 					type="button"
-					@click=${this._onStepClick}
+					@click=${this.onStepClick}
 					class="relative flex items-center group transition-all duration-200 hover:scale-[1.02] ${clickableClass} ${isActive ? 'bg-primary-container/20 -mx-1 sm:-mx-2 px-1 sm:px-2 py-2 sm:py-3 rounded-lg' : 'py-1 sm:py-2'}"
 				>
 					<span class="flex items-center h-10 sm:h-12">
@@ -181,7 +161,7 @@ export class SchmancyStep extends SchmancyElement {
 
 					<span class="flex flex-col items-start justify-center min-w-0 ml-3 sm:ml-6">
 						<schmancy-typography type="title" token="md">
-							<span class="transition-colors duration-200 ${this.classMap(textClasses)}">${this.title}</span>
+							<span class="transition-colors duration-200 ${this.classMap(textClasses)}">${this.label}</span>
 						</schmancy-typography>
 						${when(
 							this.description,
@@ -194,18 +174,64 @@ export class SchmancyStep extends SchmancyElement {
 					</span>
 				</button>
 
-				<!-- Render step content if the step is active - responsive spacing -->
 				${when(
 					isActive,
 					() => html`
 						<div class="ml-6 sm:ml-10 mt-3 sm:mt-4 pb-6 sm:pb-8 transition-all duration-300 ease-out">
-						<slot></slot>
+							<slot @slotchange=${this.onSlotChange}></slot>
 						</div>
 					`,
 				)}
+				${when(!isActive, () => html`<slot @slotchange=${this.onSlotChange} style="display:none"></slot>`)}
 			</li>
 		`
 	}
+
+	private renderRailRow(isActive: boolean, isComplete: boolean, _isUpcoming: boolean, navigable: boolean) {
+		const isLast = !this.nextElementSibling?.matches('schmancy-step')
+		const labelClass = isActive
+			? 'text-primary-default'
+			: isComplete
+				? 'text-surface-on'
+				: 'text-surface-on-variant'
+
+		const dotClass = [
+			'relative z-10 w-3 h-3 rounded-full shrink-0 transition-colors duration-300',
+			isComplete || isActive ? 'bg-primary-default' : 'bg-outline',
+			isActive ? 'ring-2 ring-offset-2 ring-offset-surface-containerLow ring-primary-default' : '',
+		].join(' ')
+
+		return html`
+			<div
+				class="relative flex items-center gap-4 rounded-lg -mx-2 px-2 py-3 transition-colors duration-200 ${
+					navigable
+						? 'cursor-pointer hover:bg-primary-default/8 focus-visible:ring-2 focus-visible:ring-primary-default'
+						: ''
+				}"
+				role=${navigable ? 'button' : 'presentation'}
+				tabindex=${navigable ? '0' : '-1'}
+				aria-current=${isActive ? 'step' : 'false'}
+				aria-label=${navigable ? `Go back to ${this.label}` : this.label}
+				@click=${this.onStepClick}
+				@keydown=${this.onStepKeydown}
+			>
+				${when(
+					!isLast,
+					() => html`
+						<div
+							class="absolute left-3.5 top-1/2 w-px h-full transition-colors duration-300 ${
+								isComplete ? 'bg-primary-default' : 'bg-outline'
+							}"
+							aria-hidden="true"
+						></div>
+					`,
+				)}
+				<div class=${dotClass} aria-hidden="true"></div>
+				<schmancy-typography type="label" token="lg" class=${labelClass}>${this.label}</schmancy-typography>
+			</div>
+			<slot @slotchange=${this.onSlotChange} style="display:none"></slot>
+		`
+	}
 }
 
 declare global {

package/src/steps/{schmancy-steps-container.ts → schmancy-steps.ts}

@@ -12,12 +12,11 @@ import { StepsController, stepsContext } from './steps.context'
  */
 export type SchmancyStepsChangeEvent = CustomEvent<{ value: number }>
 
-@customElement('schmancy-steps-container')
-export class SchmancyStepsContainer extends SchmancyElement {
+@customElement('schmancy-steps')
+export class SchmancySteps extends SchmancyElement {
 	static styles = [css`
 	:host {
 		display: block;
-		overflow: auto;
 	}
 `]
 
@@ -27,23 +26,27 @@ export class SchmancyStepsContainer extends SchmancyElement {
 	stepsController = this.controller
 
 	@property({ type: Number, reflect: true })
-	set currentStep(value: number) {
+	set value(v: number) {
 		const oldValue = this.controller.currentStep
-		if (oldValue !== value) {
-			this.controller.setStep(value)
+		if (oldValue !== v) {
+			this.controller.setStep(v)
 		}
 	}
 
-	get currentStep(): number {
+	get value(): number {
 		return this.controller.currentStep
 	}
 
 	/**
-	 * Gap between steps. Maps to Tailwind gap classes.
-	 * @default 4
+	 * Block back-navigation for the whole stepper.
 	 */
-	@property({ type: Number, reflect: true })
-	gap: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 = 4
+	@property({ type: Boolean, reflect: true })
+	set lockBack(v: boolean) {
+		this.controller.lockBack = v
+	}
+	get lockBack(): boolean {
+		return this.controller.lockBack
+	}
 
 	connectedCallback() {
 		super.connectedCallback()
@@ -54,8 +57,6 @@ export class SchmancyStepsContainer extends SchmancyElement {
 				distinctUntilChanged(),
 				tap(step => {
 					this.requestUpdate()
-					// Use dispatchScopedEvent with bubbles: false to prevent collision
-					// with 'change' events bubbling up from inputs inside steps
 					this.dispatchScopedEvent('change', { value: step }, { bubbles: false })
 				}),
 				takeUntil(this.disconnecting),
@@ -64,39 +65,18 @@ export class SchmancyStepsContainer extends SchmancyElement {
 	}
 
 	/**
-	 * Handle change events - stop propagation of bubbled events from children.
-	 * This prevents form inputs inside steps from triggering the parent's @change handler.
+	 * Handle change events — stop propagation of bubbled events from children.
 	 */
 	private handleChange = (e: Event) => {
-		// Only stop propagation if the event is NOT from this component
-		// (i.e., it's bubbling up from a child element like an input)
 		if (e.target !== this) {
 			e.stopPropagation()
 		}
 	}
 
 	render() {
-		const gapClass = `gap-${this.gap}`
-		const gapRem =
-			{
-				0: '0',
-				1: '0.25rem',
-				2: '0.5rem',
-				3: '0.75rem',
-				4: '1rem',
-				5: '1.25rem',
-				6: '1.5rem',
-				8: '2rem',
-				10: '2.5rem',
-				12: '3rem',
-				16: '4rem',
-				20: '5rem',
-				24: '6rem',
-			}[this.gap] || '1rem'
-
 		return html`
-			<nav class="flex h-full w-full" aria-label="Progress" @change=${this.handleChange}>
-				<ol class="flex flex-col flex-1 ${gapClass}" role="list" style="--steps-gap: ${gapRem}">
+			<nav aria-label="Progress" @change=${this.handleChange}>
+				<ol role="list" style="display:contents">
 					<slot></slot>
 				</ol>
 			</nav>
@@ -106,6 +86,6 @@ export class SchmancyStepsContainer extends SchmancyElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'schmancy-steps-container': SchmancyStepsContainer
+		'schmancy-steps': SchmancySteps
 	}
 }

package/src/steps/steps.context.ts

@@ -2,18 +2,19 @@ import { createContext } from '@lit/context'
 import { BehaviorSubject } from 'rxjs'
 
 export class StepsController {
-	private _currentStep = new BehaviorSubject(1)
+	private stepSubject = new BehaviorSubject(1)
+	lockBack = false
 
 	get currentStep$() {
-		return this._currentStep.asObservable()
+		return this.stepSubject.asObservable()
 	}
 
 	get currentStep() {
-		return this._currentStep.value
+		return this.stepSubject.value
 	}
 
 	setStep(step: number) {
-		this._currentStep.next(step)
+		this.stepSubject.next(step)
 	}
 }
 

package/src/steps/steps.test.ts

@@ -0,0 +1,120 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './schmancy-step'
+import type { SchmancyStep } from './schmancy-step'
+import './schmancy-steps'
+import type { SchmancySteps } from './schmancy-steps'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+describe('schmancy-steps', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	it('emits change with numeric value when value property is set', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="First"></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		container.value = 2
+		await nextUpdate()
+		expect(changes).toContain(2)
+	})
+
+	it('clicking a complete step navigates to it', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="First" completed></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		container.value = 2
+		await nextUpdate()
+		const step1 = host.querySelector('schmancy-step') as SchmancyStep
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		// Fire click on the interactive element inside the shadow root
+		const inner = step1.shadowRoot?.querySelector('[role="button"]') as HTMLElement
+		inner?.click()
+		await nextUpdate()
+		expect(changes).toContain(1)
+	})
+
+	it('upcoming step click is inert', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="First"></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		container.value = 1
+		await nextUpdate()
+		const steps = host.querySelectorAll('schmancy-step') as NodeListOf<SchmancyStep>
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		steps[1].click()
+		await nextUpdate()
+		expect(changes).toHaveLength(0)
+	})
+
+	it('container lockBack blocks back-navigation', async () => {
+		host.innerHTML = `
+			<schmancy-steps lockback>
+				<schmancy-step position="1" label="First" completed></schmancy-step>
+				<schmancy-step position="2" label="Second"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const container = host.querySelector('schmancy-steps') as SchmancySteps
+		container.value = 2
+		await nextUpdate()
+		const changes: number[] = []
+		container.addEventListener('change', (e: Event) => {
+			changes.push((e as CustomEvent<{ value: number }>).detail.value)
+		})
+		const step1 = host.querySelector('schmancy-step') as SchmancyStep
+		step1.click()
+		await nextUpdate()
+		expect(changes).toHaveLength(0)
+	})
+
+	it('step with no slotted content renders rail row (no content mode)', async () => {
+		host.innerHTML = `
+			<schmancy-steps>
+				<schmancy-step position="1" label="Rail Step"></schmancy-step>
+			</schmancy-steps>
+		`
+		await nextUpdate()
+		const step = host.querySelector('schmancy-step') as SchmancyStep
+		await nextUpdate()
+		// Rail mode: no slot content means hasContent is false — shadow DOM renders rail row
+		// The step's shadow root should not contain the content-mode card button
+		const shadowRoot = step.shadowRoot
+		expect(shadowRoot).toBeTruthy()
+		// Content mode renders a <li>, rail mode renders a <div>
+		expect(shadowRoot?.querySelector('li')).toBeNull()
+	})
+})

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';