Disclosure
Use CDisclosure for one independently expandable note, setting group, or supporting section. Use CAccordion when several items share selection, expansion policy, or collection keyboard behavior.
Disclosure at a glance
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class DisclosureAtAGlance(Component):
template = """
<c-CDisclosure>
<c-fill name="title">System requirements</c-fill>
<c-fill name="default">
<p>Python 3.13 or newer and 512 MB of available storage.</p>
</c-fill>
</c-CDisclosure>
"""
preview = DisclosureAtAGlance()
preview # noqa: B018
Write the shortest Disclosure
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class BasicDisclosure(Component):
template = """
<c-CStack gap="md">
<c-CDisclosure open heading_level="2" region>
<c-fill name="title">Install prerequisites</c-fill>
<c-fill name="default">
Install Python, create a virtual environment, then add Citry.
</c-fill>
</c-CDisclosure>
<c-CDisclosure>
<c-fill name="title">Optional database tools</c-fill>
<c-fill name="default">
Add the PostgreSQL client only when the application uses it.
</c-fill>
</c-CDisclosure>
</c-CStack>
"""
preview = BasicDisclosure()
preview # noqa: B018
The title becomes the native Button name. Choose heading_level to fit the document outline. Add region only when the expanded panel deserves a landmark.
Python composition uses the same two required slots:
from citry_ui import CDisclosure
requirements = CDisclosure(
slots={
"title": "System requirements",
"default": "Python 3.13 or newer",
},
)
Control expansion
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class ControlledDisclosure(Component):
template = """
<section
class="controlled-disclosure"
x-data="{open:false, controlled:true, accept:true, last:'none'}"
>
<c-CDisclosure
$c-props="{
open: controlled ? open : null,
onOpenChange: (next, detail) => {
last = `${detail.source}: ${next ? 'open' : 'closed'}`;
if (controlled && accept) open = next;
},
}"
>
<c-fill name="title">Advanced logging</c-fill>
<c-fill name="default">
Include request identifiers and timing details in diagnostic output.
</c-fill>
</c-CDisclosure>
<label>
<input type="checkbox" x-model="accept" />
Accept trigger requests
</label>
<div class="controlled-disclosure__controls" role="group" aria-label="Disclosure owner controls">
<button type="button" @click="controlled=true; open=true">Show</button>
<button type="button" @click="controlled=true; open=false">Hide</button>
<button type="button" @click="controlled=false">Release control</button>
</div>
<output>
Ownership: <span x-text="controlled ? 'browser-controlled' : 'released'">browser-controlled</span>
· Requests: <span x-text="accept ? 'accepted' : 'refused'">accepted</span>
· Last: <span x-text="last">none</span>
</output>
</section>
"""
css = """
:where(.controlled-disclosure) { display: grid; gap: 0.75rem; }
:where(.controlled-disclosure__controls) { display: flex; flex-wrap: wrap; }
:where(.controlled-disclosure__controls > button) {
min-block-size: 2rem;
padding-inline: 0.75rem;
border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
background: Canvas;
color: CanvasText;
font: inherit;
}
"""
preview = ControlledDisclosure()
preview # noqa: B018
A Boolean client open owns expansion. Omit it or supply null to release control and commit the retained uncontrolled/server baseline, which may differ from the visible controlled state.
onOpenChange is a component callback, not a DOM event. Native listeners such as @click and @focus still receive their ordinary browser events; Disclosure dispatches no custom toggle, show, or hide event.
Add actions and disabled state
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class DisclosureActionsAndDisabled(Component):
template = """
<section
class="disclosure-actions-demo"
x-data="{disabled:false, fieldsetDisabled:false}"
>
<c-CDisclosure
actions_label="Release note actions"
c-actions_attrs="{'data-demo-actions':'release'}"
>
<c-fill name="title">Release notes</c-fill>
<c-fill name="actions">
<c-CButton size="sm" variant="ghost">Copy link</c-CButton>
</c-fill>
<c-fill name="default">Review migration notes before deploying version 4.</c-fill>
</c-CDisclosure>
<c-CDisclosure open $c-props="{disabled}">
<c-fill name="title">Managed policy</c-fill>
<c-fill name="default">Your organization keeps this guidance visible.</c-fill>
</c-CDisclosure>
<label><input type="checkbox" x-model="disabled" /> Disable managed policy</label>
<c-CDisclosure disabled>
<c-fill name="title">Unavailable audit appendix</c-fill>
<c-fill name="default">This closed section cannot be activated.</c-fill>
</c-CDisclosure>
<fieldset :disabled="fieldsetDisabled">
<legend>
<label><input type="checkbox" x-model="fieldsetDisabled" /> Disable native fieldset</label>
</legend>
<c-CDisclosure>
<c-fill name="title">Fieldset-owned policy</c-fill>
<c-fill name="default">Native fieldset ownership disables this trigger.</c-fill>
</c-CDisclosure>
</fieldset>
</section>
"""
css = """
:where(.disclosure-actions-demo) { display: grid; gap: 1rem; }
:where(.disclosure-actions-demo fieldset) {
min-inline-size: 0;
padding: 0.75rem;
border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
border-radius: 0.75rem;
}
"""
preview = DisclosureActionsAndDisabled()
preview # noqa: B018
Actions stay beside the heading rather than inside its Button. Disabledness blocks activation without erasing an already-open panel.
Choose treatment and geometry
Customize example
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class DisclosureVariantsAndSizes(Component):
class Kwargs:
pass
class Slots:
pass
template = """
<section
class="disclosure-variants"
x-data="{variant:'outline',size:'md',indicator:true,indicator_position:'end'}"
@citry-ui-preview-controls.window="Object.assign($data, $event.detail)"
>
<div class="disclosure-variants__stage" style="color-scheme:dark">
<c-CDisclosure
open
class_="disclosure-variants__subject"
$c-props="{variant,size,indicator,indicatorPosition:indicator_position}"
>
<c-fill name="title">Deployment requirements for the observability gateway in restricted networks</c-fill>
<c-fill name="default">The live subject reflects every external control.</c-fill>
</c-CDisclosure>
</div>
<div class="disclosure-variants__matrix">
<c-for each="variant in variants">
<c-CDisclosure c-variant="variant" open>
<c-fill name="title">{{ variant }} treatment</c-fill>
<c-fill name="default">A concise operations handbook note.</c-fill>
</c-CDisclosure>
</c-for>
<c-for each="size in sizes">
<c-CDisclosure c-size="size" indicator_pos="start">
<c-fill name="title">{{ size }} geometry</c-fill>
<c-fill name="default">Size changes the complete component geometry.</c-fill>
</c-CDisclosure>
</c-for>
</div>
</section>
"""
def template_data(self, kwargs: Kwargs, slots: Slots) -> dict[str, object]: # noqa: ARG002
return {"variants": ("outline", "soft", "plain"), "sizes": ("sm", "md", "lg")}
css = """
:where(.disclosure-variants) {
display: grid;
gap: 1rem;
}
:where(.disclosure-variants__stage) {
padding: 1rem;
border-radius: 1rem;
background: #111827;
}
:where(.disclosure-variants__matrix) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 0.75rem;
}
"""
preview_controls = (
{
"name": "variant",
"label": "Variant",
"type": "select",
"default": "outline",
"options": (("outline", "Outline"), ("soft", "Soft"), ("plain", "Plain")),
},
{
"name": "size",
"label": "Size",
"type": "select",
"default": "md",
"options": (("sm", "Small"), ("md", "Medium"), ("lg", "Large")),
},
{
"name": "indicator_position",
"label": "Indicator position",
"type": "select",
"default": "end",
"options": (("start", "Start"), ("end", "End")),
},
{"name": "indicator", "label": "Show indicator", "type": "checkbox", "default": True},
)
preview = DisclosureVariantsAndSizes()
preview # noqa: B018
Nest independent and grouped content
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class NestedDisclosures(Component):
template = """
<section class="nested-disclosure-demo" dir="rtl">
<c-CDisclosure open>
<c-fill name="title">Network setup</c-fill>
<c-fill name="default">
<c-CStack gap="md">
<p>Configure the application endpoint before optional proxy rules.</p>
<c-CDisclosure variant="soft" size="sm">
<c-fill name="title">Proxy settings</c-fill>
<c-fill name="default">Use HTTPS_PROXY for outbound requests.</c-fill>
</c-CDisclosure>
<c-CAccordion value="timeouts" variant="plain" size="sm">
<c-CAccordionItem value="timeouts">
<c-fill name="title">Timeout troubleshooting</c-fill>
<c-fill name="default">Check firewall and DNS resolution first.</c-fill>
</c-CAccordionItem>
</c-CAccordion>
</c-CStack>
</c-fill>
</c-CDisclosure>
</section>
"""
css = """
:where(.nested-disclosure-demo) { inline-size: min(100%, 20rem); }
:where(.nested-disclosure-demo p) { overflow-wrap: anywhere; }
"""
preview = NestedDisclosures()
preview # noqa: B018
Nested Disclosure and Accordion roots belong in the panel, never in the title or adjacent actions.
Compose overlays and Dialogs safely
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class DisclosureOverlaysAndDialogs(Component):
template = """
<section
class="disclosure-overlay-demo"
x-data="{dialogOpen:false}"
@click="if ($event.target.closest('[data-open-credential-dialog]')) dialogOpen=true"
>
<c-CDisclosure open>
<c-fill name="title">Credential help</c-fill>
<c-fill name="default">
<c-CStack gap="sm" align="start">
<p>Review token scope before rotating a credential.</p>
<c-CPopover>
<c-fill name="activator" data="{ activator_attrs }">
<c-CButton size="sm" variant="outline" c-attrs="activator_attrs">Scope help</c-CButton>
</c-fill>
<c-fill name="title">Credential scope</c-fill>
<c-fill name="default">Grant only the permissions this worker needs.</c-fill>
</c-CPopover>
<button
type="button"
class="disclosure-overlay-demo__dialog-trigger"
data-open-credential-dialog
>Rotate credential</button>
</c-CStack>
</c-fill>
</c-CDisclosure>
<c-CDialog
size="sm"
$c-props="{
open: dialogOpen,
onOpenChange: (next) => dialogOpen = next,
}"
>
<c-fill name="title">Rotate credential</c-fill>
<c-fill name="default">The old credential stops working immediately.</c-fill>
</c-CDialog>
</section>
"""
css = """
:where(.disclosure-overlay-demo) { display: grid; gap: 1rem; justify-items: start; }
:where(.disclosure-overlay-demo > [data-citry-ui-part="disclosure"]) { inline-size: min(100%, 40rem); }
:where(.disclosure-overlay-demo__dialog-trigger) {
min-block-size: 2.25rem;
padding-inline: 0.875rem;
border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
border-radius: 0.5rem;
background: Canvas;
color: CanvasText;
font: inherit;
}
"""
preview = DisclosureOverlaysAndDialogs()
preview # noqa: B018
Citry anchored layers may live in an open panel and close structurally with it. Render CDialog and CDrawer as siblings outside Disclosure, then open them from a panel or action control. Native dialog elements, CDialog, and CDrawer are rejected as panel or actions descendants regardless of their current open state. Raw native popovers, unresolved web components, customized built-ins, and authored shadow hosts are also outside that slot contract.
Keep title content structural
The title accepts text and only these native elements: abbr, b, bdi, bdo, br, cite, code, data, del, dfn, em, i, img, ins, kbd, mark, picture, q, rp, rt, ruby, s, samp, small, source, span, strong, sub, sup, svg, time, u, var, and wbr. Images must have empty alt. Decorative SVG must use aria-hidden="true" and focusable="false", and may contain only g, path, polyline, line, circle, rect, ellipse, and polygon. The title must still contain non-whitespace text outside decorative content. Links, controls, custom elements, and other HTML do not belong inside the trigger. Every title descendant rejects role, tabindex, contenteditable, autofocus, href, xlink:href, controls, usemap, form, popover, is, hidden, inert, ARIA naming or description attributes, inline or Alpine event listeners, and Alpine structural or ownership directives.
The default panel accepts normal flow content and nested Disclosure or Accordion roots within the overlay boundary above. Actions follow the same boundary but do not accept nested Disclosure or Accordion roots.
Preserve forms and focus
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class DisclosureFormsAndFocus(Component):
template = """
<form
class="disclosure-form"
x-data="{notificationOpen:true, escalationOpen:false, invalidTarget:null}"
@invalid.capture="
if ($event.target.name === 'notification-email') {
$event.preventDefault();
notificationOpen = true;
} else if ($event.target.name === 'escalation-contact') {
$event.preventDefault();
escalationOpen = true;
} else {
return;
}
if (invalidTarget === null) {
invalidTarget = $event.target;
$nextTick(() => {
invalidTarget?.focus();
invalidTarget = null;
});
}
"
>
<c-CDisclosure
open
$c-props="{
open: notificationOpen,
onOpenChange: (next) => notificationOpen = next,
}"
>
<c-fill name="title">Notification settings</c-fill>
<c-fill name="default">
<c-CStack gap="sm">
<c-CField>
<c-fill name="label">Notification email</c-fill>
<c-fill name="default">
<c-CInput name="notification-email" type="email" value="ops@example.com" />
</c-fill>
<c-fill name="description">Edits survive closing and reopening.</c-fill>
</c-CField>
<c-CCheckbox name="weekly-summary">Send a weekly summary</c-CCheckbox>
</c-CStack>
</c-fill>
</c-CDisclosure>
<c-CDisclosure
$c-props="{
open: escalationOpen,
onOpenChange: (next) => escalationOpen = next,
}"
>
<c-fill name="title">Required escalation contact</c-fill>
<c-fill name="default">
<label>Contact <input name="escalation-contact" required /></label>
</c-fill>
</c-CDisclosure>
<c-CButton type="submit">Save settings</c-CButton>
<c-CButton type="reset" variant="outline">Reset form</c-CButton>
</form>
"""
css = """
:where(.disclosure-form) { display: grid; gap: 1rem; max-inline-size: 42rem; }
"""
preview = DisclosureFormsAndFocus()
preview # noqa: B018
Panels stay mounted, so closing preserves edits and FormData participation. It does not exempt a required closed control from constraint validation. Keep required content open or open it from captured validation handling.
Customize Disclosure
Show code
import citry_ui
from citry import Component, citry
citry.register_library(citry_ui)
class CustomizedDisclosure(Component):
template = """
<section class="disclosure-brands">
<div class="disclosure-brand disclosure-brand--orchard">
<c-CDisclosure open indicator_pos="start">
<c-fill name="title">Orchard operations and seasonal irrigation planning</c-fill>
<c-fill name="default">Warm surfaces for the harvest handbook.</c-fill>
</c-CDisclosure>
</div>
<div class="disclosure-brand disclosure-brand--harbor" dir="rtl" style="color-scheme:dark">
<c-CDisclosure variant="soft">
<c-fill name="title">Harbor operations</c-fill>
<c-fill name="default">A cool scheme with logical indicator placement.</c-fill>
</c-CDisclosure>
</div>
</section>
"""
css = """
:where(.disclosure-brands) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1rem;
}
:where(.disclosure-brand) { padding: 1rem; border-radius: 1rem; }
:where(.disclosure-brand--orchard) {
color-scheme: light dark;
--cui-disclosure-background: light-dark(#fff7ed, #2b170b);
--cui-disclosure-foreground: light-dark(#431407, #ffedd5);
--cui-disclosure-trigger-open-color: light-dark(#9a3412, #fdba74);
}
:where(.disclosure-brand--harbor) {
color-scheme: light dark;
--cui-disclosure-background: light-dark(#ecfeff, #082f49);
--cui-disclosure-foreground: light-dark(#164e63, #cffafe);
--cui-disclosure-trigger-open-color: light-dark(#0369a1, #7dd3fc);
--cui-disclosure-radius: 1.25rem;
}
:where(.disclosure-brand [data-citry-ui-part="disclosure-title"]) {
letter-spacing: 0.01em;
}
"""
preview = CustomizedDisclosure()
preview # noqa: B018
Accessibility and interaction
The trigger is a native button type="button" with aria-expanded and aria-controls. Enter and Space use native activation. Disclosure does not add Arrow, Home, or End behavior. When accepted closing would hide focused panel content, focus moves to the trigger or a safe modal/document fallback before the panel becomes inert.
For a plain no-JavaScript reveal, use native details and summary. Citry's authored pattern exists for controlled ownership, disabled fieldsets, adjacent actions, focus safety, and reversible animation.
API reference
Inputs
CDisclosure server inputs
Server inputs are passed in a template through <c-CDisclosure ... /> or in Python through CDisclosure(...).
| Input | Type | Default | Effect |
|---|---|---|---|
open | bool | False | Sets the initial committed expansion and the uncontrolled server fallback. |
disabled | bool | False | Disables the native trigger without changing expansion. CForm and native fieldset disabledness remain dominant. |
variant | "outline" | "soft" | "plain" (CDisclosureVariant) | "outline" | Selects bordered, quiet filled, or transparent treatment. |
size | "sm" | "md" | "lg" (CDisclosureSize) | "md" | Selects title, trigger, panel, and indicator geometry. |
indicator | bool | True | Shows the owned decorative chevron. |
indicator_pos | "start" | "end" (CDisclosureIndicatorPos) | "end" | Places the chevron at the logical start or end of the trigger. |
heading_level | Literal[2, 3, 4, 5, 6] (CDisclosureHeadingLevel) | 3 | Chooses the native heading tag. |
region | bool | False | Adds one trigger-named region landmark to the panel. Use selectively. |
actions_label | non-whitespace str | None | None | Names the optional actions group and requires the actions slot. |
id | str | None | generated | Sets the root ID and stable trigger/panel ID pair. |
class_ | str | Mapping[str, bool] | Sequence[CClassValue] | None (CClassValue) | None | Adds root classes and merges them with attrs. |
style | str | Mapping[str, str | int | float | bool | None] | Sequence[CStyleValue] | None (CStyleValue) | None | Adds root inline styles and merges them with attrs. |
attrs | Mapping[str, object] | None | None | Adds trusted unowned root attributes. Presence may be owned only for the complete root. |
heading_attrs | Mapping[str, object] | None | None | Adds trusted unowned native-heading attributes. |
trigger_attrs | Mapping[str, object] | None | None | Adds trusted unowned Button attributes and native listeners. Identity, semantics, state, alternate activation, and popup ownership are reserved. |
panel_attrs | Mapping[str, object] | None | None | Adds trusted unowned panel attributes. Identity, region semantics, and presence are reserved. |
actions_attrs | Mapping[str, object] | None | None | Adds trusted unowned action-wrapper attributes and requires actions. Group naming, presence, and overlay ownership are reserved. |
CDisclosure client inputs
Client inputs are passed in the browser through the $c-props="{ ... }" attribute on <c-CDisclosure />.
| Input | Type | Omitted behavior | Effect |
|---|---|---|---|
open | boolean | null | Releases control and commits the retained uncontrolled or server baseline. null has the same effect. | Controls expansion while supplied as a Boolean. |
onOpenChange | function | Omission or null selects no component callback. | Receives accepted native-trigger requests before an uncontrolled commit. |
disabled | boolean | Uses the server input. | Controls local disabledness below native Form or fieldset ownership. |
variant | "outline" | "soft" | "plain" (CDisclosureVariant) | Uses the server input. | Controls visual treatment. |
size | "sm" | "md" | "lg" (CDisclosureSize) | Uses the server input. | Controls geometry. |
indicator | boolean | Uses the server input. | Controls chevron visibility. |
indicatorPosition | "start" | "end" (CDisclosureIndicatorPos) | Uses the server input. | Controls logical chevron placement. |
Slots
Slots are passed as nested content or <c-fill> tags in a template, or through the slots={...} argument in Python.
CDisclosure slots
| Slot | Required | Data | Fallback |
|---|---|---|---|
title | yes | {} (CDisclosureTitleSlotData) | None. Uses the guide's exact text/image/decorative-SVG allowlist and requires nonempty structural text. |
default | yes | {} (CDisclosureDefaultSlotData) | None. Accepts standard flow content and resolved Citry components but rejects native dialog, CDialog, CDrawer, raw popovers, unresolved custom elements, customized built-ins, and authored shadow hosts. |
actions | no | {} (CDisclosureActionsSlotData) | No adjacent actions wrapper. Uses the default boundary and also rejects nested Disclosure or Accordion roots. |
Events
Component events are callback inputs supplied through $c-props. Native browser events remain available through Alpine @... attributes.
CDisclosure events
| Event | Signature | Trigger and timing | Detail | Controlled and cancellation behavior |
|---|---|---|---|---|
onOpenChange | (open: boolean, detail: CDisclosureOpenChangeDetail) => void (CDisclosureOpenChangeDetail) | An enabled native trigger activation requests the opposite expansion state. | {open: boolean, previousOpen: boolean, source: "activation", controlled: boolean} (CDisclosureOpenChangeDetail) | Runs before an uncontrolled commit. A controlled Disclosure waits for open; return values do not cancel. |
Methods
-
CSS
CSS variables to theme the components. Set them on an ancestor or the component itself.
CDisclosure CSS variables
Apply these variables to CDisclosure or one of its ancestors.
| Variable | Type | Purpose | Default |
|---|---|---|---|
--cui-disclosure-background | color | Root surface. | Canvas |
--cui-disclosure-foreground | color | Title and panel foreground. | CanvasText |
--cui-disclosure-border-color | color | Outline boundary. | Scheme-derived current-color mix. |
--cui-disclosure-border-width | length | Stable border geometry. | 1px |
--cui-disclosure-radius | length | Root corner radius. | 0.75rem |
--cui-disclosure-trigger-background | color | Resting trigger surface. | transparent |
--cui-disclosure-trigger-hover-background | color | Enabled hover surface. | Current-color mix. |
--cui-disclosure-trigger-open-background | color | Expanded trigger surface. | Accent mix. |
--cui-disclosure-trigger-open-color | color | Expanded title and indicator. | Scheme blue. |
--cui-disclosure-focus-color | color | Trigger focus ring. | Highlight |
--cui-disclosure-indicator-color | color | Chevron foreground. | currentColor |
--cui-disclosure-trigger-padding-inline | length | Logical trigger inset. | Size-derived. |
--cui-disclosure-trigger-padding-block | length | Block trigger inset. | Size-derived. |
--cui-disclosure-panel-padding-inline | length | Logical body inset. | Size-derived. |
--cui-disclosure-panel-padding-block | length | Block body inset. | Size-derived. |
--cui-disclosure-actions-gap | length | Adjacent action spacing. | 0.5rem |
--cui-disclosure-duration | time | Panel and indicator transition. | 180ms |
--cui-disclosure-easing | easing | Panel and indicator transition curve. | ease-out |
Attributes
HTML attributes defined on the components that you can refer to for CSS, inspection, and testing. Read-only.
CDisclosure attributes
| Attribute | Element | Type | Meaning |
|---|---|---|---|
data-variant | Root | "outline" | "soft" | "plain" | Mirrors effective treatment. |
data-size | Root | "sm" | "md" | "lg" | Mirrors effective geometry. |
data-state | Root, trigger, and panel | "open" | "closed" | Mirrors committed expansion. |
data-disabled | Root and trigger | present | absent | Mirrors browser-effective trigger disabledness. |
data-indicator | Root | present | absent | Present while the chevron is shown. |
data-indicator-pos | Root | "start" | "end" | Mirrors logical chevron placement. |
id | Root | str | Uses the supplied root ID or a generated instance ID. |
id | Trigger and panel | generated str | Derives the stable relationship pair from the root ID. |
aria-expanded | Trigger | "true" | "false" | Exposes native expansion state. |
aria-controls | Trigger | panel IDREF | Identifies the controlled panel. |
disabled | Trigger | present | absent | Present for component-owned disabledness; a native fieldset can also disable without adding this attribute. |
role | Panel | absent | "region" | Present only when region is enabled. |
aria-labelledby | Panel | absent | trigger IDREF | Names an optional region from its trigger. |
aria-hidden | Panel | absent | "true" | Present while closed. |
inert | Panel | present | absent | Removes closed descendants from focus and interaction. |
hidden | Panel | present | absent | Removes a settled closed panel from rendering. |
hidden | Indicator | present | absent | Removes the chevron when indicator is false. |
Selectors
Selectors for the DOM nodes in the components that you can use for CSS, inspection, and testing.
CDisclosure selectors
| Selector | Element | Purpose |
|---|---|---|
[data-citry-ui-part="disclosure"] | Root div | Surface and class/style/attrs destination. |
[data-citry-ui-part="disclosure-header"] | Header div | Heading and adjacent-action layout. |
[data-citry-ui-part="disclosure-heading"] | Native h2-h6 | Document-outline heading and heading_attrs destination. |
[data-citry-ui-part="disclosure-trigger"] | Native Button | Expansion control and trigger_attrs destination. |
[data-citry-ui-part="disclosure-title"] | Span | Structural title text wrapper. |
[data-citry-ui-part="disclosure-indicator"] | Decorative span | Owned chevron wrapper. |
[data-citry-ui-part="disclosure-actions"] | Optional div | Adjacent actions and actions_attrs destination. |
[data-citry-ui-part="disclosure-panel"] | Controlled div | Always-mounted presence surface and panel_attrs destination. |
[data-citry-ui-part="disclosure-body"] | Div | Panel content inset. |
Interfaces
Aliases and data shapes referenced above.
Input type aliases
| Interface | Definition |
|---|---|
CClassValue | str | Mapping[str, bool] | Sequence[CClassValue] |
CStyleValue | str | Mapping[str, str | int | float | bool | None] | Sequence[CStyleValue] |
CDisclosureVariant | Literal["outline", "soft", "plain"] |
CDisclosureSize | Literal["sm", "md", "lg"] |
CDisclosureIndicatorPos | Literal["start", "end"] |
CDisclosureHeadingLevel | Literal[2, 3, 4, 5, 6] |
CDisclosureTitleSlotData
Empty dataclass: {}.
CDisclosureDefaultSlotData
Empty dataclass: {}.
CDisclosureActionsSlotData
Empty dataclass: {}.
CDisclosureOpenChangeDetail
| Field | Type | Default | Meaning |
|---|---|---|---|
open | boolean | - | Requested next expansion. |
previousOpen | boolean | - | Committed expansion before the request. |
source | "activation" | - | Native trigger activation source. |
controlled | boolean | - | Whether a valid client Boolean owned state when requested. |
Translation keys
-