dap-design-system/dist/components/sidenav/sidenav-item.component.d.ts

Official design system for the DÁP (dap.gov.hu)

import { AriaCurrent, SidenavSpacing } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
/**
 * `dap-ds-sidenav-item`
 * @summary Side navigation item
 * @element dap-ds-sidenav-item
 * @title - Side navigation item
 * @group side-navigation
 *
 * @slot - The content of the side navigation item.
 * @slot suffix - The suffix of the side navigation item.
 *
 * @csspart base - The main side navigation item container.
 * @csspart link - The link of the side navigation item.
 *
 * @cssproperty --dds-sidenav-item-min-height-xs - Minimum height of the sidenav item (default: var(--dds-spacing-800))
 * @cssproperty --dds-sidenav-item-min-height-sm - Minimum height of the sidenav item (default: var(--dds-spacing-1000))
 * @cssproperty --dds-sidenav-item-min-height-lg - Minimum height of the sidenav item (default: var(--dds-spacing-1200))
 * @cssproperty --dds-sidenav-item-margin-bottom - Default bottom margin of the sidenav item (default: var(--dds-spacing-100))
 * @cssproperty --dds-sidenav-item-padding-xs - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300))
 * @cssproperty --dds-sidenav-item-padding-sm - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400))
 * @cssproperty --dds-sidenav-item-padding-lg - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500))
 * @cssproperty --dds-sidenav-item-radius - Border radius of the sidenav item (default: var(--dds-radius-base))
 * @cssproperty --dds-sidenav-item-color - Text color of the sidenav item (default: var(--dds-text-neutral-base))
 * @cssproperty --dds-sidenav-item-font-size-xs - Font size of the sidenav item (default: var(--dds-font-sm))
 * @cssproperty --dds-sidenav-item-font-size-sm - Font size of the sidenav item (default: var(--dds-font-base))
 * @cssproperty --dds-sidenav-item-font-size-lg - Font size of the sidenav item (default: var(--dds-font-lg))
 * @cssproperty --dds-sidenav-item-font-weight - Font weight of the sidenav item (default: var(--dds-font-weight-medium))
 * @cssproperty --dds-sidenav-item-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))
 * @cssproperty --dds-sidenav-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))
 * @cssproperty --dds-sidenav-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))
 */
export default class DapDSSideNavItem extends DdsElement {
    static tagName: string;
    /** The href of the side navigation item */
    href: string;
    /** Whether the side navigation item is active */
    active: boolean;
    /**
     * Which `aria-current` token to expose on the link when `active` is set.
     *
     * `aria-current` has to sit on the anchor that assistive technology actually
     * exposes. Setting it on this host does nothing: the host is a role-less custom
     * element, so the attribute is stranded there and screen-reader users cannot tell
     * which item is current. Use `current="step"` inside a stepper.
     *
     * @type {'page' | 'step' | 'location' | 'date' | 'time' | 'true'}
     */
    current: AriaCurrent;
    /** The spacing of the side navigation item
     * @type {'top' | 'bottom' | 'both' | 'none'}
     */
    spacing: SidenavSpacing;
    /** The size of the side navigation item */
    size: 'xs' | 'sm' | 'lg';
    static readonly styles: import('lit').CSSResult;
    render(): import('lit-html').TemplateResult;
}