import "./scroller-_79O72Ac.js"; import "./tab-ChM3KdFB.js"; import "./tab-panel-B5Q5luZP.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/tab-list/tab-list.d.ts /** * * * @summary Allows users to switch between different sections of content without leaving the page, providing a clean and * @tag sigvelo-tab-list * organized interface. * @documentation https://design-system.sigvelo.com/docs/components/tab-list * @status stable * @since 1.0 * * @dependency sigvelo-scroller * @dependency sigvelo-tab * @dependency sigvelo-tab-panel * * @slot - One or more `` elements, each with a `name` attribute unique to the tab list. * @slot tab - One or more `` elements, each with a `panel` attribute linked to the `name` of a tab panel. * Note that tabs will automatically apply this slot to themselves, so you can safely omit `slot="tab"` in your markup. * Also useful for adding close buttons to tabs. * * @event sigvelo-tab-shown - Emitted after a tab is shown. The event will include a `detail` object with `tab` and * `panel`properties that reference the respective tab and panel elements. * @event sigvelo-tab-hidden - Emitted after a tab is hidden. The event will include a `detail` object with `tab` and * `panel` properties that reference the respective tab and panel elements. * * @csspart tabs - The container that holds all of the tabs, a `` element. * @csspart tabs-content - The scroller's `content` part. * @csspart panels - The container that holds all of the tab panels. * * @example Default * Tab lists follow the ARIA APG tooltip pattern for accessibility. They are comprised of three different components. A single tab list surrounds one or more tabs and their corresponding tab panels. Each panel must have a unique `name`, and each tab must have a `panel` attribute that maps to a panel. * * ```html * * First * Second * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * ``` * * **Note:** In the same way that images require `alt` text, you should add a `label` to every tab list. The label won't be displayed, but it will be announced by assistive devices. * * @example Setting the active tab * To make a specific tab show initially, or to programmatically activate a tab, set the `tab` attribute to the name of the desired panel. * * ```html * * First * Second * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * ``` * * @example Showing tabs at the bottom * Set the `placement` attribute to `bottom` to show tabs at the bottom. * * ```html * * First * Second * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * ``` * * @example Showing tabs at the start * Set the `placement` attribute to `start` to show tabs at the start. The tabs will automatically move to the opposite side in RTL languages. * * ```html * * First * Second * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * ``` * * @example Showing tabs at the end * Set the `placement` attribute to `end` to show tabs at the end. The tabs will automatically move to the opposite side in RTL languages. * * ```html * * First * Second * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * ``` * * @example Scrolling tabs * When the number of tabs exceeds the available space in a top or bottom placement, the tab container will scroll horizontally. * * ```html * * First * Second * Third * Fourth * Fifth * Sixth * Seventh * Eight * Ninth * Tenth * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * Stealthy shadows in the moonlight, cats emerge for nocturnal adventures through gardens and alleyways. Their night vision reveals a secret world invisible to human eyes during daylight hours. * Cozy blanket burrows become the ultimate fortress for sleepy kitties seeking warmth. The rhythmic breathing of a napping cat creates the most soothing soundtrack for peaceful afternoons. * Laser pointer dots trigger ancient hunting instincts, sending cats into acrobatic displays of athleticism. Every red dot becomes the ultimate prey in this eternal game of chase and pounce. * Catnip-infused toys transform ordinary house cats into euphoric party animals rolling with unbridled joy. This magical herb unlocks a level of feline happiness that's absolutely contagious to witness. * Scratching posts serve as both manicure stations and territorial markers for our feline friends. Each scratch communicates ownership while maintaining those razor-sharp claws in perfect hunting condition. * Cardboard boxes become luxury penthouses in the cat real estate market, regardless of size. Whether tiny or enormous, every box offers the perfect hideout for surveillance and surprise attacks. * Sunrise stretches and yoga poses demonstrate the incredible flexibility that makes cats natural contortionists. Their graceful movements inspire humans to embrace daily stretching routines for better health. * * ``` * * If you don't want the tabs to scroll, you can apply `flex-wrap: wrap` to the `tabs-content` part to allow them to wrap instead. * * ```html * * First * Second * Third * Fourth * Fifth * Sixth * Seventh * Eight * Ninth * Tenth * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * Stealthy shadows in the moonlight, cats emerge for nocturnal adventures through gardens and alleyways. Their night vision reveals a secret world invisible to human eyes during daylight hours. * Cozy blanket burrows become the ultimate fortress for sleepy kitties seeking warmth. The rhythmic breathing of a napping cat creates the most soothing soundtrack for peaceful afternoons. * Laser pointer dots trigger ancient hunting instincts, sending cats into acrobatic displays of athleticism. Every red dot becomes the ultimate prey in this eternal game of chase and pounce. * Catnip-infused toys transform ordinary house cats into euphoric party animals rolling with unbridled joy. This magical herb unlocks a level of feline happiness that's absolutely contagious to witness. * Scratching posts serve as both manicure stations and territorial markers for our feline friends. Each scratch communicates ownership while maintaining those razor-sharp claws in perfect hunting condition. * Cardboard boxes become luxury penthouses in the cat real estate market, regardless of size. Whether tiny or enormous, every box offers the perfect hideout for surveillance and surprise attacks. * Sunrise stretches and yoga poses demonstrate the incredible flexibility that makes cats natural contortionists. Their graceful movements inspire humans to embrace daily stretching routines for better health. * * * * ``` * * @example Disabling * To disable a tab, add the `disabled` attribute to it. Since tabs use automatic activation, disabled tabs are not focusable but are still recognized by assistive devices as disabled tabs. * * ```html * * First * Second (disabled) * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * ``` * * @example Lazy loading content * Sigvelo considers lazy loading tab content to be an anti-pattern but, when necessary, you can use the `sigvelo-tab-shown` event to do it. * * ```html * * Regular * Lazy * * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * * * * * * * ``` * * @example Making tabs closable * Avoid nesting buttons and other interactive elements inside of a tab, as it will cause assistive devices to work incorrectly. Instead, you can add buttons adjacent to tabs using the `tab` slot as shown in this example. When tabs are removable, you should also listen for the [[Delete]] key. * * Note that we use `tabindex="-1"` on the close button to prevent it from interfering with normal tabbing. The button, however, is still accessible to virtual cursors. * * ```html * * First * Second * * * * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * * Restore Tab * * * * * ``` * * @example Styling tab lists * Tab lists come with a simple, minimal appearance. Feel free to customize them with your own styles. * * ```html * * First * Second * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * * * ``` * * ```html * * First * Second * Third * * Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. * Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. * Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. * * * * ``` */ declare class SigveloTabList extends SigveloElement { static styles: CSSResultGroup; private localize; private tabSlot; private panelSlot; /** * An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so you should * always include one. */ label: string; /** The name of the tab panel that's currently active. */ tab: string; /** The placement of tab controls. */ placement: "top" | "bottom" | "start" | "end"; updated(changedProperties: PropertyValues): void; /** * Gets an array of tabs slotted into the tab list. * * `slotchange` can fire before the first render and after the element is * disconnected, so the @query result is not guaranteed to be present; an * empty list is the correct answer in both cases. */ private getTabs; private getPanels; private handleTabsClick; private handleTabsKeyDown; private handleSlotChange; /** Sets the active tab + panel. */ private setActiveTab; /** @internal Makes only the active tab tabbable. If no tab is active, the first non-disabled tab will be tabbable. */ resetRovingTabIndex(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-tab-list": SigveloTabList; } } //#endregion export { SigveloTabList as t };