@nadicodeai/ui 12.1.171 → 12.1.173
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +7 -5
- package/README.md +1 -2
- package/dist/components/chart-card.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/kpi-card.d.ts.map +1 -1
- package/dist/components/kpi-card.js +3 -3
- package/dist/components/multi-select.js +1 -1
- package/dist/components/object-page.d.ts +6 -6
- package/dist/components/object-page.d.ts.map +1 -1
- package/dist/components/object-page.js +4 -5
- package/dist/components/object-workspace.d.ts +17 -9
- package/dist/components/object-workspace.d.ts.map +1 -1
- package/dist/components/object-workspace.js +7 -6
- package/dist/components/overview-page.d.ts +7 -2
- package/dist/components/overview-page.d.ts.map +1 -1
- package/dist/components/overview-page.js +4 -4
- package/dist/components/page-actions.d.ts +22 -0
- package/dist/components/page-actions.d.ts.map +1 -1
- package/dist/components/page-actions.js +16 -0
- package/dist/components/radio-group.js +1 -1
- package/dist/components/record-list.d.ts +4 -2
- package/dist/components/record-list.d.ts.map +1 -1
- package/dist/components/record-list.js +1 -1
- package/dist/components/settings-facts.d.ts +5 -4
- package/dist/components/settings-facts.d.ts.map +1 -1
- package/dist/components/settings-facts.js +5 -4
- package/dist/components/settings-section.d.ts +19 -8
- package/dist/components/settings-section.d.ts.map +1 -1
- package/dist/components/settings-section.js +4 -3
- package/dist/components/table-card.d.ts +9 -4
- package/dist/components/table-card.d.ts.map +1 -1
- package/dist/components/table-card.js +7 -5
- package/dist/components/text-link.d.ts +6 -6
- package/dist/components/text-link.js +6 -6
- package/dist/showcase/specimens/actions.d.ts +1 -0
- package/dist/showcase/specimens/actions.d.ts.map +1 -1
- package/dist/showcase/specimens/actions.js +5 -1
- package/dist/showcase/specimens/compositions.d.ts.map +1 -1
- package/dist/showcase/specimens/compositions.js +1 -1
- package/dist/showcase/specimens/data.js +1 -1
- package/dist/showcase/specimens/index.d.ts +1 -0
- package/dist/showcase/specimens/index.d.ts.map +1 -1
- package/dist/showcase/usage.generated.d.ts +1 -1
- package/dist/showcase/usage.generated.d.ts.map +1 -1
- package/dist/showcase/usage.generated.js +22 -11
- package/dist/styles/components.css +9 -0
- package/package.json +2 -2
|
@@ -164,19 +164,19 @@ export const USAGE = [
|
|
|
164
164
|
summary: "One object's page: the object card with its name, commands, facts, rows that open and one link elsewhere, then its sections as cards.",
|
|
165
165
|
when: "One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.",
|
|
166
166
|
instead: "\"Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key.\" (https://vercel.com/geist/context-card) Ours: that hover is a `HoverCard`, never this page. A list of records is a CollectionPage; a page of settings only is a SettingsPage, whose cards are SettingsSections; an Agent's Edit page in Nadia's window opens on its AgentProfileCard, the documented exception. A card of values a person saves is a setting card, never this one.",
|
|
167
|
-
behaviour: "\"For a static key/value metadata block on a detail page, use `Description`.\" (https://vercel.com/geist/entity) \"The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.\" (https://vercel.com/geist/entity) \"Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).\" (https://vercel.com/geist/entity) \"Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`).\" (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (a secondary, then the primary as the filled button, then the three dots, in `PageActions`' order, on the name's row while the name keeps 128 px, as on a phone, and under it otherwise; the primary is the one thing the object waits on its viewer for, such as approving a company that waits for approval, beside its alternative as the secondary, and an object with nothing waiting has none),
|
|
167
|
+
behaviour: "\"For a static key/value metadata block on a detail page, use `Description`.\" (https://vercel.com/geist/entity) \"The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.\" (https://vercel.com/geist/entity) \"Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).\" (https://vercel.com/geist/entity) \"Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`).\" (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (a secondary, then the primary as the filled button, then the three dots, in `PageActions`' order, on the name's row while the name keeps 128 px, as on a phone, and under it otherwise; the primary is the one thing the object waits on its viewer for, such as approving a company that waits for approval, beside its alternative as the secondary, and an object with nothing waiting has none), the mark at 64 stands beside the name and optional line in the header, for every kind of object, with no preview box, since a product object has no picture of itself as a deployment has its screenshot; full-width facts follow in four columns once they have 36rem and two below (an object that exists always has one; an object not made yet, such as an account's plan before it chooses one, has none, and its card is the header alone, its name saying so and, for a viewer who may, its primary making it), each a muted label over its value in body text, then an optional footer with a hint at the start and one link at the end. Optional `entries` follow in a card of their own 12 px under it: rows that open one by one, each with its chevron first (it turns down when open), its title, and its summary at the trailing edge, as Vercel's Build Logs and Deployment Checks rows; an entry marked `defaultOpen` opens with the page, for a link that names it. The footer takes a link only, so no Save or other command of the object fits in it; the object's changes live in its sections, each a setting card with its own footer. The sections follow, 24 apart, each drawing its own states. The card is neutral; colour belongs to the company's compact identity, a semantic fact value, or an entry's status summary, with no coloured card ground.",
|
|
168
168
|
words: '"Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen." (https://vercel.com/geist/entity) "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: sentence case throughout. The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact\'s label is a noun ("Plan"), its value the figure; an entry\'s title is a noun phrase; the hint is one sentence ("To update it, push to the main branch."); the link names where it goes ("Deployments"); the menu\'s trigger reads "More for {name}".',
|
|
169
|
-
access: '"Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t wrap the component in extra paragraphs that break the list semantics." (https://vercel.com/geist/description) Ours: with `headingProps` the name is the page\'s h1; without them it is text, for a product whose chrome already titles the page. The mark is decorative beside the
|
|
169
|
+
access: '"Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t wrap the component in extra paragraphs that break the list semantics." (https://vercel.com/geist/description) Ours: with `headingProps` the name is the page\'s h1; without them it is text, for a product whose chrome already titles the page. The mark is decorative beside the name. Each entry is an h2 heading holding a button with `aria-expanded` that controls its panel.',
|
|
170
170
|
},
|
|
171
171
|
{
|
|
172
172
|
name: "ObjectSection",
|
|
173
173
|
module: "object-workspace",
|
|
174
174
|
family: "Compositions",
|
|
175
175
|
summary: "A section of an object's page: a card that owns one decision about the object.",
|
|
176
|
-
when: "A part of an ObjectPage a person reads or changes on its own: a customer's Company details, an Agent's Instructions, a Library entry's source.",
|
|
176
|
+
when: "A part of an ObjectPage a person reads or changes on its own: a customer's Company details, an Agent's Instructions, a Library entry's source, a Partner's services in Billing.",
|
|
177
177
|
instead: "Values a person edits and saves together are a SettingsSection; a list of the object's records is a RecordList with its heading; a passing condition is a MessageNotice.",
|
|
178
|
-
behaviour: "
|
|
179
|
-
words: 'The title names what the section holds ("Company", "Instructions"); the description says in one sentence what it holds or lets a person change;
|
|
178
|
+
behaviour: "As Vercel's Spend Management, Payment Method and AI Gateway Credit cards on its Billing page: a resting card, its title and the one-sentence description directly under it, both always given; at the header's trailing edge `actions`, drawn as every card's header draws them (`CardActions`: the muted `meta`, then up to two secondaries as outline buttons, the primary as the filled one, then the three dots), so a way to another page is a secondary with its `link`, an outline button named for the page, never a text link; then its body; then the optional `footer`, a strip under a divider with its sentence at the start and its one command at the end as an outline button. No icon in the header. Neutral throughout. A section that edits in place swaps to the same section as a `SettingsSection`, with Cancel (`save.cancel`) before Save.",
|
|
179
|
+
words: 'The title names what the section holds ("Company", "Instructions"); the description says in one sentence what it holds or lets a person change; a command is a verb on it ("Edit"), and a way to another page is that page\'s name ("Statements"); `meta` is a short count or time ("2 of 5 Agents"); the footer\'s sentence is a limit or where the section\'s object changes ("At most three cards.").',
|
|
180
180
|
access: "The title is a heading one level under the page (h2), deeper only under another heading through `headingLevel`.",
|
|
181
181
|
},
|
|
182
182
|
{
|
|
@@ -186,7 +186,7 @@ export const USAGE = [
|
|
|
186
186
|
summary: 'The page that answers "what needs attention?": is anything wrong, and where.',
|
|
187
187
|
when: "\"For in-product cards and dashboard tiles, use `Card`; Book is too decorative for repeated UI rows.\" (https://vercel.com/geist/book) Ours: the landing page of an area a person checks: the Portal's Dashboard, Analytics, Statements, System health, an Agent's Usage.",
|
|
188
188
|
instead: "A list of records a person finds one of is a `CollectionPage`; one record is an `ObjectPage`. Never a stack of previews of every section: each exception links to its owner instead.",
|
|
189
|
-
behaviour: '"Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars." (https://vercel.com/geist/skeleton) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the reading period on the title row, then the figures in one row of equal `KpiCard`s (as many columns as figures up to five, five reading two by two from md, three over two from lg and one row from xl at 1280 px; six as three over three, more in rows of four; one column below md), then the chart cards, then the exceptions. Cards stand 24 px apart with no heading between them (the figures 16 px apart in their row), and the title row has no title: the path names the page. Its cards are dashboard cards: a figure or a chart that reads, drills into its owner and holds no setting; neither an object card nor a setting card appears here. Colour sits in a figure\'s change and tone, never in the page. It has no states of its own: each card and the exceptions\' `RecordList` draw theirs.',
|
|
189
|
+
behaviour: '"Show a Skeleton when async data fills a known layout: table rows, card grids, profile blocks, sidebars." (https://vercel.com/geist/skeleton) "Use the Error component as a block surface when a section or page-level resource failed to load: a panel, a dashboard card, a route boundary." (https://vercel.com/geist/error) Ours: the reading period on the title row, then the figures in one row of equal `KpiCard`s (as many columns as figures up to five, five reading two by two from md, three over two from lg and one row from xl at 1280 px; six as three over three, more in rows of four; one column below md), then the chart cards, then the exceptions. Cards stand 24 px apart with no heading between them (the figures 16 px apart in their row), and the title row has no title: the path names the page. Its cards are dashboard cards: a figure or a chart that reads, drills into its owner and holds no setting; neither an object card nor a setting card appears here. Colour sits in a figure\'s change and tone, never in the page. It has no states of its own but one: when nothing has happened yet, `nothingYet` is one muted line in place of the figures and charts, never a row of figures that all read zero; each card and the exceptions\' `RecordList` draw theirs.',
|
|
190
190
|
words: 'The product words every figure, chart and exception. A figure\'s label names its measure ("Active Agents", "Spend"), the chart\'s title names its reading ("Usage"), and the exceptions\' heading says what they are ("Needs attention").',
|
|
191
191
|
access: "Each chart card is a named section at the page's heading level, and the exceptions carry their own heading; figures are text, never colour alone.",
|
|
192
192
|
},
|
|
@@ -252,7 +252,7 @@ export const USAGE = [
|
|
|
252
252
|
summary: "A card of one setting that says what changing it does and ends in a footer.",
|
|
253
253
|
when: "One setting a person changes on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications. A typed value takes `save`; a switch or a short reversible choice applies at once through its own control's change, with no Save. Also a plan-gated feature, a delete card, one read-only value (an ID in a read-only mono InputGroup with its copy button, no Save), and a paid quantity (its stepper field, the price as the description, a two-fact summary under it).",
|
|
254
254
|
instead: "Read-only facts of an object are a SettingsFactsSection; a table or a list of records is a TableCard; Theme and Language live in the account menu; a record's edit in a list is a RowEditForm.",
|
|
255
|
-
behaviour: '"Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: one setting per card, a single SettingsField with the description its only help, unless the card\'s description covers several settings: then they are its SettingsRows, switches and selects together. A typed value (a name, a URL, a server, a port, a key) gets its own card. A semantic subgroup of related controls inside a field, such as radios or checkboxes, is a `FieldSet` with a `FieldLegend`. Several settings in one card are declared by SettingsRows, never by classes at the call site. "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip` that names the resolver." (https://vercel.com/geist/toggle) Ours: a switch never applies on change; it is a row of the card, a draft until the footer\'s Save, as Vercel\'s settings cards are. A switch blocked from above is shown off and disabled, the footer saying why and never a tooltip. Required: the title and the description. The header\'s actions stand at the title\'s right; on a card narrower than 28 rem they keep the title\'s row and the description runs under both, as Vercel\'s cards read on a phone, and when the title\'s longest word would not fit beside them they move under the title, so they never cover it. The footer\'s left line (`footerHint`, `save.hint`) is optional and specific to the card, never a generic line repeated on every card: a limit, what a value is for, a plan it needs, a link; absent, it is nothing, and a card with neither a line nor a button has no footer. Ours: `save`: a typed value, one card with its own Save in the footer, always visible. The section owns the changed state: Save stays disabled until a field differs from what is saved and says `pendingLabel` while saving with Cancel beside it; a completed save calls `saved`, and the product raises one toast from its catalogue ("Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." https://vercel.com/geist/toast), and Save returns to disabled, with no saved state in the footer. Ours: the section never raises a toast itself. A failed save keeps every value and shows under its field, or above the footer when no field owns it. `tone` marks a state with a command (a failed payment, a trial ending): a 1px border and a footer tinted in the hue with its line in it, the line saying the condition in words; title, line, fields and buttons stay neutral, an outline secondary then a default primary. A button takes the hue of its command, not of the card: `destructive` (red) for a permanent loss (Delete), `warning` (amber) for a disruptive command that can be undone (Pause, Archive). A delete card is `tone="error"` with the object\'s summary as its body; an archive card is neutral with a `warning` button in the footer. "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "One Note per concept." (https://vercel.com/geist/note) Ours: a message about the fields inside is a MessageNotice in the body, the card staying neutral. "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: `lockedReason` (Geist\'s disabled wall) is the reason, written as the footer\'s line, not in a tooltip; it keeps the fields in view, inert with muted text, under a not-allowed cursor, the title and line unchanged; `unlock` is the way to get access, left out when nothing the person does unlocks it. A locked section has no `save` and no header `actions`.',
|
|
255
|
+
behaviour: '"Groups related form controls inside a bordered card with optional footer actions." (https://vercel.com/geist/fieldset) Ours: one setting per card, a single SettingsField with the description its only help, unless the card\'s description covers several settings: then they are its SettingsRows, switches and selects together. A typed value (a name, a URL, a server, a port, a key) gets its own card. A semantic subgroup of related controls inside a field, such as radios or checkboxes, is a `FieldSet` with a `FieldLegend`. Several settings in one card are declared by SettingsRows, never by classes at the call site. "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) "Pair with a form footer only when the setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip` that names the resolver." (https://vercel.com/geist/toggle) Ours: a switch never applies on change; it is a row of the card, a draft until the footer\'s Save, as Vercel\'s settings cards are. A switch blocked from above is shown off and disabled, the footer saying why and never a tooltip. Required: the title and the description. A `status` stands right after the title, as Vercel\'s plan card puts "Active" after "Pro Plan". The header\'s `actions` are drawn as every card draws them (`CardActions`: the muted meta, up to two secondaries as outline buttons, the primary as the filled one, the three dots), a way to another page among them as an outline button named for it; a card whose value is itself shown there, as Vercel\'s Team Avatar, takes `control` instead. They stand at the title\'s right; on a card narrower than 28 rem they keep the title\'s row and the description runs under both, as Vercel\'s cards read on a phone, and when the title\'s longest word would not fit beside them they move under the title, so they never cover it. The footer\'s left line (`footerHint`, `save.hint`) is optional and specific to the card, never a generic line repeated on every card: a limit, what a value is for, a plan it needs, a link; absent, it is nothing, and a card with neither a line nor a button has no footer. Ours: `save`: a typed value, one card with its own Save in the footer, always visible. The section owns the changed state: Save stays disabled until a field differs from what is saved and says `pendingLabel` while saving with Cancel beside it; a completed save calls `saved`, and the product raises one toast from its catalogue ("Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." https://vercel.com/geist/toast), and Save returns to disabled, with no saved state in the footer. Ours: the section never raises a toast itself. A failed save keeps every value and shows under its field, or above the footer when no field owns it. `tone` marks a state with a command (a failed payment, a trial ending): a 1px border and a footer tinted in the hue with its line in it, the line saying the condition in words; title, line, fields and buttons stay neutral, an outline secondary then a default primary. A button takes the hue of its command, not of the card: `destructive` (red) for a permanent loss (Delete), `warning` (amber) for a disruptive command that can be undone (Pause, Archive). A delete card is `tone="error"` with the object\'s summary as its body; an archive card is neutral with a `warning` button in the footer. "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "One Note per concept." (https://vercel.com/geist/note) Ours: a message about the fields inside is a MessageNotice in the body, the card staying neutral. "Disabled checkboxes still need a Tooltip naming the reason; a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: `lockedReason` (Geist\'s disabled wall) is the reason, written as the footer\'s line, not in a tooltip; it keeps the fields in view, inert with muted text, under a not-allowed cursor, the title and line unchanged; `unlock` is the way to get access, left out when nothing the person does unlocks it. A locked section has no `save` and no header `actions`.',
|
|
256
256
|
words: '"Helper text is sentence case, one sentence with a trailing period, on a sibling element wired through `aria-describedby`." (https://vercel.com/geist/input) Ours: the description is that helper text for the whole card, and no field has its own. "Render an optional one-sentence description as a sibling under the label that explains ON only. Don’t describe OFF; it’s the negation." (https://vercel.com/geist/toggle) Ours: a header-switch card\'s description says what turning it on does. The title names the values ("Personal details"); the description says what changing them does, in one line; the footer line is a Learn more link, a limit ("Use 32 characters at most."), what stays unaffected, or what is blocked and why ("Ask an owner to change this."); Save and Saving come from the product\'s catalogue, and so does the toast a `saved` callback raises; a delete card\'s description opens "Permanently delete".',
|
|
257
257
|
access: "\"Provide an accessible name through `children`, `aria-label`, or `aria-labelledby`.\" (https://vercel.com/geist/toggle) Ours: the title is the section's h2, or an h3 with `headingLevel` inside an ObjectPage's row, and names the form that saves it, and the header switch. The footer's line is one status, announced politely; a failure under a field marks the control invalid and describes it. Locked fields are inert, so the section's title, description and reason are what a screen reader meets.",
|
|
258
258
|
},
|
|
@@ -289,6 +289,17 @@ export const USAGE = [
|
|
|
289
289
|
words: "Sentence case, verb + noun naming the destination or the result: *Open Portal*, *Download invoice*. A destination outside the product ends in the arrow as `suffix`.",
|
|
290
290
|
access: 'A native `a` with an `href`, never `role="button"`. An icon-only link carries an `aria-label` or `aria-labelledby` naming destination, and the type requires it.',
|
|
291
291
|
},
|
|
292
|
+
{
|
|
293
|
+
name: "CardActionsRow",
|
|
294
|
+
module: "page-actions",
|
|
295
|
+
family: "Actions",
|
|
296
|
+
summary: "The end of a card's header: what the card's reader can do from it, and where it leads.",
|
|
297
|
+
when: "The header of every card composition draws it from the card's `actions`: ObjectPage, ObjectSection, SettingsSection, SettingsFactsSection and TableCard. A page gives the card its `actions` and never renders this row.",
|
|
298
|
+
instead: "A page's own commands are `PageActions` on the title's row. A row's commands are its one or two buttons and its `ActionMenu`. A setting card whose value stands at its header's end, such as an avatar upload, gives `SettingsSection` its `control`. A link inside the card's description or footer line is a `TextLink` in that sentence.",
|
|
299
|
+
behaviour: 'As Vercel\'s card headers draw it (the plan card\'s "Invoices" and "Usage", a deployment\'s "Share" and "Logs" before "Visit", the overview\'s Usage card\'s "Billing"): the muted `meta` (a period or a count), the reading `period`, up to two secondaries as outline buttons, the primary as the filled button, and the three dots last. A way to another page is a secondary with its `link`, drawn as a button like the others and named for the page; it is never a text link in the header\'s corner. A page has one filled button, so a card on a page whose primary stands elsewhere takes outline buttons only. It wraps under the title when the header is narrow, as the card\'s header places it.',
|
|
300
|
+
words: 'A command is a verb on the card\'s object ("Add card", "Buy Extra usage for Customers"); a way to another page is that page\'s name as its navigation writes it ("Statements"); `meta` is a short count or period ("2 of 5 Agents").',
|
|
301
|
+
access: "DOM order is visual order. A command whose label does not name its target carries `accessibleName`. A way to another page is a real link.",
|
|
302
|
+
},
|
|
292
303
|
{
|
|
293
304
|
name: "CopyButton",
|
|
294
305
|
module: "copy-button",
|
|
@@ -998,8 +1009,8 @@ export const USAGE = [
|
|
|
998
1009
|
module: "text-link",
|
|
999
1010
|
family: "Navigation",
|
|
1000
1011
|
summary: "The classes of a link that reads as text: `inline` inside a sentence, `plain` on its own, `quiet` for a muted way out.",
|
|
1001
|
-
when: "A link inside a sentence,
|
|
1002
|
-
instead: "A command is a `Button`; a destination drawn as a button is a `ButtonLink`. Going to a record from its row is the record's name in `RecordIdentity`. Breadcrumb and back navigation are not text links: they keep their own quieter navigation treatment.",
|
|
1012
|
+
when: "A link inside a sentence, such as a card's description or its footer's line (`inline`, blue and underlined at rest); a link that is itself the value, such as a record's name or a fact (`plain`); or a muted way to the documentation at the end of a footer's line, *Learn more* (`quiet`). As on Vercel's dashboard, a text link never stands alone: not in a card's header, not on a line of its own between cards.",
|
|
1013
|
+
instead: "A command is a `Button`; a destination drawn as a button is a `ButtonLink`. A card's way to another page is a command in its header's `actions` (`CardActions`), an outline button named for the page, as Vercel's plan card draws \"Invoices\"; a page's is in `PageActions`. Going to a record from its row is the record's name in `RecordIdentity`. Breadcrumb and back navigation are not text links: they keep their own quieter navigation treatment.",
|
|
1003
1014
|
behaviour: "Classes only: the caller renders the real anchor or router link. `inline` thickens its underline on hover; `plain` and `quiet` underline on hover. The underline sits 4 px under the text in every kind. Paint changes ride the shared paint transition. Colour: only `inline` takes the link blue, as Vercel puts blue on links and nowhere else in running text; `plain` keeps the colour of the text around it, and `quiet` is muted and turns ink on hover, which is how a card footer's or a list note's *Learn more* reads. A link that leaves the product ends in the arrow icon after its text, which `quiet` sizes.",
|
|
1004
1015
|
words: "The link's text names where it goes: *Open Billing*, *Read the privacy notice*; never *Click here* or a bare URL.",
|
|
1005
1016
|
access: "A real `a` with an `href`. A link that leaves the product says so in its text or carries the arrow with a name. Focus is the base layer's 2 px outline.",
|
|
@@ -1209,7 +1220,7 @@ export const USAGE = [
|
|
|
1209
1220
|
summary: "Read-only facts about one object, framed as a card with a title, a line, the facts and a footer.",
|
|
1210
1221
|
when: "Read-only facts about one object: who it is, where it belongs, its identifiers; and a status, a read-only card whose `action` is the one action that fixes it. `SettingsFactsSection` frames them as a card; `ObjectFacts` is the list alone.",
|
|
1211
1222
|
instead: "Facts a person changes are a `SettingsSection` with its own Save. One server-given value, an ID, is a `SettingsSection` with the value in a read-only mono `InputGroup` and its copy button, no Save. Facts compared across records are a table. A relation is its identity or a `Tag`, never its own card.",
|
|
1212
|
-
behaviour: "\"Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`).\" (https://vercel.com/geist/description) Ours: required: the description and the footer's left line (`footerHint`), as on a `SettingsSection`. Two places take a control, each for one job: `
|
|
1223
|
+
behaviour: "\"Use `<Description>` for definition-list metadata: a short Title Case key paired with a single value (`Last Deployed`, `Region`, `Plan`).\" (https://vercel.com/geist/description) Ours: required: the description and the footer's left line (`footerHint`), as on a `SettingsSection`. Two places take a control, each for one job: `actions` at the header's end are the commands on the facts, the Edit that opens their editor, drawn as every card's header draws them (`CardActions`); `action` at the footer's right, beside its line, is the one action the card's state asks for, as a status card's fix (Update, Start) and every Vercel settings card's button stand there. Facts are plain pairs, the label above its value, in two equal columns from 640 px (`sm`) and one column below it. Every label stays when its value is missing, as *—*. A long value spans both columns. No fact gets a box of its own. In a side column, `presentation=\"summary\"` drops the card, the description and the footer line.",
|
|
1213
1224
|
words: '"Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: labels are nouns in sentence case, no colon: *VAT number*. Identifiers in mono with a copy button, dates in the person\'s locale. The footer line says what the facts are for or links to the docs.',
|
|
1214
1225
|
access: '"Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t put interactive controls in the title slot." (https://vercel.com/geist/description) Ours: a `dl` of `dt` and `dd`, each value named by its label. The section is labelled by its heading, which also takes focus when an editor closes. A dash carries screen-reader text.',
|
|
1215
1226
|
},
|
|
@@ -1242,7 +1253,7 @@ export const USAGE = [
|
|
|
1242
1253
|
summary: "The frame a collection's table sits in: a heading with the collection's own toolbar at its trailing edge, the table, a labelled total, and the recessed footer strip.",
|
|
1243
1254
|
when: "A table of records in a card: its heading, its own toolbar, the table, a labelled total and the recessed footer strip.",
|
|
1244
1255
|
instead: "An entity collection that is the page's whole job is `CollectionPage`. A chart is `ChartCard`. One object's facts are `SettingsFactsSection`.",
|
|
1245
|
-
behaviour: "The heading and a separator come first when given, the toolbar on the heading's row at its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under 576 px the toolbar takes its own line under the title. The table's first and last columns stand in from the card's edges by the card's spacing, so the first column lines up with the title. The summary row is a labelled total under the table, padded like a table footer so its label lines up with the first column and set in ink, medium text; the footer strip holds the hint on the left and the count or paging on the right. A `note` about the whole list stands in a strip of its own under that one: one muted line with an optional *Learn more* at the left and one secondary action at the right, as Vercel ends a deployments list (\"Deployment Retention is enabled\", *View Recently Deleted*).",
|
|
1256
|
+
behaviour: "The heading and a separator come first when given, a `status` right after the title, the heading's `actions` drawn as every card's header draws them (`CardActions`), and the toolbar on the heading's row at its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under 576 px the toolbar takes its own line under the title. The table's first and last columns stand in from the card's edges by the card's spacing, so the first column lines up with the title. The summary row is a labelled total under the table, padded like a table footer so its label lines up with the first column and set in ink, medium text; the footer strip holds the hint on the left and the count or paging on the right. A `note` about the whole list stands in a strip of its own under that one: one muted line with an optional *Learn more* at the left and one secondary action at the right, as Vercel ends a deployments list (\"Deployment Retention is enabled\", *View Recently Deleted*).",
|
|
1246
1257
|
words: "“Pagination labels are `Previous` and `Next`. Page-count copy reads `Page 2 of 7` or `21–40 of 142` with an en-dash inside the range.” (https://vercel.com/geist/table) Ours: the title names the collection. The footer is a count or the paging; the summary is a labelled total. Never a help sentence in the footer.",
|
|
1247
1258
|
access: "A `section` whose title is an `h2`; the summary is a `dl`.",
|
|
1248
1259
|
},
|
|
@@ -227,6 +227,10 @@
|
|
|
227
227
|
[data-slot="button"],
|
|
228
228
|
[data-slot="dropdown-menu-trigger"][aria-label]
|
|
229
229
|
)
|
|
230
|
+
),
|
|
231
|
+
:has(
|
|
232
|
+
> [data-slot="card-actions"]:only-child
|
|
233
|
+
> :only-child:is([data-slot="button"], [data-slot="dropdown-menu-trigger"][aria-label])
|
|
230
234
|
)
|
|
231
235
|
) {
|
|
232
236
|
grid-column: 1;
|
|
@@ -254,6 +258,11 @@
|
|
|
254
258
|
[data-slot="button"],
|
|
255
259
|
[data-slot="dropdown-menu-trigger"][aria-label]
|
|
256
260
|
)
|
|
261
|
+
),
|
|
262
|
+
:not([data-narrow-action]):has(
|
|
263
|
+
> [data-slot="card-action"]
|
|
264
|
+
> [data-slot="card-actions"]:only-child
|
|
265
|
+
> :only-child:is([data-slot="button"], [data-slot="dropdown-menu-trigger"][aria-label])
|
|
257
266
|
)
|
|
258
267
|
):has(> [data-slot="card-title"]:first-child):not(
|
|
259
268
|
:has(
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.173",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"imports": {
|
|
6
6
|
"#jsx": "./src/jsx/index.ts",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"@base-ui/react": "^1.9.0",
|
|
73
73
|
"@iconify-icons/logos": "^2.0.3",
|
|
74
74
|
"@iconify/react": "^6.0.2",
|
|
75
|
-
"@nadicodeai/design-system": "12.1.
|
|
75
|
+
"@nadicodeai/design-system": "12.1.173",
|
|
76
76
|
"@tanstack/react-table": "^9.3.1",
|
|
77
77
|
"@vgpu/wgsl": "0.6.0",
|
|
78
78
|
"class-variance-authority": "^0.7.1",
|