dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
45 lines (44 loc) • 2.14 kB
TypeScript
import { CommonSize, Placement } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSLink } from '../link/link.component';
/**
* `dap-ds-skip-link`
* @summary A skip link is a link that allows keyboard users to skip to the main content of a page.
* @element dap-ds-skip-link
* @title - Skip link
*
* @slot - The content of the skip link.
*
* @csspart base - The main skip link container.
* @csspart text - The text container of the skip link.
* @csspart high-contrast - The high contrast outline container.
*
* @cssproperty --dds-skip-link-border-color - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500))
* @cssproperty --dds-skip-link-border-width - Border width for the high contrast outline (default: var(--dds-border-width-large))
* @cssproperty --dds-skip-link-border-width-active - Border width for the active state (default: var(--dds-border-width-xlarge))
* @cssproperty --dds-skip-link-border-radius - Border radius of the skip link (default: var(--dds-radius-small))
* @cssproperty --dds-skip-link-padding-sm - Padding for small size variant (default: var(--dds-spacing-200))
* @cssproperty --dds-skip-link-padding-lg - Padding for large size variant (default: var(--dds-spacing-400))
* @cssproperty --dds-skip-link-text-underline-offset - Underline offset for the text (default: 3px)
* @cssproperty --dds-skip-link-z-index - Z-index of the skip link (default: var(--dds-z-index-100))
*/
export default class DapDSSkipLink extends DdsElement {
static tagName: string;
static dependencies: {
'dap-ds-link': typeof DapDSLink;
};
/** The placement of the skip link.
* @type {'left' | 'center'}
*/
placement: Placement;
/** The href of the skip link */
href: string;
/** The size of the skip link
* @type {'sm' | 'lg'}
*/
size: CommonSize;
/** Whether the skip link should have an underline */
noUnderline: boolean;
static readonly styles: import('lit').CSSResult;
render(): import('lit-html').TemplateResult;
}