# @pacit/components > An accessible Angular component library: standalone, zoneless, signal forms, SSR and > design-token theming — where every promise is held by a machine-checked gate. The > numbers below are read from the repository's own snapshots: a mutation score of > 90.76 over 17591 mutants, 83 of 98 promises enforced, > 106 decision records, 257 logged lessons, every e2e case in 3 engines. Install: `npm install @pacit/components` (Angular 22, zoneless). ## Components - [PctButton](/components/button): button — `@pacit/components/button` - [PctMenu](/components/menu): a list of commands, walked by the keyboard and chosen from — `@pacit/components/menu` - [PctTabs](/components/tabs): one section of a page showing at a time — `@pacit/components/tabs` - [PctBreadcrumb](/components/breadcrumb): the way here, told in links — `@pacit/components/breadcrumb` - [PctPagination](/components/pagination): a control that owns the current page of a collection — `@pacit/components/pagination` — `` - [PctField](/components/field): form control wrapper — `@pacit/components/field` - [PctText](/components/text): text field — `@pacit/components/field` - [PctAutosize](/components/textarea): a textarea as tall as its text — `@pacit/components/field` - [PctNumber](/components/number): number field — `@pacit/components/field` - [PctDate](/components/date): date field — `@pacit/components/date` — `` - [PctTime](/components/time): time field — `@pacit/components/time` — `` - [PctDatetime](/components/datetime): datetime field — `@pacit/components/datetime` — `` - [PctSelect / PctMultiSelect](/components/select): choice list with a panel of its own — `@pacit/components/select` — `` - [PctCheckbox](/components/checkbox): checkbox — `@pacit/components/checkbox` — `` - [PctRadioGroup / PctRadio](/components/radio): group of mutually exclusive options — `@pacit/components/radio` - [PctSwitch](/components/switch): switch — `@pacit/components/switch` — `` - [PctChips / PctChip](/components/chips): a row of chosen values the user can take back — `@pacit/components/chips` - [PctSlider](/components/slider): slider — `@pacit/components/slider` — `` - [PctCalendar](/components/calendar): calendar — `@pacit/components/date` — `` - [PctTimeColumns](/components/columns): time columns — `@pacit/components/time` — `` - [PctDialog](/components/dialog): a modal dialog — `@pacit/components/dialog` - [PctDrawer](/components/drawer): a panel docked to an edge of the window that the page works around — `@pacit/components/drawer` — ` …` - [PctPopover](/components/popover): a panel of content on a live page — `@pacit/components/popover` - [PctToaster](/components/toast): a message on top of the page — `@pacit/components/toast` - [PctTooltip](/components/tooltip): a sentence about a control — `@pacit/components/tooltip` — `` - [PctTable](/components/table): the platform table, dressed element by element — `@pacit/components/table` - [PctChart](/components/chart): a scene of scales and the marks drawn on them — `@pacit/components/chart` - [PctDataTable](/components/datatable): a table built from data — `@pacit/components/table` - [PctAccordion](/components/accordion): a stack of sections a user opens and closes — `@pacit/components/accordion` - [PctTree](/components/tree): a walk the platform does not have — `@pacit/components/tree` - [PctStepper](/components/stepper): a map of a journey the application steers — `@pacit/components/stepper` - [PctProgress](/components/progress): how far along a task is, or that it is under way at all — `@pacit/components/progress` — `` - [PctBadge](/components/badge): a word wearing a tone — `@pacit/components/badge` — `Draft` - [PctIcon](/components/icon): a drawing in a box the text sizes and colours — `@pacit/components/icon` — `` - [PctAvatar](/components/avatar): the picture beside a name, and never the name itself — `@pacit/components/avatar` — `` - [PctSkeleton](/components/skeleton): the shape of content that has not arrived — `@pacit/components/skeleton` — `` - [PctContainer](/components/container): a reading column capped by a token — `@pacit/components/container` - [PctGrid](/components/grid): a grid that finds its own column count — `@pacit/components/grid` - [PctStack](/components/stack): the space between blocks, from the scale — `@pacit/components/stack` - [PctHero](/components/hero): the brand gradient as equipment — `@pacit/components/hero` - [PctTheme](/components/theme): the theme, spelled from a template — `@pacit/components/theme` ## Texts The strings a component prints by itself go through `providePctTexts()` from `@pacit/components`: English by default, overridden in part or in full, read at render time from a signal. A dictionary for another language is an object typed `PctTexts`, so a key the library adds is a compile error in the application, never a blank string. The keys, with their English defaults: - `selectPlaceholder` ("Select…"): Select: when nothing is chosen. - `selectEmpty` ("No options"): Select: when there is not a single option. - `selectNoMatches` ("No matches"): Select: when a filter has left nothing standing. A different sentence from selectEmpty because it is a different fact about the world — "there is nothing to choose from" is the list's state, "nothing here answers what you typed" is the question's, and a user who has just typed three letters is owed the second one. - `selectLoading` ("Loading…"): Select: while the list is still coming. The third fact an empty panel can carry, and the one that is not a conclusion — "there is nothing" and "nothing matches" are both answers, and a request in flight has given neither (0037). - `selectSeparator` (", "): Multi-select: what stands between the chosen labels on the trigger. Punctuation is a string like any other — an Arabic list is separated by ، and a Japanese one by 、, so a comma written into the template would be a word of English in every language. - `selectClear` ("Clear"): Select: the accessible name of the control that takes the answer back. It draws a cross and nothing else, so this string is the only name it has — and one name serves both jobs the button does, because what it takes back is whatever the trigger is showing (0036): a second string for "clear the question" would be a distinction the user never sees, the button standing in one place and doing one thing. - `dialogClose` ("Close"): Dialog: the accessible name of the button that closes it. The button draws a cross and nothing else, so this string is the only name it has — a component's own string and not content the view authored, which is what puts it here rather than in an input. - `dateOpen` ("Choose date"): Date: the accessible name of the button that opens the calendar, and the name of the panel it opens. One string in both places on purpose — the button says what it will show and the panel is that thing, so a second string would be a distinction the user never meets (0036's reading of one control doing one thing). - `datePreviousMonth` ("Previous month"): Date: the accessible name of the button that steps the calendar back a month. - `dateNextMonth` ("Next month"): Date: the accessible name of the button that steps it forward a month. - `dateDayLetter` ("d"): Date: the letters a format hint is written with — d, m, y in English, d, m, r in Polish. They are texts and not constants because they are words: the hint dd.mm.yyyy is read as language, and a y in a Polish field is a letter that means nothing there. - `dateMonthLetter` ("m"): Date: the letters a format hint is written with — d, m, y in English, d, m, r in Polish. They are texts and not constants because they are words: the hint dd.mm.yyyy is read as language, and a y in a Polish field is a letter that means nothing there. - `dateYearLetter` ("y"): Date: the letters a format hint is written with — d, m, y in English, d, m, r in Polish. They are texts and not constants because they are words: the hint dd.mm.yyyy is read as language, and a y in a Polish field is a letter that means nothing there. - `dateMalformed` ("Not a date"): Date: the sentence the field says about text that is not a date. The control's own error, first in the message line ahead of the form's — the form sees null and would call three typed numbers "required" (0070). - `timeOpen` ("Choose time"): Time: the accessible name of the button that opens the columns, and the name of the panel it opens — one string in both places, for the reason dateOpen gives. - `timeHourLetter` ("h"): Time: the letters a format hint is written with — h, m, s in English, g, m, s in Polish. Words and not constants, as the date's are; the ORDER, the separators and the day-period words are not here — those come from Intl, and the period slot is written with the field's own two words, which are what it shows and reads back (0086 §3). - `timeMinuteLetter` ("m"): Time: the letters a format hint is written with — h, m, s in English, g, m, s in Polish. Words and not constants, as the date's are; the ORDER, the separators and the day-period words are not here — those come from Intl, and the period slot is written with the field's own two words, which are what it shows and reads back (0086 §3). - `timeSecondLetter` ("s"): Time: the letters a format hint is written with — h, m, s in English, g, m, s in Polish. Words and not constants, as the date's are; the ORDER, the separators and the day-period words are not here — those come from Intl, and the period slot is written with the field's own two words, which are what it shows and reads back (0086 §3). - `timeMalformed` ("Not a time"): Time: the sentence the field says about text that is not a time — the control's own error, first in the message line ahead of the form's, which sees null (0070). - `timeHours` ("Hours"): Time: the accessible name of the column of hours. Each column of the panel is a listbox of its own and needs a name of its own — a column with none is a serious axe finding (0086, E5) — and the name is a word of the application's language, not of the locale's. - `timeMinutes` ("Minutes"): Time: the accessible name of the column of minutes. - `timeSeconds` ("Seconds"): Time: the accessible name of the column of seconds, which stands where the step has them. - `timePeriod` ("AM/PM"): Time: the accessible name of the column of the two halves of the day, on a twelve-hour clock. The column's two rows are the locale's own words, read off the formatter; the name of the column is the application's. - `datetimeOpen` ("Choose date and time"): Datetime: the accessible name of the button that opens the panel of a calendar and columns, and the name of the panel — one string in both places, for the reason dateOpen gives. - `datetimeDay` ("Day"): Datetime: the word each of the field's two texts is named by after the field's label — "Starts, Day" and then "Starts, Time". Two textboxes under a named group with no name of their own are a critical axe finding in all three engines, and two named by the label alone pass axe and leave a reader on the second one not told it is the time (0090, E2 and E3) — so the word is the record's rule, not the gate's. - `datetimeTime` ("Time"): Datetime: the word each of the field's two texts is named by after the field's label — "Starts, Day" and then "Starts, Time". Two textboxes under a named group with no name of their own are a critical axe finding in all three engines, and two named by the label alone pass axe and leave a reader on the second one not told it is the time (0090, E2 and E3) — so the word is the record's rule, not the gate's. - `datetimeIncomplete` ("Enter both a date and a time"): Datetime: the sentence the field says when focus leaves it with one half holding a value and the other empty — the value is null until both do, and a required field would otherwise say "required" over a day the user can see. The control's own error, first in the message line, gated by no touch (0070); the two halves' junk keeps the date's and the time's own sentences. - `numberMalformed` ("Not a number"): Number: the same sentence for text that is not a number, which the field now keeps instead of clearing — a user is shown what they typed, and told what it is not (0070). - `fieldWarning` ("Warning:"): Field: the word a reader hears before a warning's sentence, hidden from the eye. ARIA has no property for a warning — aria-invalid stays off, because the value is allowed — so the glyph beside the line is a drawing and this word is what says "warning" to someone who cannot see it. It ends in a colon because it OPENS the sentence: Warning: Unusually large (0087). - `toastDismiss` ("Dismiss"): Toast: the accessible name of the cross that takes a message down. The button draws nothing but the cross, so this string is the only name it has — the dialog's dialogClose one component over, and deliberately a second key rather than a shared one: "close" is what a panel does and "dismiss" is what happens to a message, and a language that spells the two differently has nowhere else to say so. - `toastRegion` ("Notifications"): Toast: what the stack of messages is called when a keyboard arrives at it as a region. The stack is a role="log" that stands outside the page's reading order, so the region cycle ({@link PctRegions}) is how a keyboard reaches it in one hop — and a place the keyboard lands on with nothing to announce is a place the user has to guess at. It names the region and not the messages: what is IN it is read as it arrives, by the live region itself. - `drawerClose` ("Close"): Drawer: the accessible name of the cross that shuts a docked panel. The button draws nothing but the cross, so this string is the only name it has — and it is a key of its own rather than the dialog's, which the English default makes look like duplication and is not. A dialog is a window: it is CLOSED, and it leaves. A drawer stays part of the page with its text still findable (0047), so a language that spells "shut this away" differently from "close this window" has nowhere else to say so. One key serving both would freeze that distinction out of every translation at once, which is toastDismiss's argument at the next component. - `paginationLabel` ("Pagination"): Pagination: the accessible name of the navigation landmark the pager is. A default in the application's language and nothing more — a page with two pagers (above and below a table) tells them apart through the ariaLabel input, not through this. - `paginationPrevious` ("Previous page"): Pagination: the accessible name of the stepper that goes back one page. The button draws a chevron and nothing else, so this string is the only name it has. A key of its own and not the calendar's datePreviousMonth: one steps a pager and the other a grid of days, and a language that says the two differently has nowhere else to. - `paginationNext` ("Next page"): Pagination: the accessible name of the stepper that goes forward one page. - `chipRemove` ("Remove"): Chips: the VERB half of the name of the control that takes a chosen value back. The button draws a cross and nothing else, and what it acts on is the chip's own projected text — so the two are joined by aria-labelledby and a reader hears "Remove, In stock". Until 2026-09-16 this string stood alone here, on the argument that the label beside the button was heard anyway; three readers were asked and none of them said it (lesson-218). Word order is the price: a language that puts the object first has the verb second, and this key cannot say so. A key of its own rather than the toast's toastDismiss or the dialog's dialogClose: "remove" is what happens to a chosen value, and a language that spells it apart from "dismiss a message" and "close a window" has nowhere else to say so (0051). - `breadcrumbLabel` ("Breadcrumb"): Breadcrumb: the accessible name of the navigation landmark the trail is. A default in the application's language and nothing more — a page with two trails tells them apart through the ariaLabel input, not through this. The pagination's key, one landmark over: two components, two landmarks, two names a translation may spell apart. - `stepDone` ("Completed"): Stepper: the suffix a done step carries for a reader — the check that marks it is a drawing the accessibility tree never sees, so this word is how "behind you" is said at all (0055). It rides INSIDE the step's content, after the application's own label, so the name stays "Payment, Completed" with the application's word first — never in an aria-label, which would replace the label instead of following it. - `chartEmpty` ("No data to show"): Chart: the message standing in the plot while it has nothing to draw — no series, or none with a reading in the window. The axes stay, so the reader sees where the data would be. An application with a better sentence ("No measurements in this range") projects it. - `chartGap` ("No reading"): Chart: what the data table writes where a series has no reading — a gap, not a zero. - `chartOn` ("On"): Chart: the label of the upper end of a yes/no axis, and of a yes in the data table. - `chartOff` ("Off"): Chart: the label of the lower end of a yes/no axis, and of a no in the data table. - `chartTime` ("Time"): Chart: the header of the data table's first column on a time axis. - `chartPosition` ("Position"): Chart: the header of the data table's first column on a numeric axis. - `chartAllHidden` ("Every series is hidden"): Chart: the message of a chart whose every series is hidden. - `chartNoCursor` ("No reading selected"): Chart: what the cursor's range says while no reading is selected. - `chartKeys` ("Arrow keys move from reading to reading, Page Up and Page Down a tenth of the view, Home and End to the first and last; Enter selects the bar under the cursor; Escape clears the cursor."): Chart: the keys of the cursor, one sentence, read as the range's description. - `chartSum` ("Sum"): Chart: the data table's foot that sums the columns. - `chartMean` ("Mean"): Chart: the data table's foot that averages the columns. - `chartDifference` ("Difference"): Chart: the tooltip's row with the difference between a bar and the compared period's. - `chartReference` ("Reference line"): Chart: a reference line's name, when the consumer gives it none. - `chartSpan` ("Band"): Chart: a band's name, when the consumer gives it none. - `chartNow` ("Now"): Chart: the line of the present moment, when the consumer gives it no name. - `chartBand` ("States"): Chart: a band of states' name, when the consumer gives it none. - `chartSize` ("Size"): Chart: the name of a bubble's size in a tooltip and a table, when the consumer gives it none. - `chartOpen` ("Open"): Chart: a candle's opening value, in a tooltip and a table. - `chartLow` ("Low"): Chart: the low of a range, a candle or a box, in a tooltip and a table. - `chartHigh` ("High"): Chart: the high of a range, a candle or a box, in a tooltip and a table. - `chartQuartile1` ("Lower quartile"): Chart: a box's lower quartile, in a tooltip and a table. - `chartQuartile3` ("Upper quartile"): Chart: a box's upper quartile, in a tooltip and a table. - `chartOutliers` ("Outliers"): Chart: a box's values beyond its whiskers, in a tooltip and a table. - `chartLegend` ("Series"): Chart: the name of the legend's list of series. - `chartRemove` ("Remove"): Chart: the legend's button that takes a series off the chart, named with the series. - `chartZoom` ("Zoom"): Chart: the name of the bar of zoom buttons. - `chartZoomIn` ("Zoom in"): Chart: the button that shows half as much of the horizontal axis. - `chartZoomOut` ("Zoom out"): Chart: the button that shows twice as much. - `chartEarlier` ("Earlier"): Chart: the button that moves the window a quarter earlier. - `chartLater` ("Later"): Chart: the button that moves the window a quarter later. - `chartZoomReset` ("Back to the default view"): Chart: the button that returns the window to its default. - `tableEmpty` ("No rows"): Data table: beside a table with no rows at all. - `tableNoMatches` ("No matches"): Data table: beside a table whose rows the quick filter or the application's own filter has all taken away — the question's state, not the list's, as selectNoMatches is. - `tableLoading` ("Loading…"): Data table: beside a table whose rows are still coming, with none yet. - `tableYes` ("Yes"): Data table: how a boolean cell that is true is read, and searched by the quick filter. - `tableNo` ("No"): Data table: how a boolean cell that is false is read, and searched by the quick filter. - `tableRowNumber` ("Row"): Data table: the header of the column that numbers the rows, as a reader hears it; the eye sees #, which a reader would call a number sign. - `tableSortLater` ("Sort key {place}, {way}"): Data table: a sort key after the first, as a reader hears it — the description of its header's button. {place} stands for its place in the order and {way} for tableSortAscending or tableSortDescending, so a language orders the sentence and punctuates it as it speaks: Sort key {place}, {way} is Sort key 2, descending. - `tableSortAscending` ("ascending"): Data table: the way of a sort key after the first, ascending. - `tableSortDescending` ("descending"): Data table: the way of a sort key after the first, descending. - `tableDetails` ("Details"): Data table: the header of the column of buttons that open the rows' details. - `tableDetailsOpen` ("Show details"): Data table: the name of a row's button while its details are closed. - `tableDetailsClose` ("Hide details"): Data table: the name of a row's button while its details are open. - `tableGroupCount` ("({count})"): Data table: how many rows a group holds, beside its label. {count} stands for the number in the table's locale. - `tableTotal` ("Total"): Data table: the label of the foot that sums up every row in view. - `tableGroupEmpty` ("No value"): Data table: the label of the group of rows with no value in the column grouped by. - `tableGroupWithin` ("{group}, in {outer}"): Data table: how a reader hears the heading of a group inside another. {group} stands for its label and count, {outer} for the label of the group it stands in. - `tableSelectAll` ("Select all rows"): Data table: the name of the header's checkbox, which picks every row the filter left. - `tableSelectRow` ("Select"): Data table: the word a row's checkbox is named by, before the text of the row's first cell — Select Kitchen lamp. - `tableLoadFailed` ("These rows could not be loaded."): Data table: what a block of rows a remote source failed to deliver says in their place. - `tableRetry` ("Retry"): Data table: the button that asks a remote source for a failed block of rows again. - `tableFilter` ("Filter {column}"): Data table: the name of a column's filter button, and the heading of its panel. {column} stands for the column's header. - `tableFiltered` ("Filter {column}, filtered"): Data table: the name of a column's filter button while the column is filtered, so a reader hears it without opening the panel. {column} stands for the column's header. - `tableClear` ("Clear"): Data table: the button that clears a column's filter. - `tableFrom` ("{column} from"): Data table: the lower end of a column's range filter. {column} stands for its header. - `tableTo` ("{column} to"): Data table: the upper end of a column's range filter. {column} stands for its header. ## Testing Every component has a harness in `@pacit/components/testing`, built on the CDK's `ComponentHarness`: `getHarness(PctButtonHarness)` through `TestbedHarnessEnvironment.loader(fixture)`, then `part('label')`, `parts`, `has`, `text` by a part's inventory name (typed) and `state('size')` for a `data-pct-*` attribute. A harness is a declaration held to the built package by a gate — the host selector verbatim, the parts exactly the ones drawn — so a renamed part fails a test by name. Each component's harnesses are listed on its page and under `harnesses` in the catalogue; `part`, `allParts` and `query` from the same entrypoint serve a fixture without the CDK. ## Cost Every component page's preview is measured in jsdom — elements, depth, listeners, renders to settle, and a dated clock — and the record (`apps/docs/bench.snapshot.md`, measured 2026-10-31) is held exactly by a gate, the clock excepted. Each component carries its reading under `evidence.cost` in the catalogue. ## Machine catalogue - [components.json](/components.json): the same inventory as one JSON object — every component with its canonical usage and examples as text, its API with types and defaults, parts, tokens with both themes' defaults, keyboard map, the texts it prints and the evidence behind it; the texts channel with the meaning of every key and a template typed `PctTexts`; the repository's evidence numbers.