Subtree-provided values

Providers are useful for values that belong to one region of your app, such as its theme or a shared cart. Children can use them without passing the same prop through every level.

Provide once, read below

Use b-provide to expose values on an element and throughout its Brio subtree. Read them directly through $provided; no separate inject directive is needed:

<section b-data="{ theme: 'dark' }"
         b-provide="{ theme: $data.theme, cart: $stores.cart }">
  <input b-model="$data.theme">
  <p b-text="$provided.theme"></p>
  <div b-provide="{ theme: 'light' }">
    <span b-text="$provided.theme"></span>
    <span b-text="$provided.cart.items.length"></span>
  </div>
</section>

How inheritance works

• Provider expressions stay reactive: changing the outer theme updates consumers without remounting children.
• Nested providers override their own names and inherit others.
• An explicitly provided undefined shadows a parent value; removing the local key reveals the parent’s value.
• Missing names return undefined. Outside a provider, $provided is an empty read-only mapping.

Names are read-only; referenced state can change

Provided names are read-only: $provided.theme = 'light' throws. Referenced objects are not frozen, so $provided.cart.items.push(product) can update the provided reactive object. The expression must return a synchronous plain object of enumerable own data properties. Invalid initial or updated results throw; they are not silently accepted. $provided in the provider expression refers to the inherited values, not its own result.

Provider timing and scope

Providers run after same-element b-data and, on repeated elements, after row $for exists. Other bindings on that element see its provided values. b-if conditions still use their parent context before branch-local providers. Providers do not add $data.$parent or $for.$parent levels.

Consumer	Provider context
Component setup	Receives $provided; a host provider applies before setup.
Templates, scripts, routed views, managed inserted content	Inherit the applicable context.
Projected slots	Keep their caller/authoring context, not providers inside the component template.
Teleports	Keep their original context, not the physical destination’s.
Child insertion	Inherits destination providers.
Sibling insertion	Inherits the parent container’s providers.

Provider effects stop when their owning scope is disposed. b-if.hide and b-if.detach keep them active; a false unmodified b-if disposes them.