carbon-components-svelte
Version:
Svelte implementation of the Carbon Design System
59 lines (50 loc) • 1.43 kB
TypeScript
import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type $RestProps = SvelteHTMLElements["div"];
type $Props = {
/**
* Specify the summary content of the trigger.
* Alternatively, use the "summary" slot.
* @example
* ```svelte
* <Disclosure>
* <div slot="summary">Custom summary</div>
* </Disclosure>
* ```
* @default ""
*/
summary?: string;
/**
* Specify alignment of the chevron icon.
* @default "end"
*/
align?: "start" | "end";
/**
* Set to `true` to open the disclosure.
* @default false
*/
open?: boolean;
children?: (this: void) => void;
[key: `data-${string}`]: unknown;
};
export type DisclosureProps = Omit<$RestProps, keyof $Props> & $Props;
export default class Disclosure extends SvelteComponentTyped<
DisclosureProps,
{
animationend: WindowEventMap["animationend"];
blur: WindowEventMap["blur"];
click: WindowEventMap["click"];
focus: WindowEventMap["focus"];
keydown: WindowEventMap["keydown"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
mouseover: WindowEventMap["mouseover"];
/** Dispatched with the new open state. */
toggle: CustomEvent<boolean>;
},
{
default: Record<string, never>;
/** Content for the always-visible trigger. */
summary: Record<string, never>;
}
> {}