OpenRecords

<caos-open-records>

the strip of records you currently have OPEN, under the app navigation

May be placed on a seam in the workspace frame.

Inputs

Name	Attribute	Description	Type	Default	Required
records	property only	The records currently open, in the order they were opened, as { id, label, href, active? }. label is drawn as given — the shape used elsewhere is “OBJECT · record name”, composed by the caller, because this element knows nothing about the objects it is listing. active marks the one on screen; with none marked, the first entry still carries the keyboard tab stop.	json	none declared	Optional

Events

Name	When it fires	What it carries
record-open	An entry’s label was chosen. The strip does not change what is active — the host does, by handing back a new list.	{ id, href } — which record, and the route to it.
record-close	An entry’s close control was used. The strip does not drop the entry — the host does.	{ id, href } — which record was closed.

Slots

Nothing goes inside this piece.

Styling hooks

Design token	What it controls
--caos-color-surface	The strip’s background band.
--caos-color-border	The rule under the strip and the hairline between one entry and the next.
--caos-color-accent	The underline beneath the entry you are currently looking at.
--caos-color-text	The active entry’s label, and any label under the pointer.
--caos-color-text-muted	A resting entry’s label.
--caos-color-text-subtle	The close control at rest (falls back to the muted text colour when unset).
--caos-font-mono	The typeface the entry labels are set in.
--caos-radius-sm	The corner radius of the focus ring on a label or a close control.
--caos-space-2	The gap between an entry’s label and its close control.
--caos-space-3	The padding at each end of an entry, and its height above and below the label.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
::part(strip)	the strip the open records sit in	Always

When to use it

Only as the workspace frame’s strip of open records — the console idiom where opening a record does not throw away the one you were reading.

What to use instead

• WorkspaceTabs — The row is the app’s destinations — objects, reports — rather than the records somebody happens to have open.
• TabStrip — The choices are facets of ONE record: its details, its related lists, its history.
• Breadcrumb — You want the way back up to a record’s parent rather than sideways to another open record.

Accessibility

The strip labels itself “Open records” unless the author gives it another aria-label, and the entries share one tab stop with a roving tabindex — Arrow Left/Right, Home and End move between them, the WAI-ARIA pattern the record’s own tab strip uses. The active entry is marked aria-current="page", each close control is a real button named “Close ” rather than a bare glyph, and both carry a focus ring. What is left to the author is the LABEL: it is what a screen reader reads and what the strip ellipsises at 22 characters, so it needs to say which record it is, not just which object.

Examples

Three records open

A person holding an account, an order and a contact open at once, with the one on screen underlined in the accent.

The page around it: The surrounding page is the shell: closing an entry really drops the record, and choosing one really moves the underline to it — which is what the strip reports and the shell decides.

{
  "id": "example",
  "section": "Three records open",
  "columns": 1,
  "items": [
    {
      "id": "open_records_1",
      "type": "component",
      "key": "open_records",
      "inputs": {
        "records": [
          {
            "id": "a1",
            "label": "Meridian Supply",
            "href": "/sales-atlas/account/a1",
            "active": true
          },
          {
            "id": "o1",
            "label": "ORD-4471",
            "href": "/sales-atlas/order/o1"
          },
          {
            "id": "c1",
            "label": "Dana Whitfield",
            "href": "/sales-atlas/contact/c1"
          }
        ]
      }
    }
  ]
}

<caos-open-records id="openRecords1"></caos-open-records>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const openRecords1 = document.getElementById('openRecords1');
openRecords1.records = [
  {
    "id": "a1",
    "label": "Meridian Supply",
    "href": "/sales-atlas/account/a1",
    "active": true
  },
  {
    "id": "o1",
    "label": "ORD-4471",
    "href": "/sales-atlas/order/o1"
  },
  {
    "id": "c1",
    "label": "Dana Whitfield",
    "href": "/sales-atlas/contact/c1"
  }
];