@falcon/ui-core

Falcon UI core — framework-agnostic Stencil web components. Built inside the Nx workspace.

Components

| Tag | Status | |---|---| | <falcon-input> | ✅ |

Future: <falcon-button>, <falcon-dropdown>, <falcon-multi-select>, <falcon-tree>, <falcon-stepper>, <falcon-dialog>, <falcon-table>.

Build

nx build falcon-ui-core         # runs stencil build inside libs/falcon-ui-core/
nx test falcon-ui-core          # Jest spec tests
nx test-e2e falcon-ui-core      # Puppeteer e2e tests
nx lint falcon-ui-core

Architecture

• Tailwind v3 isolated in this lib's local node_modules/ (workspace itself uses Tailwind v4 — they don't collide because the Stencil PostCSS pipeline runs only here).
• Preflight off — Shadow DOM has its own root; preflight would clash.
• Tokens come from @falcon/ui-tokens at runtime via CSS custom properties cascading into Shadow DOM.

Outputs

| Output | Purpose | Consumed by | |---|---|---| | dist/falcon-ui-core/*.esm.js | Lazy-loaded ESM bundle | <script type="module"> in any HTML page | | dist/components/*.js | Tree-shakeable custom-elements bundle | Bundlers (webpack, esbuild, Vite) | | loader/index.js | defineCustomElements() helper | Angular/React/Vue apps that bootstrap once | | dist/types/*.d.ts | TypeScript declarations | All TS consumers |

Path aliases (consumers)

import { defineCustomElements } from '@falcon/ui-core/loader';
defineCustomElements(window);

Public surface (component contract)

<falcon-input> — see src/components/falcon-input/.

• Props: value, label, placeholder, helperText, errorMessage, type, size, state, disabled, readonly, required, clearable, name, inputId, autocomplete, maxlength, minlength
• Events: falcon-input, falcon-change, falcon-focus, falcon-blur, falcon-clear (all bubble + composed)
• Slots: prefix, suffix
• CSS parts: base, label, required-marker, control-wrapper, prefix, input, clear-button, suffix, helper-text, error-message
• Tokens: see @falcon/ui-tokens