@getflip/swirl-components 0.288.0 → 0.290.0

package/vscode-data.json

@@ -17414,6 +17414,66 @@
           "name": "label",
           "description": ""
         },
+        {
+          "name": "padding-block-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-block-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
         {
           "name": "padding-inline-end",
           "description": "",
@@ -17473,6 +17533,18 @@
               "name": "8"
             }
           ]
+        },
+        {
+          "name": "variant",
+          "description": "",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "pill"
+            }
+          ]
         }
       ]
     },
@@ -17615,6 +17687,66 @@
           "name": "label",
           "description": ""
         },
+        {
+          "name": "tab-bar-padding-block-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "tab-bar-padding-block-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
         {
           "name": "tab-bar-padding-inline-end",
           "description": "",
@@ -17674,6 +17806,18 @@
               "name": "8"
             }
           ]
+        },
+        {
+          "name": "tab-bar-variant",
+          "description": "",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "pill"
+            }
+          ]
         }
       ]
     },

package/dist/swirl-components/p-0dacf15d.entry.js

@@ -1 +0,0 @@
-import{r as a,c as t,h as r,H as s}from"./p-ba3c3858.js";import{c as i}from"./p-a5dce9e6.js";const e=class{constructor(r){a(this,r),this.activateNextTab=t(this,"activateNextTab",7),this.activatePreviousTab=t(this,"activatePreviousTab",7),this.activateTab=t(this,"activateTab",7),this.onKeyDown=a=>{"ArrowLeft"===a.code?(a.preventDefault(),this.activatePreviousTab.emit()):"ArrowRight"===a.code&&(a.preventDefault(),this.activateNextTab.emit())},this.disableTabSemantics=void 0,this.label=void 0,this.justify="start",this.paddingInlineEnd=void 0,this.paddingInlineStart=void 0,this.tabs=[]}render(){const a=i("tab-bar",`tab-bar--justify-${this.justify}`),t={paddingInlineEnd:Boolean(this.paddingInlineEnd)?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:Boolean(this.paddingInlineStart)?`var(--s-space-${this.paddingInlineStart})`:void 0};return r(s,{key:"d883f7af119dd81a09081301e1e48c9f65e4a822"},r("div",{key:"016e1125ef12dac89655aee9cae6e7514ba42e67","aria-label":this.label,class:a,onKeyDown:this.onKeyDown,role:this.disableTabSemantics?void 0:"tablist",style:t},this.tabs.map((a=>{const t=i("tab-bar__tab",{"tab-bar__tab--active":a.active});return r("button",{"aria-controls":this.disableTabSemantics?void 0:a.id,"aria-selected":this.disableTabSemantics?void 0:a.active?"true":"false",class:t,id:`tab-${a.id}`,key:a.id,onClick:()=>this.activateTab.emit(a.id),role:this.disableTabSemantics?void 0:"tab",tabIndex:this.disableTabSemantics?void 0:a.active?0:-1,type:"button"},a.icon&&r("span",{class:"tab-bar__tab-icon",innerHTML:a.icon}),r("span",{class:"tab-bar__tab-label"},a.label))}))))}};e.style='.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:0;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);cursor:pointer;justify-content:center}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar: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}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{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.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar: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}';export{e as swirl_tab_bar}

package/dist/swirl-components/p-9f59a11b.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as i,H as a,g as h}from"./p-ba3c3858.js";const e=class{constructor(i){t(this,i),this.tabActivated=s(this,"tabActivated",7),this.tabs=[],this.onActivateNextTab=()=>{this.activateNextTab()},this.onActivatePreviousTab=()=>{this.activatePreviousTab()},this.onActivateTab=t=>{this.activateTab(t.detail)},this.initialTab=void 0,this.label=void 0,this.justifyTabBar=void 0,this.tabBarPaddingInlineEnd=void 0,this.tabBarPaddingInlineStart=void 0,this.activeTab=void 0,this.tabBarTabs=[]}componentWillLoad(){this.collectTabs(),this.updateTabBarTabs()}async activateTab(t){if(this.activeTab===t)return;this.activeTab=t,this.tabs.forEach((t=>t.active=!1));const s=this.tabs.find((s=>s.tabId===t));Boolean(s)&&(s.active=!0,this.tabActivated.emit(s),this.updateTabBarTabs())}activateNextTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),s=Math.min(this.tabs.length-1,t+1);this.activateTab(this.tabs[s].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}activatePreviousTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),s=Math.max(0,t-1);this.activateTab(this.tabs[s].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}collectTabs(){if(this.tabs=Array.from(this.el.querySelectorAll("swirl-tab")),0===this.tabs.length)return;const t=this.tabs.find((t=>t.tabId===this.initialTab));this.activateTab(Boolean(t)?t.tabId:this.tabs[0].tabId)}updateTabBarTabs(){this.tabBarTabs=this.tabs.map((t=>({icon:t.icon,id:t.tabId,label:t.label,active:this.activeTab===t.tabId})))}render(){return i(a,{key:"44caea9a926dc297cd030eb005fc3f6123a8d505"},i("div",{key:"34a91794a16c5bf3f274edafd9a9cba4d4784ce0",class:"tabs"},i("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})),i("slot",{key:"35a4ab2fe39e56da291bfe5e3b624ffed3ce6220"}))}get el(){return h(this)}};e.style=".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}";export{e as swirl_tabs}