@mcp-b/web-components 0.2.0

package/dist/tab-list-B_Ye_Oj9.js

@@ -0,0 +1,691 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./scroller-LYgBVyfY.js";
+import "./tab-C-FtuNmh.js";
+import "./tab-panel-BaBl6eep.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { createId } from "@mcp-b/wc-support/utilities/math";
+import { SigveloTabHiddenEvent, SigveloTabShownEvent } from "@mcp-b/wc-support/events/tabs";
+//#region src/components/tab-list/tab-list.styles.ts
+var tab_list_styles_default = css`
+  :host {
+    display: flex;
+  }
+
+  #tabs::part(content) {
+    display: flex;
+    position: relative;
+  }
+
+  /* Top placement */
+  :host([placement="top"]) {
+    flex-direction: column;
+  }
+
+  :host([placement="top"]) #tabs::part(content) {
+    align-items: center;
+  }
+
+  :host([placement="top"]) #panels {
+    margin-top: calc(var(--sigvelo-border-width) * -2);
+    padding-top: 2rem;
+    border-top: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+      var(--sigvelo-color-neutral-border-subtle);
+  }
+
+  :host([placement="top"]) ::slotted(sigvelo-tab) {
+    border-bottom: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2) transparent;
+  }
+
+  :host([placement="top"]) ::slotted(sigvelo-tab[aria-selected="true"]) {
+    border-bottom-color: var(--sigvelo-color-primary-bg);
+  }
+
+  /* Bottom placement */
+  :host([placement="bottom"]) {
+    flex-direction: column;
+  }
+
+  :host([placement="bottom"]) #tabs {
+    order: 2;
+  }
+
+  :host([placement="bottom"]) #tabs::part(content) {
+    align-items: center;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  :host([placement="bottom"]) #panels {
+    order: 1;
+    margin-bottom: calc(var(--sigvelo-border-width) * -2);
+    padding-bottom: 2rem;
+    border-bottom: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+      var(--sigvelo-color-neutral-border-subtle);
+  }
+
+  :host([placement="bottom"]) ::slotted(sigvelo-tab) {
+    border-top: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2) transparent;
+  }
+
+  :host([placement="bottom"]) ::slotted(sigvelo-tab[aria-selected="true"]) {
+    border-top-color: var(--sigvelo-color-primary-bg);
+  }
+
+  /* Start placement */
+  :host([placement="start"]) {
+    flex-direction: row;
+  }
+
+  :host([placement="start"]) #tabs::part(content) {
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+
+  :host([placement="start"]) #panels {
+    flex: 1 1 auto;
+    margin-inline-start: calc(var(--sigvelo-border-width) * -2);
+    padding-inline-start: 2rem;
+    border-left: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+      var(--sigvelo-color-neutral-bg-muted);
+  }
+
+  :host([placement="start"]) #panels:dir(rtl) {
+    border-right: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+      var(--sigvelo-color-neutral-bg-muted);
+    border-left: none;
+  }
+
+  :host([placement="start"]) ::slotted(sigvelo-tab) {
+    border-right: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2) transparent;
+  }
+
+  :host([placement="start"]) ::slotted(sigvelo-tab:dir(rtl)) {
+    border-right: none;
+    border-left: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2) transparent;
+  }
+
+  :host([placement="start"]) ::slotted(sigvelo-tab[aria-selected="true"]) {
+    border-color: var(--sigvelo-color-primary-bg);
+  }
+
+  /* End placement */
+  :host([placement="end"]) {
+    flex-direction: row;
+  }
+
+  :host([placement="end"]) #tabs {
+    order: 2;
+  }
+
+  :host([placement="end"]) #tabs::part(content) {
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+
+  :host([placement="end"]) #panels {
+    flex: 1 1 auto;
+    order: 1;
+    margin-inline-end: calc(var(--sigvelo-border-width) * -2);
+    padding-inline-end: 2rem;
+    border-right: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+      var(--sigvelo-color-neutral-bg-muted);
+  }
+
+  :host([placement="end"]) #panels:dir(rtl) {
+    border-right: none;
+    border-left: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+      var(--sigvelo-color-neutral-bg-muted);
+  }
+
+  :host([placement="end"]) ::slotted(sigvelo-tab) {
+    border-left: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2) transparent;
+  }
+
+  :host([placement="end"]) ::slotted(sigvelo-tab:dir(rtl)) {
+    border-right: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2) transparent;
+    border-left: none;
+  }
+
+  :host([placement="end"]) ::slotted(sigvelo-tab[aria-selected="true"]) {
+    border-color: var(--sigvelo-color-primary-bg);
+  }
+`;
+//#endregion
+//#region src/components/tab-list/tab-list.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>
+* ```
+*/
+var SigveloTabList = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.placement = "top";
+	}
+	static {
+		this.styles = [hostStyles, tab_list_styles_default];
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("label")) this.setAttribute("aria-label", this.label ?? "");
+		if (changedProperties.has("tab")) this.setActiveTab(this.tab);
+		if (changedProperties.has("placement")) {
+			const orientation = ["top", "bottom"].includes(this.placement) ? "horizontal" : "vertical";
+			this.setAttribute("aria-orientation", orientation);
+		}
+	}
+	/**
+	* 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.
+	*/
+	getTabs(options) {
+		const tabs = this.tabSlot?.assignedElements({ flatten: true }) ?? [];
+		if (options?.includeDisabled) return tabs.filter((tab) => tab.localName === "sigvelo-tab");
+		else return tabs.filter((tab) => tab.localName === "sigvelo-tab" && !tab.disabled);
+	}
+	getPanels() {
+		return (this.panelSlot?.assignedElements({ flatten: true }) ?? []).filter((panel) => panel.localName === "sigvelo-tab-panel");
+	}
+	handleTabsClick(event) {
+		const tab = event.target.closest("sigvelo-tab");
+		if (tab?.panel && !tab.disabled) this.tab = tab.panel || "";
+	}
+	handleTabsKeyDown(event) {
+		const tabs = this.getTabs();
+		const activeTab = tabs.find((tab) => tab.panel === this.tab);
+		const activeTabIndex = activeTab ? tabs.indexOf(activeTab) : 0;
+		const isRtl = this.localize.dir() === "rtl";
+		const isVertical = ["start", "end"].includes(this.placement);
+		let targetTab;
+		if (isVertical && event.key === "ArrowUp" || !isVertical && event.key === (isRtl ? "ArrowRight" : "ArrowLeft")) targetTab = tabs[activeTabIndex === 0 ? tabs.length - 1 : activeTabIndex - 1];
+		if (isVertical && event.key === "ArrowDown" || !isVertical && event.key === (isRtl ? "ArrowLeft" : "ArrowRight")) targetTab = tabs[activeTabIndex === tabs.length - 1 ? 0 : activeTabIndex + 1];
+		if (event.key === "Home" || event.key === "End") targetTab = event.key === "Home" ? tabs[0] : tabs.slice(-1)[0];
+		if (event.key === " ") event.preventDefault();
+		if (targetTab) {
+			event.preventDefault();
+			event.stopPropagation();
+			this.tab = targetTab.panel || "";
+			targetTab.focus();
+		}
+	}
+	handleSlotChange() {
+		const tabs = this.getTabs();
+		const panels = this.getPanels();
+		tabs.forEach((tab) => tab.id = tab.id || createId("sigvelo-tab-"));
+		panels.forEach((panel) => panel.id = panel.id || createId("sigvelo-tab-panel-"));
+		tabs.forEach((tab) => {
+			const name = tab.panel;
+			if (!name) return;
+			const panel = panels.find((p) => p.name === name);
+			if (!panel) return;
+			tab.setAttribute("aria-controls", panel.id);
+			panel.setAttribute("aria-describedby", tab.id);
+		});
+		this.resetRovingTabIndex();
+	}
+	/** Sets the active tab + panel. */
+	setActiveTab(name) {
+		const tabs = this.getTabs({ includeDisabled: true });
+		const panels = this.getPanels();
+		if (!name) return;
+		this.tab = name;
+		for (const tab of tabs) tab.active = tab.panel === name && !tab.disabled;
+		for (const panel of panels) {
+			const linkedTab = tabs.find((tab) => tab.panel === panel.name);
+			if (panel.name === name && linkedTab && !linkedTab.disabled) {
+				panel.visible = true;
+				this.dispatchEvent(new SigveloTabShownEvent({
+					tab: linkedTab,
+					panel
+				}));
+			} else if (linkedTab && panel.visible) {
+				panel.visible = false;
+				this.dispatchEvent(new SigveloTabHiddenEvent({
+					tab: linkedTab,
+					panel
+				}));
+			}
+		}
+	}
+	/** @internal Makes only the active tab tabbable. If no tab is active, the first non-disabled tab will be tabbable. */
+	resetRovingTabIndex() {
+		const tabs = this.getTabs();
+		const targetTab = tabs.find((tab) => tab.active) || tabs[0];
+		if (targetTab) this.setActiveTab(targetTab.panel);
+	}
+	render() {
+		return html`
+      <sigvelo-scroller
+        id="tabs"
+        part="tabs"
+        exportparts="content:tabs-content"
+        @click=${this.handleTabsClick}
+        @keydown=${this.handleTabsKeyDown}
+      >
+        <div role="tablist">
+          <slot name="tab" @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </sigvelo-scroller>
+
+      <div id="panels" part="panels">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("#tabs > slot")], SigveloTabList.prototype, "tabSlot", void 0);
+__decorate([query("#panels > slot")], SigveloTabList.prototype, "panelSlot", void 0);
+__decorate([property()], SigveloTabList.prototype, "label", void 0);
+__decorate([property({ reflect: true })], SigveloTabList.prototype, "tab", void 0);
+__decorate([property({ reflect: true })], SigveloTabList.prototype, "placement", void 0);
+customElements.define("sigvelo-tab-list", SigveloTabList);
+//#endregion
+export { SigveloTabList as t };