{ "schemaVersion": "2.0.0", "name": "Nucleus CSS", "package": "@navitallabs/nucleus-css", "version": "2.0.0", "prefix": "n-", "description": "A polished, accessible, zero-build CSS framework.", "repository": "https://github.com/daksh-bathla/nucleus", "license": "MIT", "imports": { "full": "@navitallabs/nucleus-css", "minified": "@navitallabs/nucleus-css/min", "reset": "@navitallabs/nucleus-css/reset", "utilities": "@navitallabs/nucleus-css/utilities", "components": "@navitallabs/nucleus-css/components", "themes": "@navitallabs/nucleus-css/themes" }, "cdn": "https://cdn.jsdelivr.net/npm/@navitallabs/nucleus-css@2.0.0/dist/nucleus.min.css", "breakpoints": [ { "name": "sm", "min": "576px" }, { "name": "md", "min": "768px" }, { "name": "lg", "min": "992px" }, { "name": "xl", "min": "1200px" }, { "name": "xxl", "min": "1600px" } ], "themes": [ "ocean", "forest", "rose", "amber", "mono" ], "densities": [ "compact", "spacious" ], "darkMode": { "automatic": "@media (prefers-color-scheme: dark)", "manual": "n-dark-mode" }, "architecture": { "model": "component-first hybrid", "layers": [ "reset", "tokens", "base", "layout", "components", "utilities", "states", "themes" ], "zeroRuntimeJavaScript": true }, "stateConvention": { "priority": [ "native-or-aria", "data-attribute", "n-is-* class" ], "canonicalClasses": [ "n-is-active", "n-is-selected", "n-is-expanded", "n-is-open", "n-is-loading", "n-is-disabled", "n-is-dragging" ], "legacySelectors": [ { "selector": ".active", "deprecated": true, "replacement": "Use the component's semantic ARIA attribute or an n-is-* state class.", "scope": [ "n-nav-link", "n-tab", "n-segmented-item", "n-combobox-option" ] } ] }, "spacingScale": { "strategy": "stable-v2", "tailwindCompatible": false, "values": { "0": "0", "1": "0.25rem", "2": "0.5rem", "3": "1rem", "4": "1.5rem", "5": "3rem" }, "migration": "Numeric values remain unchanged in v2; any remapping is reserved for a future major release." }, "counts": { "classes": 697, "tokens": 76, "components": 60, "deprecatedClasses": 7 }, "tokens": [ { "name": "--n-primary", "value": "#0f766e", "category": "color" }, { "name": "--n-primary-h", "value": "#0b5f59", "category": "color" }, { "name": "--n-secondary", "value": "#147d74", "category": "color" }, { "name": "--n-secondary-h", "value": "#0f665f", "category": "color" }, { "name": "--n-success", "value": "#15803d", "category": "color" }, { "name": "--n-success-h", "value": "#166534", "category": "color" }, { "name": "--n-danger", "value": "#dc2626", "category": "color" }, { "name": "--n-danger-h", "value": "#b91c1c", "category": "color" }, { "name": "--n-warning", "value": "#f59e0b", "category": "color" }, { "name": "--n-warning-h", "value": "#d97706", "category": "color" }, { "name": "--n-info", "value": "#0e7490", "category": "color" }, { "name": "--n-info-h", "value": "#155e75", "category": "color" }, { "name": "--n-light", "value": "#f1f5f9", "category": "color" }, { "name": "--n-dark", "value": "#1e293b", "category": "color" }, { "name": "--n-text", "value": "#1e293b", "category": "color" }, { "name": "--n-text-muted", "value": "#64748b", "category": "typography" }, { "name": "--n-bg", "value": "#ffffff", "category": "color" }, { "name": "--n-bg-muted", "value": "#f8fafc", "category": "color" }, { "name": "--n-border-color", "value": "#e2e8f0", "category": "color" }, { "name": "--n-surface", "value": "#ffffff", "category": "color" }, { "name": "--n-surface-raised", "value": "#ffffff", "category": "color" }, { "name": "--n-surface-sunken", "value": "#f1f5f9", "category": "color" }, { "name": "--n-overlay", "value": "rgba(15, 23, 42, 0.58)", "category": "color" }, { "name": "--n-focus", "value": "rgba(15, 118, 110, 0.24)", "category": "color" }, { "name": "--n-primary-soft", "value": "rgba(15, 118, 110, 0.12)", "category": "color" }, { "name": "--n-primary-border", "value": "rgba(15, 118, 110, 0.32)", "category": "color" }, { "name": "--n-primary-ink", "value": "#0b5f59", "category": "color" }, { "name": "--n-secondary-soft", "value": "rgba(20, 125, 116, 0.12)", "category": "color" }, { "name": "--n-visited", "value": "#0f766e", "category": "color" }, { "name": "--n-on-primary", "value": "#ffffff", "category": "color" }, { "name": "--n-on-secondary", "value": "#ffffff", "category": "color" }, { "name": "--n-on-success", "value": "#ffffff", "category": "color" }, { "name": "--n-on-danger", "value": "#ffffff", "category": "color" }, { "name": "--n-on-warning", "value": "#111827", "category": "color" }, { "name": "--n-on-info", "value": "#ffffff", "category": "color" }, { "name": "--n-space-0", "value": "0", "category": "spacing", "scaleValue": "0" }, { "name": "--n-space-1", "value": "0.25rem", "category": "spacing", "scaleValue": "0.25rem" }, { "name": "--n-space-2", "value": "0.5rem", "category": "spacing", "scaleValue": "0.5rem" }, { "name": "--n-space-3", "value": "1rem", "category": "spacing", "scaleValue": "1rem" }, { "name": "--n-space-4", "value": "1.5rem", "category": "spacing", "scaleValue": "1.5rem" }, { "name": "--n-space-5", "value": "3rem", "category": "spacing", "scaleValue": "3rem" }, { "name": "--n-gutter", "value": "16px", "category": "layout" }, { "name": "--n-container-sm", "value": "540px", "category": "layout" }, { "name": "--n-container-md", "value": "720px", "category": "layout" }, { "name": "--n-container-lg", "value": "960px", "category": "layout" }, { "name": "--n-container-xl", "value": "1200px", "category": "layout" }, { "name": "--n-container-xxl", "value": "1600px", "category": "layout" }, { "name": "--n-font-sans", "value": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", "category": "color" }, { "name": "--n-font-mono", "value": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace", "category": "color" }, { "name": "--n-text-xs", "value": "0.75rem", "category": "typography" }, { "name": "--n-text-sm", "value": "0.875rem", "category": "typography" }, { "name": "--n-text-base", "value": "1rem", "category": "typography" }, { "name": "--n-text-lg", "value": "1.125rem", "category": "typography" }, { "name": "--n-text-xl", "value": "1.25rem", "category": "typography" }, { "name": "--n-text-2xl", "value": "1.5rem", "category": "typography" }, { "name": "--n-text-3xl", "value": "1.875rem", "category": "typography" }, { "name": "--n-text-4xl", "value": "2.25rem", "category": "typography" }, { "name": "--n-radius-sm", "value": "0.25rem", "category": "radius" }, { "name": "--n-radius", "value": "0.5rem", "category": "radius" }, { "name": "--n-radius-lg", "value": "0.75rem", "category": "radius" }, { "name": "--n-radius-xl", "value": "1rem", "category": "radius" }, { "name": "--n-radius-full", "value": "9999px", "category": "radius" }, { "name": "--n-shadow-sm", "value": "0 1px 2px rgba(0,0,0,.06)", "category": "shadow" }, { "name": "--n-shadow", "value": "0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06)", "category": "shadow" }, { "name": "--n-shadow-md", "value": "0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06)", "category": "shadow" }, { "name": "--n-shadow-lg", "value": "0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05)", "category": "shadow" }, { "name": "--n-shadow-xl", "value": "0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.04)", "category": "shadow" }, { "name": "--n-shadow-soft", "value": "0 10px 30px rgba(15, 23, 42, 0.08)", "category": "shadow" }, { "name": "--n-shadow-glow", "value": "0 0 0 1px rgba(15, 118, 110, 0.16), 0 16px 48px rgba(15, 118, 110, 0.16)", "category": "shadow" }, { "name": "--n-ease", "value": "cubic-bezier(.4,0,.2,1)", "category": "motion" }, { "name": "--n-duration", "value": "150ms", "category": "motion" }, { "name": "--n-duration-slow", "value": "240ms", "category": "motion" }, { "name": "--n-control-height", "value": "2.5rem", "category": "component" }, { "name": "--n-control-padding-x", "value": "0.875rem", "category": "component" }, { "name": "--n-component-gap", "value": "var(--n-space-3)", "category": "component" }, { "name": "--n-section-space", "value": "clamp(3rem, 7vw, 6rem)", "category": "component" } ], "components": [ { "name": "n-container", "title": "Container", "category": "component", "description": "Centered, max-width page container with responsive breakpoints.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-container-fluid" ], "states": [], "responsive": true, "accessibility": null, "notes": "Use n-container-fluid for a full-width container with gutters but no max-width.", "example": "
\n \n
" }, { "name": "n-row", "title": "Grid row", "category": "component", "description": "12-column CSS grid row. Pair with n-col-* children.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-col-1", "n-col-6", "n-col-12", "n-col-md-6", "n-col-lg-4" ], "states": [], "responsive": true, "accessibility": null, "notes": "Column classes exist for spans 1–12 at base, sm, md, lg, and xl breakpoints (e.g. n-col-md-6).", "example": "
\n
Left
\n
Right
\n
" }, { "name": "n-auto-grid", "title": "Auto grid", "category": "component", "description": "Responsive grid that fits as many columns as space allows.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-grid-auto-fit", "n-grid-auto-fill" ], "states": [], "responsive": false, "accessibility": null, "notes": "Set the minimum column width with the --n-grid-min custom property.", "example": "
\n
One
\n
Two
\n
Three
\n
" }, { "name": "n-sidebar-layout", "title": "Sidebar layout", "category": "component", "description": "Two-column layout that collapses to a single column on narrow screens.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-sidebar-right" ], "states": [], "responsive": true, "accessibility": null, "notes": "Add n-sidebar-right to place the sidebar after the main content.", "example": "
\n \n
Content
\n
" }, { "name": "n-cluster", "title": "Cluster", "category": "component", "description": "Flex row of items that wrap, with consistent gaps.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n New\n Stable\n
" }, { "name": "n-split", "title": "Split", "category": "component", "description": "Pushes two groups to opposite ends of a row.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n Title\n \n
" }, { "name": "n-stack", "title": "Stack", "category": "component", "description": "Vertical grid stack with a consistent gap between children.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n

First

\n

Second

\n
" }, { "name": "n-btn", "title": "Button", "category": "component", "description": "Base button. Combine with a color variant and optional size.", "element": "button", "requires": [], "variants": [ "n-btn-primary", "n-btn-secondary", "n-btn-success", "n-btn-danger", "n-btn-warning", "n-btn-info", "n-btn-dark", "n-btn-light", "n-btn-outline-primary", "n-btn-outline-secondary", "n-btn-outline-success", "n-btn-outline-danger", "n-btn-outline-warning", "n-btn-outline-info", "n-btn-outline-dark", "n-btn-outline-light", "n-btn-ghost" ], "sizes": [ "n-btn-sm", "n-btn-lg" ], "parts": [ "n-button-group" ], "states": [ "hover", "active", "focus-visible", "disabled" ], "responsive": false, "accessibility": "Use a native \n\n" }, { "name": "n-button-group", "title": "Button group", "category": "component", "description": "Joins adjacent buttons into a single segmented control.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n \n \n \n
" }, { "name": "n-card", "title": "Card", "category": "component", "description": "Surface container with optional header, body, and footer regions.", "element": null, "requires": [], "variants": [ "n-card-interactive", "n-card-elevated" ], "sizes": [], "parts": [ "n-card-header", "n-card-body", "n-card-footer", "n-card-img" ], "states": [], "responsive": false, "accessibility": null, "notes": "Add n-card-interactive for a hover lift, or n-card-elevated for a stronger shadow.", "example": "
\n
Plan
\n
\n

Everything you need to start.

\n
\n
\n \n
\n
" }, { "name": "n-input", "title": "Text input", "category": "component", "description": "Full-width text field. Pair with n-label inside an n-form-group.", "element": "input", "requires": [], "variants": [ "n-input-success", "n-input-error" ], "sizes": [ "n-input-sm", "n-input-lg" ], "parts": [ "n-form-group", "n-label", "n-helper-text", "n-error-text" ], "states": [ "focus", "disabled", "aria-invalid" ], "responsive": false, "accessibility": "Every control needs an associated " }, { "name": "n-breadcrumb", "title": "Breadcrumb", "category": "component", "description": "Ordered trail of ancestor links.", "element": "ol", "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "" }, { "name": "n-pagination", "title": "Pagination", "category": "component", "description": "List of page links; mark the current page with aria-current.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-pagination-link" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "" }, { "name": "n-tabs", "title": "Tabs", "category": "component", "description": "Horizontal tablist. Toggle aria-selected in JavaScript.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-tab", "n-tab-panel" ], "states": [ "aria-selected", "hover" ], "responsive": false, "accessibility": "Requires JS to move aria-selected and manage focus per the WAI-ARIA tabs pattern.", "notes": null, "example": "
\n \n \n
\n
…
" }, { "name": "n-alert", "title": "Alert", "category": "component", "description": "Colored message banner for contextual feedback.", "element": null, "requires": [], "variants": [ "n-alert-primary", "n-alert-secondary", "n-alert-success", "n-alert-danger", "n-alert-warning", "n-alert-info", "n-alert-light", "n-alert-dark" ], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": "Add role=\"alert\" for errors and role=\"status\" for non-urgent messages.", "notes": null, "example": "
\n Your changes have been saved.\n
" }, { "name": "n-badge", "title": "Badge", "category": "component", "description": "Small pill for counts, labels, or status.", "element": null, "requires": [], "variants": [ "n-badge-primary", "n-badge-secondary", "n-badge-success", "n-badge-danger", "n-badge-warning", "n-badge-info", "n-badge-light", "n-badge-dark", "n-badge-soft" ], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "Beta" }, { "name": "n-callout", "title": "Callout", "category": "component", "description": "Boxed aside for tips and warnings.", "element": null, "requires": [], "variants": [ "n-callout-primary", "n-callout-success", "n-callout-danger" ], "sizes": [], "parts": [ "n-callout-title" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n

Heads up

\n

Container queries need a modern browser.

\n
" }, { "name": "n-toast", "title": "Toast", "category": "component", "description": "Transient notification; stack with n-toast-stack.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-toast-stack" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n
Saved to your library.
\n
" }, { "name": "n-progress", "title": "Progress bar", "category": "component", "description": "Native element styling.", "element": "progress", "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "70%" }, { "name": "n-spinner", "title": "Spinner", "category": "component", "description": "Indeterminate loading indicator.", "element": null, "requires": [], "variants": [], "sizes": [ "n-spinner-sm", "n-spinner-lg" ], "parts": [], "states": [], "responsive": false, "accessibility": "Respects prefers-reduced-motion. Provide an aria-label since it has no text.", "notes": null, "example": "" }, { "name": "n-skeleton", "title": "Skeleton", "category": "component", "description": "Shimmering placeholder for loading content.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-skeleton-text", "n-skeleton-circle" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
" }, { "name": "n-dialog", "title": "Dialog", "category": "component", "description": "Native modal. Open with dialog.showModal() in JavaScript.", "element": "dialog", "requires": [], "variants": [], "sizes": [], "parts": [ "n-dialog-header", "n-dialog-body", "n-dialog-footer" ], "states": [], "responsive": false, "accessibility": "Open with element.showModal() (not the open attribute) so focus trapping, Esc-to-close, and the backdrop work. A method=\"dialog\" form closes it.", "notes": null, "example": "\n
Confirm
\n
Delete this item?
\n
\n \n \n
\n" }, { "name": "n-drawer", "title": "Drawer", "category": "component", "description": "Edge-anchored panel.", "element": "dialog", "requires": [], "variants": [ "n-drawer-left" ], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": "Combine with n-dialog; add n-drawer-left to anchor on the left edge.", "example": "\n
Side panel
\n" }, { "name": "n-accordion", "title": "Accordion", "category": "component", "description": "Disclosure group built on native
/.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-accordion-panel" ], "states": [], "responsive": false, "accessibility": "Native
handles keyboard and expanded state with no JavaScript.", "notes": null, "example": "
\n
\n What is Nucleus?\n
A zero-build CSS framework.
\n
\n
" }, { "name": "n-dropdown", "title": "Dropdown menu", "category": "component", "description": "Menu surface of n-dropdown-item rows. Best inside a popover.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-dropdown-item", "n-popover" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n \n \n
" }, { "name": "n-tooltip", "title": "Tooltip", "category": "component", "description": "CSS-only tooltip driven by the data-tooltip attribute.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [ "hover", "focus-visible" ], "responsive": false, "accessibility": "For essential text also expose it to assistive tech (e.g. aria-label).", "notes": null, "example": "" }, { "name": "n-table", "title": "Table", "category": "component", "description": "Base table styling with striped/hover/bordered variants.", "element": "table", "requires": [], "variants": [ "n-table-striped", "n-table-hover", "n-table-bordered" ], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "\n \n \n
NameRole
AdaEngineer
" }, { "name": "n-list-group", "title": "List group", "category": "component", "description": "Bordered vertical list of rows.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-list-group-item" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
    \n
  • Inbox12
    • \n
  • Drafts3
    • \n
" }, { "name": "n-stat", "title": "Stat", "category": "component", "description": "Labeled metric with a large value and optional change indicator.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-stat-label", "n-stat-value", "n-stat-change" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n Revenue\n $48.2k\n +12%\n
" }, { "name": "n-avatar", "title": "Avatar", "category": "component", "description": "Circular image or initials.", "element": null, "requires": [], "variants": [], "sizes": [ "n-avatar-sm", "n-avatar-lg" ], "parts": [ "n-avatar-group" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "AB\n\"Ada\"" }, { "name": "n-chip", "title": "Chip", "category": "component", "description": "Compact token, optionally removable.", "element": null, "requires": [], "variants": [ "n-chip-removable" ], "sizes": [], "parts": [ "n-chip-remove" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "\n Design\n \n" }, { "name": "n-empty-state", "title": "Empty state", "category": "component", "description": "Centered placeholder for empty views.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-empty-state-icon" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n
📭
\n

No messages

\n

You're all caught up.

\n
" }, { "name": "n-prose", "title": "Prose", "category": "component", "description": "Readable typographic defaults for long-form article HTML.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
\n

Getting started

\n

Nucleus styles your semantic HTML automatically inside a prose block.

\n
  • One
  • Two
\n
" }, { "name": "n-code-block", "title": "Code block", "category": "component", "description": "Dark, scrollable preformatted code panel.", "element": "pre", "requires": [], "variants": [], "sizes": [], "parts": [ "n-code", "n-kbd" ], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
npm install @navitallabs/nucleus-css
\n

Press ⌘ K to search.

" }, { "name": "n-blockquote", "title": "Blockquote", "category": "component", "description": "Quotation with an accent border.", "element": "blockquote", "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
Design is how it works.
" }, { "name": "n-surface", "title": "Surface", "category": "component", "description": "Elevated panel with border, radius, and soft shadow.", "element": null, "requires": [], "variants": [ "n-surface-glass", "n-surface-raised", "n-surface-sunken", "n-surface-overlay" ], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": null, "example": "
Panel content
" }, { "name": "n-icon-tile", "title": "Icon tile", "category": "component", "description": "Rounded container for a single icon, color-tinted to context.", "element": null, "requires": [], "variants": [ "n-icon-tile-round", "n-icon-tile-primary", "n-icon-tile-success", "n-icon-tile-danger", "n-icon-tile-warning", "n-icon-tile-info", "n-icon-tile-neutral" ], "sizes": [ "n-icon-tile-sm", "n-icon-tile-lg" ], "parts": [], "states": [], "responsive": false, "accessibility": "Decorative by default — add aria-hidden. If the tile is the only label, give it an aria-label.", "notes": "Origin: seen throughout LeadScrapper Pro and Itiner (stat cards, nav, headers).", "example": "✓" }, { "name": "n-status", "title": "Status indicator", "category": "component", "description": "Small dot plus label signalling live, lifecycle, or health state.", "element": null, "requires": [], "variants": [ "n-status-online", "n-status-idle", "n-status-offline", "n-status-error", "n-status-busy", "n-status-pulse" ], "sizes": [], "parts": [ "n-status-dot" ], "states": [], "responsive": false, "accessibility": "State is carried by the visible text, not colour alone. The pulse respects prefers-reduced-motion.", "notes": "Origin: LeadScrapper Pro (\"System connected\") and Itiner (trip lifecycle).", "example": "\n \n System connected\n" }, { "name": "n-meter", "title": "Meter", "category": "component", "description": "Labeled usage bar whose fill colour flips at a threshold. Set --n-meter-value.", "element": null, "requires": [], "variants": [ "n-meter-success", "n-meter-warning", "n-meter-danger" ], "sizes": [ "n-meter-sm", "n-meter-lg" ], "parts": [ "n-meter-header", "n-meter-label", "n-meter-value", "n-meter-track", "n-meter-fill" ], "states": [], "responsive": false, "accessibility": "For an interactive value add role=\"progressbar\" with aria-valuenow/min/max; expose the threshold state in text.", "notes": "Origin: LeadScrapper Pro quota/usage bars.", "example": "
\n
\n Searches\n 82 / 100\n
\n
\n
\n
\n
" }, { "name": "n-gauge", "title": "Gauge", "category": "component", "description": "Radial score ring driven by the --n-gauge-value custom property (0–100).", "element": null, "requires": [], "variants": [ "n-gauge-success", "n-gauge-warning", "n-gauge-danger" ], "sizes": [ "n-gauge-sm", "n-gauge-lg" ], "parts": [ "n-gauge-value", "n-gauge-label" ], "states": [], "responsive": false, "accessibility": "Give the gauge role=\"img\" (or role=\"meter\") and an aria-label with the numeric value.", "notes": "Origin: LeadScrapper Pro lead/audit scores.", "example": "
\n 74\n
" }, { "name": "n-segmented", "title": "Segmented control", "category": "component", "description": "Single-select pill group for filtering or switching views.", "element": null, "requires": [], "variants": [], "sizes": [ "n-segmented-sm" ], "parts": [ "n-segmented-item" ], "states": [ "aria-selected", "hover", "focus-visible" ], "responsive": false, "accessibility": "Mark the active segment with aria-selected (tablist) or aria-pressed (toggle group); it is not signalled by colour alone.", "notes": "Origin: LeadScrapper Pro lead filters and Itiner trip-status pills.", "example": "
\n \n \n \n
" }, { "name": "n-stat-grid", "title": "Stat grid", "category": "component", "description": "Responsive auto-fit wrapper for n-stat or metric tiles.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": null, "notes": "Origin: dashboard metric rows in both products. Compose with n-icon-tile for an icon.", "example": "
\n
\n Leads found\n 1,284\n
\n
\n Active scans\n 7\n
\n
" }, { "name": "n-banner", "title": "Promo banner", "category": "component", "description": "Wide, high-emphasis marketing/upgrade panel with an optional dark surface.", "element": null, "requires": [], "variants": [ "n-banner-split", "n-banner-dark" ], "sizes": [], "parts": [ "n-banner-eyebrow", "n-banner-title", "n-banner-text", "n-banner-actions", "n-banner-media" ], "states": [], "responsive": false, "accessibility": null, "notes": "Origin: LeadScrapper Pro upgrade banner. Add n-banner-split for a side-by-side layout at ≥768px.", "example": "
\n
\n

Premium

\n

Unlock market insights

\n

Daily AI deep-dives into every lead you discover.

\n
\n
\n \n
\n
" }, { "name": "n-dock", "title": "Action dock", "category": "component", "description": "Bottom-centered floating bar of actions; the page scrolls behind it.", "element": null, "requires": [], "variants": [ "n-dock-bar-dark" ], "sizes": [], "parts": [ "n-dock-bar", "n-dock-item", "n-dock-divider" ], "states": [], "responsive": false, "accessibility": "Keep discernible names on icon-only items (aria-label). The dock does not trap focus.", "notes": "Origin: Itiner client-portal floating bar.", "example": "
\n
\n \n \n \n
\n
" }, { "name": "n-cookie-bar", "title": "Consent bar", "category": "component", "description": "Persistent bottom notice bar with an actions cluster (e.g. cookie consent).", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-cookie-bar-text", "n-cookie-bar-actions" ], "states": [], "responsive": true, "accessibility": "Use role=\"dialog\" with a label; make Decline as prominent as Accept; do not trap the whole page.", "notes": "Origin: Itiner and LeadScrapper Pro cookie banners.", "example": "
\n

We use cookies to improve the product.

\n
\n \n \n
\n
" }, { "name": "n-combobox", "title": "Combobox", "category": "component", "description": "Typeahead input paired with a results list. Wrap an n-input and a list.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-combobox-list", "n-combobox-option", "n-combobox-empty" ], "states": [ "aria-selected", "hover" ], "responsive": false, "accessibility": "Follow the ARIA combobox pattern (aria-expanded, aria-controls, aria-activedescendant); Enter selects the active option instead of submitting.", "notes": "Origin: Itiner place autocomplete and LeadScrapper Pro niche picker. Requires JS for filtering + keyboard nav.", "example": "
\n \n
    \n
    • \n
    • \n
\n
" }, { "name": "n-timeline", "title": "Timeline", "category": "component", "description": "Vertical connector list with a numbered or icon marker per item.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-timeline-item", "n-timeline-marker", "n-timeline-marker-muted", "n-timeline-title", "n-timeline-meta", "n-timeline-content" ], "states": [], "responsive": false, "accessibility": null, "notes": "Origin: Itiner itinerary day timeline. Reusable for feeds, tracking, and steppers.", "example": "
    \n
  1. \n 1\n

    Arrive in Lisbon

    \n

    Day 1 · Hotel check-in

    \n
    2. \n
  2. \n 2\n

    Free day

    \n
    3. \n
" }, { "name": "n-plan", "title": "Pricing plan", "category": "component", "description": "Pricing tier card with price, feature list, and a featured/inverted state.", "element": null, "requires": [], "variants": [ "n-plan-featured", "n-plan-inverted" ], "sizes": [], "parts": [ "n-plan-grid", "n-plan-ribbon", "n-plan-name", "n-plan-price", "n-plan-period", "n-plan-desc", "n-plan-features", "n-plan-feature" ], "states": [], "responsive": false, "accessibility": null, "notes": "Origin: pricing pages of both products. Use n-plan-inverted for a solid-brand featured tier.", "example": "
\n
\n Popular\n

Pro

\n

$49/mo

\n
    \n
  • 500 audits / month
    • \n
  • CSV export
    • \n
\n \n
\n
" }, { "name": "n-checklist", "title": "Checklist", "category": "component", "description": "Onboarding task list; mark finished rows with n-checklist-done.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-checklist-item", "n-checklist-marker", "n-checklist-done" ], "states": [], "responsive": false, "accessibility": "Do not rely on colour alone for completion — pair the state with an icon or text.", "notes": "Origin: Itiner onboarding checklist.", "example": "
    \n
  • \n ✓\n Create your first trip\n
    • \n
  • \n ○\n Invite a team member\n
    • \n
" }, { "name": "n-table-stack", "title": "Responsive table", "category": "component", "description": "Table modifier that collapses each row into a card below 768px using data-label.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [], "states": [], "responsive": false, "accessibility": "Give every a data-label matching its column header so the stacked card keeps label→value pairing.", "notes": "Origin: LeadScrapper Pro recent-discoveries table. Combine with n-table.", "example": "\n \n \n \n \n \n \n \n
BusinessStatus
Blue BottleEnriched
" }, { "name": "n-search-field", "title": "Search field", "category": "component", "description": "Input wrapper with a built-in leading search glyph.", "element": null, "requires": [], "variants": [], "sizes": [], "parts": [ "n-search-input" ], "states": [], "responsive": false, "accessibility": "Give the input an associated