Lily Design System™

ToolCallInput

A headless wrapper for the input or arguments passed to a tool in a tool call.

Status: beta — implemented and unit-tested in all eight headless libraries; not yet exercised in composed flows.

The input or arguments passed to the tool. A <div> that becomes a named group when label is given; the consumer puts a <pre> or formatted arguments inside. The component draws, times and animates nothing and carries no strings of its own.

Implementation Notes

  • Root element: <div> with the base class tool-call-input first, then the consumer class
  • restProps spread onto the root; no internal state beyond open on the root

Props

Prop Type Default Description
class string "" Appended to the base class
label string (optional) — Adds role="group" and aria-label; without it neither is rendered
children slot — The arguments
...restProps HTML attributes — Spread onto the root <div>

Usage

<ToolCallInput>…</ToolCallInput>

Keyboard Interactions

  • None. If a long <pre> inside scrolls, give it tabindex="0" so keyboard users can scroll it

ARIA

  • role="group" with aria-label only when label is given

When to Use

  • The arguments a tool was called with
  • Labelled sections so a screen-reader user can tell input from output

When Not to Use

  • Use ToolCallOutput — for the result
  • Use Code or CodeBlock — general code samples outside a tool call

Headless

This component decides semantics only. It decides no colour, icon, spinner, layout, monospace style or motion.

Styles

Target .tool-call-input (and [data-status] where it applies). No default styles are included.

Testing

  • Renders <div> with the base class tool-call-input and appends the consumer class
  • Attribute behaviour as listed under Props and ARIA, each asserted with a test
  • Children render; rest props reach the root

Advice

Pass label ("Input" in your language) whenever input and output both appear, so the two groups are distinguishable.

Related components

  • tool-call
  • tool-call-output
  • code-block

References

Lily™ and Lily Design System™ are trademarks.

Example

{"query": "weather in London"}
Show demo markup 
<div class="tool-call-input" role="group" aria-label="Input"><pre tabindex="0">{"query": "weather in London"}</pre></div>
Usage example 
<div class="tool-call-input" role="group" aria-label="Input"><pre tabindex="0">{"query": "weather in London"}</pre></div>
Show Svelte source 
// In your Svelte component:
import ToolCallInput from "lily-design-system-svelte-headless/components/ToolCallInput/ToolCallInput.svelte";

<ToolCallInput>
  <!-- content -->
</ToolCallInput>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: tool-call-input
  • PascalCase: ToolCallInput
  • Description: the input or arguments passed to a tool in a tool call
  • Status: beta — implemented and unit-tested in all eight headless libraries; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .tool-call-input
  • Interactive: no

ARIA

  • role="group" with aria-label only when label is given

Keyboard

  • None. If a long <pre> inside scrolls, give it tabindex="0" so keyboard users can scroll it

Props

  • class: string -- Appended to the base class
  • label: string (optional) -- Adds role="group" and aria-label; without it neither is rendered
  • children: slot -- The arguments
  • ...restProps: HTML attributes -- Spread onto the root <div>