How it works › Embedded chrome

When one view is a part of your own page (a KPI head, a history strip beside your own words), the kit's status line ("119 of 119 rows · 9 groups") and a view's own control bar are noise. Two attributes turn them off, first-class, so no host reaches into the kit's class names. Zach, on Vibe Tracks hiding them with its own CSS: "can you please provide first class support for this so we don't need to do hacky css".

- type: chart
  name: Ashby · torque vs mass
  chart:
    mark: { type: point, filled: true, size: 22 }
    encoding:
      x: { field: mass, scale: { type: log } }
      y: { field: peak_torque, scale: { type: log } }
      color: { field: drivetrain }
  guides:
    - { envelope: drivetrain, shape: hull }
    - { indexLine: { slope: 1, through: median }, label: "constant N·m per g (median)" }
  hover: { image: photo, title: name, fields: [peak_torque, mass, torque_density, drivetrain, brand] }

<data-views src="views.base" view="Ashby · torque vs mass" toolbar="none" status="on" controls="on"></data-views>

Where it is said

• Per key, first wins: the view's entry in the .base (status: false, controls: false; a boolean, or on | off | show | hide | none), then the attribute on <data-views> (status="off", controls="off"), then the default, on. Both attributes are observed: a change applies at once.
• status is the status line: the row count, a view's own setStatus text, a filter error. Off, it is hidden under every frame=.
• controls is the view's own control bar inside its slot (today the chart's Encode / Rows bar and its popover). A view type with no bar draws as before.
• Read back: el.chrome() → {status, controls}; the element mirrors them as data-status and data-controls.
• Not touched: toolbar= keeps its meaning. A bare part is toolbar="none" status="off" controls="off"; the side peek, the rail and the intro are not chrome here.

views:
  - type: chart
    name: History strip
    status: false        # no "N of N rows" under it
    controls: false      # no Encode / Rows bar
    chart: { mark: line, encoding: { x: { field: t }, y: { field: value } } }

Comes from docs/CONTRACT.md §18 (embedded chrome) in docs/.