import { CSSResultGroup } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/breadcrumb/breadcrumb.d.ts /** * * * @summary Offers a trail of links that correspond to an app or website's hierarchy, making navigation more predictable * @tag sigvelo-breadcrumb * for users. * @documentation https://design-system.sigvelo.com/docs/components/breadcrumb * @status stable * @since 1.0 * * @slot - The default slot containing one or more breadcrumb items. * * @cssproperty [--item-spacing=0.5em] - The amount of spacing to use between breadcrumb items. * * @example Default * Breadcrumbs follow the ARIA APG breadcrumb pattern for accessibility. The breadcrumb is labeled for assistive devices and breadcrumb items are announced as links. The breadcrumb corresponding to the current page is styled differently, but remains a functional link. Separators are presentational and will not be announced by screen readers. * * ```html * * * Home * * * * Services * * * * Adoption * * * * Available Cats * * * ``` * * @example Setting the current item * Add the `current` attribute to the breadcrumb item that represents the current page. An empty `href` can be used on current items instead of the full URL. The breadcrumb will be drawn differently, but the link will still be active for optimal accessibility. * * ```html * * * Home * * * * Support * * * * FAQ * * * * What do I feed my cat? * * * ``` * * @example Changing the separator * Use the `separator` slot to change the separator between breadcrumb items. Text and icons work well here. * * ```html * * * Home * / * * * * Products * / * * * * Pets * / * * * * Toys for cats * / * * * *
* * * * Home * * * * * Products * * * * * Pets * * * * * Toys for cats * * * * ``` * * @example Changing the size * Breadcrumbs are sized relative to the current font size. To change their size, apply `font-size` to the breadcrumb or an ancestor element. * * ```html * * * Home * * * * Cat food * * * * Flavors * * * * Tuna * * * *
* * * * Home * * * * Cat food * * * * Flavors * * * * Tuna * * * *
* * * * Home * * * * Cat food * * * * Flavors * * * * Tuna * * * ``` * * @example Start & end icons * Use the `start` and `end` slots to add icons and other presentational elements to various breadcrumb items. * * ```html * * * * Home * * * * Products * * * * Pets * * * * Toys for cats * * * * ``` * * @example Icon-only items * To create icon-only breadcrumb item, slot in an icon and a visually hidden label for assistive devices. You can use the `sigvelo-vh` utility class to visually hide the label. * * ```html * * * * Home * * * * Products * * * * Pets * * * * Toys for cats * * * ``` * * @example With collapsed items * You can create a collapsed breadcrumb item by adding a dropdown with additional options. In this case, omit the `href` attribute so the dropdown won't be wrapped with a link. * * ```html * * * Home * * * * Pets * * * * * * * * Birds * Cats * Dogs * All animals * * * * * Favorites * * * * * ``` * * @example Styling breadcrumbs * Breadcrumbs come with a simple, minimal appearance. Feel free to customize them with your own styles. * * ```html * * * * Music * * * * Artist * * * * Album * * * * Song * * * * * ``` * * ```html * * * * Music * * * * Artist * * * * Album * * * * Song * * * * * ``` */ declare class SigveloBreadcrumb extends SigveloElement { static styles: CSSResultGroup; private localize; firstUpdated(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-breadcrumb": SigveloBreadcrumb; } } //#endregion export { SigveloBreadcrumb as t };