tgui-core 5.1.0 → 5.3.0

package/README.md

@@ -90,3 +90,6 @@ To test your changes using [Storybook](https://storybook.js.org/docs) run:
 
 To run unit tests run
 `bun test`
+
+To build dist folder
+`bun run build-rslib`

package/dist/components/AnimatedNumber.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{clamp as t,isSafeNumber as n,toFixed as e}from"../common/math.js";import{useEffect as u,useRef as l,useState as i}from"react";let o=1e3/60;function c(c){let{format:m,initial:a,value:f}=c,p=l(null),[s,h]=i(void 0!==a&&n(a)?a:n(f)?f:0);function d(){null!==p.current&&(clearInterval(p.current),p.current=null)}function v(){if(!n(f))return void d();h(r=>{let t=.8333*r+.16669999999999996*f;return Math.abs(f-t)<Math.max(.001,.001*f)?(d(),f):t})}return u(()=>{s!==f&&null===p.current&&(p.current=setInterval(v,o))},[f]),u(()=>()=>d(),[]),r("span",{children:n(f)?m?m(s):function(){let r=String(f).split(".")[1];return e(s,t(r?r.length:0,0,8))}():String(f)})}export{c as AnimatedNumber};
+import{jsx as r}from"react/jsx-runtime";import{clamp as t,isSafeNumber as n,toFixed as e}from"../common/math.js";import{useEffect as u,useRef as l,useState as i}from"react";let o=1e3/60;function c(c){let{format:m,initial:a,value:f}=c,p=l(null),[s,h]=i(void 0!==a&&n(a)?a:n(f)?f:0);function d(){null!==p.current&&(clearInterval(p.current),p.current=null)}function v(){if(!n(f))return void d();h(r=>{let t=.8333*r+.16669999999999996*f;return Math.abs(f-t)<Math.max(.001,.001*f)?(d(),f):t})}return u(()=>(s!==f&&null===p.current&&(p.current=setInterval(v,o)),()=>d()),[f]),u(()=>()=>d(),[]),r("span",{children:n(f)?m?m(s):function(){let r=String(f).split(".")[1];return e(s,t(r?r.length:0,0,8))}():String(f)})}export{c as AnimatedNumber};

package/dist/components/Button.js

@@ -1 +1 @@
-var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m,compact:p,content:h,disabled:y,ellipsis:k,fluid:g,icon:v,iconColor:x,iconPosition:C,iconRotation:b,iconSize:j,iconSpin:N,onClick:_,selected:w,tooltip:D,tooltipPosition:I,verticalAlignContent:T,...A}=t,$=h||a,q=e(d,{className:"Button--icon",color:x,name:v||"",rotation:b,size:j,spin:N}),E=e("div",{className:u(["Button",g&&"Button--fluid",y&&"Button--disabled",w&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!$&&"Button--empty",v&&"Button--hasIcon",C&&`Button--icon-${C}`,T&&"Button--flex",T&&g&&"Button--flex--fluid",T&&`Button--verticalAlignContent--${T}`,`Button--color--${m||"default"}`,f,l(A)]),onClick:t=>{!y&&_&&_(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!y&&_&&_(t);return}i(t.key)&&t.preventDefault()}},tabIndex:y?void 0:0,...c(A),children:o("div",{className:u(["Button__content",k&&"Button__content--ellipsis"]),children:[v&&"right"!==C&&q,k?e("span",{className:"Button--ellipsis",children:$}):$,v&&"right"===C&&q]})});return D&&(E=e(B,{content:D,position:I,children:E})),E}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){if(!p)return void d(!0);s?.(t),d(!1)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),I=f(!1),T=a(),A=C??T;return s(()=>{w&&(A.current?.focus(),A.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>D(!0),...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){I.current||b===N||(x?.(N),I.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),I.current=!0,t.currentTarget.blur();return}},ref:A,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};
+var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m,compact:p,content:h,disabled:y,ellipsis:k,fluid:g,icon:v,iconColor:x,iconPosition:C,iconRotation:b,iconSize:j,iconSpin:N,onClick:_,selected:w,tooltip:D,tooltipPosition:I,verticalAlignContent:T,...A}=t,$=h||a,q=e(d,{className:"Button--icon",color:x,name:v||"",rotation:b,size:j,spin:N}),E=e("div",{className:u(["Button",g&&"Button--fluid",y&&"Button--disabled",w&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!$&&"Button--empty",v&&"Button--hasIcon",C&&`Button--icon-${C}`,T&&"Button--flex",T&&g&&"Button--flex--fluid",T&&`Button--verticalAlignContent--${T}`,`Button--color--${m||"default"}`,f,l(A)]),onClick:t=>{!y&&_&&_(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!y&&_&&_(t);return}i(t.key)&&t.preventDefault()}},tabIndex:y?void 0:0,...c(A),children:o("div",{className:u(["Button__content",k&&"Button__content--ellipsis"]),children:[v&&"right"!==C&&q,k?e("span",{className:"Button--ellipsis",children:$}):$,v&&"right"===C&&q]})});return D&&(E=e(B,{content:D,position:I,children:E})),E}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){if(!p)return void d(!0);s?.(t),d(!1)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),I=f(!1),T=a(),A=C??T;return s(()=>{w&&(A.current?.focus(),A.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>{B||D(!0)},...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){I.current||b===N||(x?.(N),I.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),I.current=!0,t.currentTarget.blur();return}},ref:A,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};

package/dist/components/DraggableControl.js

@@ -1 +1 @@
-import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as o}from"../common/math.js";import{useEffect as l,useRef as c,useState as i}from"react";import{AnimatedNumber as a}from"./AnimatedNumber.js";function s(e,r){return e.screenX*r[0]+e.screenY*r[1]}function m(m){let{animated:v,children:f,dragMatrix:p=[1,0],tickWhileDragging:d,format:h,maxValue:y=1/0,minValue:g=-1/0,onChange:E,step:b=1,stepPixelSize:N,unclamped:w,unit:T,updateRate:j=400,fontSize:x,height:L,lineHeight:S}=m,[k,z]=i(m.value),[D,I]=i(!1),F=c(!1),M=c(m.value),O=c(0),$=c(0),_=c(null),A=c(null),B=c(null),C=c(null);function H(e){let r=$.current;if(null===r)throw Error("Origin is unset.");let t=s(e,p),n=_.current;if(null===n)throw Error("Final step pixel size has not been computed.");let u=O.current;if(null===u)throw Error("Original value is unset.");let l=o(Math.floor(u/b)*b+Math.trunc((t-r)/n)*b,g,y);M.current=l,z(l)}function K(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),$.current=null,_.current=null,O.current=null,document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",K),F.current&&(E?.(e,M.current),F.current=!1)}l(()=>{m.value!==M.current&&(M.current=m.value,z(m.value))},[m.value]);let P=m.value;F.current&&(P=M.current);let U=t(e,{children:[v&&!F.current?r(a,{format:h,value:P}):h?h(P):P,T?` ${T}`:""]}),W=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(w||(r=o(r,g,y)),Number.isNaN(r))return void I(!1);M.current=r,z(r),E?.(e.nativeEvent,r),D&&I(!1)},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&I(!1)},ref:A,style:{display:D?void 0:"none",fontSize:x,height:L,lineHeight:S}});return f({displayElement:U,displayValue:P,dragging:F.current,editing:D,handleDragStart:function(e){if(!D){if("number"!=typeof N){let r=e.currentTarget.offsetWidth/((y-g)/b);if(void 0===N)_.current=r;else if("function"==typeof N)_.current=N(r);else throw Error(`Unsupported value for stepPixelSize of type ${typeof N}`)}else _.current=N;document.body.style["pointer-events"]="none",$.current=s(e.nativeEvent,p),O.current=m.value,F.current=!0,document.addEventListener("mouseup",K),C.current=setTimeout(()=>{var r=e.nativeEvent;if(F.current)document.addEventListener("mousemove",H),B.current=setInterval(()=>{F.current&&d&&E?.(r,m.value)},j);else if(I(!0),A.current){let e=A.current;e.value=M.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100)}},inputElement:W})}export{m as DraggableControl};
+import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as o}from"../common/math.js";import{useEffect as l,useRef as c,useState as i}from"react";import{AnimatedNumber as a}from"./AnimatedNumber.js";function s(e,r){return e.screenX*r[0]+e.screenY*r[1]}function m(m){let{animated:f,children:v,dragMatrix:p=[1,0],tickWhileDragging:d,format:h,maxValue:y=1/0,minValue:g=-1/0,onChange:E,step:b=1,stepPixelSize:N,unclamped:w,unit:T,updateRate:j=400,fontSize:x,height:L,lineHeight:S}=m,[k,z]=i(m.value),[D,I]=i(!1),F=c(!1),M=c(m.value),O=c(0),$=c(0),_=c(null),A=c(null),B=c(null),C=c(null);function H(e){let r=$.current;if(null===r)throw Error("Origin is unset.");let t=s(e,p),n=_.current;if(null===n)throw Error("Final step pixel size has not been computed.");let u=O.current;if(null===u)throw Error("Original value is unset.");let l=o(Math.floor(u/b)*b+Math.trunc((t-r)/n)*b,g,y);M.current=l,z(l)}function K(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),$.current=null,_.current=null,O.current=null,document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",K),F.current&&(E?.(e,M.current),F.current=!1)}l(()=>{m.value!==M.current&&(M.current=m.value,z(m.value))},[m.value]);let P=m.value;F.current&&(P=M.current);let U=t(e,{children:[f&&!F.current?r(a,{format:h,value:P}):h?h(P):P,T?` ${T}`:""]}),W=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(w||(r=o(r,g,y)),Number.isNaN(r))return void I(!1);M.current=r,z(r),E?.(e.nativeEvent,r),D&&I(!1)},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&I(!1)},ref:A,style:{display:D?void 0:"none",fontSize:x,height:L,lineHeight:S}});return v({displayElement:U,displayValue:P,dragging:F.current,editing:D,handleDragStart:function(e){if(!D){if("number"!=typeof N){let r=e.currentTarget.offsetWidth/((y-g)/b);if(void 0===N)_.current=r;else if("function"==typeof N)_.current=N(r);else throw Error(`Unsupported value for stepPixelSize of type ${typeof N}`)}else _.current=N;document.body.style["pointer-events"]="none",$.current=s(e.nativeEvent,p),O.current=m.value,F.current=!0,document.addEventListener("mouseup",K),C.current=setTimeout(()=>{var r=e.nativeEvent;if(F.current)document.addEventListener("mousemove",H),B.current=setInterval(()=>{F.current&&d&&E?.(r,M.current)},j);else if(I(!0),A.current){let e=A.current;e.value=M.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100)}},inputElement:W})}export{m as DraggableControl};

package/dist/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BoxProps } from './Box';
 type Props = Partial<{
     /**
@@ -12,6 +12,11 @@ type Props = Partial<{
     fluid: boolean;
     /** Use a vertical configuration, where tabs will be stacked vertically. */
     vertical: boolean;
+    /**
+     * Allows you to scroll horizontal tabs, and adds special buttons for it.
+     * Has no effect on vertical tabs.
+     */
+    scrollable: boolean;
 }> & BoxProps;
 export declare function Tabs(props: Props): import("react/jsx-runtime").JSX.Element;
 type TabProps = Partial<{

package/dist/components/Tabs.js

@@ -1 +1 @@
-import{jsx as a,jsxs as e}from"react/jsx-runtime";import{canRender as s,classes as i}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as l}from"../common/ui.js";import{Icon as c}from"./Icon.js";function t(e){let{className:s,vertical:c,fill:t,fluid:o,children:m,...n}=e;return a("div",{className:i(["Tabs",c?"Tabs--vertical":"Tabs--horizontal",t&&"Tabs--fill",o&&"Tabs--fluid",s,r(n)]),...l(n),children:m})}(t||(t={})).Tab=function(t){let{className:o,selected:m,color:n,icon:b,iconSpin:T,leftSlot:d,rightSlot:_,children:f,onClick:h,...u}=t;return e("div",{className:i(["Tab","Tabs__Tab",`Tab--color--${n}`,m&&"Tab--selected",o,r(u)]),onClick:a=>h?.(a),...l(u),children:[s(d)&&a("div",{className:"Tab__left",children:d})||!!b&&a("div",{className:"Tab__left",children:a(c,{name:b,spin:T})}),a("div",{className:"Tab__text",children:f}),s(_)&&a("div",{className:"Tab__right",children:_})]})};export{t as Tabs};
+import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{canRender as l,classes as n}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as o}from"../common/ui.js";import{useEffect as a,useRef as c,useState as s}from"react";import{Button as d}from"./Button.js";import{Icon as m}from"./Icon.js";function b(l){let{className:d,vertical:m,scrollable:b,fill:u,fluid:h,children:T,...v}=l,_=c(!0),p=c(null),[L,N]=s(!1),[w,E]=s(!1);function j(e){if(!p.current)return;let r=p.current,t=.5*r.clientWidth;r.scrollBy({left:"left"===e?-t:t,behavior:"smooth"})}a(()=>{if(!b||m||!p.current)return;let e=p.current;if(e.scrollWidth<e.clientWidth)return;function r(){N(e.scrollLeft>0),E(e.scrollLeft+e.clientWidth<e.scrollWidth)}function t(r){Math.abs(r.deltaY)>Math.abs(r.deltaX)&&(e.scrollLeft+=r.deltaY)}let l=e.querySelector(".Tab--selected");if(l)return l.scrollIntoView({behavior:_.current?"auto":"smooth",inline:"center"}),_.current=!1,e.addEventListener("wheel",t),e.addEventListener("scroll",r),window.addEventListener("resize",r),r(),()=>{e.removeEventListener("wheel",t),e.removeEventListener("scroll",r),window.removeEventListener("resize",r)}},[b,m,T]);let W=T;return b&&!m&&(W=t(e,{children:[L&&r(f,{direction:"left",makeScroll:j}),r("div",{ref:p,className:n(["Tabs--scrollable-content",L&&"scrollable-left",w&&"scrollable-right"]),children:T}),w&&r(f,{direction:"right",makeScroll:j})]})),r("div",{className:n(["Tabs",m?"Tabs--vertical":"Tabs--horizontal",u&&"Tabs--fill",h&&"Tabs--fluid",!m&&b&&"Tabs--scrollable",d,i(v)]),...o(v),children:W})}function f(e){let{direction:t,makeScroll:l}=e;return r(d,{className:`scroll-${t}`,color:"transparent",icon:`angle-${t}`,onClick:()=>l(t)})}(b||(b={})).Tab=function(e){let{className:a,selected:c,color:s,icon:d,iconSpin:b,leftSlot:f,rightSlot:u,children:h,onClick:T,...v}=e;return t("div",{className:n(["Tab","Tabs__Tab",`Tab--color--${s}`,c&&"Tab--selected",a,i(v)]),onClick:e=>T?.(e),...o(v),children:[l(f)&&r("div",{className:"Tab__left",children:f})||!!d&&r("div",{className:"Tab__left",children:r(m,{name:d,spin:b})}),r("div",{className:"Tab__text",children:h}),l(u)&&r("div",{className:"Tab__right",children:u})]})};export{b as Tabs};

package/package.json

@@ -1,26 +1,26 @@
 {
   "author": "jlsnow301",
   "dependencies": {
-    "@floating-ui/react": "^0.27.13",
+    "@floating-ui/react": "^0.27.16",
     "@nozbe/microfuzz": "^1.0.0"
   },
   "description": "TGUI core component library",
   "devDependencies": {
-    "@biomejs/biome": "^2.1.1",
-    "@rsbuild/core": "^1.4.7",
-    "@rsbuild/plugin-react": "^1.3.4",
-    "@rsbuild/plugin-sass": "^1.3.3",
-    "@rslib/core": "^0.10.6",
-    "@storybook/addon-docs": "^9.0.17",
+    "@biomejs/biome": "^2.2.3",
+    "@rsbuild/core": "^1.5.4",
+    "@rsbuild/plugin-react": "^1.4.0",
+    "@rsbuild/plugin-sass": "^1.4.0",
+    "@rslib/core": "^0.12.4",
+    "@storybook/addon-docs": "^9.1.5",
     "@types/bun": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "prettier": "^3.6.2",
-    "sass": "^1.89.2",
-    "storybook": "^9.0.17",
+    "sass": "^1.92.1",
+    "storybook": "^9.1.5",
     "storybook-addon-sass-postcss": "^0.3.2",
-    "storybook-react-rsbuild": "^2.0.2",
-    "typescript": "^5.8.3"
+    "storybook-react-rsbuild": "^2.1.0",
+    "typescript": "^5.9.2"
   },
   "exports": {
     "./*": {
@@ -69,5 +69,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.1.0"
+  "version": "5.3.0"
 }

package/styles/components/Tabs.scss

@@ -38,6 +38,7 @@
 }
 
 .Tabs {
+  position: relative;
   display: flex;
   align-items: stretch;
   overflow: hidden;
@@ -134,6 +135,64 @@
   }
 }
 
+.Tabs--scrollable {
+  --mask-width: 3.25rem;
+  --mask-left: 0rem;
+  --mask-right: 0rem;
+
+  &-content {
+    overflow: auto;
+    scrollbar-width: none;
+    overscroll-behavior: none;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    mask-image: linear-gradient(
+      90deg,
+      transparent calc(var(--mask-left) * 0.5),
+      black calc(0% + var(--mask-left)),
+      black calc(100% - var(--mask-right)),
+      transparent calc(100% - calc(var(--mask-right) * 0.5))
+    );
+
+    &.scrollable-left.scrollable-right {
+      --mask-left: var(--mask-width);
+      --mask-right: var(--mask-width);
+    }
+
+    &.scrollable-left {
+      --mask-left: var(--mask-width);
+    }
+
+    &.scrollable-right {
+      --mask-right: var(--mask-width);
+    }
+  }
+
+  .scroll-left,
+  .scroll-right {
+    position: absolute;
+    align-content: center;
+    top: 0;
+    height: 100%;
+    margin: none;
+    border-radius: unset;
+    z-index: 1;
+  }
+
+  .scroll-left {
+    left: 0;
+  }
+
+  .scroll-right {
+    right: 0;
+  }
+
+  .Tab {
+    flex-shrink: 0;
+  }
+}
+
 @each $color-name, $color-value in colors.$color-map {
   .Tab--selected.Tab--color--#{$color-name} {
     color: hsl(from $color-value h s calc(l + 17.5));