From c3819f2529114642a360a23fa54a3c90d5cab9ad Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 24 Aug 2026 21:39:01 +0800
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=20listbox=20=D0=BD=D0=B0=20=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B:=20=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BF=D0=BE=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=BF=D1=83=D0=BD=D0=BA=D1=82=D0=B0=20=D0=B8=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=BF=D0=B8=D1=81=D1=8C=20=D0=B1=D0=B5=D0=B7=20=D1=81?=
 =?UTF-8?q?=D0=B8=D0=BD=D0=BE=D0=BD=D0=B8=D0=BC=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prime-preset/tokens/components/listbox.ts | 74 +++++++++----------
 1 file changed, 34 insertions(+), 40 deletions(-)

diff --git a/src/lib/providers/prime-preset/tokens/components/listbox.ts b/src/lib/providers/prime-preset/tokens/components/listbox.ts
index 05489d17..acfc13f6 100644
--- a/src/lib/providers/prime-preset/tokens/components/listbox.ts
+++ b/src/lib/providers/prime-preset/tokens/components/listbox.ts
@@ -1,49 +1,43 @@
 export const listboxCss = ({ dt }: { dt: (token: string) => string }): string => `
-  /* ─── Listbox extend: публикуем кастомные переменные в :root ─── */
-  :root {
-    --p-listbox-extend-ext-option-gap:                   ${dt('listbox.extend.extOption.gap')};
-    --p-listbox-extend-ext-option-label-gap:             ${dt('listbox.extend.extOption.label.gap')};
-    --p-listbox-extend-ext-option-caption-color:         ${dt('listbox.extend.extOption.caption.color')};
-    --p-listbox-extend-ext-option-caption-striped-color: ${dt('listbox.extend.extOption.caption.stripedColor')};
-  }
+.p-listbox-option {
+  display: flex;
+  align-items: center;
+  gap: ${dt('listbox.extend.extOption.gap')};
+  font-family: ${dt('fonts.fontFamily.base')};
+  font-size: ${dt('fonts.fontSize.200')};
+  line-height: ${dt('fonts.lineHeight.none')};
+}
 
-  /* ─── Расположение элемента списка ─── */
-  .p-listbox-option {
-    display: flex;
-    align-items: center;
-    gap: var(--p-listbox-extend-ext-option-gap);
-  }
+.p-listbox-option:has(.p-listbox-option-label-group) {
+  align-items: flex-start;
+}
 
-  /* Многострочный контент (иконка + label-group): выравнивание по верху */
-  .p-listbox-option:has(.p-listbox-option-label-group) {
-    align-items: flex-start;
-  }
+.p-listbox-option:has(.p-listbox-option-check-icon) {
+  gap: unset;
+}
 
-  .p-listbox-option:has(.p-listbox-option-check-icon) {
-    gap: unset;
-  }
+.p-listbox-option-label-group {
+  display: flex;
+  flex-direction: column;
+  gap: ${dt('listbox.extend.extOption.label.gap')};
+}
 
-  /* ─── Группа: текст + подпись ─── */
-  .p-listbox-option-label-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--p-listbox-extend-ext-option-label-gap);
-  }
+.p-listbox-option-caption {
+  color: ${dt('listbox.extend.extOption.caption.color')};
+  font-size: ${dt('fonts.fontSize.200')};
+  font-family: ${dt('fonts.fontFamily.heading')};
+}
 
-  /* ─── Подпись элемента списка ─── */
-  .p-listbox-option-caption {
-    color: var(--p-listbox-extend-ext-option-caption-color);
-    font-size: ${dt('fonts.fontSize.200')};
-    font-family: ${dt('fonts.fontFamily.heading')};
-  }
+.p-listbox-striped li:nth-child(even of .p-listbox-option) .p-listbox-option-caption {
+  color: ${dt('listbox.extend.extOption.caption.stripedColor')};
+}
 
-  /* ─── Галочка выбора ─── */
-  .p-listbox-check-icon {
-    margin-inline-start: ${dt('listbox.checkmark.gutterStart')};
-    margin-inline-end: ${dt('listbox.checkmark.gutterEnd')};
-  }
+.p-listbox-check-icon {
+  margin-inline-start: ${dt('listbox.checkmark.gutterStart')};
+  margin-inline-end: ${dt('listbox.checkmark.gutterEnd')};
+}
 
-  .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected .p-listbox-option-check-icon {
-    color: ${dt('listbox.option.selectedColor')};
-  }
+.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected .p-listbox-option-check-icon {
+  color: ${dt('listbox.option.selectedColor')};
+}
 `;