// Minimal tag typings for TS consumers (global Custom Elements map). declare global { interface HTMLElementTagNameMap { // atoms 'crusher-badge': HTMLElement; 'crusher-button': HTMLElement; 'crusher-checkbox': HTMLElement; 'crusher-chip': HTMLElement; /** * crusher-currency-input — form atom for entering monetary amounts. Wraps a native text input * (`inputmode="decimal"` so mobile keyboards show the right keypad). Locale-formats on blur * (e.g., "1234.5" → "1,234.50"), shows raw numeric while focused for cleaner editing. * Attrs: value (string), currency (ISO 4217, default "USD"), locale (BCP-47, default "en-US"), * placeholder, name, required, disabled, min/max (number), step (default 0.01), invalid (boolean), * prefix-symbol (boolean, default true). * Properties: numericValue (Number | null, computed). * Events: change (on blur with valid/numericValue/value detail), input (on each keystroke). */ 'crusher-currency-input': HTMLElement; 'crusher-code-block': HTMLElement; 'crusher-icon-link': HTMLElement; 'crusher-input': HTMLElement; 'crusher-switch': HTMLElement; 'crusher-textarea': HTMLElement; 'crusher-tooltip': HTMLElement; // molecules 'crusher-alert': HTMLElement; 'crusher-banner': HTMLElement; /** * crusher-disclosure — progressive disclosure wrapper (M4). * Attrs: summary (string; overridden by summary slot), open (boolean; reflects native
open state bidirectionally). * Slots: summary (rich markup override), default (body content shown when open). * Events: crusher:disclosurechange — bubbles, composed. detail: { open: boolean }. * A11y: delegates to native
/ keyboard semantics (Enter/Space toggles). * Animation: interpolate-size height transition (Chrome 129+/Safari 18+); instant fallback elsewhere. */ 'crusher-disclosure': HTMLElement; /** crusher-card — surface container. Attrs: variant (default|data|highlight|muted), density (compact|default|comfortable), hover (boolean; opts in to hover-lift treatment). */ 'crusher-card': HTMLElement; 'crusher-card-link': HTMLElement; 'crusher-command-palette': HTMLElement; 'crusher-dropdown': HTMLElement; 'crusher-empty-state': HTMLElement; 'crusher-filter-bar': HTMLElement; 'crusher-grid': HTMLElement; 'crusher-audio-player': HTMLElement; 'crusher-menubar': HTMLElement; 'crusher-modal': HTMLElement; 'crusher-select': HTMLElement; 'crusher-skill-bar': HTMLElement; /** crusher-stack — flex layout primitive. Attrs: gap, align, justify, orientation (vertical|horizontal, default vertical), wrap (boolean, only effective when orientation=horizontal). */ 'crusher-stack': HTMLElement; /** crusher-stat — data metric tile. Attrs: label, value, meta, delta, tone, size (sm|md|lg|xl), orientation (vertical|horizontal). Slots: icon, trend (data-direction="up|down"). */ 'crusher-stat': HTMLElement; /** * crusher-connection-status — status indicator for external connections (OAuth, DB, webhook, service). * Attrs: provider (string), state ("connected"|"disconnected"|"reauth-required"|"error"|"connecting"), * since (string, optional), error-message (string, optional), compact (boolean). * Slots: cta (connect / reconnect button, link, etc. — rendered to the right of the label). * A11y: body has role="status" + aria-live="polite" + aria-label combining state + provider. * No events fire from this component; wire the CTA slot's button to your own handler. */ 'crusher-connection-status': HTMLElement; /** * crusher-avatar-menu — avatar-anchored profile dropdown for SaaS app shells. * Attrs: name (string, required for accessible label + initials fallback), * email (string, optional), avatar-url (string, optional; if set renders img, else initials), * placement ("bottom-end" default | "bottom-start" | "top-end" | "top-start"), * open (boolean, reflects state; consumer can set programmatically). * Slots: default (menu items: button/a/hr), footer (pinned bottom — typical: sign-out). * Events: toggle { open: boolean }. * A11y: trigger has aria-haspopup="menu" + aria-expanded; panel has role="menu"; * Escape closes + returns focus to trigger; outside-click + slotted-item-click also close. */ 'crusher-avatar-menu': HTMLElement; /** * crusher-plan-card — SaaS pricing-tier card. * Attrs: plan-name (string, required), price (string, required), description (string, optional), * featured (boolean — visually elevated recommended tier), current (boolean — user's active plan). * Slots: default (feature list — typical:
    of
  • ), cta (action button), badge (optional pill above plan-name). * Behavior: featured + current can coexist; current adds built-in "Current plan" badge + subtle brand-tinted background; * featured adds brand-color border + shadow + 2px translate-Y lift (respects prefers-reduced-motion). * A11y: header has role="group" + aria-label=" plan". */ 'crusher-plan-card': HTMLElement; /** * crusher-invoice-list — billing-page primitive. Displays past invoices in a table * with predefined columns (date, invoice number, amount, status badge, download link). * Composes crusher-table for pagination + sort + a11y; layers invoice-specific * formatting (locale-aware dates, currency-aware amounts, provider-agnostic status * badges covering Polar/Stripe/Paddle conventions). * Properties: invoices (Array of { id, number?, date, amount, currency?, status, * download_url?, hosted_url? }), currency (string, default "USD"), locale (string, * default "en-US"), loading (boolean), empty-message (string), amount-in-cents * (boolean — if true amounts are minor units, divided by 100 before formatting), * page-size (number, default 10; 0 disables pagination). * Slots: empty (overrides built-in empty state). * Events: invoice-download { invoice } — fires on download/view link click. */ 'crusher-invoice-list': HTMLElement; /** * crusher-payment-method-card — billing-page primitive. Displays a customer's * saved payment method (brand + last4 + expiry) with a CTA slot for manage/update * actions. Display-only; card collection happens at the billing provider (Polar/Stripe/Paddle * hosted portal). Two states: has-card (with brand-tinted icon, brand label, expiry, * optional email + Default/Expired badges) and none (empty state + CTA slot). * Attrs: brand (visa/mastercard/amex/discover/diners/jcb/unionpay/unknown), last4 (string), * exp-month (1-12), exp-year (4-digit), email (string), default (boolean — shows * "Default" badge), expired (boolean — warning tone + "Expired" badge). * Slots: cta (manage-payment-method button, typically a link to the provider's hosted portal). * A11y: role="region" with aria-label combining brand + last4. */ 'crusher-payment-method-card': HTMLElement; /** * crusher-file-upload — form primitive for file selection with drag-drop zone, * file-list preview, client-side validation (size, accept-types, multiple, count), and * standard upload-state feedback. Designed for CSV imports + bulk uploads. Compatible * with native form submission AND fetch-based uploads — manages selected-files state * + UX only; the actual upload + progress is the consumer's responsibility. * Attrs: name (default "file"), accept (MIME/extension whitelist), multiple (boolean), * max-size (bytes), max-files (count cap), disabled, hint (helper text), label * (default "Drop files here or click to browse"). * Slots: icon (drop-zone illustration), error (overrides built-in error rendering). * Events: files-change { files: File[], errors: { file, code, message }[] }, * file-remove { file: File }. * Properties: files (read-only File[]); clear() method. */ 'crusher-file-upload': HTMLElement; /** * crusher-sparkline — opinionated minimal inline trend chart (line / area / dots only; * no axes, legend, or tooltips). NOT a chart library — for those use cases use Recharts * or similar; this primitive stays minimal for "trend at a glance" dashboard cards. * Attrs: data (Array of numbers), labels (Array of strings, optional, same length as data), * width (default 200), height (default 48), tone (brand/success/warning/danger/info/neutral), * show-area, show-dots, show-first-last (dots only at endpoints), stroke-width (default 2). * A11y: rendered as with auto-derived aria-label summarizing * min/max/last/delta (consumer can override via the standard aria-label attribute). */ 'crusher-sparkline': HTMLElement; 'crusher-style-switcher': HTMLElement; 'crusher-tabs': HTMLElement; 'crusher-toast-center': HTMLElement; 'crusher-toolbar': HTMLElement; // organisms 'crusher-app-shell': HTMLElement; 'crusher-nav-list': HTMLElement; 'crusher-page-header': HTMLElement; 'crusher-section-title': HTMLElement; /** * crusher-table — sortable, paginated, server-/client-driven data table. * Properties: columns ({key,label,width?,minWidth?,maxWidth?,align?,sortable?,pin?,render?(row,ctx)=>TemplateResult}[]), * rows ({key,...}[]), sortKey (string), sortDir ("asc"|"desc"), selectable (boolean), * selectedKeys (any[]), busy (boolean), emptyText (string), * page (1-indexed), pageSize (>0 enables pagination), total (server-driven; omit for client-driven). * Events: sort {key,dir}, select {keys[]}, resize {widths}, page-change {page,pageSize,total}. * Custom cells: set column.render(row, ctx) to return a lit TemplateResult (badges, action buttons, etc.). */ 'crusher-table': HTMLElement; 'crusher-timeline-item': HTMLElement; 'crusher-timeline': HTMLElement; // forms /** * crusher-field — form-field wrapper with auto a11y wiring (M4). * Attrs: label (string), required (boolean), helper (string), error (string), * disabled (boolean), orientation ("vertical"|"horizontal", default "vertical"). * Slots: control (required), label (overrides label attr), helper (overrides helper attr), * error (overrides error attr; takes visual precedence over helper). * A11y: auto-generates stable ids; sets aria-labelledby + aria-describedby + aria-invalid * on the slotted [slot="control"] element. No consumer markup needed. * NOTE: disabled on host does NOT forward to the slotted control (different shadow trees). * The slotted control must self-disable; the wrapper only changes the label visual. */ 'crusher-field': HTMLElement; 'crusher-label': HTMLElement; 'crusher-hint': HTMLElement; 'crusher-error': HTMLElement; } } export {};