@nanisoft/prism-llms 0.3.0 → 0.5.0

package/dist/md/components/field.md

@@ -0,0 +1,116 @@
+# Field
+
+The labelled wrapper that pairs a form control with its label, description and error.
+
+```tsx
+import { Field, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@nanisoft/prism-ui/components/field'
+```
+
+## Overview
+
+A Field pairs a form control with its label, its helper text and its error. It
+ships as `Field`, `FieldLabel`, `FieldDescription`, `FieldError` and
+`FieldGroup`, all from the same module.
+
+The parts are presentational, and the consumer owns the wiring. `FieldLabel`
+renders a native `<label>` and takes the control's `id` as `htmlFor`.
+`FieldDescription` and `FieldError` take an `id` that the control references
+through `aria-describedby`. Nothing generates an `id`, so a field stays a
+Server Component and the markup is settled before it reaches the browser.
+
+`FieldError` carries `role="alert"`, so it is announced when it appears. Render
+it only while the field is invalid, and mark the control itself with
+`aria-invalid` so the failure is visible as well as spoken.
+
+## Guidelines
+
+### When to use
+
+Use a Field around any form control that needs a visible label. Pair it with
+`Input`, `Textarea` or a future control that does not ship its own label.
+
+Use `FieldGroup` when several fields belong to one decision, such as an address
+or a notification preference, so the set reads as one block.
+
+### When not to use
+
+Do not use a Field as a layout grid. It controls label, control, helper and
+error order, not column placement; wrap fields in your own grid for that.
+
+Do not use `FieldDescription` as the only label. A placeholder or a hint is not
+an accessible name, and it disappears as soon as the reader types.
+
+Do not render `FieldError` alongside valid content. An error that is always
+present stops meaning anything.
+
+### Best practices
+
+- Put the label above the control. It survives zoom and translation better than
+  a label to the side.
+- Point `htmlFor` at the control's `id`, and keep those two values stable so the
+  label is programmatically attached rather than merely adjacent.
+- Reference both the description and the error from `aria-describedby`, and put
+  the error first when both are present.
+- Replace the helper text with the error while the field is invalid instead of
+  stacking both. The reader needs one instruction at a time.
+- Mark the control with `aria-invalid` and let the error sentence say what to do
+  next. The colour is a reinforcement, never the message.
+- Group related fields with `FieldGroup` and give the group a heading when it
+  helps a screen reader move through a long form.
+
+### Content guidelines
+
+- Start an error with what is wrong and how to fix it: "Enter an address in the
+  form name@example.com", not "Invalid input".
+- Keep a helper line to one sentence. A paragraph belongs above the field, not
+  under it.
+- Do not label a field with an instruction. "Email" is a name; "Enter your
+  email address to continue" is copy that belongs beside the control.
+
+**A group of fields: two valid controls and one showing an error.**
+
+```tsx
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from '@nanisoft/prism-ui/components/field'
+import { Input } from '@nanisoft/prism-ui/components/input'
+import { Textarea } from '@nanisoft/prism-ui/components/textarea'
+
+/** A group of fields: two valid controls and one showing an error. */
+export default function FieldDemo() {
+  return (
+    <FieldGroup className="max-w-measure-narrow">
+      <Field>
+        <FieldLabel htmlFor="field-display-name">Display name</FieldLabel>
+        <Input id="field-display-name" defaultValue="Ada Lovelace" />
+        <FieldDescription>Shown on your profile and in mentions.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="field-bio">Bio</FieldLabel>
+        <Textarea id="field-bio" placeholder="A sentence about yourself." />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="field-email">Email</FieldLabel>
+        <Input
+          id="field-email"
+          type="email"
+          defaultValue="not-an-email"
+          aria-invalid
+          aria-describedby="field-email-error"
+        />
+        <FieldError id="field-email-error">
+          Enter an address in the form name@example.com.
+        </FieldError>
+      </Field>
+    </FieldGroup>
+  )
+}
+```
+
+## Props
+
+> Extends: the native `<div>` element. No additional Prism-specific props.

package/dist/md/components/input.md

@@ -1,14 +1,93 @@
 # Input
 
-antd Input, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The single-line text control for a form.
 
-```ts
-import { Input } from '@nanisoft/prism-ui/components';
+```tsx
+import { Input } from '@nanisoft/prism-ui/components/input'
 ```
 
-`Input` is antd's [Input](https://ant.design/components/input), re-exported unchanged.
+## Overview
 
-- Extends: antd **Input** — for inherited props and demos, use the antd MCP (`antd_info Input`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+An Input is the single-line text control. It renders a native `<input>`, so it
+submits, validates, autocompletes and takes focus without extra work, and it
+accepts every standard input type.
 
-_No additional props beyond the antd base component._
+The focus ring is drawn at full strength rather than at half alpha, so it clears
+the 3:1 non-text threshold on every surface. When the control is marked with
+`aria-invalid`, the border and the ring switch to the destructive token, which
+makes a failed field visible as well as announced.
+
+## Guidelines
+
+### When to use
+
+Use an Input for a short, single-line value: a name, an address, a search term,
+a quantity, a date or a password.
+
+Pair it with a Field so the control keeps a visible label, and pass the correct
+`type` so mobile keyboards and browser validation both do their job.
+
+### When not to use
+
+Do not use an Input for free-form text longer than a line. A Textarea gives the
+reader room to see what they have written.
+
+Do not use one for a choice between options. A radio group, a select or a
+switch states the options and their current state; a text box asks the reader to
+remember them.
+
+Do not use an Input as a display field for a value the reader cannot change.
+Render the value as text.
+
+### Best practices
+
+- Keep a visible label. A placeholder is a hint, not a name, and it vanishes on
+  the first keystroke.
+- Choose the `type` and `inputMode` that match the value, and set `autoComplete`
+  so the browser can fill it. Getting this right saves more effort than any
+  visual detail.
+- Show the error beside the field and mark the control with `aria-invalid`.
+  Colour alone never carries the failure.
+- Disable a control only when the reason is visible nearby. A disabled input
+  with no explanation is a dead end.
+- Keep the default height and radius. Size is a token decision, and a taller
+  input breaks alignment with every other control on the row.
+
+### Content guidelines
+
+- A placeholder may show the expected format, for example `name@example.com`,
+  and nothing more.
+- A helper line states the rule, not the field's name: "At least eight
+  characters", not "Password".
+- Do not write an error in the imperative twice. One instruction per message.
+
+**Input types at rest, disabled, and marked invalid.**
+
+```tsx
+import { Field, FieldLabel } from '@nanisoft/prism-ui/components/field'
+import { Input } from '@nanisoft/prism-ui/components/input'
+
+/** Input types at rest, disabled, and marked invalid. */
+export default function InputDemo() {
+  return (
+    <div className="flex max-w-measure-narrow flex-col gap-4">
+      <Field>
+        <FieldLabel htmlFor="input-email">Email</FieldLabel>
+        <Input id="input-email" type="email" placeholder="name@example.com" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-workspace">Workspace</FieldLabel>
+        <Input id="input-workspace" defaultValue="Locked workspace" disabled />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-handle">Handle</FieldLabel>
+        <Input id="input-handle" defaultValue="with spaces" aria-invalid />
+      </Field>
+    </div>
+  )
+}
+```
+
+## Props
+
+> Extends: the native `<input>` element. No additional Prism-specific props.

package/dist/md/components/kbd.md

@@ -0,0 +1,77 @@
+# Kbd
+
+The inline label for a keyboard key or shortcut.
+
+```tsx
+import { Kbd } from '@nanisoft/prism-ui/components/kbd'
+```
+
+## Overview
+
+A Kbd is the inline label for a keyboard key or shortcut. It renders a native
+`<kbd>`, so assistive technology can identify it as input the reader types
+rather than as text to read.
+
+It sits inline with surrounding copy and takes its surface from the muted token.
+Shortcuts are written with one element per key, so `Ctrl` and `K` are two Kbd
+elements with a space between them.
+
+## Guidelines
+
+### When to use
+
+Use a Kbd when the reader must press a key to do something: a documented
+shortcut, a hint in a menu or a tooltip, or an onboarding step that names the
+keys.
+
+### When not to use
+
+Do not use a Kbd for a piece of code or a filename. Inline code already has its
+own treatment.
+
+Do not use one as a button label. A control that can be clicked shows a verb; a
+keyboard shortcut is an alternative, not the action.
+
+Do not use a Kbd for input the reader does not type, such as the name of a menu
+command.
+
+### Best practices
+
+- Use one Kbd per key. A single element holding the whole chord hides the
+  individual keys from anyone scanning or reading by element.
+- Name the modifier as the keyboard shows it and say which platform you assume.
+  There is no server-safe way to detect the reader's platform, so "Ctrl on
+  Windows and Linux, Cmd on macOS" is more honest than picking one.
+- Keep the hint inside a sentence that already states the action, so the keys
+  are never the only instruction.
+- Do not style a Kbd to look pressable. It reports a key, it does not receive a
+  press, and it is excluded from pointer events on purpose.
+- Keep the label to the key itself. Do not add the word "key" after it, because
+  the element already says what it is.
+
+**Shortcuts written with one element per key.**
+
+```tsx
+import { Kbd } from '@nanisoft/prism-ui/components/kbd'
+
+/** Shortcuts written with one element per key. */
+export default function KbdDemo() {
+  return (
+    <div className="flex flex-col gap-3 text-sm">
+      <p className="flex items-center gap-1.5">
+        Open the command menu <Kbd>Ctrl</Kbd> <Kbd>K</Kbd>
+      </p>
+      <p className="flex items-center gap-1.5">
+        Save the draft <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
+      </p>
+      <p className="flex items-center gap-1.5">
+        Close the dialog <Kbd>Esc</Kbd>
+      </p>
+    </div>
+  )
+}
+```
+
+## Props
+
+> Extends: the native `<kbd>` element. No additional Prism-specific props.

package/dist/md/components/pagination.md

@@ -1,14 +1,102 @@
 # Pagination
 
-antd Pagination, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The control that moves between pages of a paged collection.
 
-```ts
-import { Pagination } from '@nanisoft/prism-ui/components';
+```tsx
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@nanisoft/prism-ui/components/pagination'
 ```
 
-`Pagination` is antd's [Pagination](https://ant.design/components/pagination), re-exported unchanged.
+## Overview
 
-- Extends: antd **Pagination** — for inherited props and demos, use the antd MCP (`antd_info Pagination`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Pagination moves between the pages of a paged collection. It ships as a
+parent and six parts: `Pagination`, `PaginationContent`, `PaginationItem`,
+`PaginationLink`, `PaginationPrevious`, `PaginationNext` and
+`PaginationEllipsis`, all from the same module.
 
-_No additional props beyond the antd base component._
+`Pagination` is a labelled `<nav>`, and `PaginationContent` is a `<ul>` so the
+page numbers form one list for assistive technology. The current page is marked
+with `aria-current="page"`, the step controls carry their own accessible names,
+and the ellipsis is hidden from the accessibility tree because the links around
+it already name the range.
+
+## Guidelines
+
+### When to use
+
+Use a Pagination when a result set is longer than one screen and the total is
+known. The page a reader is on, and how many pages exist, are both part of the
+information the control carries.
+
+### When not to use
+
+Do not use it for a short list that fits on one page. A single page link is
+furniture around nothing.
+
+Do not use it as a step control in a wizard. A checkout or an onboarding flow
+has a fixed order and no page numbers, so a pair of previous and next buttons
+describes it better.
+
+Do not replace it with infinite scroll and no page numbers. A reader who cannot
+return to a position loses their place.
+
+### Best practices
+
+- Render the current page as a link with `isActive`, so it is announced with
+  `aria-current="page"` and stays consistent in the row.
+- Show a window of pages, not every page. Use `PaginationEllipsis` for the
+  hidden run and keep the first, last and neighbours visible.
+- Keep `PaginationPrevious` and `PaginationNext` at the ends of the row. On
+  narrow layouts their labels collapse to the chevron and the accessible name
+  stays complete.
+- Pass a real `href` on each link. A page of results is a location, so the link
+  should be right-clickable and openable in a new tab.
+- State the range near the control, for example "1 to 20 of 348". Page numbers
+  alone do not tell the reader how much remains.
+
+**A paged result set with the second page current.**
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@nanisoft/prism-ui/components/pagination'
+
+/** A paged result set with the second page current. */
+export default function PaginationDemo() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+```
+
+## Props
+
+> Extends: the native `<nav>` element. No additional Prism-specific props.

package/dist/md/components/popover.md

@@ -1,14 +1,102 @@
 # Popover
 
-antd Popover, unchanged — a pass-through re-export. Import from '@nanisoft/prism-ui'.
+The anchored floating surface for content richer than a tooltip.
 
-```ts
-import { Popover } from '@nanisoft/prism-ui/components';
+```tsx
+import { Popover, PopoverTrigger, PopoverContent } from '@nanisoft/prism-ui/components/popover'
 ```
 
-`Popover` is antd's [Popover](https://ant.design/components/popover), re-exported unchanged.
+## Overview
 
-- Extends: antd **Popover** — for inherited props and demos, use the antd MCP (`antd_info Popover`).
-- Always import from '@nanisoft/prism-ui', never from `antd` directly.
+A Popover is a floating surface opened by a trigger. It ships as `Popover`,
+`PopoverTrigger` and `PopoverContent`, all from the same module. It is
+positioned by the library, flips near an edge, closes on Escape or an outside
+press, and returns focus to the trigger when it closes.
 
-_No additional props beyond the antd base component._
+A Popover is richer than a Tooltip and lighter than a Dialog. It can hold a
+small form, a filter set, or a compact detail view without covering the page the
+way a modal does.
+
+## Guidelines
+
+### When to use
+
+Use a Popover for content that is more than a label but not a whole screen: a
+share form, a filter panel, a date range, a small preview. It keeps the reader
+in context while offering more than the page shows.
+
+### When not to use
+
+Do not use a Popover for a required decision. An outside press can close it, so
+a flow that must be completed needs a Dialog.
+
+Do not put a single short explanation in a Popover. That is a Tooltip, which
+needs no click.
+
+Do not use a Popover as a menu of commands. A DropdownMenu carries the menu
+semantics and the keyboard model a reader expects for actions.
+
+### Best practices
+
+- Use `side` and `align` to keep the panel near its trigger and clear of the
+  content it annotates, and let the library flip it near an edge.
+- Keep one task per Popover. If it needs its own tabs or steps, it has outgrown
+  the surface.
+- Use the trigger's `openOnHover` only when hovering is a convenience on top of
+  a click, never as the only way to open.
+- Because an outside press closes the popover, save or apply changes as they
+  happen, or ask before discarding.
+- Keep the trigger labelled. The popover's content does not name the trigger for
+  assistive technology.
+
+### Content guidelines
+
+- Lead with a short heading that names the panel, such as "Share this view".
+- Keep body copy to one or two sentences, and put detail in the form itself.
+- Use sentence case for the heading and no closing period on a fragment.
+
+**A popover holding a small share form.**
+
+```tsx
+'use client'
+
+import { Button } from '@nanisoft/prism-ui/components/button'
+import { Input } from '@nanisoft/prism-ui/components/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@nanisoft/prism-ui/components/popover'
+
+/** A popover holding a small share form. */
+export default function PopoverDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger>Share</PopoverTrigger>
+      <PopoverContent>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium">Share this view</p>
+            <p className="text-muted-foreground text-sm">
+              Anyone with the link can read, not edit.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Input defaultValue="https://prism.nanisoft.com/themes" readOnly />
+            <Button variant="outline">Copy</Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+## Props
+
+**`open`** `boolean` · optional · default: — — The controlled open state.
+**`defaultOpen`** `boolean` · optional · default: — — The initially open state, for an uncontrolled popover.
+**`onOpenChange`** `(open: boolean) => void` · optional · default: — — Called when the open state changes.
+**`modal`** `boolean | 'trap-focus'` · optional · default: `false` — Whether the popover traps interaction while open.
+**`children`** `React.ReactNode` · optional · default: — — The trigger and content.
+**`openOnHover`** `boolean` · optional · default: — — Whether the trigger should also open the popover on hover.
+**`side`** `'top' | 'right' | 'bottom' | 'left'` · optional · default: `bottom` — Which side of the trigger the popover is placed on.
+**`align`** `'start' | 'center' | 'end'` · optional · default: `center` — How the popover aligns against the trigger.
+**`sideOffset`** `number` · optional · default: `4` — The distance in pixels between the trigger and the popover.
+**`alignOffset`** `number` · optional · default: `0` — The offset in pixels along the alignment axis.

package/dist/md/components/product-mark.md

@@ -0,0 +1,123 @@
+# ProductMark
+
+A product's two-part colour mark: a brand-ink ring around the pack's own fill, beside the product's name in the brand ink.
+
+```tsx
+import { ProductMark } from '@nanisoft/prism-ui/components/product-mark'
+```
+
+## Overview
+
+A ProductMark is a product's two-part colour mark: a ring in the brand ink around
+a core in the product's own pack fill, beside the product's name in the same
+brand ink. It is a server component and ships no client code.
+
+The mark is promoted to a component because a product row and a product switcher
+both need it, and two hand-written copies is the arrangement this design system
+exists to remove. One implementation also means one place where the two colour
+laws are applied, and those laws are not obvious:
+
+**The ring and the name are ink; the core is a fill.** A pastel brand value is a
+fill and never text, so the core takes `primary`. The ring and the name take
+`brand-ink`, which is the role for something that must read *as the brand*:
+gated at 4.5:1 against the page, a card and the accent surface, in both modes of
+all six packs, worst measured 5.57:1. Plain `foreground` is not a brand ink, and
+neither is a foreground paired with a fill, so a mark drawn in `primary` text is
+the wrong answer twice over.
+
+**A product with no pack wears the spectrum, not a colourless mark.** A mark with
+no `pack` is drawn as a conic sweep of all five chart steps. A colourless mark
+would take the reading page's accent and change per site, so a product with no
+single colour would be a different colour on every site that listed it. The one
+entry with no pack is the company root, and the spectrum says so once rather
+than five times.
+
+## Guidelines
+
+### When to use
+
+Use a ProductMark wherever a reader is being shown which product they are in, or
+which of a set of products a link goes to: a product row, a product switcher, a
+site header's brand lockup, a footer grid. Wherever a site draws the same mark
+twice, it should be drawing this.
+
+Pass the product's `id` as the key within the set it is distinguished in. It is
+carried on the DOM as `data-product`, and it is what makes two marks in the same
+view traceable to their product.
+
+### When not to use
+
+Do not use a ProductMark to colour a section, a surface or a heading. The mark
+identifies a member of a set, and the design system keeps mark and ground on
+separate axes for exactly that reason: a pack is a signal, never a ground.
+
+Do not put a boundary on a ProductMark's disc. A pack boundary moves the pack's
+corner radius as well as its colour, and the mark is a fully-rounded element, so
+a boundary on it changes nothing a reader can see. Carry the pack through `pack`
+instead, which is the axis the mark actually reads.
+
+Do not hand-write a second mark. If a surface needs a mark this component does
+not cover, extend this one.
+
+### Best practices
+
+- Give every product in a set a distinct pack, or let one wear the spectrum. A
+  set where two members share a pack has two marks that say the same thing.
+- Use one size across a row. `sm` beside a hairline row, `md` in body content,
+  `lg` only in a page header; a row of mixed sizes reads as a hierarchy that is
+  not there.
+- The mark is `aria-hidden` and the name beside it is the accessible content. Do
+  not put meaning in the ring's colour that is not also in the name.
+- Prefer `md`. It is the size that reads at body text, and a mark is a
+  co-occurrence with a name rather than a thing to look at.
+
+### Content guidelines
+
+- The name is the product's own name, in the case it uses everywhere else.
+- Keep the name to one or two words. The mark carries the identity; the name
+  carries the label.
+- Never abbreviate a product's name to fit beside its mark. Drop the mark, or
+  shorten the row, or let the name wrap.
+
+**The mark at each size, including one with no pack.**
+
+```tsx
+import { ProductMark } from '@nanisoft/prism-ui/components/product-mark'
+
+/**
+ * The mark at each size, including one with no pack.
+ *
+ * The last row is the case that matters: a product with no pack of its own wears
+ * the full spectrum rather than a colourless mark, because a colourless mark
+ * would take the reading page's accent and change per site.
+ */
+export default function ProductMarkDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col items-start gap-3">
+        <ProductMark id="nexus" name="Nexus" pack="lavender" size="lg" />
+        <ProductMark id="atlas" name="Atlas" pack="mint" size="md" />
+        <ProductMark id="alphalens" name="AlphaLens" pack="blush" size="sm" />
+      </div>
+      <ProductMark id="www" name="NaniSoft" size="md" />
+    </div>
+  )
+}
+```
+
+## Props
+
+**`id`** `string` · required · default: — — The product's key within the set it is distinguished in. It is carried on the markup as `data-product` so a test can name one mark rather than the first one, and so two marks in one document are individually addressable.
+**`name`** `string` · required · default: — — The product's name, which is the mark's second part and the word that carries the identity. The mark sets it in `brand-ink` rather than in `foreground`, which is DESIGN.md's Brand Ink Rule: a name that has to read as the brand reads `brand-ink`, and `foreground` is a tinted neutral with almost no chroma by design.
+**`pack`** `PackId | null` · optional · default: — — The product's pack, which is the mark's hue. Omit it, or pass `null`, for the one entry in a set that has no pack of its own: that entry is drawn as the full spectrum rather than as a colourless mark. See `SPECTRUM` above. `default` is a real answer and not the same as the empty one. The base pack is a pack a product can wear, and it is the absence of a `data-pack` attribute, so a product whose pack is `default` carries no attribute and its core resolves the base pack's `primary` from the page.
+**`size`** `ProductMarkSize` · optional · default: `'md'` — Which of the three drawn sizes to use.
+**`className`** `string` · optional · default: — — Layout only, exactly as on every Component. Changing a Prism-owned visual property from here is prohibited, and this Component spreads no other prop, so there is no second route to its ink.
+**`stored`** `string | null` · required · default: — — Raw contents of the key this line writes, or `null` when it is absent.
+**`legacy`** `string | null` · required · default: — — Raw contents of one key this line no longer writes, or `null`.
+**`documentPack`** `string | null` · required · default: — — `data-pack` on the root element as rendered, valid or not.
+**`documentDark`** `boolean` · required · default: — — Whether the root element carries `.dark` as rendered.
+**`defaultPack`** `PackId` · required · default: —
+**`defaultMode`** `Mode` · required · default: —
+**`mode`** `Mode` · required · default: —
+**`origin`** `ThemeOrigin` · required · default: — — Which source named the pair, for `THEME_ORIGIN_ATTRIBUTE`.
+**`key`** `string` · required · default: —