@mhmo91/schmancy 0.10.34 → 0.10.36

package/src/chips/suggestion-chip.ts

@@ -1,266 +1,2 @@
-import { SchmancyElement } from '@mixins/index'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { classMap } from 'lit/directives/class-map.js'
-import { BehaviorSubject, combineLatest } from 'rxjs'
-import { takeUntil } from 'rxjs/operators'
-
-/**
- * Suggestion chip component - provides contextual recommendations to users
- *
- * IMPORTANT: Suggestion chips do NOT have a selected state. They are designed to
- * provide suggestions and recommendations that trigger actions when clicked.
- * Unlike filter chips, they cannot be toggled on/off.
- *
- * Pure Schmancy implementation with Tailwind CSS and RxJS state management
- */
-@customElement('schmancy-suggestion-chip')
-export class SchmancySuggestionChip extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-block;
-		outline: none;
-		width: fit-content;
-		min-width: fit-content;
-	}
-
-	:host([disabled]) {
-		pointer-events: none;
-	}
-
-	.ripple {
-		position: absolute;
-		border-radius: 50%;
-		transform: scale(0);
-		animation: ripple 600ms linear;
-		background-color: rgba(0, 0, 0, 0.08);
-		pointer-events: none;
-	}
-
-	@keyframes ripple {
-		to {
-			transform: scale(4);
-			opacity: 0;
-		}
-	}
-
-	/* State layer for M3 hover/focus/pressed states */
-	.state-layer {
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		background-color: currentColor;
-		opacity: 0;
-		transition: opacity 200ms ease;
-	}
-
-	:host(:not([disabled])) button:hover .state-layer {
-		opacity: 0.08;
-	}
-
-	:host(:not([disabled])) button:focus-visible .state-layer {
-		opacity: 0.1;
-	}
-
-	:host(:not([disabled])) button:active .state-layer {
-		opacity: 0.1;
-	}
-`];
-	/** Value identifier for the chip */
-	@property({ reflect: true }) value = ''
-
-	/** Optional icon name (Material Symbols) */
-	@property({ reflect: true }) icon = ''
-
-	/** Optional href for navigation */
-	@property({ reflect: true }) href = ''
-
-	/** Target for navigation (e.g., '_blank') */
-	@property({ reflect: true }) target = ''
-
-	/** Disable the chip */
-	@property({ type: Boolean, reflect: true }) disabled = false
-
-	/** Elevated style variant - flat by default per M3 spec */
-	@property({ type: Boolean, reflect: true }) elevated = false
-
-	// RxJS state streams
-	private hover$ = new BehaviorSubject<boolean>(false)
-	private pressed$ = new BehaviorSubject<boolean>(false)
-	private focused$ = new BehaviorSubject<boolean>(false)
-
-	// UI state - only ripples needed for rendering
-	@state() private ripples: Array<{ x: number; y: number; id: number }> = []
-
-	protected static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
-
-	private nextRippleId = 0
-
-	connectedCallback() {
-		super.connectedCallback()
-
-		// Stream management for future extensions
-		// Currently, states are handled directly in event handlers
-		// This pipeline can be extended for more complex state interactions
-		combineLatest([
-			this.hover$,
-			this.pressed$,
-			this.focused$
-		]).pipe(
-			// States are managed through event handlers directly
-			// This pipeline is kept for potential future state combinations
-			takeUntil(this.disconnecting)
-		).subscribe()
-	}
-
-	private handleClick = (e: MouseEvent) => {
-		if (this.disabled) return
-
-		// Add ripple effect
-		const button = this.shadowRoot?.querySelector('button')
-		if (button) {
-			const rect = button.getBoundingClientRect()
-			const x = e.clientX - rect.left
-			const y = e.clientY - rect.top
-			const id = this.nextRippleId++
-
-			this.ripples = [...this.ripples, { x, y, id }]
-
-			// Remove ripple after animation
-			setTimeout(() => {
-				this.ripples = this.ripples.filter(r => r.id !== id)
-			}, 600)
-		}
-
-		// Navigate if href is provided
-		if (this.href) {
-			if (this.target === '_blank') {
-				window.open(this.href, '_blank')
-			} else {
-				window.location.href = this.href
-			}
-		}
-
-		// Dispatch action event
-		this.dispatchEvent(new CustomEvent('action', {
-			detail: { value: this.value },
-			bubbles: true,
-			composed: true
-		}))
-	}
-
-	private handleKeyDown = (e: KeyboardEvent) => {
-		if (this.disabled) return
-
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault()
-			this.pressed$.next(true)
-
-			// Simulate click
-			const clickEvent = new MouseEvent('click', {
-				bubbles: true,
-				cancelable: true,
-				clientX: 0,
-				clientY: 0
-			})
-			this.handleClick(clickEvent)
-
-			setTimeout(() => this.pressed$.next(false), 100)
-		}
-	}
-
-	private handleFocus = () => {
-		this.focused$.next(true)
-	}
-
-	private handleBlur = () => {
-		this.focused$.next(false)
-	}
-
-	protected render(): unknown {
-		const hasIcon = !!this.icon;
-
-		const classes = {
-			'relative': true,
-			'inline-flex': true,
-			'items-center': true,
-			'gap-2': true,
-			'h-8': true, // M3: 32px height
-			'min-h-[32px]': true,
-			'rounded-full': true,
-			'cursor-pointer': !this.disabled,
-			'transition-all': true,
-			'duration-200': true,
-			'select-none': true,
-			'overflow-hidden': true,
-
-			// M3 Padding: 8px with icon, 16px without (leading), 16px trailing
-			'pl-2': hasIcon, // 8px with icon
-			'pl-4': !hasIcon, // 16px without icon
-			'pr-4': true, // 16px trailing
-
-			// M3 Colors for suggestion chips
-			'bg-surface-containerLow': true,
-			'text-surface-onVariant': true,
-
-			// Suggestion chips are flat by default (no elevation per M3)
-
-			// Focus state
-			'focus-visible:outline': !this.disabled,
-			'focus-visible:outline-2': !this.disabled,
-			'focus-visible:outline-primary': !this.disabled,
-			'focus-visible:outline-offset-2': !this.disabled,
-
-			// Disabled
-			'opacity-38': this.disabled, // M3 disabled opacity
-			'cursor-not-allowed': this.disabled
-		}
-
-		return html`
-			<button
-				type="button"
-				class=${classMap(classes)}
-				?disabled=${this.disabled}
-				@click=${this.handleClick}
-				@keydown=${this.handleKeyDown}
-				@mouseenter=${() => this.hover$.next(true)}
-				@mouseleave=${() => this.hover$.next(false)}
-				@mousedown=${() => this.pressed$.next(true)}
-				@mouseup=${() => this.pressed$.next(false)}
-				@focus=${this.handleFocus}
-				@blur=${this.handleBlur}
-				tabindex=${this.disabled ? '-1' : '0'}
-				role="button"
-				aria-disabled=${this.disabled}
-				aria-label=${this.value}
-			>
-				${this.icon ? html`
-					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
-				` : ''}
-				<span class="text-sm font-medium leading-5">
-					<slot></slot>
-				</span>
-
-				<!-- Ripple effects -->
-				${this.ripples.map(ripple => html`
-					<span
-						class="ripple"
-						style="left: ${ripple.x}px; top: ${ripple.y}px;"
-					></span>
-				`)}
-
-				<!-- State layer for M3 hover/focus/pressed states -->
-				<div class="state-layer"></div>
-			</button>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-suggestion-chip': SchmancySuggestionChip
-	}
-}
-
-export type SuggestionChipActionEvent = { value: string }
+// Moved to src/form/fields/chips/ — this is a backward-compat re-export shim.
+export * from '../form/fields/chips/suggestion-chip';

package/src/directives/fill.ts

@@ -1,7 +1,7 @@
 import { AsyncDirective, directive } from 'lit/async-directive.js'
 import { ElementPart, PartType } from 'lit/directive.js'
 import { EMPTY, Subject, animationFrameScheduler, combineLatest, fromEvent, merge, timer } from 'rxjs'
-import { auditTime, filter, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'
+import { auditTime, distinctUntilChanged, filter, map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'
 import { theme } from '../theme/theme.service'
 import { fromResizeObserver } from './layout'
 
@@ -50,6 +50,15 @@ class Fill extends AsyncDirective {
 					: EMPTY,
 				fromEvent(window, 'orientationchange'),
 				fromEvent(document, 'focusout', { passive: true }).pipe(switchMap(() => timer(100))),
+				// Observe `el` itself: this is the post-layout settle trigger
+				// (its initial callback fires once `rect.top/left` resolve) and
+				// the only DOM trigger for a top-level fill element whose
+				// `el.parentElement` is null. It is loop-safe ONLY because of
+				// the `distinctUntilChanged` gate below: write → RO fires →
+				// recompute → identical value → gate suppresses → no write →
+				// RO quiet (converges in ≤2 frames). The ~20s overlay hang was
+				// the *missing gate*, not the observation — without it every
+				// write re-fired the observer forever.
 				fromResizeObserver(el),
 				el.parentElement ? fromResizeObserver(el.parentElement) : EMPTY,
 			).pipe(auditTime(0, animationFrameScheduler), startWith(null)),
@@ -61,14 +70,28 @@ class Fill extends AsyncDirective {
 					const vv = window.visualViewport
 					return vv ? Math.abs(vv.scale - 1) <= 0.01 : true
 				}),
-				tap(([, bottomOffset, isFullscreen]) => {
+				map(([, bottomOffset, isFullscreen]) => {
 					const vv = window.visualViewport
 					const rect = el.getBoundingClientRect()
+					return {
+						height: `${Math.max(0, (vv?.height ?? window.innerHeight) - rect.top)}px`,
+						width: `${Math.max(0, (vv?.width ?? window.innerWidth) - rect.left)}px`,
+						paddingBottom: `${isFullscreen ? 0 : bottomOffset}px`,
+					}
+				}),
+				// Idempotent gate: once geometry is stable the computed values
+				// stop changing, so no DOM write happens and no resize is
+				// emitted — the parent observer (and any ancestor's, e.g. the
+				// overlay's) goes quiet instead of ping-ponging.
+				distinctUntilChanged(
+					(a, b) => a.height === b.height && a.width === b.width && a.paddingBottom === b.paddingBottom,
+				),
+				tap(({ height, width, paddingBottom }) => {
 					const s = el.style
 					s.boxSizing = 'border-box'
-					s.height = `${Math.max(0, (vv?.height ?? window.innerHeight) - rect.top)}px`
-					s.width = `${Math.max(0, (vv?.width ?? window.innerWidth) - rect.left)}px`
-					s.paddingBottom = `${isFullscreen ? 0 : bottomOffset}px`
+					s.height = height
+					s.width = width
+					s.paddingBottom = paddingBottom
 					s.minHeight = '0'
 					s.minWidth = '0'
 					s.overflow = 'hidden'

package/src/fab/fab.test.ts

@@ -0,0 +1,101 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './fab'
+import '../icons/icon'
+import { expectNoA11yViolations } from '../test-utils/a11y'
+import type { SchmancyFab } from './fab'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+const base = (fab: SchmancyFab) =>
+	fab.shadowRoot!.querySelector('[part="base"]') as HTMLButtonElement
+
+describe('schmancy-fab — M3 contract', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	it('renders a non-disablable native button (M3: a FAB is never disabled)', async () => {
+		host.innerHTML = `<schmancy-fab aria-label="Compose"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		const btn = base(fab)
+		expect(btn.tagName).toBe('BUTTON')
+		expect(btn.getAttribute('type')).toBe('button')
+		expect('disabled' in fab).toBe(false)
+	})
+
+	it('defaults to surface / medium: surface-containerHigh container, primary on-colour, 16dp shape', async () => {
+		host.innerHTML = `<schmancy-fab aria-label="Compose"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(fab.variant).toBe('surface')
+		expect(fab.size).toBe('medium')
+		expect(fab.extended).toBe(false)
+		const cls = base(fab).classList
+		expect(cls.contains('bg-surface-containerHigh')).toBe(true)
+		expect(cls.contains('text-primary-default')).toBe(true)
+		expect(cls.contains('size-14')).toBe(true)
+		expect(getComputedStyle(fab).borderTopLeftRadius).toBe('16px')
+	})
+
+	it.each([
+		['primary', 'bg-primary-container', 'text-primary-onContainer'],
+		['secondary', 'bg-secondary-container', 'text-secondary-onContainer'],
+		['tertiary', 'bg-tertiary-container', 'text-tertiary-onContainer'],
+	] as const)('maps the %s variant to its M3 container + on-container colour pair', async (variant, bg, fg) => {
+		host.innerHTML = `<schmancy-fab variant="${variant}" aria-label="x"><schmancy-icon>add</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		const cls = base(fab).classList
+		expect(cls.contains(bg)).toBe(true)
+		expect(cls.contains(fg)).toBe(true)
+	})
+
+	it('applies the M3 size geometry: small 12dp/40, large 28dp/36 icon', async () => {
+		host.innerHTML = `<schmancy-fab size="small" aria-label="x"><schmancy-icon>add</schmancy-icon></schmancy-fab>`
+		let fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(base(fab).classList.contains('size-10')).toBe(true)
+		expect(getComputedStyle(fab).borderTopLeftRadius).toBe('12px')
+
+		host.innerHTML = `<schmancy-fab size="large" aria-label="x"><schmancy-icon>add</schmancy-icon></schmancy-fab>`
+		fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(base(fab).classList.contains('size-24')).toBe(true)
+		expect(getComputedStyle(fab).borderTopLeftRadius).toBe('28px')
+	})
+
+	it('derives the extended form from a non-empty label and renders the label', async () => {
+		host.innerHTML = `<schmancy-fab label="Compose" variant="primary"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(fab.extended).toBe(true)
+		expect(fab.hasAttribute('extended')).toBe(true)
+		const btn = base(fab)
+		expect(btn.classList.contains('size-14')).toBe(false)
+		expect(btn.classList.contains('ps-4')).toBe(true)
+		expect(btn.classList.contains('pe-5')).toBe(true)
+		expect(btn.textContent).toContain('Compose')
+	})
+
+	it('reflects lowered and hides the icon slot from AT when a name is present', async () => {
+		host.innerHTML = `<schmancy-fab lowered label="New"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		const fab = host.querySelector('schmancy-fab') as SchmancyFab
+		await nextUpdate()
+		expect(fab.hasAttribute('lowered')).toBe(true)
+		expect(fab.shadowRoot!.querySelector('slot')!.getAttribute('aria-hidden')).toBe('true')
+	})
+
+	it('has no a11y violations as an icon-only FAB with an accessible name', async () => {
+		host.innerHTML = `<schmancy-fab aria-label="Compose message"><schmancy-icon>edit</schmancy-icon></schmancy-fab>`
+		await nextUpdate()
+		await expectNoA11yViolations(host)
+	})
+})

package/src/fab/fab.ts

@@ -0,0 +1,226 @@
+import { SchmancyElement } from '@mixins/index'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { when } from 'lit/directives/when.js'
+import { magnetic } from '../directives/magnetic'
+
+export type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary'
+export type FabSize = 'small' | 'medium' | 'large'
+
+/**
+ * Material 3 Floating Action Button.
+ *
+ * Mirrors the `md-fab` reference implementation
+ * (github.com/material-components/material-web) and the M3 spec
+ * (m3.material.io/components/floating-action-button): four colour
+ * variants, three container sizes, an extended form (set `label`),
+ * and a `lowered` elevation register. Per M3 guidance a FAB is never
+ * disabled, so there is no `disabled` property.
+ *
+ * Sizing, shape, icon size and elevation are M3 design tokens expressed
+ * as `:host` rules (the same token-driven model as `md-fab`'s SCSS);
+ * colour roles and the state layer are schmancy theme utilities. The
+ * host shrink-wraps the inner button and clips its rounded shape.
+ *
+ * @element schmancy-fab
+ * @slot - The icon (typically `<schmancy-icon>`).
+ * @csspart base - The underlying native `<button>`.
+ */
+@customElement('schmancy-fab')
+export class SchmancyFab extends SchmancyElement {
+	static styles = [
+		css`
+			:host {
+				/* M3 FAB (medium) — 16dp shape, 24dp icon, resting level 3 */
+				display: inline-flex;
+				position: relative;
+				touch-action: manipulation;
+				overflow: hidden;
+				border-radius: 16px;
+				--_icon: 24px;
+				--_elevation: var(--schmancy-sys-elevation-3);
+				--_elevation-hover: var(--schmancy-sys-elevation-4);
+				box-shadow: var(--_elevation);
+				transition:
+					box-shadow 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
+			/* M3 small FAB — 12dp shape */
+			:host([size='small']) {
+				border-radius: 12px;
+			}
+			/* M3 large FAB — 28dp shape, 36dp icon */
+			:host([size='large']) {
+				border-radius: 28px;
+				--_icon: 36px;
+			}
+			/* Extended FAB always uses the 16dp shape / 24dp icon */
+			:host([extended]) {
+				border-radius: 16px;
+				--_icon: 24px;
+			}
+			/* M3 lowered register — resting level 1, hover level 2 */
+			:host([lowered]) {
+				--_elevation: var(--schmancy-sys-elevation-1);
+				--_elevation-hover: var(--schmancy-sys-elevation-2);
+			}
+			:host(:hover) {
+				box-shadow: var(--_elevation-hover);
+			}
+			:host(:active) {
+				/* M3 pressed elevation == resting; schmancy spring press */
+				box-shadow: var(--_elevation);
+				transform: scale(0.96);
+				transition-duration: 100ms;
+			}
+			::slotted(*) {
+				font-size: var(--_icon);
+				width: var(--_icon);
+				height: var(--_icon);
+			}
+			:host([extended]) ::slotted(*) {
+				margin-inline-end: 12px;
+			}
+			@media (prefers-reduced-motion: reduce) {
+				:host {
+					transition: none;
+				}
+				:host(:active) {
+					transform: none;
+				}
+			}
+			:host *,
+			* {
+				touch-action: manipulation;
+			}
+		`,
+	]
+
+	protected static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		mode: 'open',
+		delegatesFocus: true,
+	}
+
+	@query('[part="base"]', true)
+	private nativeElement!: HTMLElement
+
+	private ariaLabelValue!: string
+
+	/**
+	 * Colour variant. M3 maps each to a container + on-container role.
+	 * @attr
+	 * @default 'surface'
+	 */
+	@property({ reflect: true, type: String })
+	public variant: FabVariant = 'surface'
+
+	/**
+	 * Container size. Ignored while extended (extended is always 56dp tall).
+	 * @attr
+	 * @default 'medium'
+	 */
+	@property({ reflect: true, type: String })
+	public size: FabSize = 'medium'
+
+	/**
+	 * Extended-FAB label. A non-empty value switches the FAB to its
+	 * extended form (icon + text), exactly as `md-fab` derives extended
+	 * from a truthy label.
+	 * @attr
+	 */
+	@property({ type: String })
+	public label = ''
+
+	/**
+	 * Reflected mirror of "label is non-empty" so `:host([extended])`
+	 * can drive the extended geometry. Synced from `label`; read it,
+	 * don't set it.
+	 * @attr
+	 */
+	@property({ type: Boolean, reflect: true })
+	public extended = false
+
+	/**
+	 * Lowers the FAB's elevation register (M3 lowered FAB).
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	public lowered = false
+
+	public override set ariaLabel(value: string) {
+		const oldVal = this.ariaLabelValue
+		this.ariaLabelValue = value
+		if (this.hasAttribute('aria-label')) {
+			this.removeAttribute('aria-label')
+		}
+		this.requestUpdate('ariaLabel', oldVal)
+	}
+
+	@property({ attribute: 'aria-label' })
+	public override get ariaLabel() {
+		return this.ariaLabelValue
+	}
+
+	/** Sets focus on the FAB. */
+	public override focus(options?: FocusOptions) {
+		this.nativeElement.focus(options)
+	}
+
+	/** Removes focus from the FAB. */
+	public override blur() {
+		this.nativeElement.blur()
+	}
+
+	protected willUpdate(changed: Map<string, unknown>) {
+		if (changed.has('label')) this.extended = this.label.length > 0
+	}
+
+	render() {
+		const classes = {
+			'relative z-0 flex items-center justify-center overflow-hidden border-0 cursor-pointer outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 outline-secondary-default':
+				true,
+			// M3 container — fixed square per size, content-width when extended
+			'size-10': !this.extended && this.size === 'small',
+			'size-14': !this.extended && this.size === 'medium',
+			'size-24': !this.extended && this.size === 'large',
+			'h-14 ps-4 pe-5 gap-3 text-sm font-medium leading-5': this.extended,
+			// M3 container + on-container colour roles per variant
+			'bg-surface-containerHigh text-primary-default': this.variant === 'surface',
+			'bg-primary-container text-primary-onContainer': this.variant === 'primary',
+			'bg-secondary-container text-secondary-onContainer': this.variant === 'secondary',
+			'bg-tertiary-container text-tertiary-onContainer': this.variant === 'tertiary',
+		}
+
+		const stateLayerClasses = {
+			'absolute inset-0 z-0 opacity-0 transition-opacity duration-150 hover:opacity-8 focus-visible:opacity-10 active:opacity-10':
+				true,
+			'bg-primary-default': this.variant === 'surface',
+			'bg-primary-onContainer': this.variant === 'primary',
+			'bg-secondary-onContainer': this.variant === 'secondary',
+			'bg-tertiary-onContainer': this.variant === 'tertiary',
+		}
+
+		return html`
+			<button
+				${magnetic({ strength: 3, radius: 60 })}
+				part="base"
+				type="button"
+				aria-label=${ifDefined(this.ariaLabel)}
+				class="${this.classMap(classes)}"
+			>
+				<div class="${this.classMap(stateLayerClasses)}"></div>
+				<slot aria-hidden=${ifDefined(this.ariaLabel || this.label ? 'true' : undefined)}></slot>
+				${when(this.extended, () => html`<span class="relative z-0">${this.label}</span>`)}
+			</button>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-fab': SchmancyFab
+	}
+}

package/src/fab/index.ts

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