{ "library": "@pacit/components", "version": "0.2.0", "angular": "^22.0.0", "install": "npm install @pacit/components", "generated": "by apps/docs/tools/build-content.mjs from the tracked sources the site renders — every number is a gate’s, every description a JSDoc line or a card row", "site": { "component": "/components/", "theming": "/theming", "trust": "/trust", "acr": "/acr" }, "evidence": { "mutation": { "score": 90.76, "killed": 15966, "mutants": 17591 }, "requirements": { "enforced": 83, "partial": 15, "gap": 0, "total": 98 }, "decisions": 106, "lessons": 257, "engines": 3, "cost": { "measured": "2026-10-31", "machine": "Intel(R) Core(TM) i7-3612QM CPU @ 2.10GHz", "record": "apps/docs/bench.snapshot.md" } }, "testing": { "entrypoint": "@pacit/components/testing", "base": "PctHarness — the CDK’s ComponentHarness over the data-pct-part inventory", "loader": "TestbedHarnessEnvironment.loader(fixture) from '@angular/cdk/testing/testbed', or the CDK’s WebDriver environment", "methods": { "part": "the element of a part by its inventory name — typed; throws naming the parts drawn", "parts": "every element of a part; an empty list is an answer", "has": "whether the part is drawn right now", "text": "the part’s text, trimmed", "state": "a data-pct-* attribute read off the host — state('size') reads data-pct-size", "with": "a HarnessPredicate with the CDK’s filters (selector, ancestor)" }, "helpers": { "part": "part(fixture, name): the part’s element in a plain fixture; throws naming what is there", "allParts": "allParts(fixture, name): every element of a part", "query": "query(fixture, selector): the first element of a selector; throws when none" }, "contract": "One harness per component, a declaration over the parts contract: the host selector is the component’s own, verbatim, and the parts are exactly the ones the package draws — both held to the built package by the check-harness gate, with the union type the editor offers and the names on every component page. Each component lists its harnesses under harnesses." }, "texts": { "provider": "providePctTexts", "entrypoint": "@pacit/components", "contract": "The strings a component prints by itself; English by default, overridden in part or in full, read at render time from a signal so a language can change without a reload. A dictionary for another language is an object typed PctTexts, so a key the library adds is a compile error in the application and never a blank string.", "keys": [ { "key": "selectPlaceholder", "meaning": "Select: when nothing is chosen.", "default": "Select…", "readBy": [ "select" ] }, { "key": "selectEmpty", "meaning": "Select: when there is not a single option.", "default": "No options", "readBy": [ "select" ] }, { "key": "selectNoMatches", "meaning": "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.", "default": "No matches", "readBy": [ "select" ] }, { "key": "selectLoading", "meaning": "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).", "default": "Loading…", "readBy": [ "select" ] }, { "key": "selectSeparator", "meaning": "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.", "default": ", ", "readBy": [ "select" ] }, { "key": "selectClear", "meaning": "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.", "default": "Clear", "readBy": [ "select" ] }, { "key": "dialogClose", "meaning": "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.", "default": "Close", "readBy": [ "dialog" ] }, { "key": "dateOpen", "meaning": "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).", "default": "Choose date", "readBy": [ "date", "calendar" ] }, { "key": "datePreviousMonth", "meaning": "Date: the accessible name of the button that steps the calendar back a month.", "default": "Previous month", "readBy": [ "date", "calendar" ] }, { "key": "dateNextMonth", "meaning": "Date: the accessible name of the button that steps it forward a month.", "default": "Next month", "readBy": [ "date", "calendar" ] }, { "key": "dateDayLetter", "meaning": "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.", "default": "d", "readBy": [ "date", "datetime", "calendar" ] }, { "key": "dateMonthLetter", "meaning": "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.", "default": "m", "readBy": [ "date", "datetime", "calendar" ] }, { "key": "dateYearLetter", "meaning": "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.", "default": "y", "readBy": [ "date", "datetime", "calendar" ] }, { "key": "dateMalformed", "meaning": "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).", "default": "Not a date", "readBy": [ "date", "datetime", "calendar" ] }, { "key": "timeOpen", "meaning": "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.", "default": "Choose time", "readBy": [ "time", "columns" ] }, { "key": "timeHourLetter", "meaning": "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).", "default": "h", "readBy": [ "time", "datetime", "columns" ] }, { "key": "timeMinuteLetter", "meaning": "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).", "default": "m", "readBy": [ "time", "datetime", "columns" ] }, { "key": "timeSecondLetter", "meaning": "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).", "default": "s", "readBy": [ "time", "datetime", "columns" ] }, { "key": "timeMalformed", "meaning": "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).", "default": "Not a time", "readBy": [ "time", "datetime", "columns" ] }, { "key": "timeHours", "meaning": "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.", "default": "Hours", "readBy": [ "time", "columns" ] }, { "key": "timeMinutes", "meaning": "Time: the accessible name of the column of minutes.", "default": "Minutes", "readBy": [ "time", "columns" ] }, { "key": "timeSeconds", "meaning": "Time: the accessible name of the column of seconds, which stands where the step has them.", "default": "Seconds", "readBy": [ "time", "columns" ] }, { "key": "timePeriod", "meaning": "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.", "default": "AM/PM", "readBy": [ "time", "columns" ] }, { "key": "datetimeOpen", "meaning": "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.", "default": "Choose date and time", "readBy": [ "datetime" ] }, { "key": "datetimeDay", "meaning": "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.", "default": "Day", "readBy": [ "datetime" ] }, { "key": "datetimeTime", "meaning": "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.", "default": "Time", "readBy": [ "datetime" ] }, { "key": "datetimeIncomplete", "meaning": "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.", "default": "Enter both a date and a time", "readBy": [ "datetime" ] }, { "key": "numberMalformed", "meaning": "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).", "default": "Not a number", "readBy": [ "field", "text", "textarea", "number" ] }, { "key": "fieldWarning", "meaning": "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).", "default": "Warning:", "readBy": [ "field", "text", "textarea", "number", "date", "time", "datetime", "select", "checkbox", "radio", "switch", "slider", "calendar", "columns", "table", "datatable" ] }, { "key": "toastDismiss", "meaning": "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.", "default": "Dismiss", "readBy": [ "toast" ] }, { "key": "toastRegion", "meaning": "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.", "default": "Notifications", "readBy": [ "toast" ] }, { "key": "drawerClose", "meaning": "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.", "default": "Close", "readBy": [ "drawer" ] }, { "key": "paginationLabel", "meaning": "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.", "default": "Pagination", "readBy": [ "pagination" ] }, { "key": "paginationPrevious", "meaning": "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.", "default": "Previous page", "readBy": [ "pagination" ] }, { "key": "paginationNext", "meaning": "Pagination: the accessible name of the stepper that goes forward one page.", "default": "Next page", "readBy": [ "pagination" ] }, { "key": "chipRemove", "meaning": "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).", "default": "Remove", "readBy": [ "chips" ] }, { "key": "breadcrumbLabel", "meaning": "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.", "default": "Breadcrumb", "readBy": [ "breadcrumb" ] }, { "key": "stepDone", "meaning": "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.", "default": "Completed", "readBy": [ "stepper" ] }, { "key": "chartEmpty", "meaning": "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.", "default": "No data to show", "readBy": [ "chart" ] }, { "key": "chartGap", "meaning": "Chart: what the data table writes where a series has no reading — a gap, not a zero.", "default": "No reading", "readBy": [ "chart" ] }, { "key": "chartOn", "meaning": "Chart: the label of the upper end of a yes/no axis, and of a yes in the data table.", "default": "On", "readBy": [ "chart" ] }, { "key": "chartOff", "meaning": "Chart: the label of the lower end of a yes/no axis, and of a no in the data table.", "default": "Off", "readBy": [ "chart" ] }, { "key": "chartTime", "meaning": "Chart: the header of the data table's first column on a time axis.", "default": "Time", "readBy": [ "chart" ] }, { "key": "chartPosition", "meaning": "Chart: the header of the data table's first column on a numeric axis.", "default": "Position", "readBy": [ "chart" ] }, { "key": "chartAllHidden", "meaning": "Chart: the message of a chart whose every series is hidden.", "default": "Every series is hidden", "readBy": [ "chart" ] }, { "key": "chartNoCursor", "meaning": "Chart: what the cursor's range says while no reading is selected.", "default": "No reading selected", "readBy": [ "chart" ] }, { "key": "chartKeys", "meaning": "Chart: the keys of the cursor, one sentence, read as the range's description.", "default": "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.", "readBy": [ "chart" ] }, { "key": "chartSum", "meaning": "Chart: the data table's foot that sums the columns.", "default": "Sum", "readBy": [ "chart" ] }, { "key": "chartMean", "meaning": "Chart: the data table's foot that averages the columns.", "default": "Mean", "readBy": [ "chart" ] }, { "key": "chartDifference", "meaning": "Chart: the tooltip's row with the difference between a bar and the compared period's.", "default": "Difference", "readBy": [ "chart" ] }, { "key": "chartReference", "meaning": "Chart: a reference line's name, when the consumer gives it none.", "default": "Reference line", "readBy": [ "chart" ] }, { "key": "chartSpan", "meaning": "Chart: a band's name, when the consumer gives it none.", "default": "Band", "readBy": [ "chart" ] }, { "key": "chartNow", "meaning": "Chart: the line of the present moment, when the consumer gives it no name.", "default": "Now", "readBy": [ "chart" ] }, { "key": "chartBand", "meaning": "Chart: a band of states' name, when the consumer gives it none.", "default": "States", "readBy": [ "chart" ] }, { "key": "chartSize", "meaning": "Chart: the name of a bubble's size in a tooltip and a table, when the consumer gives it none.", "default": "Size", "readBy": [ "chart" ] }, { "key": "chartOpen", "meaning": "Chart: a candle's opening value, in a tooltip and a table.", "default": "Open", "readBy": [ "chart" ] }, { "key": "chartLow", "meaning": "Chart: the low of a range, a candle or a box, in a tooltip and a table.", "default": "Low", "readBy": [ "chart" ] }, { "key": "chartHigh", "meaning": "Chart: the high of a range, a candle or a box, in a tooltip and a table.", "default": "High", "readBy": [ "chart" ] }, { "key": "chartQuartile1", "meaning": "Chart: a box's lower quartile, in a tooltip and a table.", "default": "Lower quartile", "readBy": [ "chart" ] }, { "key": "chartQuartile3", "meaning": "Chart: a box's upper quartile, in a tooltip and a table.", "default": "Upper quartile", "readBy": [ "chart" ] }, { "key": "chartOutliers", "meaning": "Chart: a box's values beyond its whiskers, in a tooltip and a table.", "default": "Outliers", "readBy": [ "chart" ] }, { "key": "chartLegend", "meaning": "Chart: the name of the legend's list of series.", "default": "Series", "readBy": [ "chart" ] }, { "key": "chartRemove", "meaning": "Chart: the legend's button that takes a series off the chart, named with the series.", "default": "Remove", "readBy": [ "chart" ] }, { "key": "chartZoom", "meaning": "Chart: the name of the bar of zoom buttons.", "default": "Zoom", "readBy": [ "chart" ] }, { "key": "chartZoomIn", "meaning": "Chart: the button that shows half as much of the horizontal axis.", "default": "Zoom in", "readBy": [ "chart" ] }, { "key": "chartZoomOut", "meaning": "Chart: the button that shows twice as much.", "default": "Zoom out", "readBy": [ "chart" ] }, { "key": "chartEarlier", "meaning": "Chart: the button that moves the window a quarter earlier.", "default": "Earlier", "readBy": [ "chart" ] }, { "key": "chartLater", "meaning": "Chart: the button that moves the window a quarter later.", "default": "Later", "readBy": [ "chart" ] }, { "key": "chartZoomReset", "meaning": "Chart: the button that returns the window to its default.", "default": "Back to the default view", "readBy": [ "chart" ] }, { "key": "tableEmpty", "meaning": "Data table: beside a table with no rows at all.", "default": "No rows", "readBy": [ "table", "datatable" ] }, { "key": "tableNoMatches", "meaning": "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.", "default": "No matches", "readBy": [ "table", "datatable" ] }, { "key": "tableLoading", "meaning": "Data table: beside a table whose rows are still coming, with none yet.", "default": "Loading…", "readBy": [ "table", "datatable" ] }, { "key": "tableYes", "meaning": "Data table: how a boolean cell that is true is read, and searched by the quick filter.", "default": "Yes", "readBy": [ "table", "datatable" ] }, { "key": "tableNo", "meaning": "Data table: how a boolean cell that is false is read, and searched by the quick filter.", "default": "No", "readBy": [ "table", "datatable" ] }, { "key": "tableRowNumber", "meaning": "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.", "default": "Row", "readBy": [ "table", "datatable" ] }, { "key": "tableSortLater", "meaning": "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.", "default": "Sort key {place}, {way}", "readBy": [ "table", "datatable" ] }, { "key": "tableSortAscending", "meaning": "Data table: the way of a sort key after the first, ascending.", "default": "ascending", "readBy": [ "table", "datatable" ] }, { "key": "tableSortDescending", "meaning": "Data table: the way of a sort key after the first, descending.", "default": "descending", "readBy": [ "table", "datatable" ] }, { "key": "tableDetails", "meaning": "Data table: the header of the column of buttons that open the rows' details.", "default": "Details", "readBy": [ "table", "datatable" ] }, { "key": "tableDetailsOpen", "meaning": "Data table: the name of a row's button while its details are closed.", "default": "Show details", "readBy": [ "table", "datatable" ] }, { "key": "tableDetailsClose", "meaning": "Data table: the name of a row's button while its details are open.", "default": "Hide details", "readBy": [ "table", "datatable" ] }, { "key": "tableGroupCount", "meaning": "Data table: how many rows a group holds, beside its label. {count} stands for the number in the table's locale.", "default": "({count})", "readBy": [ "table", "datatable" ] }, { "key": "tableTotal", "meaning": "Data table: the label of the foot that sums up every row in view.", "default": "Total", "readBy": [ "table", "datatable" ] }, { "key": "tableGroupEmpty", "meaning": "Data table: the label of the group of rows with no value in the column grouped by.", "default": "No value", "readBy": [ "table", "datatable" ] }, { "key": "tableGroupWithin", "meaning": "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.", "default": "{group}, in {outer}", "readBy": [ "table", "datatable" ] }, { "key": "tableSelectAll", "meaning": "Data table: the name of the header's checkbox, which picks every row the filter left.", "default": "Select all rows", "readBy": [ "table", "datatable" ] }, { "key": "tableSelectRow", "meaning": "Data table: the word a row's checkbox is named by, before the text of the row's first cell — Select Kitchen lamp.", "default": "Select", "readBy": [ "table", "datatable" ] }, { "key": "tableLoadFailed", "meaning": "Data table: what a block of rows a remote source failed to deliver says in their place.", "default": "These rows could not be loaded.", "readBy": [ "table", "datatable" ] }, { "key": "tableRetry", "meaning": "Data table: the button that asks a remote source for a failed block of rows again.", "default": "Retry", "readBy": [ "table", "datatable" ] }, { "key": "tableFilter", "meaning": "Data table: the name of a column's filter button, and the heading of its panel. {column} stands for the column's header.", "default": "Filter {column}", "readBy": [ "table", "datatable" ] }, { "key": "tableFiltered", "meaning": "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.", "default": "Filter {column}, filtered", "readBy": [ "table", "datatable" ] }, { "key": "tableClear", "meaning": "Data table: the button that clears a column's filter.", "default": "Clear", "readBy": [ "table", "datatable" ] }, { "key": "tableFrom", "meaning": "Data table: the lower end of a column's range filter. {column} stands for its header.", "default": "{column} from", "readBy": [ "table", "datatable" ] }, { "key": "tableTo", "meaning": "Data table: the upper end of a column's range filter. {column} stands for its header.", "default": "{column} to", "readBy": [ "table", "datatable" ] } ], "template": { "selectPlaceholder": "Select…", "selectEmpty": "No options", "selectNoMatches": "No matches", "selectLoading": "Loading…", "selectSeparator": ", ", "selectClear": "Clear", "dialogClose": "Close", "dateOpen": "Choose date", "datePreviousMonth": "Previous month", "dateNextMonth": "Next month", "dateDayLetter": "d", "dateMonthLetter": "m", "dateYearLetter": "y", "dateMalformed": "Not a date", "timeOpen": "Choose time", "timeHourLetter": "h", "timeMinuteLetter": "m", "timeSecondLetter": "s", "timeMalformed": "Not a time", "timeHours": "Hours", "timeMinutes": "Minutes", "timeSeconds": "Seconds", "timePeriod": "AM/PM", "datetimeOpen": "Choose date and time", "datetimeDay": "Day", "datetimeTime": "Time", "datetimeIncomplete": "Enter both a date and a time", "numberMalformed": "Not a number", "fieldWarning": "Warning:", "toastDismiss": "Dismiss", "toastRegion": "Notifications", "drawerClose": "Close", "paginationLabel": "Pagination", "paginationPrevious": "Previous page", "paginationNext": "Next page", "chipRemove": "Remove", "breadcrumbLabel": "Breadcrumb", "stepDone": "Completed", "chartEmpty": "No data to show", "chartGap": "No reading", "chartOn": "On", "chartOff": "Off", "chartTime": "Time", "chartPosition": "Position", "chartAllHidden": "Every series is hidden", "chartNoCursor": "No reading 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.", "chartSum": "Sum", "chartMean": "Mean", "chartDifference": "Difference", "chartReference": "Reference line", "chartSpan": "Band", "chartNow": "Now", "chartBand": "States", "chartSize": "Size", "chartOpen": "Open", "chartLow": "Low", "chartHigh": "High", "chartQuartile1": "Lower quartile", "chartQuartile3": "Upper quartile", "chartOutliers": "Outliers", "chartLegend": "Series", "chartRemove": "Remove", "chartZoom": "Zoom", "chartZoomIn": "Zoom in", "chartZoomOut": "Zoom out", "chartEarlier": "Earlier", "chartLater": "Later", "chartZoomReset": "Back to the default view", "tableEmpty": "No rows", "tableNoMatches": "No matches", "tableLoading": "Loading…", "tableYes": "Yes", "tableNo": "No", "tableRowNumber": "Row", "tableSortLater": "Sort key {place}, {way}", "tableSortAscending": "ascending", "tableSortDescending": "descending", "tableDetails": "Details", "tableDetailsOpen": "Show details", "tableDetailsClose": "Hide details", "tableGroupCount": "({count})", "tableTotal": "Total", "tableGroupEmpty": "No value", "tableGroupWithin": "{group}, in {outer}", "tableSelectAll": "Select all rows", "tableSelectRow": "Select", "tableLoadFailed": "These rows could not be loaded.", "tableRetry": "Retry", "tableFilter": "Filter {column}", "tableFiltered": "Filter {column}, filtered", "tableClear": "Clear", "tableFrom": "{column} from", "tableTo": "{column} to" } }, "components": [ { "id": "button", "classes": [ "PctButton" ], "role": "button", "category": "Actions & navigation", "status": "released", "entrypoint": "@pacit/components/button", "selectors": [ "button[pctButton]", "a[pctButton]" ], "harnesses": [ "PctButtonHarness" ], "docs": "/components/button", "summary": "A button in five faces, four tones and three sizes — or a square around one glyph — drawn on the platform's own Get started\n", "lang": "html" }, "examples": [ { "key": "faces", "title": "Faces", "code": "import { Component } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\n\n/**\n * Faces\n *\n * `variant` picks the paint. Solid carries the primary action, outline and ghost sit beside\n * it, soft is the quiet tint — and hero is the one that drifts, reserved for the single most\n * important call on a page.\n */\n@Component({\n selector: 'demo-button-faces',\n imports: [PctButton],\n styles:\n ':host { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }',\n template: `\n \n \n \n \n \n `,\n})\nexport class ButtonFacesDemo {}" }, { "key": "tones", "title": "Tones", "code": "import { Component, computed, signal } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\nimport { PctTone } from '@pacit/components/core';\nimport { PctRadio, PctRadioGroup } from '@pacit/components/radio';\n\n/**\n * Tones\n *\n * `tone` picks which of the skin's families the face paints from — the same four names the\n * toast and the progress bar wear. Move the choice and watch the four faces follow: there is\n * no `primary` tone, because a button without one already is the brand, and `None` is what\n * every button here is by default.\n *\n * The fifth face is missing from the row on purpose. `hero` is the brand gradient and takes\n * no tone at all; ask it for one and it says so in dev mode rather than quietly ignoring you.\n *\n * The colour is never the message. \"Delete account\" says danger in words, and that is what a\n * reader hears — a red button labelled \"OK\" tells nobody anything they could not see.\n */\n@Component({\n selector: 'demo-button-tones',\n imports: [PctButton, PctRadio, PctRadioGroup],\n styles: `\n :host {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n .row {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n align-items: center;\n }\n `,\n template: `\n \n None\n danger\n warning\n success\n info\n \n\n
\n \n \n \n \n
\n `,\n})\nexport class ButtonTonesDemo {\n readonly choice = signal('danger');\n\n /** `none` is the absence of a tone, which is what the input takes: there is no member for it. */\n protected readonly tone = computed(() => {\n const chosen = this.choice();\n return chosen === 'none' ? null : chosen;\n });\n}" }, { "key": "destructive", "title": "A destructive action, and the way out of it", "code": "import { Component } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\n\n/**\n * A destructive action, and the way out of it\n *\n * The tone is for the one press that cannot be taken back — and it works because of what\n * stands beside it. The way out is the quiet face with no tone at all: a row where both\n * buttons shout has no shape, and a reader who cannot see the red is left with the two\n * labels, which is why the labels have to be the ones carrying the difference.\n *\n * `soft` is the same tone at a lower volume, for the destructive action that is not the\n * point of the screen — removing one row of a table rather than closing the account.\n */\n@Component({\n selector: 'demo-button-destructive',\n imports: [PctButton],\n styles: `\n :host {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n .row {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n align-items: center;\n }\n .caption {\n margin: 0;\n font-size: 13px;\n opacity: 0.75;\n }\n `,\n template: `\n
\n
\n \n \n
\n

\n The dialog's own footer: one press that ends it, one that does not.\n

\n
\n
\n
\n \n \n
\n

\n The same tones where the action is not the point of the screen.\n

\n
\n `,\n})\nexport class ButtonDestructiveDemo {}" }, { "key": "link", "title": "Links wearing the face", "code": "import { Component } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\n\n/**\n * Links wearing the face\n *\n * A control that goes somewhere is an ``, whatever it looks like: the middle click, the\n * address bar's preview and a crawler's road through the site all come with the element and\n * with nothing else. `pctButton` paints it and leaves the role alone — only the underline\n * goes, because the face answers a pointer with its own background. A disabled link is the\n * one thing HTML has no mechanism for, so the component says `aria-disabled` and refuses the\n * press itself.\n */\n@Component({\n selector: 'demo-button-link',\n imports: [PctButton],\n styles:\n ':host { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }',\n template: `\n Get started\n Browse components\n Changelog\n `,\n})\nexport class ButtonLinkDemo {}" }, { "key": "sizes", "title": "Sizes", "code": "import { Component } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\n\n/**\n * Sizes\n *\n * Three heights — 28, 36 and 44 px — shared with every field, so a button and an input on\n * the same row line up to the pixel. The default comes from `providePctConfig`, not from the\n * template.\n */\n@Component({\n selector: 'demo-button-sizes',\n imports: [PctButton],\n styles:\n ':host { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }',\n template: `\n \n \n \n `,\n})\nexport class ButtonSizesDemo {}" }, { "key": "states", "title": "Loading and disabled", "code": "import { Component, signal } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\n\n/**\n * Loading and disabled\n *\n * Two states, kept apart on purpose. `loading` says \"working\": the spinner takes the face's\n * own colour and the element reports `aria-busy`. `disabled` says \"cannot be clicked\". A\n * queued click is a legitimate pattern, so loading alone never blocks — press Save to watch\n * both at once.\n */\n@Component({\n selector: 'demo-button-states',\n imports: [PctButton],\n styles:\n ':host { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }',\n template: `\n \n {{ saving() ? 'Saving…' : 'Save' }}\n \n \n \n \n `,\n})\nexport class ButtonStatesDemo {\n protected readonly saving = signal(false);\n\n protected save(): void {\n this.saving.set(true);\n setTimeout(() => this.saving.set(false), 1500);\n }\n}" }, { "key": "icon-only", "title": "Icon only", "code": "import { Component, signal } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\nimport { PctIcon, providePctIcons } from '@pacit/components/icon';\nimport { svgIcons } from '@pacit/components/svg-icon';\nimport { PctTooltip } from '@pacit/components/tooltip';\nimport { Copy, Download, Pencil, Plus, RefreshCw, Trash2 } from 'lucide';\n\n/**\n * Icon only\n *\n * `iconOnly` makes the face a square as tall as its size, with the glyph on the icon's own\n * step for it — every face, tone and state is the same button's. There is nothing on it to\n * read, so the name is written on the button: a tooltip with `pctTooltipAs=\"name\"` shows it\n * and speaks it, `aria-label` only speaks it. Press refresh to watch the spinner take the\n * glyph's place.\n */\n@Component({\n selector: 'demo-button-icon-only',\n imports: [PctButton, PctIcon, PctTooltip],\n providers: [\n providePctIcons(\n svgIcons({\n pencil: Pencil,\n copy: Copy,\n download: Download,\n trash: Trash2,\n plus: Plus,\n refresh: RefreshCw,\n }),\n ),\n ],\n styles: `\n :host {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n .gap {\n inline-size: 16px;\n }\n `,\n template: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n})\nexport class ButtonIconOnlyDemo {\n protected readonly refreshing = signal(false);\n\n protected refresh(): void {\n this.refreshing.set(true);\n setTimeout(() => this.refreshing.set(false), 1500);\n }\n}" }, { "key": "toolbar", "title": "In a toolbar", "code": "import { Component } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\n\n/**\n * In a toolbar\n *\n * A row of actions is the consumer's own flex box — `pct-stack` stacks, it does not row.\n * The primary action goes last, the destructive one is kept at arm's length by the gap\n * that grows between them.\n */\n@Component({\n selector: 'demo-button-toolbar',\n imports: [PctButton],\n styles: `\n :host {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .grow {\n flex: 1;\n }\n `,\n template: `\n \n \n \n \n `,\n})\nexport class ButtonToolbarDemo {}" }, { "key": "form", "title": "In a form", "code": "import { Component, signal } from '@angular/core';\nimport { FormField, form, required } from '@angular/forms/signals';\nimport { PctButton } from '@pacit/components/button';\nimport { PctField, PctText } from '@pacit/components/field';\n\n/**\n * In a form\n *\n * The submit button is a native `type=\"submit\"`: the signal form's validity drives\n * `disabled`, and the row heights match because the field and the button read the same\n * size token. Clear the name to watch the button follow.\n */\n@Component({\n selector: 'demo-button-form',\n imports: [FormField, PctButton, PctField, PctText],\n styles: `\n form {\n display: grid;\n gap: 12px;\n max-width: 360px;\n }\n `,\n template: `\n
\n \n \n \n \n
\n `,\n})\nexport class ButtonFormDemo {\n protected readonly workspace = signal({ name: 'northwind' });\n protected readonly workspaceForm = form(this.workspace, (path) => {\n required(path.name, { message: 'Every workspace needs a name' });\n });\n protected readonly created = signal(false);\n\n protected create(event: Event): void {\n event.preventDefault();\n this.created.set(true);\n setTimeout(() => this.created.set(false), 1500);\n }\n}" } ], "api": [ { "name": "PctButton", "kind": "component", "selector": "button[pctButton], a[pctButton]", "description": "Button. An attribute selector on a native \n\n \n", "lang": "html" }, "examples": [ { "key": "placement", "title": "Placement, and why it closed", "code": "import { Component, signal } from '@angular/core';\nimport { PctButton } from '@pacit/components/button';\nimport {\n PctMenu,\n PctMenuCloseReason,\n PctMenuItem,\n PctMenuTrigger,\n} from '@pacit/components/menu';\n\n/**\n * Placement, and why it closed\n *\n * `placement` asks for a side; the panel takes it when there is room and flips when there\n * is not. `(closed)` reports the reason — an item, the trigger, Escape, a click outside —\n * so a consumer can tell a choice from a dismissal.\n */\n@Component({\n selector: 'demo-menu-placement',\n imports: [PctButton, PctMenu, PctMenuItem, PctMenuTrigger],\n styles: ':host { display: grid; gap: 12px; justify-items: start; }',\n template: `\n \n \n \n \n \n \n

Last closed by: {{ reason() ?? 'not opened yet' }}

\n `,\n})\nexport class MenuPlacementDemo {\n readonly reason = signal(null);\n}" } ], "api": [ { "name": "PctMenu", "kind": "component", "selector": "pct-menu", "description": "A menu: a list of commands on a panel, walked by the keyboard and chosen from.", "members": [ { "name": "open", "kind": "model", "required": false, "type": "boolean", "default": "false", "description": "Whether the panel is up. A model, because both directions are ordinary: an application opens it, and the menu closes itself on a choice, on Escape, on a press outside, on the trigger and on Tab walking out — every one of which is a panel on a layer getting out of the page's way. An inline menu has nowhere to get out of, and writes this from nobody but the application (inline).", "since": "0.1.0", "unreleased": false, "deprecated": null }, { "name": "ariaLabel", "kind": "input", "required": false, "type": "string", "default": "''", "description": "The accessible name, for a menu whose trigger does not already say it. Usually neither is needed: a menu with no name of its own is named by the control that opened it, which is what the APG's own example does and what makes \"Actions menu\" come out of the two words already on the screen.", "since": "0.1.0", "unreleased": false, "deprecated": null }, { "name": "ariaLabelledby", "kind": "input", "required": false, "type": "string", "default": "''", "description": "As ariaLabel, for a name that already stands somewhere on the page.", "since": "0.1.0", "unreleased": false, "deprecated": null }, { "name": "placement", "kind": "input", "required": false, "type": "PctPlacement", "default": "'bottom'", "description": "Which side of the control it opens on — logical, so end is the right in an English page and the left in an Arabic one. bottom is the menu button's side and end the submenu's; the window has the last word either way (pctPlacementPositions). Inline it is read by nobody: a panel that is not positioned has no side to be on.", "since": "0.1.0", "unreleased": false, "deprecated": null }, { "name": "inline", "kind": "input", "required": false, "type": "boolean", "default": "false", "description": "Renders the panel in the host, where the component was written, instead of on a layer over the page — a column of commands docked into the page rather than one lifted off it.", "since": "0.1.0", "unreleased": false, "deprecated": null }, { "name": "closed", "kind": "output", "required": false, "type": "PctMenuCloseReason", "default": null, "description": "Why it closed. See PctMenuCloseReason.", "since": "0.1.0", "unreleased": false, "deprecated": null } ], "host": [ { "attribute": "class", "kind": "static", "bound": "pct-menu", "note": "" }, { "attribute": "style", "kind": "static", "bound": "display: contents", "note": "The host renders nothing — everything it draws lives in the overlay. It stays in the tree because it is where the panel's severed properties are read from." } ] } ], "exports": [ { "name": "PctMenuItemApi", "kind": "interface", "selector": null, "detail": null, "description": "What a menu needs to know about one of its items, and nothing more. Declared HERE, beside the menu, so that the item can provide it while importing the menu — the other direction (contentChildren(PctMenuItem)) would close the import cycle. It is pct-radio's channel one component over, and for the same reason.", "since": "0.1.0", "deprecated": null, "unreleased": false }, { "name": "PCT_MENU_ITEM", "kind": "token", "selector": null, "detail": null, "description": "The channel through which an item announces itself to the menu it stands in.", "since": "0.1.0", "deprecated": null, "unreleased": false }, { "name": "PctMenu", "kind": "component", "selector": "pct-menu", "detail": null, "description": "A menu: a list of commands on a panel, walked by the keyboard and chosen from.", "since": "0.1.0", "deprecated": null, "unreleased": false }, { "name": "PctMenuItem", "kind": "component", "selector": "button[pctMenuItem]", "detail": null, "description": "One command on a menu: role=\"menuitem\", focusable by the walk and by nothing else.", "since": "0.1.0", "deprecated": null, "unreleased": false }, { "name": "PctMenuTrigger", "kind": "directive", "selector": "[pctMenuTrigger]", "detail": null, "description": "The control a menu hangs off: it opens the panel and says so about itself.", "since": "0.1.0", "deprecated": null, "unreleased": false }, { "name": "PctMenuCloseReason", "kind": "type", "selector": null, "detail": "'item' | 'trigger' | 'escape' | 'outside' | 'away' | 'api'", "description": "Why a menu closed. open says *that* it is shut and nothing else, and the question an application asks about a menu it did not close itself — was something chosen, or did the user walk away — is answered by this and by nothing in the boolean.", "since": "0.1.0", "deprecated": null, "unreleased": false }, { "name": "PctMenuOpenIntent", "kind": "type", "selector": null, "detail": "'first' | 'last' | 'none'", "description": "Where focus lands when a panel comes up — the opening's half of PctMenuCloseReason.", "since": "0.1.0", "deprecated": null, "unreleased": false } ], "parts": [ { "name": "panel", "description": "the floating list of commands" }, { "name": "item", "description": "one command" } ], "tokens": [ { "name": "--pct-menu-item-bg", "type": "color", "ref": "{pct.surface}", "light": "#ffffff", "dark": "#0f172a", "description": "Background of an item." }, { "name": "--pct-menu-item-bg-active", "type": "color", "ref": "{pct.surface-100}", "light": "#f1f5f9", "dark": "#1e293b", "description": "Background of the item the keyboard or the pointer is on." }, { "name": "--pct-menu-item-fg", "type": "color", "ref": "{pct.text}", "light": "#0f172a", "dark": "#ffffff", "description": "Text colour of an item." }, { "name": "--pct-menu-item-fg-disabled", "type": "color", "ref": "{pct.text-disabled}", "light": "#64748b", "dark": "#64748b", "description": "Text colour of an item while disabled." }, { "name": "--pct-menu-item-font-size", "type": "dimension", "ref": "{pct.font.size.md}", "light": "14px", "dark": "14px", "description": "Font size of an item." }, { "name": "--pct-menu-item-gap", "type": "dimension", "ref": "{pct.space.3}", "light": "8px", "dark": "8px", "description": "Gap between an item's icon and its text." }, { "name": "--pct-menu-item-padding-x", "type": "dimension", "ref": "{pct.space.4}", "light": "12px", "dark": "12px", "description": "Horizontal padding of an item." }, { "name": "--pct-menu-item-padding-y", "type": "dimension", "ref": "{pct.space.2}", "light": "4px", "dark": "4px", "description": "Vertical padding of an item." }, { "name": "--pct-menu-item-target-min", "type": "dimension", "ref": "{pct.target.min}", "light": "24px", "dark": "24px", "description": "Touch-target floor of an item." }, { "name": "--pct-menu-panel-bg", "type": "color", "ref": "{pct.surface}", "light": "#ffffff", "dark": "#0f172a", "description": "Background of the panel." }, { "name": "--pct-menu-panel-border", "type": "color", "ref": "{pct.border-strong}", "light": "#64748b", "dark": "#64748b", "description": "Edge colour of the panel." }, { "name": "--pct-menu-panel-fg", "type": "color", "ref": "{pct.text}", "light": "#0f172a", "dark": "#ffffff", "description": "Text colour of the panel." }, { "name": "--pct-menu-panel-max-height", "type": "dimension", "ref": null, "light": "320px", "dark": "320px", "description": "Maximum height of the panel." }, { "name": "--pct-menu-panel-padding-y", "type": "dimension", "ref": "{pct.space.2}", "light": "4px", "dark": "4px", "description": "Vertical padding of the panel." }, { "name": "--pct-menu-panel-radius", "type": "dimension", "ref": "{pct.radius.md}", "light": "8px", "dark": "8px", "description": "Corner radius of the panel." }, { "name": "--pct-menu-panel-shadow", "type": "shadow", "ref": "{pct.shadow-panel}", "light": "0 8px 24px rgba(15, 23, 42, 0.14)", "dark": "0 8px 24px rgba(0, 0, 0, 0.55)", "description": "Shadow of the panel." } ], "texts": [], "keyboard": "| key | effect | test |\n| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |\n| `ArrowDown` / `ArrowUp` | the next/previous command, skipping what is disabled, coming round at the ends | `apps/sandbox-e2e/src/menu.spec.ts` |\n| `Home` / `End` | the first/last command | `apps/sandbox-e2e/src/menu.spec.ts` |\n| a letter | the first command whose text starts with what has been typed; a second letter narrows it | `apps/sandbox-e2e/src/menu.spec.ts` |\n| `Enter` / `Space` | runs the command — **the platform's**, because a row is a `