ProvenanceMarker

<caos-provenance-marker>

marks where a value came from — computed, overridden, inherited, or synced

May be placed on a record page, a page inside an app and a step of a guided flow.

Inputs

Name	Attribute	Description	Type	Default	Required
origin	origin, markup only	Where the value came from: computed, overridden, inherited or synced. It picks the glyph, the tint and — unless a label is given — the word. An unrecognised value draws the inherited treatment.	text — one of computed, overridden, inherited, synced	inherited	Optional
label	label, markup only	The word on the marker, replacing the origin’s own name. Use it to say WHICH source — “Computed from the rate table”, “Synced from the billing system” — rather than to rename the origin. Unset, it draws Computed / Overridden / Inherited / Synced; set to an empty string it draws nothing and leaves an empty accessible name.	text	the origin’s own name	Optional

Events

This piece raises no events.

Slots

Nothing goes inside this piece.

Styling hooks

Design token	What it controls
--caos-color-surface-2	The fill of the inherited (default) marker.
--caos-color-text-muted	Its lettering.
--caos-color-border	Its edge.
--caos-color-info-bg	The fill of a computed marker; the edge is mixed from –caos-color-info.
--caos-color-info	The colour a computed marker’s edge is mixed from.
--caos-color-info-text	Its lettering — the on-tint ink, so it holds up in both themes.
--caos-color-success-bg	The fill of a synced marker.
--caos-color-success	The colour its edge is mixed from.
--caos-color-success-text	Its lettering.
--caos-color-override-bg	The fill of an overridden marker — the one override colour, fixed across brands and themes.
--caos-color-override-border	Its edge.
--caos-color-override-text	Its lettering.
--caos-radius-pill	The rounded ends of the marker.
--caos-font	The typeface the word is set in.
--caos-space-2	The horizontal padding.
--caos-space-1	The gap between the glyph and the word.

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(marker)	the marker	Always
::part(icon)	the origin glyph	Always
::part(label)	the origin text	Always

When to use it

A number or a value whose origin changes what a person should do with it — an amount they may be asked to justify, a figure that will be recalculated, a field that is really owned by another system.

What to use instead

• StatusPill — The subject is the RECORD and where it has got to, not one value and where it came from. A record is In review; a number is Computed.
• Tag — The chip is a label a person applied to the record rather than a statement about a value.
• InlineHint — What needs saying is what the field DRIVES rather than where its value came from — guidance that is true whoever filled it in.
• NoticeBanner — The provenance applies to the whole surface — every figure on the page is at pinned rates, say — rather than to one value. Marking forty rows individually says less than one banner.

Accessibility

The marker is a role="img" named Value origin: <label>, so it is announced as one statement attached to the value rather than as a loose word after a number, and the glyph is hidden because the label already carries it. The tint is never the only signal: the word is always drawn and always in the name. Left to the author: not blanking the label (an empty one leaves a coloured glyph and an accessible name with nothing after the colon), and making sure the marker follows the value it belongs to in reading order rather than floating at the end of the row.

Examples

The four origins

The whole vocabulary side by side, with the default word each origin draws — the set to choose from when deciding what a surface needs to say about its figures.

{
  "id": "example",
  "section": "The four origins",
  "columns": 1,
  "items": [
    {
      "id": "provenance_marker_1",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "computed"
      }
    },
    {
      "id": "provenance_marker_2",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "overridden"
      }
    },
    {
      "id": "provenance_marker_3",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "synced"
      }
    },
    {
      "id": "provenance_marker_4",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "inherited"
      }
    }
  ]
}

<caos-provenance-marker origin="computed"></caos-provenance-marker>
<caos-provenance-marker origin="overridden"></caos-provenance-marker>
<caos-provenance-marker origin="synced"></caos-provenance-marker>
<caos-provenance-marker origin="inherited"></caos-provenance-marker>

Naming the actual source

The same markers carrying the specific source instead of the generic word, which is what makes a figure defensible: not “Overridden” but overridden by whom, not “Synced” but synced from where.

{
  "id": "example",
  "section": "Naming the actual source",
  "columns": 1,
  "items": [
    {
      "id": "provenance_marker_1",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "computed",
        "label": "Computed from the rate table"
      }
    },
    {
      "id": "provenance_marker_2",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "overridden",
        "label": "Pinned by Dana Whitfield"
      }
    },
    {
      "id": "provenance_marker_3",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "synced",
        "label": "Synced from the billing system"
      }
    },
    {
      "id": "provenance_marker_4",
      "type": "component",
      "key": "provenance_marker",
      "inputs": {
        "origin": "inherited",
        "label": "From the account default"
      }
    }
  ]
}

<caos-provenance-marker origin="computed" label="Computed from the rate table"></caos-provenance-marker>
<caos-provenance-marker origin="overridden" label="Pinned by Dana Whitfield"></caos-provenance-marker>
<caos-provenance-marker origin="synced" label="Synced from the billing system"></caos-provenance-marker>
<caos-provenance-marker origin="inherited" label="From the account default"></caos-provenance-marker>