@mcp-b/web-components 0.2.0

package/dist/tab-list-DDvS8qHr.d.ts

@@ -0,0 +1,450 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/tab-list/tab-list.d.ts
+/**
+ * <sigvelo-tab-list>
+ *
+ * @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 `<sigvelo-tab-panel>` elements, each with a `name` attribute unique to the tab list.
+ * @slot tab - One or more `<sigvelo-tab>` 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 `<sigvelo-scroller>` 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
+ * <sigvelo-tab-list label="Select a tab">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ * ```
+ *
+ * **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
+ * <sigvelo-tab-list label="Select a tab" tab="second">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ * ```
+ *
+ * @example Showing tabs at the bottom
+ * Set the `placement` attribute to `bottom` to show tabs at the bottom.
+ *
+ * ```html
+ * <sigvelo-tab-list label="Select a tab" placement="bottom">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ * ```
+ *
+ * @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 <abbr title="Right to left">RTL</abbr> languages.
+ *
+ * ```html
+ * <sigvelo-tab-list label="Select a tab" placement="start">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ * ```
+ *
+ * @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 <abbr title="Right to left">RTL</abbr> languages.
+ *
+ * ```html
+ * <sigvelo-tab-list label="Select a tab" placement="end">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ * ```
+ *
+ * @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
+ * <sigvelo-tab-list label="Select a tab">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ * 	<sigvelo-tab panel="fourth">Fourth</sigvelo-tab>
+ * 	<sigvelo-tab panel="fifth">Fifth</sigvelo-tab>
+ * 	<sigvelo-tab panel="sixth">Sixth</sigvelo-tab>
+ * 	<sigvelo-tab panel="seventh">Seventh</sigvelo-tab>
+ * 	<sigvelo-tab panel="eight">Eight</sigvelo-tab>
+ * 	<sigvelo-tab panel="ninth">Ninth</sigvelo-tab>
+ * 	<sigvelo-tab panel="tenth">Tenth</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="fourth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="fifth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="sixth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="seventh">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="eight">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="ninth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="tenth">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ * ```
+ *
+ * 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
+ * <sigvelo-tab-list label="Select a tab" id="tabs-list__no-scroll">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ * 	<sigvelo-tab panel="fourth">Fourth</sigvelo-tab>
+ * 	<sigvelo-tab panel="fifth">Fifth</sigvelo-tab>
+ * 	<sigvelo-tab panel="sixth">Sixth</sigvelo-tab>
+ * 	<sigvelo-tab panel="seventh">Seventh</sigvelo-tab>
+ * 	<sigvelo-tab panel="eight">Eight</sigvelo-tab>
+ * 	<sigvelo-tab panel="ninth">Ninth</sigvelo-tab>
+ * 	<sigvelo-tab panel="tenth">Tenth</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="fourth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="fifth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="sixth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="seventh">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="eight">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="ninth">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="tenth">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ *
+ * <style>
+ *   sigvelo-tab-list#tabs-list__no-scroll::part(tabs-content) {
+ *     flex-wrap: wrap;
+ *   }
+ * </style>
+ * ```
+ *
+ * @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
+ * <sigvelo-tab-list label="Select a tab">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second" disabled>Second (disabled)</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ * ```
+ *
+ * @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
+ * <sigvelo-tab-list label="Select a tab" id="tab-list__lazy">
+ * 	<sigvelo-tab panel="regular">Regular</sigvelo-tab>
+ * 	<sigvelo-tab panel="lazy">Lazy</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="regular">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="lazy">
+ *     <sigvelo-spinner label="Loading" style="display: block; margin-inline: auto;"></sigvelo-spinner>
+ *   </sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ *
+ * <script>
+ *   const tabList = document.getElementById('tab-list__lazy');
+ *   const lazyPanel = tabList.querySelector('sigvelo-tab-panel[name="lazy"]');
+ *
+ *   tabList.addEventListener('sigvelo-tab-shown', event => {
+ *     if (event.detail.tab.panel === 'lazy' && !lazyPanel.hasAttribute('data-loaded')) {
+ *       lazyPanel.setAttribute('data-loaded', '');
+ *
+ *       // Some async operation...
+ *
+ *       setTimeout(() => {
+ *         lazyPanel.innerHTML = 'Surprise! A sleepy kitten just finished loading and is now ready for belly rubs and treats.';
+ *       }, 2000);
+ *     }
+ *   });
+ * </script>
+ * ```
+ *
+ * @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
+ * <sigvelo-tab-list label="Select a tab" id="tab-list__closable">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ *   <sigvelo-button slot="tab" variant="ghost" size="xs" icon-label="Close second tab" tabindex="-1">
+ *     <sigvelo-icon name="x"></sigvelo-icon>
+ *   </sigvelo-button>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ *
+ * <sigvelo-button disabled style="margin-block-start: 2rem;">Restore Tab</sigvelo-button>
+ *
+ * <script>
+ *   const tabList = document.getElementById('tab-list__closable');
+ *   const firstTab = tabList.querySelector('sigvelo-tab[panel="first"]');
+ *   const secondTab = tabList.querySelector('sigvelo-tab[panel="second"]');
+ *   const secondPanel = tabList.querySelector('sigvelo-tab-panel[name="second"]');
+ *   const closeButton = tabList.querySelector('sigvelo-button');
+ *   const restoreButton = tabList.nextElementSibling;
+ *
+ *   function closeTab() {
+ *     closeButton.remove();
+ *     secondTab.remove();
+ *     secondPanel.remove();
+ *     restoreButton.disabled = false;
+ *
+ *     if (tabList.active === 'second') {
+ *       tabList.active = 'third';
+ *     }
+ *   }
+ *
+ *   function restoreTab() {
+ *     firstTab.insertAdjacentElement('afterend', closeButton);
+ *     firstTab.insertAdjacentElement('afterend', secondTab);
+ *     tabList.append(secondPanel);
+ *     restoreButton.disabled = true;
+ *   }
+ *
+ *   // Remove the tab when the close button is clicked
+ *   closeButton.addEventListener('click', closeTab);
+ *
+ *   // Remove the tab when delete is pressed
+ *   secondTab.addEventListener('keydown', event => {
+ *     if (event.key === 'Delete') {
+ *       closeTab();
+ *     }
+ *   });
+ *
+ *   // Restore the tab
+ *   restoreButton.addEventListener('click', restoreTab);
+ * </script>
+ *
+ * <style>
+ *   #tab-list__closable {
+ *     sigvelo-button {
+ *       position: relative;
+ *       left: -1rem;
+ *       font-size: .875rem;
+ *       margin-inline-end: -.5rem;
+ *     }
+ *
+ *     sigvelo-button::part(button) {
+ *       border-radius: var(--sigvelo-radius-md);
+ *       height: 2rem;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * @example Styling tab lists
+ * Tab lists come with a simple, minimal appearance. Feel free to customize them with your own styles.
+ *
+ * ```html
+ * <sigvelo-tab-list label="Select a tab" class="tab-list__cards">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ *
+ * <style>
+ *   .tab-list__cards {
+ *     border: solid 1px var(--sigvelo-color-neutral-border-subtle);
+ *     border-radius: var(--sigvelo-radius-md);
+ *     box-shadow: var(--sigvelo-elevation-hairline);
+ *
+ *     &::part(tabs) {
+ *       padding-top: 0.5rem;
+ *     }
+ *
+ *     &::part(panels) {
+ *       padding: 1.5rem 1rem;
+ *     }
+ *
+ *     sigvelo-tab {
+ *       background-color: var(--sigvelo-color-surface);
+ *       border: solid 1px var(--sigvelo-color-neutral-border-subtle);
+ *       border-start-start-radius: var(--sigvelo-radius-md);
+ *       border-start-end-radius: var(--sigvelo-radius-md);
+ *       color: var(--sigvelo-color-text-muted);
+ *       padding-block: 0.75rem;
+ *       margin-inline: 0.25rem;
+ *
+ *       &:state(active) {
+ *         background-color: var(--sigvelo-color-canvas);
+ *       }
+ *     }
+ *
+ *     sigvelo-tab:first-of-type {
+ *       margin-inline-start: 0.5rem;
+ *     }
+ *
+ *     sigvelo-tab:last-of-type {
+ *       margin-inline-end: 0.5rem;
+ *     }
+ *
+ *     sigvelo-tab:state(active) {
+ *       border-bottom-color: var(--sigvelo-color-canvas);
+ *       color: var(--sigvelo-color-text);
+ *     }
+ *
+ *     &::part(panels) {
+ *       border-top-width: 1px;
+ *       margin-top: -1px;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * ```html
+ * <sigvelo-tab-list label="Select a tab" class="tab-list__segments">
+ * 	<sigvelo-tab panel="first">First</sigvelo-tab>
+ * 	<sigvelo-tab panel="second">Second</sigvelo-tab>
+ * 	<sigvelo-tab panel="third">Third</sigvelo-tab>
+ *
+ * 	<sigvelo-tab-panel name="first">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.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</sigvelo-tab-panel>
+ * 	<sigvelo-tab-panel name="third">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.</sigvelo-tab-panel>
+ * </sigvelo-tab-list>
+ *
+ * <style>
+ *   .tab-list__segments {
+ *     &::part(tabs) {
+ *       justify-content: space-between;
+ *       background-color: var(--sigvelo-color-neutral-bg-subtle);
+ *       border-radius: var(--sigvelo-radius-md);
+ *       padding: .25rem;
+ *     }
+ *
+ *     sigvelo-tab {
+ *       flex: 1 1 auto;
+ *       justify-content: center;
+ *       border: none;
+ *       border-radius: var(--sigvelo-radius-md);
+ *       color: var(--sigvelo-color-text-muted);
+ *       padding-inline: 2rem;
+ *       padding-block: .25rem;
+ *       transition: 100ms background-color ease, 100ms color ease;
+ *     }
+ *
+ *     sigvelo-tab:first-child {
+ *       margin-inline-start: 0;
+ *     }
+ *
+ *     sigvelo-tab:state(active) {
+ *       border: none;
+ *       background-color: var(--sigvelo-color-canvas);
+ *       color: var(--sigvelo-color-text);
+ *     }
+ *
+ *     &::part(panels) {
+ *       border: none;
+ *       padding-block: 1rem;
+ *       margin: 0;
+ *     }
+ *   }
+ * </style>
+ * ```
+ */
+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<this>): 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 };

package/dist/tab-panel-BaBl6eep.js

@@ -0,0 +1,60 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/tab-panel/tab-panel.styles.ts
+var tab_panel_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  :host(:not(:state(visible))) {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/tab-panel/tab-panel.ts
+/**
+* <sigvelo-tab-panel>
+*
+* @summary Holds the content that gets displayed when a tab is selected.
+* @tag sigvelo-tab-panel
+* @documentation https://design-system.sigvelo.com/docs/components/tab-panel
+* @status stable
+* @since 1.0
+*
+* @slot - Content to show inside the tab panel.
+*
+* @cssstate visible - Applied when the tab panel is visible.
+*
+* @example Default
+* This component must only be used within a tab list. You can see some examples of tab panels being used in the tab list documentation.
+*/
+var SigveloTabPanel = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.visible = false;
+	}
+	static {
+		this.styles = [hostStyles, tab_panel_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "tabpanel");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.visible = false;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("visible")) this.customStates.set("visible", this.visible);
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Boolean })], SigveloTabPanel.prototype, "visible", void 0);
+__decorate([property({ reflect: true })], SigveloTabPanel.prototype, "name", void 0);
+customElements.define("sigvelo-tab-panel", SigveloTabPanel);
+//#endregion
+export { SigveloTabPanel as t };

package/dist/tab-panel-BzSJlSfd.d.ts

@@ -0,0 +1,38 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/tab-panel/tab-panel.d.ts
+/**
+ * <sigvelo-tab-panel>
+ *
+ * @summary Holds the content that gets displayed when a tab is selected.
+ * @tag sigvelo-tab-panel
+ * @documentation https://design-system.sigvelo.com/docs/components/tab-panel
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - Content to show inside the tab panel.
+ *
+ * @cssstate visible - Applied when the tab panel is visible.
+ *
+ * @example Default
+ * This component must only be used within a tab list. You can see some examples of tab panels being used in the tab list documentation.
+ */
+declare class SigveloTabPanel extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** @internal The controller will set this when the panel should be visible. */
+  visible: boolean;
+  /** The name of the tab panel. Used for assigning tabs to panels. */
+  name: string;
+  firstUpdated(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-tab-panel": SigveloTabPanel;
+  }
+}
+//#endregion
+export { SigveloTabPanel as t };