Omnis UI Design System
Atomic design system for Blazor WebAssembly and Blazor Server. 108 components across 4 tiers, 10 palette files, services, models, utilities, CSS assets, and JavaScript helpers. All styling is driven by CSS custom properties.
Design Tokens
Surfaces & Ink
tokens--bg
Page background
--surface
Elevated surface
--card
Card / tile bg
--sidebar
Sidebar bg
--border
Default border
--border-strong
Strong border
--text
Primary text
--muted
Secondary text
--dim
Disabled / placeholder
Brand, Accent, Nav
tokens--accent
Primary accent
--accent-hover
Accent hover
--accent-bg
Accent bg (translucent)
--nav
Navigation accent
--nav-hover
Nav hover
--on-sidebar
Sidebar fg
--on-sidebar-active
Sidebar active fg
--focus-ring
Focus ring color
--selection-bg
Selection highlight
Spacing Scale
tokens--space-00px
--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px
Typography Scale
tokens--text-2xl (28px) — The quick brown fox
Display / page titles
--text-xl (22px) — The quick brown fox jumps
Section headers
--text-lg (16px) — The quick brown fox jumps over the lazy dog
Large body / lead text
--text-base (14px) — The quick brown fox jumps over the lazy dog
Body text (default)
--text-sm (12px) — The quick brown fox jumps over the lazy dog
Small body / labels
--text-xs (11px) — Overline / label caps
Micro-copy / labels
--text-2xs (10px) — Fine print overline
Smallest label
Control Sizes & Radii
tokens--size-control-sm
24px
--size-control-md
32px
--size-control-lg
40px
--radius-sm
2px
--radius-md
4px
--radius-lg
8px
--radius-full
9999px
Focus, Motion & Interaction
tokensFocus
--focus-ring--focus-ring-color--focus-ring-width--focus-ring-offset--focus-ring-shadow
Interaction
--disabled-opacity--hover-transition-duration
Motion
--motion-duration-fast--motion-duration-normal--motion-duration-slow--motion-easing-linear--motion-easing-ease--motion-easing-ease-out
Overlays, Shadows & Layers
tokensShadows
--shadow-soft--shadow-panel--shadow-overlay
Overlay
--overlay-backdrop--nav-overlay-backdrop--nav-overlay-card--nav-overlay-text--nav-overlay-muted
Layers
--z-overlay--z-drawer--z-modal--z-popover--z-menu--z-tooltip
Browser Chrome
--scrollbar-thumb--selection-bg
State Palette
Chip States
5 states Pending
Active
Completed
Blocked
Terminal
Alert Tones
4 tonesInfo: This is an informational message using accent tokens.
Success: Operation completed successfully.
Warning: Please review before proceeding.
Error: Something went wrong. Please try again.
Public API
Non-visual exports shipped with the Razor components.
Registration, Services & Utilities
C# exportsService Registration
AddOmnisSharedUIAddOmnisThemingServiceCollectionExtensionsOmnisThemeServiceExtensions
Services
OmnisThemeServiceToastService
Utilities
OmnisUi.SpaceOmnisUi.KebabOmnisUi.FlagFromIsoCodeOmnisUi.JurisdictionKindLabelOmnisUi.MixNumbersSortHelpers.ToggleSortEntry
Enums
23 enumsVariants & Tones
BadgeVariantButtonVariantButtonSizeChipStateIconButtonToneAlertTone
Input & Layout
InputSizeSelectSizeDensityDataColumnAlignmentSkeletonShapeDrawerPlacementDrawerSizePageCanvasWidthMapControlAction
State
SortDirStatusStateValidationStateOmnisMode
Chat
AgentStatusChatConversationStatusChatFileStatusChatMessageRoleChatMessageStatus
Records & Models
42 recordsGeneral UI
SelectOptionActiveFilterChipRadioOptionMenuItemBreadcrumbItemTabItemDataColumn<TItem>PaginationStateAccordionSectionAvatarItemToastMessageNavSectionNavItemTreeNodeFieldContext
Chat / Search
ChatMessageChatConversationChatAgentQuickPromptAgentActivityItemChatFileItemChatFileActionContextLinkContextSearchResultContextSearchGroup
Domain Chips
JurisdictionBadgeModelPartyChipModelPartyKindReferencePartyJurisdictionReferenceLocationChipModelLocationTypeReferenceRoleChipModelUserChipModel
Behavior & Theme
FilterControlIconToggleOptionEditResultSortEntry<TKey>PalettePreviewPaletteDescriptor
Map
GeoPointGeoBoundsMapViewportStateMapMarkerMapProviderLink
Static Assets
wwwroottokens.cssspacing, type, radii, focus, motion, z-index
reset.cssframework reset, defaults, mono utility, icon press behavior
components.cssshared component interactions and keyframes
palettes/aubergine-violet.cssaubergine violet palette, light and dark
palettes/black-royal-blue.cssblack royal blue palette, light and dark
palettes/black-silver.cssblack silver palette, light and dark
palettes/black-white.cssblack white palette, light and dark
palettes/cape-botanic.csscape botanic palette, light and dark
palettes/charcoal-gold.cssdefault fallback palette, light and dark
palettes/forest-ochre.cssforest ochre palette, light and dark
palettes/french-country.cssfrench country palette, light and dark
palettes/midnight-azure.cssmidnight azure palette, light and dark
palettes/navy-gold.cssnavy/gold palette, light and dark
palettes/raj-indienne.cssraj indienne palette, light and dark
palettes/royal-gold.cssroyal gold palette, light and dark
palettes/royal-silver.cssroyal silver palette, light and dark
palettes/rustic-ridge.cssrustic ridge palette, light and dark
palettes/steel-blue-slate.csssteel/slate palette, light and dark
components/topbar.cssoptional host top bar layout classes
components/sidebar.cssoptional host sidebar layout classes
components/chat.cssmessage role backgrounds, file upload/download styles, and attachment tray
components/kanban.cssoptional host kanban layout classes
js/omnis-theme-init.jsfirst-paint theme init and theme interop API
js/omnis-ui.jsfocus restore, focus trap, menus, and TreeView keyboard helpers
palettes/_contract.mdpalette role variable contract
tools/omnis-ui-checks/packaged client verification scripts (static scanners, Playwright tests, test fixtures)
Atoms
The smallest building blocks — single-purpose, stateless visual primitives.
Button
sizes + variantsIconButton
4 tonesInput & Form Controls
7 controlsCheckbox & ToggleSwitch
2 controlsIconToggle
atom
Exclusive two-or-more-state switch for icon-identified modes such as grid/list views.
Card
containerCard content —
--card backgroundCard with
--shadow-softCard with
--shadow-panelBadge
4 tones Info
Success
Warning
Error
Chip & Specialized Chips
5 states + 5 domain chipsGeneric Chip with 5 states, plus domain-specific: PartyChip, LocationChip, RoleChip, UserChip, JurisdictionBadge
Pending
Active
Completed
Blocked
Terminal
● PartyChip
⌂ LocationChip
♦ RoleChip
👤 UserChip
⚖ JurisdictionBadge
DownloadButton
atom
Anchor when
Href is set, button when host handles download via callback. Supports download, rel="noopener noreferrer", disabled, busy, size text, Class, and Style. Avatar & AvatarGroup
2 componentsJM
AB
CD
+ AvatarGroup:
A
B
C
+2
ProgressBar & ProcessProgress
2 components
6/10
10/10
✓ Step 1
→
● Step 2
→
Step 3
Spinner
3 sizes
Small
Medium
Large
Skeleton
3 shapesCluster & Stack
layout atomsCluster (horizontal wrapping layout):
Item 1
Item 2
Item 3
Item 4
Stack (vertical layout):
Stack item 1
Stack item 2
Stack item 3
Typography & Text Atoms
7 componentsScreenTitle:
Page Screen Title
Eyebrow:
EYEBROW LABEL
Tagline:
A brief supporting tagline beneath a title.
MixedNumberText:Ref. 2024-ABC-12345
Num:1,234,567
OmnisLink:Navigate to related item →
LabelValueRow:
Status
Active
TextButton
atomEmptyState
atom💭
No items found
Try adjusting your search or filter criteria to find what you are looking for.
Tooltip
atom
Hover for tooltip
This is a tooltip
Footer
atomChat Atoms
Chat-specific visual primitives for message roles, agent status, timestamps, and quick prompts.
AgentStatusBadge
6 statuses Idle
Thinking
Working
Waiting
Error
Offline
Agent status badge with color + text. Accepts AgentStatus: Idle, Thinking, Working, Waiting, Error, Offline.
ChatAvatar
5 rolesU
User
A
Assistant
S
System
T
Tool
G
Agent
MessageRoleBadge
5 roles + status User
Assistant
Assistant …
Tool (error)
Role label with optional streaming/error/pending suffix. Use MessageRoleBadge with ChatMessageRole and optional ChatMessageStatus.
MessageTimestamp
atom
4/30/2026 2:15 PM
Formatted timestamp display. Pass pre-formatted text via the Timestamp parameter.
QuickPromptButton
atom
Single clickable quick prompt. Use QuickPromptButton with QuickPrompt model and OnClick callback.
Molecules
Composite components built from atoms — they add behavior, state, or layout patterns.
Alert
4 tonesInfo: The system will undergo maintenance on Saturday at 2 AM UTC.
Success: Your changes have been saved successfully.
Warning: This action will affect 42 linked records.
Error: Unable to save. The server returned a 500 error.
ModalDialog
compact footerDrawer
size + sticky footerSearchField
molecule
🔍
Field System
Field + FormLayout
Must match your government-issued ID.
Please enter a valid email address.
Please fix the following errors:
- Email is required
- Phone number format is invalid
FormSection & FormActions
2 componentsPersonal Information
Your basic contact details.
MenuButton & Popover
2 components
Popover
Floating content panel with contextual information.
Pagination
moleculeAccordion
moleculeList & ListItem
2 componentsRadioGroup
moleculeSortIndicator & SortableColumnHeader
tri-state + order
Name
1
Date
2
Status
Tri-state cycle: ascending, descending, none. Active multi-column sorts display one-based order numbers. FilterBar
compact molecule
17 items
EditableText
molecule
Editable content
ToastHost
molecule
✓
Changes saved
Your settings have been updated.
ThemePickerSection
molecule
Mode
Palette
ErrorRegion
molecule⚠
Something went wrong
We could not load this data. Check your connection and try again.
Chat Molecules
Focused chat workflows: prompt entry, message rendering, history items, agent chips, and activity indicators.
PromptInput
moleculeFileDropZone
molecule
Drop files here or
Drop files here or
Accessible upload area with native file input, browse button, drag-over state (highlighted). The shared library never uploads or reads files — it calls OnFilesSelected and OnFilesDropped with file names. ChatFileItemView
molecule
document.pdf
2.3 MB
Uploaded
image.png
1.1 MB
45%
broken.doc
0 KB
Upload failed
ChatFileItem model. ChatFileList
molecule
report.pdf
3.5 MB
Uploaded
archive.zip
10 MB
Downloadable
ChatFileItemView items. Accepts Files, Label, EmptyText, and Actions slot. Shows empty text when no files. PromptAttachmentTray
molecule
2.3 MB
1.1 MB
Compact horizontal attachment strip with file name chips and remove buttons. Suitable for placement near PromptInput. Uses ChatFileItem model and emits OnRemoveFile with the file id. QuickPromptBar
moleculeChatMessageItem
5 roles + status
User
You
9:41 AM
Can you review the ACME merger agreement for potential risks?
Assistant …
LegalBot
9:41 AM
Reviewing the agreement. This may take a moment...
Tool (error)
DocParser
9:40 AM
Error
TypingIndicator
3 states
Assistant is typing
Accessible pending/streaming indicator with animated dots. Use ChatMessageStatus.Pending, Streaming, or Error. ConversationHistoryItem
selected + unselectedACME Merger Review
Review of the ACME merger agreement...
2:15 PM
Active
3
Beta Acquisition
Due diligence checklist for Beta...
Yesterday
Pinned
AgentActivityItemView
molecule
DocParser
Parsing document clauses
Section 4.1 through 4.12
One visible agent activity row with AgentStatusBadge, label, detail text, and timestamp.
Working
9:41 AM
SubAgentChip
selected + unselected
Selectable agent command with status badge. Uses ChatAgent model with OnClick and Selected state.
Organisms
Complex, self-contained UI sections built from molecules and atoms — often the top-level pieces of a page.
Breadcrumbs
organismTabs
organismTab panel content for "Overview".
NavList
organismSidebar
organism
Collapsed (56px)
Topbar
organismPageHeader
organismACME Merger Agreement
Active
Created Jan 15, 2026
Toolbar
compact organismDataTable<TItem>
organism| ID | Name 1 | Status | Date 2 | Actions |
|---|---|---|---|---|
| 001 | ACME Merger | Active | Jan 15, 2026 | |
| 002 | Beta Acquisition | Completed | Dec 3, 2025 | |
| 003 | Gamma Review | Pending | Feb 28, 2026 | |
| 004 | Delta Litigation | Blocked | Mar 10, 2026 |
StatusRegion
4 statesDefault content renders unchanged inside the status region.
Loading
Fetching data from the server...
⚠
Error
Failed to load data. The server returned a 500 error.
💭
No results found.
TreeView + TreeViewNode
2 components▼ Root
▼ Documents
Document A.pdf
Document B.pdf
▶ Reports
Workflow
Step-driven workflow components: pip indicators, linear stepper, navigation row, and combined header organism.
StepPip
atom · workflow.css
Pending
2
Active
Complete
Error
5
Disabled
WorkflowStepper
organism · workflow.css
Horizontal — step 2 active, step 4 disabled
Vertical — step 1 active, step 3 disabled
WorkflowNavigation
molecule · workflow.css
Mid-flow — Previous enabled, Next enabled, Finish disabled
First step — Previous disabled
Last step — Next disabled, Finish enabled
WorkflowHeader
organism · workflow.cssOnboarding Workflow
Complete each step to finish setup. Step 1 of 4.
Agent Activity
Agent run status badges, expandable activity log stream, and panel gate overlays.
AgentRunStatus
atom · activity.css
Running
Running
Completed
Completed
Error
Error
Idle
Idle
Size sm:
Running
Size lg:
Running
ActivityStream
molecule · activity.css
Running — with current activity, metrics, and expanded log
Completed — log collapsed
Error — with error banner
Loading state
Loading agent activity...
Empty state
Processing document chunk 3 of 12...
Chunks
3 / 12
Elapsed
11s
Tokens
4 820
09:00:00
Completed
Tokenising input
09:00:02
Completed
Fetching embeddings
09:00:11
Running
Processing chunk 3
Analysis complete.
Duration
95s
Tokens
18 340
Downloading model weights
Network error: connection reset after 30 s. Retrying...
Waiting for first event...
No activity recorded yet.
PanelGate
molecule · activity.cssField Review
Assisted field review components: reviewable panel states, action bars, and proposed change banners.
ReviewableFieldPanel
molecule · field-review.css
Viewing state
Company Name
Acme Corporation
Editing state
Company Name
Dirty state — unsaved changes indicator
Website URL
Unsaved changes
https://example.com
Saving state — polite live region
Email Address
Saving...
user@example.com
Error state — error announced via role=alert
Phone Number
+1 555-0100
Failed to save: the server returned 503. Try again in a few seconds.
Proposed change state — accept or reject AI suggestion
Industry Sector
FieldReviewActions
molecule · field-review.css
Viewing — Edit button
Editing — Save & Cancel buttons
Proposed — Accept & Reject buttons
Error — Retry button
Busy state — all buttons disabled
ProposedChangeBanner
molecule · field-review.css
Status + Text only
Status + Text + Detail
Text only (no status label)
Dock & Notifications
Dock panel and notification inbox: slide-in panels with optional tabs, and a notification list with unread filtering.
DockShell
organism · dock.css
Open — Left placement (static variant, no backdrop)
Open — Right placement (static variant, no backdrop)
Open — Tabbed dock with badge count (active tab: Inbox)
NotificationInbox
organism · dock.css
All tab — unread items highlighted, actions and mark-read buttons
Empty state — no notifications
Visualization
Canvas surface, toolbar controls, diagram preview panel, and legend components for dense diagram and map views.
CanvasViewport
organism · canvas.css
Ready — with toolbar (CanvasControls) and legend slot (LegendStrip)
Loading state — role=status spinner
Empty state — host-supplied label
Error state — role=alert
CanvasControls
molecule · canvas.css
Zoom + fullscreen + minimap — default state
Fullscreen active + minimap visible — aria-pressed=true, --active modifier
Zoom-in and zoom-out disabled (ZoomInDisabled / ZoomOutDisabled)
DiagramPreviewPanel
molecule · canvas.css
Inline — two preview panels with fullscreen expand button
Network Topology
Data Flow
Modal-open variant — fullscreen surface inside a dialog frame (static)
LegendStrip
molecule · canvas.css
Multiple groups — Status + Relationships — token-only swatches
Pending
Active
Completed
Error
Strong
Weak
Single group — Node types
Start / End
Process
Completed
LegendPanel
molecule · canvas.css
Floating mode (default) and side mode — token-only swatches
Diagram Legend
States
Pending
Active
Completed
Error
Side Legend
States
Pending
Active
Completed
Error
Custom child content after data-driven groups
Custom Legend
Node type
Start / End
Process
Completed
* Dashed lines indicate optional paths
Selection
Single-select combobox and multi-value select with inline text filter, chip display, and listbox keyboard navigation.
Combobox
molecule · combobox.css
Closed — no selection
Open — listbox with highlighted option (Cherry) and selected option (Banana)
- Apple
- Banana
- Cherry
- Durian
- Elderberry
- Fig
Disabled — keyboard and mouse interaction blocked
Open — with a disabled option (Purple)
- Red
- Green
- Blue
- Purple
- Orange
MultiSelect
molecule · combobox.css
Closed — two selected values shown as chips (Blazor, .NET)
Open — listbox with select-all, Blazor and .NET selected, CSS highlighted
- Select all
- Blazor
- .NET
- CSS
- HTML
- TypeScript
- SQL
Disabled — chip removal and listbox blocked
Busy — interactions blocked while loading options
Reference & Timeline
ReferencePicker: multi-select relationship picker with chip rail, lookup listbox, select-all/unselect-all toolbar, busy and dirty states. Timeline: ordered step progression, vertical or horizontal, with interactive or informational markers.
ReferencePicker
molecule · reference-picker.css
Selected chips — closed (Project Alpha, Project Beta selected)
Related projects
Listbox open — select-all/unselect-all toolbar, grouped options, highlighted, selected, and disabled states
Referenced documents
- Active
- Archived
Busy — spinner shown, listbox suppressed, aria-busy set, input disabled
Assigned teams
Dirty — unsaved changes badge shown, field border uses active-state token
Linked assets
Unsaved changes
Timeline
organism · timeline.css
Vertical — interactive (steps are buttons). Active step has aria-current="step". Complete step shows checkmark icon + Complete badge. Disabled step is aria-disabled.
Vertical — informational (no OnStepSelected; markers are spans, not buttons). Error step uses X-in-circle icon and Error badge — not color alone.
Horizontal — interactive. Steps left-to-right. Active step (Sign up) has aria-current="step". Connector follows step state.
Chat Organisms
App-neutral chat regions: conversation view, history panel, and sub-agent panel.
ChatConversationView
organism
Conversation region with heading slot, message list, live region, activity slot, and composer slot. Supports MessageActionsTemplate for per-message actions.
ConversationHistoryPanel
organism
Searchable history panel with conversation items, selection, and empty template. Accepts pre-filtered IReadOnlyList<ChatConversation>.
SubAgentPanel
organism
DocParser
Parsing document clauses
Section 4.1 through 4.12
Working
9:41 AM
AgentChatWorkspace
organismComposed chat workspace with conversation history, message view, quick prompts, prompt input, and optional sub-agent panel. Supports single-agent and multi-agent layouts.
Single-Agent Workspace
Multi-Agent Workspace
Deferred Features
The following chat capabilities are intentionally deferred: LLM/model API clients, conversation persistence, conversation search/filtering (host-owned), auto-scroll (manual scroll-to-bottom affordance in first pass), built-in markdown renderer (host provides ContentTemplate), voice input, citations, command palette, virtualization for long conversations, multi-line prompt expansion, and ChatWorkspaceShell template. File upload visual elements (FileDropZone, ChatFileItemView, ChatFileList, DownloadButton, PromptAttachmentTray) are implemented; upload transport is host-owned. These deferred items will be reconsidered when a concrete host workflow requires them.
Agents and Activities parameters. Optional AttachmentSlot, SearchResultsSlot, and MapSlot allow host to integrate file attachment, search results, and map components without owning workspace layout.
With Attachments + Search + Map
Search Results
Context-linked search result components: links, result items, grouped/flat result panels, and detail preview.
ContextLinkList
moleculeContextSearchResultItem
molecule
One search result with title, score badge, excerpt (pre-wrap, 3-line clamp), source metadata, and context links. Uses
ContextSearchResult model. Includes selected state styling with aria-pressed.
ContextSearchResultsPanel (Flat)
organismResults (IReadOnlyList<ContextSearchResult>), SelectedResultId/SelectedResultIdChanged, OnResultClick, and OnLinkSelected. Also supports loading state with Spinner, empty state via EmptyText or EmptyTemplate.
ContextSearchResultsPanel (Grouped)
organism
Contracts
Messages
Groups (IReadOnlyList<ContextSearchGroup>) parameter. Each group has a title heading and a list of ContextSearchResultItem components.
ContextResultPreview
organism
Merger Agreement Clause 4.2
98%
This clause covers material adverse change provisions that may affect the merger timeline and valuation. The clause requires the acquiring party to notify the target of any material changes within 5 business days.
Source:ACME Corp - Contract
Date:2 hours ago
Context Links
Select a result to preview
Optional detail pane showing a selected result with larger excerpt, full metadata, and context links. Shows placeholder text when no result is selected. Uses Result (ContextSearchResult?) parameter.
Map Components
Provider-abstracted geographical information components. The shared library provides UI chrome — search, controls, marker lists, and context cards — while the host supplies the map provider via a RenderFragment slot.
MapControls
molecule
Accessible control cluster with pan, zoom, reset view, fullscreen toggle, and external provider links. Each button has an
aria-label. Fires OnAction with MapControlAction enum values.
MapSearchBox
molecule
Provider-neutral location search form with
<input type="search"> and submit button. Supports Value/ValueChanged, OnSubmit, Disabled, Busy (with spinner), custom Placeholder, Class, and Style.
MapMarkerList
molecule
List of visible markers with selected state, context links, and status badges. Renders as a
<ul> with <button> elements. Selected marker gets aria-current and aria-pressed. Supports OnMarkerClick, SelectedMarkerIdChanged, and OnContextLinkSelected.
LocationContextCard
moleculeNo location selected
Compact panel linking a location to chat context. Shows marker description, coordinates, status, and context links. Placeholder message when no marker is selected. Uses MapMarker and ContextLink models.
GeoMapPanel
organism
Composed map region with search box, map controls, provider slot (host renders their chosen provider), marker list, header/footer templates, loading/unavailable states, local fullscreen, and external provider links. All map operations emit callbacks — the host applies them to the provider.
Templates
Page-level layout shells that compose organisms into complete screen structures.
AppShell
template
Sidebar (collapsed) + Topbar + Main content. Supports expandable sidebar (240px) and responsive collapse.
PageCanvas
templateClient Verification Suite
Packaged verification scripts shipped with the NuGet package at tools/omnis-ui-checks/. Consuming apps must run these in their CI pipelines to enforce Omnis design rules.
Static Code Scanners
Node.jsverify-token-usage.mjs
Scans .razor, .css, .scss, .js, .ts, and .tsx for hard-coded visual colors, legacy tokens, and PreviewSwatches in Omnis component styling. Supports include/exclude globs and auditable suppression comments.
verify-static-assets.mjs
Verifies that required Omnis static assets (tokens.css, reset.css, components.css, at least one palette) are referenced in the documented order. Detects missing or duplicate references.
verify-showcase-coverage.mjs
Checks that every public Omnis component appears in the client showcase or documentation. Configurable with built-in component list, custom lists, ignore rules, and JSON output.
verify-omnis-ui.mjs
Wrapper script that invokes all scanners and Playwright checks. Single entry point for CI with options for app URL, source root, asset path, and output format.
test-scanners.mjs
Runs all scanner tests against positive failing and passing fixtures to prove the scanners detect violations and accept compliant code.
Playwright Runtime Checks
playwrightomnis-ui.spec.ts
Accepts a client app URL and verifies: required CSS assets are loaded, no visible text overlaps at desktop/mobile widths, focus is visible for keyboard users, icon-only actions have accessible names, chat surfaces remain usable with long content, map controls are keyboard reachable, file upload affordances work by keyboard, and forced-colors/reduced-motion modes are usable.
Test Fixtures
positive-failing samplestest-fixtures/hardcoded-colors.htmlPositive-failing sample: hard-coded hex colors in component styling
test-fixtures/passing-token-usage.htmlPassing sample: correct token-only styling
test-fixtures/missing-asset-refs.htmlPositive-failing sample: missing required CSS references
test-fixtures/passing-asset-refs.htmlPassing sample: correct static asset references
test-fixtures/icon-only-no-label.htmlPositive-failing sample: icon-only button without accessible label
test-fixtures/passing-icon-button.htmlPassing sample: accessible icon button with aria-label
test-fixtures/missing-focus-visible.cssPositive-failing sample: missing focus-visible styles
test-fixtures/passing-focus-visible.cssPassing sample: correct focus-visible styles
test-fixtures/unsafe-js-patterns.jsPositive-failing sample: eval/unsafe JS interop patterns
test-fixtures/passing-unsafe-js.jsPassing sample: safe named-function JS interop
test-fixtures/showcase-incomplete.htmlPositive-failing sample: showcase missing most components
Consumer Documentation
docstools/omnis-ui-checks/README.md
Per-script documentation, CLI options, suppression syntax, and CI configuration
README.md#client-side-verification
Full consumer-side setup: npm scripts, Playwright config, GitHub Actions, Azure DevOps, local usage, suppression, route exposure
AGENTS.md
Mandatory rules, setup instructions, JS files table, and verification commands for coding AI agents consuming the package
Icons
Reusable SVG-stroke icons + the SvgStroke wrapper component.
All Icons (15)
iconsArrowLeftIcon
ArrowUpIcon
CheckIcon
CloseIcon
EditIcon
FlowArrowIcon
GearIcon
GridIcon
ListIcon
MenuIcon
NavigateIcon
PlusIcon
StarIcon
TrashIcon
SvgStroke