{"slug":"panel","name":"Panel","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"Wrap a related cluster of content behind one titled glass card, so a screen reads as distinct sections that let the backdrop lens through the surface — Apple's Liquid Glass container, as opposed to GroupBox's opaque grouped-background card.","importPath":"@liquidify/react/panel","sourcePath":"packages/@liquidify/react/src/components/panel/panel.tsx","specPath":"packages/@liquidify/react/src/components/panel/spec.md","documentationStatus":"missing","storyIds":["presentational-panel--default"],"additionalExports":["PresentationalProps"],"anatomy":[],"props":[{"name":"children","type":"ReactNode","required":true,"description":"The grouped content (`{ … }` content closure, children role: `content`) — content-agnostic: hosts `LabeledContent` rows, a `Toggle`, a `ProgressIndicator`, or a nested `Panel`/`GroupBox`.","declaredIn":"packages/@liquidify/react/src/components/panel/panel.tsx"},{"name":"className","type":"string | undefined","required":false,"description":"Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"id","type":"string | undefined","required":false,"description":"Optional id forwarded verbatim to the `role=\"group\"` glass root, so a consumer can target the surface from its own `aria-*` wiring. Panel's internal label id is generated separately and never collides with it.","declaredIn":"packages/@liquidify/react/src/components/panel/panel.tsx"},{"name":"label","type":"ReactNode","required":false,"description":"The card's title (`GlassPanel(label:)` / SwiftUI `GroupBox(_:content:)`). A `string` routes through the `TextLabel` guard into an internal `Text` (`variant=\"headline\"`, `weight=\"semibold\"`, `color=\"secondary\"` by default, overridable per-instance via `labelProps`) carrying the id the root's `aria-labelledby` targets. A `ReactNode` (e.g. an icon+text composite) passes through unwrapped so the caller keeps ownership of its own typography and icon (`labelProps` has no effect on this shape). Omitted, or supplied as a non-renderable value (`false` / `null` / `true` / `\"\"`), renders no label region and no `aria-labelledby` — an intentionally unnamed group.","declaredIn":"packages/@liquidify/react/src/components/panel/panel.tsx"},{"name":"labelProps","type":"LabelProps | undefined","required":false,"description":"Per-instance typography override for a `string` `label` (ADR-0028, charter §2) — spread last onto the internal `Text` so an explicit value wins over the `headline`/`semibold`/`secondary` default. No effect when `label` is a `ReactNode` (passes through `TextLabel` unwrapped) or omitted/non-renderable.","declaredIn":"packages/@liquidify/react/src/components/panel/panel.tsx"},{"name":"material","type":"\"frosted\" | \"regular\" | \"clear\" | undefined","required":false,"description":"Material of the glass surface — `frosted · regular · clear` (§06). Forwarded to the engine, which resolves the chain `prop ?? <Material default> ?? \"regular\"`, so a bare surface inherits the enclosing provider default.","defaultValue":"enclosing `<Material default>`, else `\"regular\"`","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"perf","type":"\"low\" | \"high\" | undefined","required":false,"description":"Perf budget of the glass surface (ADR-0006/0007). Forwarded to the engine as `data-glass-perf`; `\"high\"` opts this surface into the edge-lensing filter. When omitted, derives from the enclosing `<Backdrop type>` (§04).","defaultValue":"derived from `<Backdrop type>`, else `\"low\"`","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"ref","type":"Ref<HTMLDivElement> | undefined","required":false,"description":"Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"}],"swiftUIMap":[{"swiftUI":"`GlassPanel(label:)` / `GroupBox(_:content:)` — `String`/`LocalizedStringKey` title","react":"`label?: string`","notes":"Routed through the `TextLabel` guard into an internal `Text` (ADR-0028). Mirrors `GlassPanel.swift`'s `Text(label)`.","relationship":"direct"},{"swiftUI":"`GroupBox(content:label:)` — custom `label` view","react":"`label?: ReactNode`","notes":"Same `label` prop, union `string | ReactNode`; a node label renders verbatim — the caller composes its own icon+text pairing.","relationship":"direct"},{"swiftUI":"`.glassEffect(_ glass: Glass, in:)` — `glass` level","react":"`material?: \"frosted\" | \"regular\" | \"clear\"`","notes":"`GlassPanel.swift`'s `glass: Glass` parameter → the public `material` knob (inherited from `PresentationalProps`, §06); forwarded to `useGlass`.","relationship":"direct"},{"swiftUI":"`.glassEffect(in: RoundedRectangle(cornerRadius: 24))` — clip shape","react":"(fixed) `--lq-radius-22`","notes":"The surface corner radius; `--lq-radius-22` is the nearest existing scale token to the source's 24pt (no `--lq-radius-24` exists — same posture DisclosureGroup takes for its 20pt). Not a prop.","relationship":"direct"},{"swiftUI":"`.glassEffect(...)` perf tier","react":"`perf?: GlassPerf`","notes":"Inherited from `PresentationalProps`; forwarded as `data-glass-perf`, derives from the enclosing `<Backdrop type>` when omitted.","relationship":"direct"},{"swiftUI":"`{ … }` content closure","react":"`children: ReactNode` (required, children role: `content`)","notes":"Content slot, content-agnostic; rendered verbatim, no restyle/restructure.","relationship":"direct"},{"swiftUI":"`.font(_:)` / `.foregroundStyle(_:)` on a `string` title","react":"`labelProps?: LabelProps`","notes":"Per-instance typography override seam (ADR-0028), spread **last** onto the string-`label` path's internal `Text`. No effect on a `ReactNode` or omitted label.","relationship":"direct"},{"swiftUI":"`GroupBoxStyle` / `.groupBoxStyle(_:)`","react":"— (Out of scope v1)","notes":"Only the default surface is authored; no custom-style plumbing.","relationship":"direct"},{"swiftUI":"`controlSize`","react":"—","notes":"Non-sizable; no `size` prop (see Sizes).","relationship":"direct"},{"swiftUI":"`.tint(_:)`","react":"—","notes":"Panel has no accent surface; no `tint` prop (glass posture only).","relationship":"direct"},{"swiftUI":"*(no analogue — web-only)*","react":"`ref?: Ref<HTMLDivElement>`","notes":"`PanelProps extends PresentationalProps<HTMLDivElement>` (charter §4) — forwarded to the concrete `role=\"group\"` glass root `<div>`.","relationship":"web-only"}],"tokens":["--lq-color-label-secondary","--lq-glass-","--lq-panel-label-gap","--lq-panel-pad","--lq-panel-track-h","--lq-radius-22","--lq-radius-24","--lq-space-"],"keyboard":[],"variants":[],"variantPages":[]}