finsignal-feed-explore 2.20.3 → 2.21.1

package/dist/FeedList.css

@@ -1,6 +1,98 @@
 /* Import component styles */
-@import './components/FilterButton.css';
-@import './components/EmptyState.css';
+.filter-button {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+  transition: opacity 0.2s ease;
+}
+
+.filter-button:hover {
+  opacity: 0.7;
+}
+
+.filter-button:active {
+  opacity: 0.5;
+}
+
+.filter-button:focus {
+  outline: none;
+}
+
+.filter-button:focus-visible {
+  outline: 2px solid #7863F6;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Badge styles */
+.filter-button--with-badge {
+  position: relative;
+}
+
+.filter-button__badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  border-radius: 12px;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.filter-button__badge-text {
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 12px;
+  letter-spacing: -0.2px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+.empty-state__icon {
+  margin-bottom: 24px;
+}
+
+.empty-state__icon svg {
+  width: 120px;
+  height: 120px;
+}
+
+.empty-state__content {
+  max-width: 320px;
+}
+
+.empty-state__title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  color: #040405;
+  margin: 0 0 8px 0;
+}
+
+.empty-state__description {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: rgba(4, 4, 5, 0.56);
+  margin: 0;
+}
 
 .news-feed {
   position: relative;
@@ -8,7 +100,7 @@
   height: 100%;
   max-width: 600px;
   margin: 0 auto;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   overflow: hidden;
 }
 
@@ -143,7 +235,6 @@
     transform: rotate(360deg);
   }
 }
-
 .news-feed__scroll-trigger {
   height: 20px;
 }
@@ -155,3 +246,5 @@
   font-size: 16px;
   line-height: 24px;
 }
+
+/*# sourceMappingURL=FeedList.css.map */

package/dist/FeedList.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/FeedList.scss","../src/components/FilterButton.scss","../src/components/EmptyState.scss"],"names":[],"mappings":"AAAA;ACAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACtDF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AF/BF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"FeedList.css"}

package/dist/components/Chip.css

@@ -9,7 +9,7 @@
   background: transparent;
   cursor: pointer;
   transition: all 0.2s ease;
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
@@ -40,6 +40,4 @@
   white-space: nowrap;
 }
 
-
-
-
+/*# sourceMappingURL=Chip.css.map */

package/dist/components/Chip.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/Chip.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"Chip.css"}

package/dist/components/EmptyState.css

@@ -36,3 +36,4 @@
   margin: 0;
 }
 
+/*# sourceMappingURL=EmptyState.css.map */

package/dist/components/EmptyState.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/EmptyState.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"EmptyState.css"}

package/dist/components/FilterButton.css

@@ -54,3 +54,5 @@
   line-height: 12px;
   letter-spacing: -0.2px;
 }
+
+/*# sourceMappingURL=FilterButton.css.map */

package/dist/components/FilterButton.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/FilterButton.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA","file":"FilterButton.css"}

package/dist/components/NewsSkeleton.css

@@ -1,11 +1,21 @@
-/* Skeleton animation */
-@keyframes skeleton-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+/* CSS Variables for theming */
+.news-skeleton-container {
+  --skeleton-bg: #f0f0f0;
+  --skeleton-shimmer: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+.news-skeleton-container[data-theme=dark] {
+  --skeleton-bg: #2a2a2e;
+  --skeleton-shimmer: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
 }
 
 .news-skeleton-container {
@@ -15,230 +25,192 @@
 }
 
 .news-skeleton {
-  border-radius: 0;
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 12px;
+  background: transparent;
 }
 
-.news-skeleton--light {
-  background: #ffffff;
-}
-
-.news-skeleton--dark {
-  background: #1a1a1e;
-}
-
-/* Header: дата слева, категория справа */
 .news-skeleton__header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding: 4px;
+  align-items: center;
 }
 
 .news-skeleton__timestamp {
-  width: 100px;
-  height: 14px;
+  height: 16px;
+  width: 60px;
   border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-}
-
-.news-skeleton--light .news-skeleton__timestamp {
-  background: #e5e7eb;
-}
-
-.news-skeleton--dark .news-skeleton__timestamp {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--skeleton-bg);
+  position: relative;
+  overflow: hidden;
+}
+.news-skeleton__timestamp::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
 .news-skeleton__category {
-  width: 120px;
-  height: 14px;
+  height: 20px;
+  width: 80px;
   border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.1s;
-}
-
-.news-skeleton--light .news-skeleton__category {
-  background: #e5e7eb;
-}
-
-.news-skeleton--dark .news-skeleton__category {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--skeleton-bg);
+  position: relative;
+  overflow: hidden;
+}
+.news-skeleton__category::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
-/* Title */
 .news-skeleton__title {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 0 4px;
-}
-
-.news-skeleton__title-line {
-  height: 22px;
-  background: #e5e7eb;
+  height: 40px;
+  width: 100%;
   border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.2s;
-}
-
-.news-skeleton__title-line--full {
+  background: var(--skeleton-bg);
+  position: relative;
+  overflow: hidden;
+}
+.news-skeleton__title::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
   width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
-.news-skeleton__title-line--partial {
-  width: 75%;
-}
-
-/* Source */
 .news-skeleton__source {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 0 4px;
+  gap: 8px;
 }
 
 .news-skeleton__source-logo {
   width: 16px;
   height: 16px;
-  background: #e5e7eb;
-  border-radius: 10.67px;
+  border-radius: 50%;
+  background: var(--skeleton-bg);
   flex-shrink: 0;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.25s;
+  position: relative;
+  overflow: hidden;
+}
+.news-skeleton__source-logo::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
 .news-skeleton__source-name {
-  width: 90px;
-  height: 14px;
-  background: #e5e7eb;
+  height: 16px;
+  width: 100px;
   border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.3s;
+  background: var(--skeleton-bg);
+  position: relative;
+  overflow: hidden;
+}
+.news-skeleton__source-name::after {
+  content: "";
+  position: "";
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
-/* Content */
 .news-skeleton__content {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 0 4px;
-}
-
-.news-skeleton__content-line {
-  height: 16px;
-  background: #e5e7eb;
+  height: 32px;
+  width: 100%;
   border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.35s;
-}
-
-.news-skeleton__content-line--short {
-  width: 65%;
+  background: var(--skeleton-bg);
+  position: relative;
+  overflow: hidden;
+}
+.news-skeleton__content::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
-/* AI Summary */
 .news-skeleton__ai-summary {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px;
-  background-color: rgba(120, 99, 246, 0.12);
-  border-radius: 4px;
-  margin: 0 4px;
-}
-
-.news-skeleton__ai-icon {
-  width: 24px;
-  height: 24px;
-  background: #e5e7eb;
-  border-radius: 4px;
-  flex-shrink: 0;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.4s;
-}
-
-.news-skeleton__ai-text {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.news-skeleton__ai-text-line {
-  height: 14px;
-  background: #e5e7eb;
-  border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.45s;
-}
-
-.news-skeleton__ai-text-line--short {
-  width: 60%;
+  height: 48px;
+  width: 100%;
+  border-radius: 8px;
+  background: var(--skeleton-bg);
+  position: relative;
+  overflow: hidden;
+}
+.news-skeleton__ai-summary::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
-/* Stock Cards */
-.news-skeleton__stocks {
+.news-skeleton__actions {
   display: flex;
-  flex-direction: column;
+  justify-content: flex-end;
   gap: 4px;
   padding: 0 4px;
 }
 
-.news-skeleton__stock-card {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px 4px 4px;
-  background-color: rgba(4, 4, 5, 0.04);
-  border-radius: 4px;
-}
-
-.news-skeleton__stock-logo {
-  width: 48px;
-  height: 48px;
-  background: #e5e7eb;
-  border-radius: 100px;
-  flex-shrink: 0;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.5s;
+.news-skeleton__action {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--skeleton-bg);
+  position: relative;
+  overflow: hidden;
 }
-
-.news-skeleton__stock-text {
-  flex: 1;
-  height: 16px;
-  background: #e5e7eb;
-  border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.55s;
-}
-
-.news-skeleton__stock-change {
-  width: 80px;
-  height: 16px;
-  background: #e5e7eb;
-  border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.6s;
+.news-skeleton__action::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--skeleton-shimmer);
+  animation: shimmer 1.5s infinite;
 }
 
-/* Actions */
-.news-skeleton__actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 0 4px;
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
 }
 
-.news-skeleton__action-icon {
-  width: 16px;
-  height: 16px;
-  background: #e5e7eb;
-  border-radius: 4px;
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-  animation-delay: 0.65s;
-}
+/*# sourceMappingURL=NewsSkeleton.css.map */

package/dist/components/NewsSkeleton.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/NewsSkeleton.scss"],"names":[],"mappings":"AAAA;AACA;EAEE;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAQA;EACE;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAEF;IACE","file":"NewsSkeleton.css"}

package/dist/components/SearchButton.css

@@ -28,3 +28,5 @@
   outline-offset: 2px;
   border-radius: 4px;
 }
+
+/*# sourceMappingURL=SearchButton.css.map */

package/dist/components/SearchButton.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/SearchButton.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA","file":"SearchButton.css"}

package/dist/components/SearchInput.css

@@ -37,7 +37,7 @@
   background: #F5F5F7;
   border: 1px solid #E2E2E2;
   border-radius: 16px;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
   font-size: 12px;
   line-height: 20px;
   color: #242429;
@@ -87,7 +87,7 @@
   padding: 0;
   border: none;
   background: transparent;
-  font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
   font-weight: 500;
   font-size: 12px;
   line-height: 16px;
@@ -106,3 +106,5 @@
 .search-input__cancel:active {
   opacity: 0.5;
 }
+
+/*# sourceMappingURL=SearchInput.css.map */

package/dist/components/SearchInput.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/SearchInput.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"SearchInput.css"}

package/dist/filters/FiltersOverlay.css

@@ -6,7 +6,6 @@
   background: #ffffff;
 }
 
-
 .filters-overlay__content {
   flex: 1;
   overflow-y: auto;
@@ -83,4 +82,4 @@
   transform: scale(0.98);
 }
 
-
+/*# sourceMappingURL=FiltersOverlay.css.map */

package/dist/filters/FiltersOverlay.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/filters/FiltersOverlay.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"FiltersOverlay.css"}

package/dist/newsfeed.css

@@ -1,6 +1,98 @@
 /* Import component styles */
-@import './components/FilterButton.css';
-@import './components/EmptyState.css';
+.filter-button {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+  transition: opacity 0.2s ease;
+}
+
+.filter-button:hover {
+  opacity: 0.7;
+}
+
+.filter-button:active {
+  opacity: 0.5;
+}
+
+.filter-button:focus {
+  outline: none;
+}
+
+.filter-button:focus-visible {
+  outline: 2px solid #7863F6;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Badge styles */
+.filter-button--with-badge {
+  position: relative;
+}
+
+.filter-button__badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  border-radius: 12px;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.filter-button__badge-text {
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 12px;
+  letter-spacing: -0.2px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+.empty-state__icon {
+  margin-bottom: 24px;
+}
+
+.empty-state__icon svg {
+  width: 120px;
+  height: 120px;
+}
+
+.empty-state__content {
+  max-width: 320px;
+}
+
+.empty-state__title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  color: #040405;
+  margin: 0 0 8px 0;
+}
+
+.empty-state__description {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: rgba(4, 4, 5, 0.56);
+  margin: 0;
+}
 
 .news-feed {
   position: relative;
@@ -8,7 +100,7 @@
   height: 100%;
   max-width: 600px;
   margin: 0 auto;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   overflow: hidden;
 }
 
@@ -143,7 +235,6 @@
     transform: rotate(360deg);
   }
 }
-
 .news-feed__scroll-trigger {
   height: 20px;
 }
@@ -155,3 +246,5 @@
   font-size: 16px;
   line-height: 24px;
 }
+
+/*# sourceMappingURL=FeedList.css.map */

package/dist/snippets/NewsSnippet.css

@@ -1,3 +1,36 @@
+@charset "UTF-8";
+/* CSS Variables for theming */
+.news-snippet {
+  --snippet-bg: #ffffff;
+  --snippet-text: rgba(4, 4, 5, 0.92);
+  --snippet-text-secondary: rgba(4, 4, 5, 0.72);
+  --snippet-text-tertiary: rgba(4, 4, 5, 0.56);
+  --snippet-border: rgba(36, 36, 41, 0.08);
+  --snippet-hover-overlay: rgba(0, 0, 0, 0.04);
+  --ai-summary-bg: rgba(120, 99, 246, 0.08);
+  --ai-summary-text: rgba(4, 4, 5, 0.92);
+  --stock-card-bg: rgba(120, 99, 246, 0.04);
+  --stock-price-text: rgba(4, 4, 5, 0.72);
+  --category-bg: rgba(4, 4, 5, 0.06);
+  --category-text: rgba(4, 4, 5, 0.72);
+  --action-btn-hover: rgba(4, 4, 5, 0.06);
+}
+.news-snippet[data-theme=dark] {
+  --snippet-bg: #1a1a1e;
+  --snippet-text: rgba(255, 255, 255, 0.92);
+  --snippet-text-secondary: rgba(255, 255, 255, 0.72);
+  --snippet-text-tertiary: rgba(255, 255, 255, 0.56);
+  --snippet-border: rgba(255, 255, 255, 0.12);
+  --snippet-hover-overlay: rgba(255, 255, 255, 0.06);
+  --ai-summary-bg: rgba(120, 99, 246, 0.12);
+  --ai-summary-text: rgba(255, 255, 255, 0.92);
+  --stock-card-bg: rgba(120, 99, 246, 0.08);
+  --stock-price-text: rgba(255, 255, 255, 0.72);
+  --category-bg: rgba(255, 255, 255, 0.08);
+  --category-text: rgba(255, 255, 255, 0.72);
+  --action-btn-hover: rgba(255, 255, 255, 0.08);
+}
+
 /* Base styles */
 .news-snippet {
   border-radius: 0;
@@ -8,48 +41,24 @@
   cursor: pointer;
   transition: background-color 0.2s ease;
   position: relative;
+  background-color: var(--snippet-bg);
+  /* Hover overlay effect */
 }
-
-/* Light theme */
-.news-snippet--light {
-  background-color: #ffffff;
-}
-
-/* Dark theme */
-.news-snippet--dark {
-  background-color: #1a1a1e;
-}
-
-/* Hover overlay effect */
 .news-snippet::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: transparent;
   transition: background-color 0.2s ease;
   pointer-events: none;
 }
-
-.news-snippet--light::before {
-  background-color: rgba(0, 0, 0, 0);
+.news-snippet:hover::before {
+  background-color: var(--snippet-hover-overlay);
 }
-
-.news-snippet--dark::before {
-  background-color: rgba(255, 255, 255, 0);
-}
-
-.news-snippet--light:hover::before {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.news-snippet--dark:hover::before {
-  background-color: rgba(255, 255, 255, 0.06);
-}
-
-.news-snippet[draggable="true"]:active {
+.news-snippet[draggable=true]:active {
   opacity: 0.5;
   cursor: grabbing;
 }
@@ -74,160 +83,98 @@
   gap: 4px;
 }
 
-.news-snippet__date,
-.news-snippet__time {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: -0.2px;
-}
-
-.news-snippet--light .news-snippet__date,
-.news-snippet--light .news-snippet__time {
-  color: rgba(4, 4, 5, 0.56);
-}
-
-.news-snippet--dark .news-snippet__date,
-.news-snippet--dark .news-snippet__time {
-  color: rgba(255, 255, 255, 0.56);
+.news-snippet__clock-icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
 }
 
-.news-snippet__divider {
+.news-snippet__time {
+  font-family: "Inter", sans-serif;
   font-size: 12px;
+  font-weight: 400;
   line-height: 16px;
-}
-
-.news-snippet--light .news-snippet__divider {
-  color: rgba(4, 4, 5, 0.12);
-}
-
-.news-snippet--dark .news-snippet__divider {
-  color: rgba(255, 255, 255, 0.12);
+  letter-spacing: 0.16px;
+  color: var(--snippet-text-tertiary);
 }
 
 .news-snippet__category {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  display: inline-flex;
+  padding: 2px 8px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  background: var(--category-bg);
+  font-family: "Inter", sans-serif;
   font-size: 12px;
-  font-weight: 400;
+  font-weight: 500;
   line-height: 16px;
-  letter-spacing: -0.2px;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.news-snippet--light .news-snippet__category {
-  color: rgba(4, 4, 5, 0.56);
-}
-
-.news-snippet--dark .news-snippet__category {
-  color: rgba(255, 255, 255, 0.56);
+  letter-spacing: 0.16px;
+  color: var(--category-text);
 }
 
 /* Title */
 .news-snippet__title {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 18px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
   font-weight: 600;
-  line-height: 24px;
-  letter-spacing: -0.4px;
+  line-height: 20px;
+  letter-spacing: 0.16px;
+  color: var(--snippet-text);
   margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
 }
 
-.news-snippet--light .news-snippet__title {
-  color: #040405;
-}
-
-.news-snippet--dark .news-snippet__title {
-  color: #ffffff;
-}
-
-/* Single Source */
+/* Source: одно лого + имя */
 .news-snippet__source {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
 }
 
 .news-snippet__source-logo {
   width: 16px;
   height: 16px;
-  border-radius: 10.67px;
-  border: 0.67px solid rgba(24, 23, 23, 1);
-  object-fit: cover;
+  border-radius: 50%;
   flex-shrink: 0;
+  object-fit: cover;
 }
-
 .news-snippet__source-logo--fallback {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(4, 4, 5, 0.06);
+  background: var(--category-bg);
+  color: var(--snippet-text-tertiary);
   font-size: 10px;
   font-weight: 600;
-  color: #040405;
 }
 
 .news-snippet__source-name {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
   line-height: 16px;
-  letter-spacing: -0.14px;
-}
-
-.news-snippet--light .news-snippet__source-name {
-  color: #040405;
-}
-
-.news-snippet--dark .news-snippet__source-name {
-  color: rgba(255, 255, 255, 0.87);
+  letter-spacing: 0.16px;
+  color: var(--snippet-text-secondary);
 }
 
-/* Content text */
+/* Content Text */
 .news-snippet__content-text {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
   font-weight: 400;
-  line-height: 20px;
-  letter-spacing: -0.2px;
+  line-height: 16px;
+  letter-spacing: 0.16px;
+  color: var(--snippet-text-secondary);
   margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-}
-
-.news-snippet--light .news-snippet__content-text {
-  color: #040405;
-}
-
-.news-snippet--dark .news-snippet__content-text {
-  color: rgba(255, 255, 255, 0.72);
 }
 
 /* AI Summary */
 .news-snippet__ai-summary {
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
   padding: 8px;
-  border-radius: 4px;
-  margin: 0 4px;
-}
-
-.news-snippet--light .news-snippet__ai-summary {
-  background-color: rgba(120, 99, 246, 0.12);
-}
-
-.news-snippet--dark .news-snippet__ai-summary {
-  background-color: rgba(120, 99, 246, 0.24);
+  gap: 8px;
+  border-radius: 8px;
+  background: var(--ai-summary-bg);
 }
 
 .news-snippet__ai-summary-icon {
@@ -235,91 +182,67 @@
   width: 24px;
   height: 24px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
 }
 
 .news-snippet__ai-summary-text {
   flex: 1;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: "Inter", sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
-  letter-spacing: -0.2px;
+  letter-spacing: 0.16px;
+  color: var(--ai-summary-text);
   margin: 0;
 }
 
-.news-snippet--light .news-snippet__ai-summary-text {
-  color: #040405;
-}
-
-.news-snippet--dark .news-snippet__ai-summary-text {
-  color: #ffffff;
-}
-
 /* Stock Cards */
 .news-snippet__stocks {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 0 4px;
 }
 
 .news-snippet__stock-card {
   display: flex;
+  padding: 6px 8px;
   align-items: center;
   justify-content: space-between;
-  padding: 4px 8px 4px 4px;
-  border-radius: 4px;
-}
-
-.news-snippet--light .news-snippet__stock-card {
-  background-color: rgba(4, 4, 5, 0.04);
-}
-
-.news-snippet--dark .news-snippet__stock-card {
-  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  background: var(--stock-card-bg);
 }
 
 .news-snippet__stock-left {
   display: flex;
   align-items: center;
   gap: 8px;
-  min-width: 106.5px;
 }
 
 .news-snippet__stock-logo {
-  width: 48px;
-  height: 48px;
-  border-radius: 100px;
-  object-fit: cover;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
   flex-shrink: 0;
+  object-fit: cover;
 }
-
 .news-snippet__stock-logo--fallback {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(4, 4, 5, 0.08);
-  font-size: 20px;
+  background: var(--category-bg);
+  color: var(--snippet-text-tertiary);
+  font-size: 10px;
   font-weight: 600;
-  color: #040405;
 }
 
 .news-snippet__stock-symbol {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  letter-spacing: -0.2px;
-}
-
-.news-snippet--light .news-snippet__stock-symbol {
-  color: #040405;
-}
-
-.news-snippet--dark .news-snippet__stock-symbol {
-  color: #ffffff;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.16px;
+  color: var(--snippet-text);
 }
 
 .news-snippet__stock-right {
@@ -329,43 +252,37 @@
 }
 
 .news-snippet__stock-change {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: -0.2px;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.16px;
 }
-
 .news-snippet__stock-change--positive {
-  color: #038c5a;
+  color: #10b981;
 }
-
 .news-snippet__stock-change--negative {
-  color: #d02e2e;
+  color: #ef4444;
+}
+.news-snippet__stock-change--neutral {
+  color: var(--snippet-text-tertiary);
 }
 
 .news-snippet__stock-price {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
   font-weight: 400;
-  line-height: 20px;
-  letter-spacing: -0.2px;
-}
-
-.news-snippet--light .news-snippet__stock-price {
-  color: #040405;
-}
-
-.news-snippet--dark .news-snippet__stock-price {
-  color: rgba(255, 255, 255, 0.87);
+  line-height: 16px;
+  letter-spacing: 0.16px;
+  color: var(--stock-price-text);
 }
 
-/* Action Bar - только справа */
+/* Action Bar - только bookmark и AI справа */
 .news-snippet__actions {
   display: flex;
-  align-items: center;
   justify-content: flex-end;
-  gap: 8px;
+  align-items: center;
+  gap: 4px;
   padding: 0 4px;
 }
 
@@ -373,21 +290,29 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
+  width: 32px;
+  height: 32px;
   border: none;
   background: transparent;
+  border-radius: 50%;
   cursor: pointer;
-  transition: opacity 0.2s ease;
+  transition: background-color 0.2s ease;
+  padding: 0;
 }
-
 .news-snippet__action-btn:hover {
-  opacity: 0.7;
+  background: var(--action-btn-hover);
 }
-
-.news-snippet__action-btn:active {
-  transform: scale(0.95);
+.news-snippet__action-btn--active {
+  background: rgba(120, 99, 246, 0.12);
 }
 
+/* Image */
+.news-snippet__cover {
+  width: 100%;
+  height: auto;
+  max-height: 200px;
+  object-fit: cover;
+  border-radius: 8px;
+}
 
+/*# sourceMappingURL=NewsSnippet.css.map */

package/dist/snippets/NewsSnippet.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/snippets/NewsSnippet.scss"],"names":[],"mappings":";AAAA;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA","file":"NewsSnippet.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "finsignal-feed-explore",
-  "version": "2.20.3",
+  "version": "2.21.1",
   "description": "News feed explorer components for React web applications",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,7 +10,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc && cp src/FeedList.css dist/FeedList.css && cp src/FeedList.css dist/newsfeed.css && cp src/components/Chip.css dist/components/Chip.css && cp src/components/FilterButton.css dist/components/FilterButton.css && cp src/components/SearchButton.css dist/components/SearchButton.css && cp src/components/SearchInput.css dist/components/SearchInput.css && cp src/components/EmptyState.css dist/components/EmptyState.css && cp src/components/NewsSkeleton.css dist/components/NewsSkeleton.css && cp src/filters/FiltersOverlay.css dist/filters/FiltersOverlay.css && cp src/snippets/NewsSnippet.css dist/snippets/NewsSnippet.css",
+    "build": "tsc && npm run build:styles",
+    "build:styles": "sass src/FeedList.scss dist/FeedList.css && cp dist/FeedList.css dist/newsfeed.css && sass src/components/Chip.scss dist/components/Chip.css && sass src/components/FilterButton.scss dist/components/FilterButton.css && sass src/components/SearchButton.scss dist/components/SearchButton.css && sass src/components/SearchInput.scss dist/components/SearchInput.css && sass src/components/EmptyState.scss dist/components/EmptyState.css && sass src/components/NewsSkeleton.scss dist/components/NewsSkeleton.css && sass src/filters/FiltersOverlay.scss dist/filters/FiltersOverlay.css && sass src/snippets/NewsSnippet.scss dist/snippets/NewsSnippet.css",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -38,6 +39,7 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-native": "^0.72.0",
+    "sass": "^1.69.0",
     "typescript": "^5.0.0"
   }
 }