dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
40 lines (39 loc) • 2.8 kB
TypeScript
import { EventName } from '@lit/react';
import { default as Component } from '../../components/toc/toc.js';
import { DdsAnchorChangeEvent } from '../../events/events';
export type { DdsAnchorChangeEvent } from '../../events/events';
/**
* `dap-ds-toc`
* @summary A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.
* @element dap-ds-toc
* @title - toc
*
* @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the TOC. Default is `lg.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg").
*
* @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.
*
* @csspart base - The main container of the toc.
*
* @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))
* @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))
* @cssproperty --dds-toc-title-color - Color of the TOC title. (default: var(--dds-text-neutral-strong))
* @cssproperty --dds-toc-title-font-size - Font size of the TOC title. (default: var(--dds-font-base))
* @cssproperty --dds-toc-title-font-weight - Font weight of the TOC title. (default: var(--dds-font-weight-bold))
* @cssproperty --dds-toc-title-line-height - Line height of the TOC title. (default: 1.25)
* @cssproperty --dds-toc-link-color - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled))
* @cssproperty --dds-toc-link-active-color - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled))
* @cssproperty --dds-toc-link-border-color - Border color of the active TOC link. (default: var(--dds-border-brand-base))
* @cssproperty --dds-toc-link-line-height - Line height of the TOC links. (default: 1.2)
* @cssproperty --dds-toc-link-padding - Padding of the TOC links. (default: var(--dds-spacing-200))
* @cssproperty --dds-toc-indent-level-0 - Indent level of the TOC items. (default: var(--dds-spacing-400))
* @cssproperty --dds-toc-indent-level-1 - Indent level of the TOC items. (default: var(--dds-spacing-800))
* @cssproperty --dds-toc-indent-level-2 - Indent level of the TOC items. (default: var(--dds-spacing-1200))
* @cssproperty --dds-toc-indent-level-3 - Indent level of the TOC items. (default: var(--dds-spacing-1600))
* @cssproperty --dds-toc-indent-level-4 - Indent level of the TOC items. (default: var(--dds-spacing-2000))
* @cssproperty --dds-toc-indent-level-5 - Indent level of the TOC items. (default: var(--dds-spacing-2400))
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
onDdsAnchorChange: EventName<DdsAnchorChangeEvent>;
}>;
export default reactWrapper;