From a4e76592d280c3220a7825ceac74e21e4b747855 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Fri, 4 Sep 2026 17:13:36 +0300
Subject: [PATCH 1/5] feat(tab-bar-island): glass-like view

---
 .changeset/lucky-weeks-allow.md               |  5 ++++
 .../components/entry-content/index.module.css |  2 +-
 .../src/components/tab-list/index.module.css  | 14 +++++++----
 .../trailing-icon-button/index.module.css     | 22 ++++++++++++++---
 .../components/trailing-icon-button/index.tsx |  5 +++-
 packages/tab-bar-island/src/vars.css          | 24 +++++++++++++++++++
 6 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/lucky-weeks-allow.md

diff --git a/.changeset/lucky-weeks-allow.md b/.changeset/lucky-weeks-allow.md
new file mode 100644
index 0000000000..2b170e4ba5
--- /dev/null
+++ b/.changeset/lucky-weeks-allow.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-tab-bar-island': minor
+---
+
+- Добавлен эффект прозрачности
diff --git a/packages/tab-bar-island/src/components/entry-content/index.module.css b/packages/tab-bar-island/src/components/entry-content/index.module.css
index a686ecd0d8..7c771c4dae 100644
--- a/packages/tab-bar-island/src/components/entry-content/index.module.css
+++ b/packages/tab-bar-island/src/components/entry-content/index.module.css
@@ -8,7 +8,7 @@
 
 .label {
     @mixin action_secondary_small;
-
+    position: relative;
     margin: 0 var(--gap-10) var(--gap-6);
     white-space: nowrap;
     overflow: hidden;
diff --git a/packages/tab-bar-island/src/components/tab-list/index.module.css b/packages/tab-bar-island/src/components/tab-list/index.module.css
index f5e9569722..ca0375dcde 100644
--- a/packages/tab-bar-island/src/components/tab-list/index.module.css
+++ b/packages/tab-bar-island/src/components/tab-list/index.module.css
@@ -8,9 +8,12 @@
 }
 
 .underlay {
-    border-radius: var(--tab-bar-island-border-radius);
-    background: var(--tab-bar-island-background);
-    box-shadow: var(--tab-bar-island-box-shadow);
+    @mixin tar-bar-island-underlay;
+
+    &:before {
+        content: '';
+        @mixin tar-bar-island-border;
+    }
 }
 
 .wrapper {
@@ -25,7 +28,8 @@
 }
 
 .track,
-.underlay {
+.underlay,
+.underlay:before {
     position: absolute;
     inset: 0;
 }
@@ -54,7 +58,7 @@
     left: 0;
     height: 100%;
     width: 100%;
-    background: var(--color-light-neutral-translucent-200);
+    background: var(--tab-bar-island-tab-tracker-backround-color);
     will-change: width, height, border-radius;
 }
 
diff --git a/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css b/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
index 180f7f0e8c..fa02ba7502 100644
--- a/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
+++ b/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
@@ -1,10 +1,26 @@
 @import '@alfalab/core-components-tab-bar-island/src/vars.css';
 
 .component {
-    border-radius: var(--tab-bar-island-border-radius);
-    background: var(--tab-bar-island-background);
-    box-shadow: var(--tab-bar-island-box-shadow);
     padding: var(--gap-4);
     margin-left: var(--gap-8);
+    position: relative;
+}
+
+.underlay,
+.underlay:before {
+    position: absolute;
+    inset: 0;
+}
+
+.underlay {
+    @mixin tar-bar-island-underlay;
+
+    &:before {
+        content: '';
+        @mixin tar-bar-island-border;
+    }
+}
+
+.button {
     max-width: calc(var(--tab-bar-island-tab-max-size) - 2 * var(--gap-4));
 }
diff --git a/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx b/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx
index 0c7acf746a..bfa57c78b6 100644
--- a/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx
+++ b/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx
@@ -10,5 +10,8 @@ export const TabBarIslandTrailingIconButton: FC<TabBarIslandTrailingIconButtonPr
     className,
     ...restProps
 }) => (
-    <TabBarIslandEntry {...restProps} role='button' className={cn(styles.component, className)} />
+    <div className={styles.component}>
+        <div className={styles.underlay} />
+        <TabBarIslandEntry {...restProps} role='button' className={cn(styles.button, className)} />
+    </div>
 );
diff --git a/packages/tab-bar-island/src/vars.css b/packages/tab-bar-island/src/vars.css
index 0f959bad2f..a8fa07ee0d 100644
--- a/packages/tab-bar-island/src/vars.css
+++ b/packages/tab-bar-island/src/vars.css
@@ -10,4 +10,28 @@
     --tab-bar-island-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.14);
     --tab-bar-island-tab-color: var(--color-light-text-secondary);
     --tab-bar-island-tab-active-color: var(--color-light-accent-secondary);
+    --tab-bar-island-tab-tracker-backround-color: var(--color-light-neutral-translucent-200);
+    --tab-bar-island-opacity: 0.56;
+    --tab-bar-island-backdrop-filter: blur(5px);
+}
+
+@define-mixin tar-bar-island-underlay {
+    border-radius: var(--tab-bar-island-border-radius);
+    box-shadow: var(--tab-bar-island-box-shadow);
+    backdrop-filter: var(--tab-bar-island-backdrop-filter);
+    opacity: var(--tab-bar-island-opacity);
+}
+
+@define-mixin tar-bar-island-border {
+    border: double 1px transparent;
+    border-radius: var(--tab-bar-island-border-radius);
+    background-image:
+        linear-gradient(var(--tab-bar-island-background), var(--tab-bar-island-background)),
+        linear-gradient(
+            95deg,
+            transparent 0%,
+            var(--color-light-neutral-translucent-700-inverted) 100%
+        );
+    background-origin: border-box;
+    background-clip: content-box, border-box;
 }

From d8d36434726d89935634fde1dd71cbbff8c98995 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 8 Sep 2026 13:25:56 +0300
Subject: [PATCH 2/5] fix: better

---
 .../src/components/tab-list/index.module.css  | 12 +---
 .../src/components/tab-list/index.tsx         |  3 +-
 .../trailing-icon-button/index.module.css     | 12 +---
 .../components/trailing-icon-button/index.tsx |  3 +-
 .../src/components/underlay/index.module.css  | 71 +++++++++++++++++++
 .../src/components/underlay/index.tsx         | 15 ++++
 packages/tab-bar-island/src/vars.css          | 27 ++-----
 7 files changed, 96 insertions(+), 47 deletions(-)
 create mode 100644 packages/tab-bar-island/src/components/underlay/index.module.css
 create mode 100644 packages/tab-bar-island/src/components/underlay/index.tsx

diff --git a/packages/tab-bar-island/src/components/tab-list/index.module.css b/packages/tab-bar-island/src/components/tab-list/index.module.css
index ca0375dcde..9a9d486ab6 100644
--- a/packages/tab-bar-island/src/components/tab-list/index.module.css
+++ b/packages/tab-bar-island/src/components/tab-list/index.module.css
@@ -7,15 +7,6 @@
     position: relative;
 }
 
-.underlay {
-    @mixin tar-bar-island-underlay;
-
-    &:before {
-        content: '';
-        @mixin tar-bar-island-border;
-    }
-}
-
 .wrapper {
     display: flex;
     max-width: 100%;
@@ -28,8 +19,7 @@
 }
 
 .track,
-.underlay,
-.underlay:before {
+.underlay {
     position: absolute;
     inset: 0;
 }
diff --git a/packages/tab-bar-island/src/components/tab-list/index.tsx b/packages/tab-bar-island/src/components/tab-list/index.tsx
index 4850d440a4..ff11e1c7d6 100644
--- a/packages/tab-bar-island/src/components/tab-list/index.tsx
+++ b/packages/tab-bar-island/src/components/tab-list/index.tsx
@@ -1,5 +1,6 @@
 import React, { type FC, useMemo, useState } from 'react';
 
+import { Underlay } from '@alfalab/core-components-tab-bar-island/components/underlay';
 import { usePillAnimation } from '@alfalab/core-components-tab-bar-island/hooks/use-pill-animation';
 import { type TabBarIslandTabListProps } from '@alfalab/core-components-tab-bar-island/types';
 
@@ -40,7 +41,7 @@ export const TabBarIslandTabList: FC<TabBarIslandTabListProps> = ({
 
     return (
         <div role='tablist' className={styles.list} ref={listRef}>
-            <div className={styles.underlay} ref={underlayRef} />
+            <Underlay className={styles.underlay} ref={underlayRef} />
             <div
                 className={styles.wrapper}
                 ref={wrapperRef}
diff --git a/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css b/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
index fa02ba7502..cab5aceec2 100644
--- a/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
+++ b/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
@@ -6,21 +6,11 @@
     position: relative;
 }
 
-.underlay,
-.underlay:before {
+.underlay {
     position: absolute;
     inset: 0;
 }
 
-.underlay {
-    @mixin tar-bar-island-underlay;
-
-    &:before {
-        content: '';
-        @mixin tar-bar-island-border;
-    }
-}
-
 .button {
     max-width: calc(var(--tab-bar-island-tab-max-size) - 2 * var(--gap-4));
 }
diff --git a/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx b/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx
index bfa57c78b6..358707aa8a 100644
--- a/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx
+++ b/packages/tab-bar-island/src/components/trailing-icon-button/index.tsx
@@ -2,6 +2,7 @@ import React, { type FC } from 'react';
 import cn from 'classnames';
 
 import { TabBarIslandEntry } from '@alfalab/core-components-tab-bar-island/components/entry';
+import { Underlay } from '@alfalab/core-components-tab-bar-island/components/underlay';
 import { type TabBarIslandTrailingIconButtonProps } from '@alfalab/core-components-tab-bar-island/types';
 
 import styles from './index.module.css';
@@ -11,7 +12,7 @@ export const TabBarIslandTrailingIconButton: FC<TabBarIslandTrailingIconButtonPr
     ...restProps
 }) => (
     <div className={styles.component}>
-        <div className={styles.underlay} />
+        <Underlay className={styles.underlay} />
         <TabBarIslandEntry {...restProps} role='button' className={cn(styles.button, className)} />
     </div>
 );
diff --git a/packages/tab-bar-island/src/components/underlay/index.module.css b/packages/tab-bar-island/src/components/underlay/index.module.css
new file mode 100644
index 0000000000..6fc6fe0d3f
--- /dev/null
+++ b/packages/tab-bar-island/src/components/underlay/index.module.css
@@ -0,0 +1,71 @@
+@import '@alfalab/core-components-tab-bar-island/src/vars.css';
+
+.component {
+    background: var(--tab-bar-island-background);
+    border-radius: var(--tab-bar-island-border-radius);
+    box-shadow: var(--tab-bar-island-box-shadow);
+    backdrop-filter: var(--tab-bar-island-backdrop-filter);
+
+    &:before {
+        top: 0;
+    }
+
+    &:after {
+        bottom: 0;
+    }
+
+    &:before,
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        height: var(--tab-bar-island-border-width);
+        right: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+        left: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+        background: linear-gradient(
+            95deg,
+            var(--tab-bar-island-border-color-from),
+            var(--tab-bar-island-border-color-to)
+        );
+    }
+}
+
+.border {
+    width: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+    overflow: hidden;
+
+    &,
+    &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+    }
+
+    &:before {
+        content: '';
+        display: block;
+        width: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+    }
+
+    &[data-position='start'] {
+        left: 0;
+
+        &:before {
+            left: 0;
+            border: var(--tab-bar-island-border-width) solid var(--tab-bar-island-border-color-from);
+            border-top-left-radius: var(--tab-bar-island-border-radius);
+            border-bottom-left-radius: var(--tab-bar-island-border-radius);
+        }
+    }
+
+    &[data-position='end'] {
+        right: 0;
+
+        &:before {
+            right: 0;
+            border: var(--tab-bar-island-border-width) solid var(--tab-bar-island-border-color-to);
+            border-top-right-radius: var(--tab-bar-island-border-radius);
+            border-bottom-right-radius: var(--tab-bar-island-border-radius);
+        }
+    }
+}
diff --git a/packages/tab-bar-island/src/components/underlay/index.tsx b/packages/tab-bar-island/src/components/underlay/index.tsx
new file mode 100644
index 0000000000..a474e07de5
--- /dev/null
+++ b/packages/tab-bar-island/src/components/underlay/index.tsx
@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import styles from './index.module.css';
+
+export interface UnderlayProps {
+    className?: string;
+}
+
+export const Underlay = forwardRef<HTMLDivElement, UnderlayProps>(({ className }, ref) => (
+    <div ref={ref} className={cn(styles.component, className)}>
+        <div className={styles.border} data-position='start' />
+        <div className={styles.border} data-position='end' />
+    </div>
+));
diff --git a/packages/tab-bar-island/src/vars.css b/packages/tab-bar-island/src/vars.css
index a8fa07ee0d..6d655299a8 100644
--- a/packages/tab-bar-island/src/vars.css
+++ b/packages/tab-bar-island/src/vars.css
@@ -6,32 +6,13 @@
     --tab-bar-island-tab-default-size: 92px;
     --tab-bar-island-tab-max-size: 120px;
     --tab-bar-island-border-radius: 40px;
-    --tab-bar-island-background: var(--color-light-modal-bg-primary);
+    --tab-bar-island-background: rgba(255, 255, 255, 0.56);
     --tab-bar-island-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.14);
     --tab-bar-island-tab-color: var(--color-light-text-secondary);
     --tab-bar-island-tab-active-color: var(--color-light-accent-secondary);
     --tab-bar-island-tab-tracker-backround-color: var(--color-light-neutral-translucent-200);
-    --tab-bar-island-opacity: 0.56;
     --tab-bar-island-backdrop-filter: blur(5px);
-}
-
-@define-mixin tar-bar-island-underlay {
-    border-radius: var(--tab-bar-island-border-radius);
-    box-shadow: var(--tab-bar-island-box-shadow);
-    backdrop-filter: var(--tab-bar-island-backdrop-filter);
-    opacity: var(--tab-bar-island-opacity);
-}
-
-@define-mixin tar-bar-island-border {
-    border: double 1px transparent;
-    border-radius: var(--tab-bar-island-border-radius);
-    background-image:
-        linear-gradient(var(--tab-bar-island-background), var(--tab-bar-island-background)),
-        linear-gradient(
-            95deg,
-            transparent 0%,
-            var(--color-light-neutral-translucent-700-inverted) 100%
-        );
-    background-origin: border-box;
-    background-clip: content-box, border-box;
+    --tab-bar-island-border-width: 1px;
+    --tab-bar-island-border-color-from: transparent;
+    --tab-bar-island-border-color-to: var(--color-light-neutral-translucent-700-inverted);
 }

From 34952292a2f2eff97db805d2e002fae437e46de6 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 8 Sep 2026 16:05:51 +0300
Subject: [PATCH 3/5] chore: review demo

---
 packages/tab-bar-island/src/docs/description.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/tab-bar-island/src/docs/description.mdx b/packages/tab-bar-island/src/docs/description.mdx
index 12fcfad45f..7fff1cfd14 100644
--- a/packages/tab-bar-island/src/docs/description.mdx
+++ b/packages/tab-bar-island/src/docs/description.mdx
@@ -1,9 +1,9 @@
 ## Icon
 
-```jsx live mobileOnly mobileHeight={100}
+```jsx live
 render(() => {
     return (
-        <div style={{ margin: '0 -20px -20px' }}>
+        <div style={{ padding: '20px', background: 'url("./images/test.png")' }}>
             <TabBarIsland
                 items={[
                     { key: 'money', icon: <DiamondsMIcon />, label: 'Деньги' },
@@ -21,7 +21,7 @@ render(() => {
 
 ## Image
 
-```jsx live mobileOnly mobileHeight={100}
+```jsx live
 const IconComponent = ({ style, children, ...restProps }) => (
     <div {...restProps} style={{ ...style, width: 48 }}>
         {children}
@@ -30,7 +30,7 @@ const IconComponent = ({ style, children, ...restProps }) => (
 
 render(() => {
     return (
-        <div style={{ margin: '10px -20px -20px' }}>
+        <div style={{ padding: '20px', background: 'url("./images/test.png")' }}>
             <TabBarIsland
                 items={[
                     { key: 'money', icon: <DiamondsMIcon />, label: 'Деньги' },
@@ -66,7 +66,7 @@ render(() => {
 
 ## Full Image
 
-```jsx live mobileOnly mobileHeight={100}
+```jsx live
 const IconComponent = ({ style, children, ...restProps }) => (
     <div {...restProps} style={{ ...style, width: 48 }}>
         {children}
@@ -75,7 +75,7 @@ const IconComponent = ({ style, children, ...restProps }) => (
 
 render(() => {
     return (
-        <div style={{ margin: '0 -20px -20px' }}>
+        <div style={{ padding: '20px', background: 'url("./images/test.png")' }}>
             <TabBarIsland
                 items={[
                     { key: 'money', icon: <DiamondsMIcon />, label: 'Деньги' },

From e828332e75d5e0cde30a4cd949e54a4efc9aad83 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Sun, 13 Sep 2026 20:27:47 +0300
Subject: [PATCH 4/5] fix: typo

---
 .../tab-bar-island/src/components/tab-list/index.module.css     | 2 +-
 packages/tab-bar-island/src/vars.css                            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/tab-bar-island/src/components/tab-list/index.module.css b/packages/tab-bar-island/src/components/tab-list/index.module.css
index 9a9d486ab6..d6d2c0cda2 100644
--- a/packages/tab-bar-island/src/components/tab-list/index.module.css
+++ b/packages/tab-bar-island/src/components/tab-list/index.module.css
@@ -48,7 +48,7 @@
     left: 0;
     height: 100%;
     width: 100%;
-    background: var(--tab-bar-island-tab-tracker-backround-color);
+    background: var(--tab-bar-island-tab-tracker-background-color);
     will-change: width, height, border-radius;
 }
 
diff --git a/packages/tab-bar-island/src/vars.css b/packages/tab-bar-island/src/vars.css
index 6d655299a8..18d0750aa8 100644
--- a/packages/tab-bar-island/src/vars.css
+++ b/packages/tab-bar-island/src/vars.css
@@ -10,7 +10,7 @@
     --tab-bar-island-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.14);
     --tab-bar-island-tab-color: var(--color-light-text-secondary);
     --tab-bar-island-tab-active-color: var(--color-light-accent-secondary);
-    --tab-bar-island-tab-tracker-backround-color: var(--color-light-neutral-translucent-200);
+    --tab-bar-island-tab-tracker-background-color: var(--color-light-neutral-translucent-200);
     --tab-bar-island-backdrop-filter: blur(5px);
     --tab-bar-island-border-width: 1px;
     --tab-bar-island-border-color-from: transparent;

From fab324109c87a2c3eea5b4a5bee9ba71b225c6d8 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Mon, 14 Sep 2026 14:13:53 +0300
Subject: [PATCH 5/5] fix: styles

---
 .../src/components/trailing-icon-button/index.module.css         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css b/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
index cab5aceec2..48636c5436 100644
--- a/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
+++ b/packages/tab-bar-island/src/components/trailing-icon-button/index.module.css
@@ -12,5 +12,6 @@
 }
 
 .button {
+    position: relative;
     max-width: calc(var(--tab-bar-island-tab-max-size) - 2 * var(--gap-4));
 }