@getflip/swirl-components 0.287.0 → 0.289.0

package/dist/collection/components/swirl-menu/swirl-menu.spec.js

@@ -119,9 +119,7 @@ describe("swirl-menu", () => {
             <swirl-menu-item label="Item 1">
               <mock:shadow-root>
                 <div class="menu-item">
-                  <swirl-action-list-item intent="default" label="Item 1">
-                    <slot name="avatar" slot="avatar"></slot>
-                  </swirl-action-list-item>
+                  <swirl-action-list-item intent="default" label="Item 1"></swirl-action-list-item>
                   <slot></slot>
                 </div>
               </mock:shadow-root>
@@ -129,9 +127,7 @@ describe("swirl-menu", () => {
             <swirl-menu-item label="Item 2">
               <mock:shadow-root>
                 <div class="menu-item">
-                  <swirl-action-list-item intent="default" label="Item 2">
-                    <slot name="avatar" slot="avatar"></slot>
-                  </swirl-action-list-item>
+                  <swirl-action-list-item intent="default" label="Item 2"></swirl-action-list-item>
                   <slot></slot>
                 </div>
               </mock:shadow-root>
@@ -168,9 +164,7 @@ describe("swirl-menu", () => {
                 <swirl-menu-item label="Sub item 1" value="1">
                   <mock:shadow-root>
                     <div class="menu-item">
-                      <swirl-option-list-item label="Sub item 1" swirlariarole="menuitemradio" value="1">
-                        <slot name="avatar" slot="avatar"></slot>
-                      </swirl-option-list-item>
+                      <swirl-option-list-item label="Sub item 1" swirlariarole="menuitemradio" value="1"></swirl-option-list-item>
                       <slot></slot>
                     </div>
                   </mock:shadow-root>
@@ -178,9 +172,7 @@ describe("swirl-menu", () => {
                 <swirl-menu-item label="Sub item 2" value="2">
                   <mock:shadow-root>
                     <div class="menu-item">
-                      <swirl-option-list-item label="Sub item 2" swirlariarole="menuitemradio" value="2">
-                        <slot name="avatar" slot="avatar"></slot>
-                      </swirl-option-list-item>
+                      <swirl-option-list-item label="Sub item 2" swirlariarole="menuitemradio" value="2"></swirl-option-list-item>
                       <slot></slot>
                     </div>
                   </mock:shadow-root>
@@ -190,9 +182,7 @@ describe("swirl-menu", () => {
             <swirl-menu-item label="Item 3">
               <mock:shadow-root>
                 <div class="menu-item">
-                  <swirl-action-list-item intent="default" label="Item 3">
-                    <slot name="avatar" slot="avatar"></slot>
-                  </swirl-action-list-item>
+                  <swirl-action-list-item intent="default" label="Item 3"></swirl-action-list-item>
                   <slot></slot>
                 </div>
               </mock:shadow-root>

package/dist/collection/components/swirl-menu-item/swirl-menu-item.js

@@ -52,6 +52,7 @@ export class SwirlMenuItem {
         this.label = undefined;
         this.suffix = undefined;
         this.value = undefined;
+        this.hasAvatar = false;
         this.parentMenu = undefined;
         this.subMenu = undefined;
     }
@@ -59,6 +60,7 @@ export class SwirlMenuItem {
         this.parentMenu = closestPassShadow(this.el, "swirl-menu");
         this.rootMenu = parentsPassShadow(this.el, "swirl-menu").pop();
         this.subMenu = this.el.querySelector("swirl-menu");
+        this.updateAvatarState();
     }
     watchExpanded() {
         this.updateActionListItemProps();
@@ -93,23 +95,30 @@ export class SwirlMenuItem {
             ? '<swirl-icon-chevron-right size="16"></swirl-icon-chevron-right>'
             : undefined;
     }
+    updateAvatarState() {
+        const avatarContainer = this.el.querySelector('[slot="avatar"]');
+        const hasAvatar = Boolean(avatarContainer);
+        if (hasAvatar !== this.hasAvatar) {
+            this.hasAvatar = hasAvatar;
+        }
+    }
     renderActionListItem() {
         const badge = Boolean(this.subMenu?.value)
             ? Array.from(this.subMenu?.querySelectorAll("swirl-menu-item") || []).find((item) => item.value === this.subMenu?.value)?.label
             : undefined;
-        return (h("swirl-action-list-item", { badge: badge, description: this.description, disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (el) => (this.actionListItem = el), suffix: this.suffix }, h("slot", { slot: "avatar", name: "avatar" })));
+        return (h("swirl-action-list-item", { badge: badge, description: this.description, disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (el) => (this.actionListItem = el), suffix: this.suffix }, this.hasAvatar && h("slot", { name: "avatar", slot: "avatar" })));
     }
     renderOptionListItem() {
         const selected = this.parentMenu?.value === this.value;
-        return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: selected, swirlAriaRole: "menuitemradio", value: this.value }, h("slot", { slot: "avatar", name: "avatar" })));
+        return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, iconBadge: this.iconBadge, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: selected, swirlAriaRole: "menuitemradio", value: this.value }, this.hasAvatar && h("slot", { name: "avatar", slot: "avatar" })));
     }
     render() {
         const className = classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (h(Host, { key: 'c3aee9e9e8c3eeec2287796fcbc2bc403e717d83' }, h("div", { key: '9624ee9775abc19991e6c2f61d35c09233d176dc', class: className }, this.parentMenu?.variant === "selection"
+        return (h(Host, { key: 'ec53da29dd7ec22ecbb14eae3cfd7212e666325e' }, h("div", { key: 'a639071a7c8fb60cec52c673bc1b0fe9518100b9', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), h("slot", { key: 'd1e331b8f5556280305ae6512daeaf7130efb752', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), h("slot", { key: '02935d7a4997aaa9c8dece8f66f21a42508f8294', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -289,6 +298,7 @@ export class SwirlMenuItem {
     }
     static get states() {
         return {
+            "hasAvatar": {},
             "parentMenu": {},
             "subMenu": {}
         };

package/dist/collection/components/swirl-menu-item/swirl-menu-item.spec.js

@@ -27,9 +27,7 @@ describe("swirl-menu-item", () => {
       <swirl-menu-item label="Item">
         <mock:shadow-root>
           <div class="menu-item">
-            <swirl-action-list-item intent="default" label="Item">
-              <slot name="avatar" slot="avatar"></slot>
-            </swirl-action-list-item>
+            <swirl-action-list-item intent="default" label="Item"></swirl-action-list-item>
             <slot></slot>
           </div>
         </mock:shadow-root>
@@ -42,9 +40,7 @@ describe("swirl-menu-item", () => {
             html: `
         <swirl-popover label="Menu">
           <swirl-menu label="Menu" variant="selection">
-            <swirl-menu-item label="Item" value="Value">
-              <slot name="avatar" slot="avatar"></slot>
-            </swirl-menu-item>
+            <swirl-menu-item label="Item" value="Value"></swirl-menu-item>
           </swirl-menu>
         </swirl-popover>`,
         });
@@ -52,13 +48,10 @@ describe("swirl-menu-item", () => {
       <swirl-menu-item label="Item" value="Value">
         <mock:shadow-root>
           <div class="menu-item">
-            <swirl-option-list-item label="Item" swirlariarole="menuitemradio" value="Value">
-              <slot name="avatar" slot="avatar"></slot>
-            </swirl-option-list-item>
+            <swirl-option-list-item label="Item" swirlariarole="menuitemradio" value="Value"></swirl-option-list-item>
             <slot></slot>
           </div>
         </mock:shadow-root>
-        <slot name="avatar" slot="avatar"></slot>
       </swirl-menu-item>
     `);
     });

package/dist/collection/components/swirl-modal/swirl-modal.css

@@ -270,6 +270,10 @@
     .modal--scrolled.modal--has-header-tools .modal__header-tools {
       border-bottom-color: var(--s-border-default);
     }
+
+    .modal--scrolled .modal__custom-header {
+      border-bottom-color: var(--s-border-default);
+    }
   }
 
 .modal__backdrop {
@@ -373,6 +377,13 @@
   border-bottom: var(--s-border-width-default) solid var(--s-border-default);
 }
 
+@media (min-width: 768px) {
+
+.modal__custom-header {
+    border-bottom-color: transparent
+}
+  }
+
 .modal__heading {
   overflow: hidden;
 }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css

@@ -12,9 +12,19 @@
   display: flex;
   width: 100%;
   justify-content: flex-start;
-  border-bottom: var(--swirl-tab-bar-border-width) solid var(--s-border-default);
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
+.tab-bar.tab-bar--variant-default {
+    border-bottom: var(--swirl-tab-bar-border-width) solid
+      var(--s-border-default);
+  }
+
+.tab-bar.tab-bar--variant-pill {
+    gap: var(--s-space-8);
+  }
+
 .tab-bar--justify-evenly > * {
   flex: 1;
 }
@@ -22,13 +32,12 @@
 .tab-bar__tab {
   position: relative;
   display: flex;
-  min-width: 0;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   margin: 0;
-  padding: var(--s-space-4) var(--s-space-8);
   align-items: center;
   border: none;
-  color: var(--s-interactive-neutral-default);
-  background-color: transparent;
   font: inherit;
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-lg);
@@ -36,28 +45,77 @@
   justify-content: center;
 }
 
-.tab-bar__tab:focus {
-    outline: none;
+.tab-bar__tab.tab-bar__tab--variant-default {
+    background-color: transparent;
+    color: var(--s-interactive-neutral-default);
+    padding: var(--s-space-4) var(--s-space-8);
   }
 
-.tab-bar__tab:focus-visible .tab-bar__tab-label {
-      border-radius: var(--s-border-radius-s);
-      box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
+.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover:after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: calc(100% - var(--s-space-8));
+          height: 0.1875rem;
+          border-radius: 0.125rem;
+          background-color: var(--s-border-default);
+          content: "";
+          transform: translateX(-50%);
+          pointer-events: none;
+        }
+
+.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active {
+      color: var(--s-text-highlight);
     }
 
-.tab-bar__tab:not(.tab-bar__tab--active):hover:after {
+.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active:after {
         position: absolute;
         bottom: 0;
         left: 50%;
         width: calc(100% - var(--s-space-8));
         height: 0.1875rem;
         border-radius: 0.125rem;
-        background-color: var(--s-border-default);
+        background-color: var(--s-border-highlight);
         content: "";
         transform: translateX(-50%);
         pointer-events: none;
       }
 
+.tab-bar__tab.tab-bar__tab--variant-default:focus {
+      outline: none;
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-default:focus-visible .tab-bar__tab-label {
+        border-radius: var(--s-border-radius-s);
+        box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
+      }
+
+.tab-bar__tab.tab-bar__tab--variant-pill {
+    border-radius: var(--s-border-radius-full-round);
+    background: var(--s-action-neutral-default);
+    color: var(--s-text-default);
+    padding: var(--s-space-8) var(--s-space-16);
+    gap: var(--s-space-8);
+  }
+
+.tab-bar__tab.tab-bar__tab--variant-pill:hover {
+      background: var(--s-action-neutral-hovered);
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-pill:active {
+      background: var(--s-action-neutral-pressed);
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active {
+      background: var(--s-action-primary-default);
+      color: var(--s-text-on-action-primary);
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-pill:focus-visible {
+      outline-color: var(--s-focus-default);
+      outline-offset: var(--s-space-2);
+    }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .tab-bar__tab {
@@ -73,26 +131,10 @@
 
 .tab-bar__tab-label {
   display: inline-flex;
-  overflow: hidden;
   padding: var(--s-space-8) var(--s-space-8);
   text-align: center;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.tab-bar__tab--active {
-  color: var(--s-text-highlight);
 }
 
-.tab-bar__tab--active:after {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: calc(100% - var(--s-space-8));
-    height: 0.1875rem;
-    border-radius: 0.125rem;
-    background-color: var(--s-border-highlight);
-    content: "";
-    transform: translateX(-50%);
-    pointer-events: none;
+.tab-bar__tab-label.tab-bar__tab-label--variant-pill {
+    padding: 0;
   }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js

@@ -1,26 +1,44 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+import { getCircularArrayIndex } from "../../utils";
 export class SwirlTabBar {
     constructor() {
         this.onKeyDown = (event) => {
             if (event.code === "ArrowLeft") {
                 event.preventDefault();
+                this.focusAdjacentTab(true);
                 this.activatePreviousTab.emit();
             }
             else if (event.code === "ArrowRight") {
                 event.preventDefault();
+                this.focusAdjacentTab(false);
                 this.activateNextTab.emit();
             }
         };
         this.disableTabSemantics = undefined;
         this.label = undefined;
         this.justify = "start";
+        this.paddingBlockEnd = undefined;
+        this.paddingBlockStart = undefined;
         this.paddingInlineEnd = undefined;
         this.paddingInlineStart = undefined;
         this.tabs = [];
+        this.variant = "default";
+    }
+    focusAdjacentTab(previous) {
+        const tabs = this.getTabs();
+        const selectedTabIndex = tabs.findIndex((tab) => tab.ariaSelected === "true");
+        const nextIndex = getCircularArrayIndex(previous ? selectedTabIndex - 1 : selectedTabIndex + 1, tabs.length);
+        tabs[nextIndex].focus();
+    }
+    getTabs() {
+        return Array.from(this.el.querySelectorAll('[role="tab"]'));
     }
     render() {
-        const className = classnames("tab-bar", `tab-bar--justify-${this.justify}`);
+        const className = classnames("tab-bar", `tab-bar--justify-${this.justify}`, {
+            "tab-bar--variant-pill": this.variant === "pill",
+            "tab-bar--variant-default": this.variant === "default",
+        });
         const styles = {
             paddingInlineEnd: Boolean(this.paddingInlineEnd)
                 ? `var(--s-space-${this.paddingInlineEnd})`
@@ -28,10 +46,21 @@ export class SwirlTabBar {
             paddingInlineStart: Boolean(this.paddingInlineStart)
                 ? `var(--s-space-${this.paddingInlineStart})`
                 : undefined,
+            paddingBlockEnd: Boolean(this.paddingBlockEnd)
+                ? `var(--s-space-${this.paddingBlockEnd})`
+                : undefined,
+            paddingBlockStart: Boolean(this.paddingBlockStart)
+                ? `var(--s-space-${this.paddingBlockStart})`
+                : undefined,
         };
-        return (h(Host, { key: 'd883f7af119dd81a09081301e1e48c9f65e4a822' }, h("div", { key: '016e1125ef12dac89655aee9cae6e7514ba42e67', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
+        return (h(Host, { key: 'deb50eba4e47565ae6338a5af43b7a0a1054e6b1' }, h("div", { key: '75cc9b8e1ffbe76ff00165fb3428799fcd7ea2ac', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
             const className = classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
+                "tab-bar__tab--variant-pill": this.variant === "pill",
+                "tab-bar__tab--variant-default": this.variant === "default",
+            });
+            const labelClassName = classnames("tab-bar__tab-label", {
+                "tab-bar__tab-label--variant-pill": this.variant === "pill",
             });
             return (h("button", { "aria-controls": this.disableTabSemantics ? undefined : tab.id, "aria-selected": this.disableTabSemantics
                     ? undefined
@@ -39,7 +68,7 @@ export class SwirlTabBar {
                         ? "true"
                         : "false", class: className, id: `tab-${tab.id}`, key: tab.id,
                 // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.activateTab.emit(tab.id), role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: "tab-bar__tab-label" }, tab.label)));
+                onClick: () => this.activateTab.emit(tab.id), role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label)));
         }))));
     }
     static get is() { return "swirl-tab-bar"; }
@@ -114,6 +143,52 @@ export class SwirlTabBar {
                 "reflect": false,
                 "defaultValue": "\"start\""
             },
+            "paddingBlockEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tab-bar/swirl-tab-bar.tsx",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-block-end",
+                "reflect": false
+            },
+            "paddingBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tab-bar/swirl-tab-bar.tsx",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-block-start",
+                "reflect": false
+            },
             "paddingInlineEnd": {
                 "type": "string",
                 "mutable": false,
@@ -181,6 +256,30 @@ export class SwirlTabBar {
                     "text": ""
                 },
                 "defaultValue": "[]"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarVariant",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {
+                        "SwirlTabBarVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tab-bar/swirl-tab-bar.tsx",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"default\""
             }
         };
     }
@@ -232,4 +331,5 @@ export class SwirlTabBar {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.spec.js

@@ -26,18 +26,18 @@ describe("swirl-tab-bar", () => {
         await page.waitForChanges();
         expect(page.root).toEqualHtml(`
       <swirl-tab-bar label="Tabs">
-        <div aria-label="Tabs" class="tab-bar tab-bar--justify-start" role="tablist">
-          <button aria-controls="tab1" aria-selected="false" class="tab-bar__tab" id="tab-tab1" role="tab" tabindex="-1" type="button">
+        <div aria-label="Tabs" class="tab-bar tab-bar--justify-start tab-bar--variant-default" role="tablist">
+          <button aria-controls="tab1" aria-selected="false" class="tab-bar__tab tab-bar__tab--variant-default" id="tab-tab1" role="tab" tabindex="-1" type="button">
             <span class="tab-bar__tab-label">
               Tab #1
             </span>
           </button>
-          <button aria-controls="tab2" aria-selected="true" class="tab-bar__tab tab-bar__tab--active" id="tab-tab2" role="tab" tabindex="0" type="button">
+          <button aria-controls="tab2" aria-selected="true" class="tab-bar__tab tab-bar__tab--variant-default tab-bar__tab--active" id="tab-tab2" role="tab" tabindex="0" type="button">
             <span class="tab-bar__tab-label">
               Tab #2
             </span>
           </button>
-          <button aria-controls="tab3" aria-selected="false" class="tab-bar__tab" id="tab-tab3" role="tab" tabindex="-1" type="button">
+          <button aria-controls="tab3" aria-selected="false" class="tab-bar__tab  tab-bar__tab--variant-default" id="tab-tab3" role="tab" tabindex="-1" type="button">
             <span class="tab-bar__tab-label">
               Tab #3
             </span>

package/dist/collection/components/swirl-tabs/swirl-tabs.js

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { getCircularArrayIndex } from "../../utils";
 export class SwirlTabs {
     constructor() {
         this.tabs = [];
@@ -14,8 +15,11 @@ export class SwirlTabs {
         this.initialTab = undefined;
         this.label = undefined;
         this.justifyTabBar = undefined;
+        this.tabBarPaddingBlockEnd = undefined;
+        this.tabBarPaddingBlockStart = undefined;
         this.tabBarPaddingInlineEnd = undefined;
         this.tabBarPaddingInlineStart = undefined;
+        this.tabBarVariant = "default";
         this.activeTab = undefined;
         this.tabBarTabs = [];
     }
@@ -43,7 +47,7 @@ export class SwirlTabs {
     }
     activateNextTab() {
         const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-        const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
+        const nextIndex = getCircularArrayIndex(currentIndex + 1, this.tabs.length);
         this.activateTab(this.tabs[nextIndex].tabId);
         requestAnimationFrame(() => {
             this.el.querySelector(".tabs__tab--active")?.focus();
@@ -51,7 +55,7 @@ export class SwirlTabs {
     }
     activatePreviousTab() {
         const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-        const previousIndex = Math.max(0, currentIndex - 1);
+        const previousIndex = getCircularArrayIndex(currentIndex - 1, this.tabs.length);
         this.activateTab(this.tabs[previousIndex].tabId);
         requestAnimationFrame(() => {
             this.el.querySelector(".tabs__tab--active")?.focus();
@@ -74,7 +78,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: '44caea9a926dc297cd030eb005fc3f6123a8d505' }, h("div", { key: '34a91794a16c5bf3f274edafd9a9cba4d4784ce0', class: "tabs" }, h("swirl-tab-bar", { key: '7d7351ea490ba3cd2d8863da2ce302bd4761fc6f', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), h("slot", { key: '35a4ab2fe39e56da291bfe5e3b624ffed3ce6220' })));
+        return (h(Host, { key: '1ac2dfa2ae746878117dd5a9d084c4f01b3bfea8' }, h("div", { key: '01e1a9a7f5fd4801af2bd54750f3e7954a6fff50', class: "tabs" }, h("swirl-tab-bar", { key: '9435cfed3336d04ae4f531992c26e1fbd54c4520', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '649844c197a13ebc8cd4a7925acb1cf48d728404' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }
@@ -147,6 +151,52 @@ export class SwirlTabs {
                 "attribute": "justify-tab-bar",
                 "reflect": false
             },
+            "tabBarPaddingBlockEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-padding-block-end",
+                "reflect": false
+            },
+            "tabBarPaddingBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-padding-block-start",
+                "reflect": false
+            },
             "tabBarPaddingInlineEnd": {
                 "type": "string",
                 "mutable": false,
@@ -192,6 +242,30 @@ export class SwirlTabs {
                 },
                 "attribute": "tab-bar-padding-inline-start",
                 "reflect": false
+            },
+            "tabBarVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarVariant",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {
+                        "SwirlTabBarVariant": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-variant",
+                "reflect": false,
+                "defaultValue": "\"default\""
             }
         };
     }

package/dist/collection/components/swirl-tabs/swirl-tabs.spec.js

@@ -17,7 +17,7 @@ describe("swirl-tabs", () => {
         expect(page.root).toEqualHtml(`
       <swirl-tabs label="Tabs">
         <div class="tabs">
-          <swirl-tab-bar label="Tabs"></swirl-tab-bar>
+          <swirl-tab-bar label="Tabs" variant="default"></swirl-tab-bar>
         </div>
         <swirl-tab aria-labelledby="tab-tab-1" class="tab tab--active" id="tab-1" label="Tab #1" role="tabpanel" tab-id="tab-1" tabindex="0" style="padding: var(--s-space-8);">
           <mock:shadow-root>