@cdek-it/angular-ui-kit 0.2.4-test → 0.2.7-test

package/fesm2022/cdek-it-angular-ui-kit-providers.mjs

@@ -546,7 +546,15 @@ var semantic = {
 			"800": "{sizing.16x}",
 			"900": "{sizing.20x}"
 		},
-		width: "{sizing.68x}",
+		width: {
+			"100": "{sizing.6x}",
+			"200": "{sizing.8x}",
+			"300": "{sizing.10x}",
+			"350": "{sizing.11x}",
+			"400": "{sizing.12x}",
+			"500": "{sizing.60x}",
+			full: "{sizing.max}"
+		},
 		gap: {
 			"100": "{spacing.1x}",
 			"200": "{spacing.2x}",
@@ -1375,7 +1383,7 @@ var components = {
 			transitionDuration: "{controls.transitionDuration}"
 		},
 		panel: {
-			borderWidth: "{borderWidth.none} {borderWidth.none} {navigation.width.200} {borderWidth.none}",
+			borderWidth: "{borderWidth.none} {borderWidth.none} {navigation.width.100} {borderWidth.none}",
 			borderColor: "{form.borderColor}"
 		},
 		content: {
@@ -1467,7 +1475,7 @@ var components = {
 			padding: "{list.optionGroup.padding}"
 		},
 		dropdown: {
-			width: "{form.width.full}",
+			width: "{form.width.300}",
 			borderColor: "{form.borderColor}",
 			hoverBorderColor: "{form.hoverBorderSecondaryColor}",
 			activeBorderColor: "{form.focusBorderSecondaryColor}",
@@ -2809,10 +2817,20 @@ var components = {
 			background: "{overlay.modal.background}",
 			borderColor: "{overlay.modal.borderColor}",
 			color: "{overlay.modal.color}",
-			shadow: "{overlay.modal.shadow}"
+			shadow: "{overlay.modal.shadow}",
+			width: "{overlay.width}"
+		},
+		sm: {
+			width: "{overlay.sm.width}"
+		},
+		lg: {
+			width: "{overlay.lg.width}"
+		},
+		xlg: {
+			width: "{overlay.xlg.width}"
 		},
 		header: {
-			padding: "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.100} {overlay.modal.padding.300} "
+			padding: "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.200} {overlay.modal.padding.300} "
 		},
 		title: {
 			fontSize: "{fonts.fontSize.500}",
@@ -3095,7 +3113,7 @@ var components = {
 			transitionDuration: "{form.transitionDuration}"
 		},
 		button: {
-			width: "{form.width.300}",
+			width: "{form.size.600}",
 			borderRadius: "{form.borderRadius.200}",
 			verticalPadding: "{form.padding.300}"
 		}
@@ -3219,7 +3237,7 @@ var components = {
 		optionGroup: {
 			background: "{list.optionGroup.background}",
 			color: "{list.optionGroup.color}",
-			fontWeight: "{fonts.fontWeight.demibold}",
+			fontWeight: "{fonts.fontWeight.regular}",
 			padding: "{list.option.padding}"
 		},
 		checkmark: {
@@ -3377,7 +3395,7 @@ var components = {
 		},
 		submenuLabel: {
 			padding: "{navigation.submenuLabel.padding}",
-			fontWeight: "{fonts.fontWeight.demibold}",
+			fontWeight: "{fonts.fontWeight.regular}",
 			background: "{navigation.submenuLabel.background}",
 			color: "{navigation.submenuLabel.color}"
 		},
@@ -3964,6 +3982,16 @@ var components = {
 				icon: {
 					color: "{form.placeholderColor}"
 				}
+			},
+			dark: {
+				strength: {
+					weakBackground: "{error.500}",
+					mediumBackground: "{warn.500}",
+					strongBackground: "{success.600}"
+				},
+				icon: {
+					color: "{form.placeholderColor}"
+				}
 			}
 		},
 		meter: {
@@ -3997,8 +4025,9 @@ var components = {
 			color: "{overlay.popover.color}",
 			borderRadius: "{overlay.popover.borderRadius}",
 			shadow: "{overlay.popover.shadow}",
-			gutter: "{overlay.gap.100}",
-			arrowOffset: "{overlay.popover.padding.200}"
+			gutter: "{overlay.gap.300}",
+			arrowOffset: "{overlay.popover.padding.200}",
+			arrowLeft: "0px"
 		},
 		content: {
 			padding: "{overlay.popover.padding.100}"
@@ -4167,19 +4196,19 @@ var components = {
 			placeholderColor: "{form.placeholderColor}",
 			invalidPlaceholderColor: "{form.invalidPlaceholderColor}",
 			shadow: "0",
-			paddingX: "{form.paddingX}",
-			paddingY: "{form.paddingY}",
+			paddingX: "{form.padding.300}",
+			paddingY: "{form.padding.300}",
 			borderRadius: "{form.borderRadius.200}",
 			transitionDuration: "{form.transitionDuration}",
 			sm: {
-				fontSize: "{form.fontSize}",
-				paddingX: "{form.paddingX}",
-				paddingY: "{form.paddingY}"
+				fontSize: "{fonts.fontSize.300}",
+				paddingX: "{form.padding.300}",
+				paddingY: "{form.padding.200}"
 			},
 			lg: {
-				fontSize: "{form.fontSize}",
-				paddingX: "{form.paddingX}",
-				paddingY: "{form.paddingY}"
+				fontSize: "{fonts.fontSize.300}",
+				paddingX: "{form.padding.300}",
+				paddingY: "{form.padding.400}"
 			},
 			focusRing: {
 				width: "{form.focusRing.width}",
@@ -4221,7 +4250,7 @@ var components = {
 		optionGroup: {
 			background: "{list.optionGroup.background}",
 			color: "{list.optionGroup.color}",
-			fontWeight: "{fonts.fontWeight.demibold}",
+			fontWeight: "{fonts.fontWeight.regular}",
 			padding: "{list.option.padding}"
 		},
 		clearIcon: {
@@ -4708,7 +4737,12 @@ var components = {
 			readonlyBackground: "{form.readonlyBackground}",
 			borderWidth: "{form.borderWidth}",
 			iconSize: "{form.icon.300}",
-			minHeight: "{form.size.900}"
+			minHeight: "{form.size.900}",
+			extXlg: {
+				fontSize: "{fonts.fontSize.300}",
+				paddingX: "{form.padding.300}",
+				paddingY: "{form.padding.500}"
+			}
 		},
 		root: {
 			background: "{form.background}",
@@ -4725,8 +4759,8 @@ var components = {
 			placeholderColor: "{form.placeholderColor}",
 			invalidPlaceholderColor: "{form.invalidPlaceholderColor}",
 			shadow: "0",
-			paddingX: "{form.paddingX}",
-			paddingY: "{form.paddingY}",
+			paddingX: "{form.padding.300}",
+			paddingY: "{form.padding.300}",
 			borderRadius: "{form.borderRadius.200}",
 			transitionDuration: "{form.transitionDuration}",
 			focusRing: {
@@ -4735,17 +4769,17 @@ var components = {
 				color: "{form.focusRing.color}",
 				offset: "{form.focusRing.offset}",
 				shadow: "0"
+			},
+			sm: {
+				fontSize: "{fonts.fontSize.300}",
+				paddingX: "{form.padding.300}",
+				paddingY: "{form.padding.200}"
+			},
+			lg: {
+				fontSize: "{fonts.fontSize.300}",
+				paddingX: "{form.padding.300}",
+				paddingY: "{form.padding.400}"
 			}
-		},
-		sm: {
-			fontSize: "{fonts.fontSize.300}",
-			paddingX: "{form.padding.200}",
-			paddingY: "{form.padding.200}"
-		},
-		lg: {
-			fontSize: "{fonts.fontSize.300}",
-			paddingX: "{form.padding.400}",
-			paddingY: "{form.padding.400}"
 		}
 	},
 	tieredmenu: {
@@ -4863,7 +4897,7 @@ var components = {
 			checkedHoverBackground: "{surface.800}",
 			checkedHoverBorderColor: "{surface.800}",
 			extXlg: {
-				padding: "{form.padding.500} {form.padding.500}",
+				padding: "{form.padding.500} {form.padding.600}",
 				iconOnlyWidth: "4.0714rem"
 			},
 			extSm: {
@@ -5366,12 +5400,29 @@ const checkboxCss = ({ dt }) => `
 }
 `;
 
+const inputmaskCss = ({ dt }) => `
+
+/* ─── Sizes ─── */
+input-mask.input-mask-xlg .p-inputtext {
+  font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+  padding: ${dt('inputtext.extend.extXlg.paddingY')} ${dt('inputtext.extend.extXlg.paddingX')};
+}
+`;
+
 const inputtextCss = ({ dt }) => `
 
 /* ─── Базовые стили ─── */
 .p-inputtext {
-  border-width: ${dt('inputtext.extend.borderWidth')};
   line-height: ${dt('fonts.lineHeight.250')};
+  font-family: ${dt('fonts.fontFamily.base')};
+}
+
+.p-inputtext::placeholder {
+  font-family: ${dt('fonts.fontFamily.base')};
+}
+
+.p-floatlabel:has(.p-inputtext) label {
+  font-family: ${dt('fonts.fontFamily.base')};
 }
 
 /* ─── Disabled ─── */
@@ -5452,6 +5503,104 @@ const progressspinnerCss = ({ dt }) => `
 }
 `;
 
+/**
+ * Кастомная CSS-стилизация для компонента p-password.
+ * Подключается в map-tokens.ts: `import { passwordCss } from './components/password'`
+ */
+const passwordCss = ({ dt }) => `
+  /* ─── Иконки управления ─── */
+  .p-password-toggle-mask-icon,
+  .p-icon.p-password-toggle-mask-icon.p-password-unmask-icon {
+    cursor: pointer;
+    color: ${dt('password.icon.color')};
+  }
+
+  /* ─── Оверлей и индикатор ─── */
+  .p-password-overlay {
+    border-width: ${dt('password.extend.borderWidth')};
+  }
+
+  .p-password-meter-text {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('password.overlay.color')};
+  }
+
+  /* ─── Focus ─── */
+  .p-password:has(.p-inputtext:enabled:focus) {
+    box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')};
+    border-radius: ${dt('inputtext.root.borderRadius')};
+  }
+
+  /* ─── Invalid + Focus ─── */
+  .p-password:has(.p-inputtext.p-invalid:focus) {
+    box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')};
+    border-radius: ${dt('inputtext.root.borderRadius')};
+  }
+
+  .p-password:has(.p-inputtext.p-invalid:focus) .p-inputtext {
+    border-color: ${dt('inputtext.root.invalidBorderColor')};
+  }
+
+  /* ─── FloatLabel ─── */
+  .p-floatlabel:has(.p-password) label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-weight: ${dt('floatlabel.root.fontWeight')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('floatlabel.root.color')};
+  }
+
+  .p-floatlabel:has(.p-password) .p-floatlabel-active label {
+    font-weight: ${dt('floatlabel.root.active.fontWeight')};
+  }
+
+  .p-floatlabel-in .p-password .p-inputtext {
+    font-family: ${dt('fonts.fontFamily.base')};
+    padding-block-start: ${dt('floatlabel.in.input.paddingTop')};
+    padding-block-end: ${dt('floatlabel.in.input.paddingBottom')};
+  }
+
+  /* ─── Кастомный контент (правила пароля) ─── */
+  .p-password-rules {
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('password.content.gap')};
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .p-password-rule {
+    display: flex;
+    align-items: center;
+    gap: ${dt('password.content.gap')};
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('password.overlay.color')};
+  }
+
+  /* ─── Состояния иконок правил ─── */
+  .p-password-rule i {
+    font-size: ${dt('fonts.fontSize.200')};
+  }
+
+  .p-password-rule .ti-circle {
+    color: ${dt('surface.400')};
+  }
+
+  .p-password-rule .ti-circle-check {
+    color: ${dt('password.colorScheme.light.strength.strongBackground')};
+  }
+
+  .p-password-rule .ti-circle-x {
+    color: ${dt('password.colorScheme.light.strength.weakBackground')};
+  }
+`;
+
 const tagCss = ({ dt }) => `
   .p-tag {
     font-family: ${dt('fonts.fontFamily.base')};
@@ -5459,76 +5608,72 @@ const tagCss = ({ dt }) => `
   }
 `;
 
-const timelineCss = ({ dt }) => `
+const textareaCss = ({ dt }) => `
 
-/* ─── Типографика ─── */
-.p-timeline {
+/* --- Base --- */
+.p-textarea {
+  border-width: ${dt('textarea.extend.borderWidth')};
+  line-height: ${dt('fonts.lineHeight.250')};
+  min-height: ${dt('textarea.extend.minHeight')};
   font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.300')};
-  line-height: ${dt('fonts.lineHeight.500')};
-  color: ${dt('text.color')};
-}
-
-/* ─── Маркер ─── */
-.p-timeline-event-marker {
-  border-width: ${dt('timeline.eventMarker.borderWidth')};
-  background: ${dt('timeline.eventMarker.background')};
-  border-color: ${dt('timeline.eventMarker.borderColor')};
 }
 
-.p-timeline-event-marker::before {
-  background: ${dt('timeline.eventMarker.content.background')};
+.p-textarea::placeholder {
+  font-family: ${dt('fonts.fontFamily.base')};
 }
 
-/* ─── Коннектор ─── */
-.p-timeline-event-connector {
-  background: ${dt('timeline.eventConnector.color')};
+.p-floatlabel:has(.p-textarea) label {
+  font-family: ${dt('fonts.fontFamily.base')};
 }
 
-/* ─── Стиль линии ─── */
-timeline[data-line="dashed"] .p-timeline-event-connector {
-  background: none;
-  border-left: ${dt('timeline.eventConnector.size')} dashed ${dt('timeline.eventConnector.color')};
+/* --- Sizes --- */
+.p-textarea.p-textarea-xlg {
+  font-size: ${dt('textarea.extend.extXlg.fontSize')};
+  padding: ${dt('textarea.extend.extXlg.paddingY')} ${dt('textarea.extend.extXlg.paddingX')};
 }
 
-timeline[data-line="dotted"] .p-timeline-event-connector {
-  background: none;
-  border-left: ${dt('timeline.eventConnector.size')} dotted ${dt('timeline.eventConnector.color')};
+/* --- States --- */
+.p-textarea:enabled:read-only {
+  background: ${dt('textarea.extend.readonlyBackground')};
+  color: ${dt('textarea.color')};
 }
 
-timeline[data-line="none"] .p-timeline-event-connector {
-  background: none;
+.p-textarea:disabled {
+  background: ${dt('textarea.disabledBackground')};
+  color: ${dt('textarea.disabledColor')};
+  opacity: 1;
 }
 
-/* Горизонтальная ориентация линии */
-timeline[data-line="dashed"] .p-timeline-horizontal .p-timeline-event-connector {
-  border-left: none;
-  border-top: ${dt('timeline.eventConnector.size')} dashed ${dt('timeline.eventConnector.color')};
+/* --- Focus --- */
+.p-textarea:enabled:focus {
+  box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('textarea.focusRing.color')};
 }
 
-timeline[data-line="dotted"] .p-timeline-horizontal .p-timeline-event-connector {
-  border-left: none;
-  border-top: ${dt('timeline.eventConnector.size')} dotted ${dt('timeline.eventConnector.color')};
+/* --- Invalid + Focus --- */
+.p-textarea.p-invalid:focus {
+  border-color: ${dt('textarea.invalidBorderColor')};
+  box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('focusRing.extend.invalid')};
 }
 
-/* ─── Маркер-иконка (без бордера и фона) ─── */
-.p-timeline-event-marker:has(i) {
-  border: none;
-  background: none;
+/* --- ClearButton (showClear) --- */
+.p-iconfield:has(.p-textarea) {
+  display: block;
+  width: fit-content;
 }
 
-.p-timeline-event-marker:has(i)::before {
-  display: none;
+.p-iconfield:has(.p-textarea) .p-textarea {
+  padding-right: ${dt('form.padding.700')};
 }
 
-/* ─── Кастомный цвет маркера ─── */
-timeline[style*="--timeline-marker-color"] .p-timeline-event-marker {
-  border-color: var(--timeline-marker-color);
+.p-iconfield:has(.p-textarea) .p-inputicon {
+  top: ${dt('form.padding.500')};
+  transform: none;
+  font-size: ${dt('textarea.extend.iconSize')};
+  width: ${dt('textarea.extend.iconSize')};
+  height: ${dt('textarea.extend.iconSize')};
+  cursor: pointer;
 }
 
-timeline[style*="--timeline-marker-color"] .p-timeline-event-marker i {
-  color: var(--timeline-marker-color);
-}
 `;
 
 const tooltipCss = ({ dt }) => `
@@ -5541,6 +5686,107 @@ const tooltipCss = ({ dt }) => `
 }
 `;
 
+const inputgroupCss = ({ dt }) => `
+
+/* ─── Корректировка flex-layout через Angular-обёртки ─── */
+
+/*
+ * display: contents делает враппер-элементы прозрачными в layout-дереве:
+ * p-inputgroupaddon и input.p-inputtext становятся прямыми flex-элементами
+ * p-inputgroup. Это позволяет:
+ * - align-items: stretch работать напрямую → правильная высота аддона
+ * - границам быть на одном уровне → нет удвоения top/bottom border
+ * - flex: 1 1 auto; width: 1% на input работать нативно через PrimeNG
+ * CSS-селекторы по-прежнему работают (DOM-дерево не меняется).
+ */
+.p-inputgroup > input-group-addon {
+  display: contents;
+}
+
+.p-inputgroup > input-text {
+  display: contents;
+}
+
+/* ─── Корректировка border-radius и границ ─── */
+
+/*
+ * p-inputgroupaddon является :first-child И :last-child своего прямого родителя
+ * input-group-addon, поэтому PrimeNG добавляет ему оба inline-бордера.
+ * Сбрасываем их и переназначаем по позиции аддона в группе.
+ */
+.p-inputgroup > input-group-addon > .p-inputgroupaddon {
+  border-radius: 0;
+  border-inline-start: none;
+  border-inline-end: none;
+}
+
+/* Первый элемент группы — аддон: левые углы + левая граница */
+.p-inputgroup > input-group-addon:first-child > .p-inputgroupaddon {
+  border-start-start-radius: ${dt('inputgroup.addon.borderRadius')};
+  border-end-start-radius: ${dt('inputgroup.addon.borderRadius')};
+  border-inline-start: ${dt('inputgroup.extend.borderWidth')} solid ${dt('inputgroup.addon.borderColor')};
+}
+
+/* Последний элемент группы — аддон: правые углы + правая граница */
+.p-inputgroup > input-group-addon:last-child > .p-inputgroupaddon {
+  border-start-end-radius: ${dt('inputgroup.addon.borderRadius')};
+  border-end-end-radius: ${dt('inputgroup.addon.borderRadius')};
+  border-inline-end: ${dt('inputgroup.extend.borderWidth')} solid ${dt('inputgroup.addon.borderColor')};
+}
+
+/* Аддон сразу после другого аддона: левая граница как разделитель */
+.p-inputgroup > input-group-addon + input-group-addon > .p-inputgroupaddon {
+  border-inline-start: ${dt('inputgroup.extend.borderWidth')} solid ${dt('inputgroup.addon.borderColor')};
+}
+
+/* Сброс border-radius у input внутри input-text-обёртки */
+.p-inputgroup > input-text .p-inputtext {
+  border-radius: 0;
+  margin: 0;
+}
+
+/* Аддон: только горизонтальные границы (top/bottom), inline-бордеры управляются позиционно */
+.p-inputgroup > input-group-addon > .p-inputgroupaddon {
+  border-block-start: ${dt('inputgroup.extend.borderWidth')} solid ${dt('inputgroup.addon.borderColor')};
+  border-block-end: ${dt('inputgroup.extend.borderWidth')} solid ${dt('inputgroup.addon.borderColor')};
+}
+
+/* Первый элемент группы — input: левые углы */
+.p-inputgroup > input-text:first-child .p-inputtext {
+  border-start-start-radius: ${dt('inputgroup.addon.borderRadius')};
+  border-end-start-radius: ${dt('inputgroup.addon.borderRadius')};
+}
+
+/* Последний элемент группы — input: правые углы */
+.p-inputgroup > input-text:last-child .p-inputtext {
+  border-start-end-radius: ${dt('inputgroup.addon.borderRadius')};
+  border-end-end-radius: ${dt('inputgroup.addon.borderRadius')};
+}
+
+/* ─── Addon в disabled состоянии ─── */
+.p-inputgroup:has(input[disabled]) .p-inputgroupaddon,
+.p-inputgroup:has(.p-inputtext[disabled]) .p-inputgroupaddon,
+.p-inputgroup:has(.p-component[disabled]) .p-inputgroupaddon {
+  background: ${dt('inputtext.root.disabledBackground')};
+  color: ${dt('inputtext.root.disabledColor')};
+}
+
+/* ─── Иконка внутри addon ─── */
+.p-inputgroup .p-inputgroupaddon i {
+  font-size: ${dt('inputgroup.extend.iconSize')};
+}
+
+/* ─── Extra Large ─── */
+.p-inputgroup.p-inputgroup-xlg .p-inputgroupaddon {
+  font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+  padding: ${dt('inputtext.extend.extXlg.paddingY')} ${dt('inputtext.extend.extXlg.paddingX')};
+}
+
+.p-inputgroup.p-inputgroup-xlg .p-inputgroupaddon i {
+  font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+}
+`;
+
 const megamenuCss = ({ dt }) => `
 /* ─── Размер иконок ─── */
 .p-megamenu-submenu-icon,
@@ -5584,52 +5830,2178 @@ const megamenuCss = ({ dt }) => `
 }
 `;
 
-const presetTokens = {
-    primitive: tokens.primitive,
-    semantic: tokens.semantic,
-    components: {
-        ...tokens.components,
-        avatar: {
-            ...tokens.components.avatar,
-            css: avatarCss,
-        },
-        card: {
-            ...tokens.components.card,
-            css: cardCss,
-        },
-        checkbox: {
-            ...tokens.components.checkbox,
-            css: checkboxCss,
-        },
-        button: {
-            ...tokens.components.button,
-            css: buttonCss,
-        },
-        progressspinner: {
-            ...tokens.components.progressspinner,
-            css: progressspinnerCss,
-        },
-        inputtext: {
-            ...tokens.components.inputtext,
-            css: inputtextCss,
-        },
-        tag: {
-            ...tokens.components.tag,
-            css: tagCss,
-        },
-        timeline: {
-            ...tokens.components.timeline,
-            css: timelineCss,
-        },
-        tooltip: {
-            ...tokens.components.tooltip,
-            css: tooltipCss,
-        },
-        megamenu: {
-            ...tokens.components.megamenu,
-            css: megamenuCss,
+const selectCss = ({ dt }) => `
+  /* ─── Базовые стили ─── */
+  .p-select.p-component {
+    width: 100%;
+    border-width: ${dt('select.extend.borderWidth')};
+    line-height: ${dt('fonts.lineHeight.250')};
+  }
+
+  .p-select.p-component .p-select-label,
+  .p-select-option {
+    font-family: ${dt('fonts.fontFamily.base')};
+  }
+
+  /* ─── Focus ─── */
+  .p-select.p-component:not(.p-disabled).p-focus {
+    box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('select.root.focusRing.color')};
+  }
+
+  /* ─── Invalid + Focus ─── */
+  .p-select.p-component.p-invalid.p-focus {
+    border-color: ${dt('select.root.invalidBorderColor')};
+    box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('focusRing.extend.invalid')};
+  }
+
+  /* ─── Readonly ─── */
+  .p-select.p-component[readonly] {
+    background: ${dt('select.extend.readonlyBackground')};
+    border-color: ${dt('select.root.borderColor')};
+    color: ${dt('select.root.color')};
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .p-select.p-component[readonly] :is(.p-select-dropdown .p-select-dropdown-icon, .p-select-clear-icon) {
+    color: ${dt('select.root.placeholderColor')};
+  }
+
+  /* ─── XLarge ─── */
+  .p-select.p-component.p-select-xlg .p-select-label {
+    font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+    padding-block: ${dt('inputtext.extend.extXlg.paddingY')};
+    padding-inline: ${dt('inputtext.extend.extXlg.paddingX')};
+  }
+
+  /* ─── FloatLabel ─── */
+  .p-floatlabel:has(.p-select.p-component) label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-weight: ${dt('floatlabel.root.fontWeight')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('floatlabel.root.color')};
+  }
+
+  .p-floatlabel:has(.p-select.p-component) .p-floatlabel-active label {
+    font-weight: ${dt('floatlabel.root.active.fontWeight')};
+  }
+
+  .p-floatlabel-in .p-select.p-component .p-select-label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    padding-block-start: ${dt('floatlabel.in.input.paddingTop')};
+    padding-block-end: ${dt('floatlabel.in.input.paddingBottom')};
+  }
+
+  /* ─── Checkmark: выбранный элемент ─── */
+  .p-select-option:has(.p-select-option-check-icon) {
+    background: ${dt('select.option.selectedBackground')};
+    color: ${dt('select.option.selectedColor')};
+  }
+
+  .p-select-option:has(.p-select-option-check-icon).p-focus {
+    background: ${dt('select.option.selectedFocusBackground')};
+    color: ${dt('select.option.selectedFocusColor')};
+  }
+
+  /* Скрываем PrimeNG SVG, заменяем на tabler-иконку */
+  .p-select-option .p-select-option-check-icon,
+  .p-select-option .p-select-option-blank-icon {
+    display: none;
+  }
+
+  .p-select-option:has(.p-select-option-check-icon)::before,
+  .p-select-option:has(.p-select-option-blank-icon)::before {
+    font-family: 'tabler-icons';
+    content: var(--p-select-checkmark-content, "\\ea5e");
+    font-size: ${dt('select.extend.iconSize')};
+    color: var(--p-select-option-selected-color);
+    flex-shrink: 0;
+    margin-inline-start: ${dt('select.checkmark.gutterStart')};
+    margin-inline-end: ${dt('select.checkmark.gutterEnd')};
+  }
+
+  .p-select-option:has(.p-select-option-check-icon).p-focus::before {
+    color: var(--p-select-option-focus-color);
+  }
+
+  .p-select-option:has(.p-select-option-blank-icon)::before {
+    visibility: hidden;
+  }
+
+  /* ─── Иконки ─── */
+  .p-select.p-component :is(.p-select-dropdown .p-select-dropdown-icon, .p-select-clear-icon, .p-select-loading-icon) {
+    font-size: ${dt('select.extend.iconSize')};
+    width: ${dt('select.extend.iconSize')};
+    height: ${dt('select.extend.iconSize')};
+    color: ${dt('select.root.placeholderColor')};
+  }
+`;
+
+const messageCss = ({ dt }) => `
+  /* Основной контейнер message */
+  .p-message {
+    width: ${dt('message.extend.width')};
+    overflow: hidden;
+    position: relative;
+  }
+
+  /* Контент message с приоритизацией align-items */
+  .p-message .p-message-content {
+    display: flex;
+    align-items: flex-start;
+    width: stretch;
+    border-radius: ${dt('message.root.borderRadius')};
+  }
+
+  /* Текстовый блок message */
+  .p-message-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('message.extend.extText.gap')};
+  }
+
+  /* Заголовок message */
+  .p-message-summary {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-weight: ${dt('message.text.fontWeight')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    font-size: ${dt('message.text.fontSize')};
+  }
+
+  /* Детальное описание message */
+  .p-message .p-message-detail {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+  }
+
+  /* Кнопка закрытия message */
+  .p-message .p-message-content .p-message-close-button {
+    width: ${dt('message.closeButton.width')};
+    height: ${dt('message.closeButton.height')};
+    margin: 0;
+    padding: 0;
+    right: 0;
+  }
+
+  /* Общие стили border для кнопки закрытия всех типов message */
+  .p-message-info .p-message-close-button,
+  .p-message-success .p-message-close-button,
+  .p-message-warn .p-message-close-button,
+  .p-message-error .p-message-close-button {
+    border: ${dt('message.extend.extCloseButton.width')} solid;
+  }
+
+  /* Общие стили для акцентной линии всех типов message */
+  .p-message-info .p-message-accent-line,
+  .p-message-success .p-message-accent-line,
+  .p-message-warn .p-message-accent-line,
+  .p-message-error .p-message-accent-line {
+    width: ${dt('message.extend.extAccentLine.width')};
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: ${dt('message.root.borderRadius')} 0 0 ${dt('message.root.borderRadius')};
+  }
+
+  /* Стили для message типа Info */
+  .p-message-info .p-message-icon {
+    color: ${dt('message.extend.extInfo.color')};
+  }
+
+  .p-message-info .p-message-close-button {
+    color: ${dt('message.extend.extInfo.closeButton.color')};
+    border-color: ${dt('message.extend.extInfo.closeButton.borderColor')};
+  }
+
+  .p-message.p-message-info .p-message-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('message.colorScheme.light.info.closeButton.hoverBackground')};
+    border-color: ${dt('message.extend.extInfo.closeButton.borderColor')};
+    color: ${dt('message.extend.extInfo.closeButton.color')};
+  }
+
+  .p-message-info .p-message-accent-line {
+    background: ${dt('message.extend.extInfo.color')};
+  }
+
+  /* Стили для message типа Success */
+  .p-message-success .p-message-icon {
+    color: ${dt('message.extend.extSuccess.color')};
+  }
+
+  .p-message-success .p-message-close-button {
+    color: ${dt('message.extend.extSuccess.closeButton.color')};
+    border-color: ${dt('message.extend.extSuccess.closeButton.borderColor')};
+  }
+
+  .p-message.p-message-success .p-message-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('message.colorScheme.light.success.closeButton.hoverBackground')};
+    border-color: ${dt('message.extend.extSuccess.closeButton.borderColor')};
+    color: ${dt('message.extend.extSuccess.closeButton.color')};
+  }
+
+  .p-message-success .p-message-accent-line {
+    background: ${dt('message.extend.extSuccess.color')};
+  }
+
+  /* Стили для message типа Warn */
+  .p-message-warn .p-message-icon {
+    color: ${dt('message.extend.extWarn.color')};
+  }
+
+  .p-message-warn .p-message-close-button {
+    color: ${dt('message.extend.extWarn.closeButton.color')};
+    border-color: ${dt('message.extend.extWarn.closeButton.borderColor')};
+  }
+
+  .p-message.p-message-warn .p-message-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('message.colorScheme.light.warn.closeButton.hoverBackground')};
+    border-color: ${dt('message.extend.extWarn.closeButton.borderColor')};
+    color: ${dt('message.extend.extWarn.closeButton.color')};
+  }
+
+  .p-message-warn .p-message-accent-line {
+    background: ${dt('message.extend.extWarn.color')};
+  }
+
+  /* Стили для message типа Error */
+  .p-message-error .p-message-icon {
+    color: ${dt('message.extend.extError.color')};
+  }
+
+  .p-message-error .p-message-close-button {
+    color: ${dt('message.extend.extError.closeButton.color')};
+    border-color: ${dt('message.extend.extError.closeButton.borderColor')};
+  }
+
+  .p-message.p-message-error .p-message-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('message.colorScheme.light.error.closeButton.hoverBackground')};
+    border-color: ${dt('message.extend.extError.closeButton.borderColor')};
+    color: ${dt('message.extend.extError.closeButton.color')};
+  }
+
+  .p-message-error .p-message-accent-line {
+    background: ${dt('message.extend.extError.color')};
+  }
+`;
+
+const inputotpCss = ({ dt }) => `
+/* Стили границы */
+.p-inputotp.p-component .p-inputtext {
+  border-width: ${dt('inputotp.extend.borderWidth')};
+  padding-inline: 0;
+}
+
+/* ─── Disabled ─── */
+.p-inputotp.p-component .p-inputtext:disabled {
+  background: ${dt('inputtext.root.disabledBackground')};
+  color: ${dt('inputtext.root.disabledColor')};
+}
+
+/* ─── Readonly ─── */
+.p-inputotp.p-component .p-inputtext:enabled:read-only {
+  background: ${dt('inputtext.extend.readonlyBackground')};
+  color: ${dt('inputtext.root.color')};
+}
+
+/* ─── Focus ─── */
+.p-inputotp.p-component .p-inputtext:enabled:focus {
+  box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')};
+}
+
+/* ─── Invalid + Focus ─── */
+.p-inputotp.p-component .p-inputtext.p-invalid:focus {
+  border-color: ${dt('inputtext.root.invalidBorderColor')};
+  box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')};
+}
+
+/* ─── Small ─── */
+.p-inputotp.p-component .p-inputtext.p-inputtext-sm {
+  padding-block: ${dt('inputtext.root.sm.paddingY')};
+}
+
+/* ─── Base ─── */
+.p-inputotp.p-component .p-inputtext:not(.p-inputtext-sm):not(.p-inputtext-lg):not(.p-inputtext-xlg) {
+  padding-block: ${dt('inputtext.root.paddingY')};
+}
+
+/* ─── Large ─── */
+.p-inputotp.p-component .p-inputtext.p-inputtext-lg {
+  padding-block: ${dt('inputtext.root.lg.paddingY')};
+}
+
+/* ─── Extra Large ─── */
+.p-inputotp.p-component.p-inputotp-xlg .p-inputtext {
+  font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+  padding-block: ${dt('inputtext.extend.extXlg.paddingY')};
+}
+`;
+
+const carouselCss = ({ dt }) => `
+  .p-carousel .p-carousel-prev-button.p-button-secondary,
+  .p-carousel .p-carousel-next-button.p-button-secondary {
+    background: ${dt('surface.200')};
+    color: ${dt('text.color')};
+    border-color: transparent;
+  }
+
+  .p-carousel .p-carousel-prev-button.p-button-secondary:not(:disabled):hover,
+  .p-carousel .p-carousel-next-button.p-button-secondary:not(:disabled):hover {
+    background: ${dt('surface.300')};
+    color: ${dt('text.color')};
+  }
+
+  .p-carousel .p-carousel-prev-button.p-button-secondary:not(:disabled):active,
+  .p-carousel .p-carousel-next-button.p-button-secondary:not(:disabled):active {
+    background: ${dt('surface.400')};
+    color: ${dt('text.color')};
+  }
+
+  .p-carousel .p-button-icon-only.p-button-rounded {
+    border-radius: ${dt('button.roundedBorderRadius')};
+  }
+
+  .p-carousel .p-carousel-item {
+    padding-inline: calc(${dt('carousel.content.gap')} / 2);
+  }
+
+  /* Убираем visibility:hidden для неактивных слайдов.
+     Отсечение за пределами viewport обеспечивается через overflow:hidden на контейнере карточки. */
+  .p-carousel .p-items-hidden .p-carousel-item {
+    visibility: visible;
+  }
+`;
+
+const galleriaCss = ({ dt }) => `
+  /* ─── Подпись к изображению ─── */
+  .p-galleria .p-galleria-caption {
+    background: ${dt('galleria.caption.background')};
+    padding: ${dt('spacing.2x')};
+  }
+
+  /* ─── Кнопки навигации в полноэкранном режиме ─── */
+  .p-galleria-mask.p-overlay-mask .p-galleria-nav-button {
+    top: 0%;
+  }
+
+  .p-galleria-mask.p-overlay-mask .p-galleria-items .p-galleria-nav-button {
+    top: 50%;
+  }
+`;
+
+const confirmDialogCss = ({ dt }) => `
+  /* Иконка в заголовке */
+  .p-confirmdialog .p-dialog-title {
+    display: flex;
+    align-items: center;
+    gap: ${dt('dialog.header.gap')};
+  }
+
+  .p-confirmdialog .p-dialog-title i {
+    width: ${dt('confirmdialog.icon.size')};
+    height: ${dt('confirmdialog.icon.size')};
+    font-size: ${dt('confirmdialog.icon.size')};
+    flex-shrink: 0;
+  }
+
+  /* Размеры */
+  .p-confirmdialog.p-dialog {
+    width: ${dt('overlay.width')};
+  }
+
+  .p-confirmdialog-sm.p-dialog {
+    width: ${dt('sizing.80x')};
+  }
+
+  .p-confirmdialog-lg.p-dialog {
+    width: ${dt('sizing.120x')};
+  }
+
+  .p-confirmdialog-xlg.p-dialog {
+    width: ${dt('sizing.128x')};
+  }
+
+  /* Цвета иконок по severity */
+  .p-confirmdialog[data-pc-severity="success"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-accept .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.success')};
+  }
+
+  .p-confirmdialog[data-pc-severity="info"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-info .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.info')};
+  }
+
+  .p-confirmdialog[data-pc-severity="warn"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-warn .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.warn')};
+  }
+
+  .p-confirmdialog[data-pc-severity="help"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-help .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.help')};
+  }
+
+  .p-confirmdialog[data-pc-severity="danger"] .p-dialog-title i,
+  .p-confirmdialog[data-pc-severity="error"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-error .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.danger')};
+  }
+`;
+
+const drawerCss = ({ dt }) => `
+
+/* Скругление углов */
+.p-drawer.p-component {
+  border-radius: ${dt('drawer.extend.borderRadius')};
+}
+
+/* Нижняя граница и внутренние отступы заголовка */
+.p-drawer.p-component .p-drawer-header {
+  border-bottom: 1px solid ${dt('drawer.extend.extHeader.borderColor')};
+  padding: ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.100')} ${dt('overlay.modal.padding.300')};
+}
+
+/* Типографика */
+.p-drawer.p-component .p-drawer-title {
+  font-weight: ${dt('drawer.title.fontWeight')};
+  font-size: ${dt('drawer.title.fontSize')};
+}
+
+/* Кнопки действий в заголовке - расстояние между элементами */
+.p-drawer.p-component .p-drawer-header-actions {
+  gap: ${dt('drawer.extend.extHeader.gap')};
+}
+
+/* Внутренние отступы контента и футера */
+.p-drawer.p-component .p-drawer-content {
+  padding: ${dt('overlay.modal.padding.300')};
+}
+
+.p-drawer.p-component .p-drawer-footer {
+  padding: 0 ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')};
+}
+
+/* Боковые drawer (слева/справа) - базовые размеры и отступы от краев экрана */
+.p-drawer.p-component.p-drawer-left,
+.p-drawer.p-component.p-drawer-right {
+  margin: ${dt('drawer.extend.padding')};
+  width: ${dt('drawer.root.width')};
+  height: calc(100% - ${dt('drawer.extend.padding')} * 2);
+}
+
+.p-drawer.p-component.p-drawer-left.p-drawer-sm,
+.p-drawer.p-component.p-drawer-right.p-drawer-sm {
+  width: ${dt('drawer.sm.width')};
+}
+
+.p-drawer.p-component.p-drawer-left.p-drawer-lg,
+.p-drawer.p-component.p-drawer-right.p-drawer-lg {
+  width: ${dt('drawer.lg.width')};
+}
+
+.p-drawer.p-component.p-drawer-left.p-drawer-xlg,
+.p-drawer.p-component.p-drawer-right.p-drawer-xlg {
+  width: ${dt('drawer.xlg.width')};
+}
+
+/* Горизонтальные drawer (сверху/снизу) - базовые размеры и отступы от краев экрана */
+.p-drawer.p-component.p-drawer-top,
+.p-drawer.p-component.p-drawer-bottom {
+  margin: ${dt('drawer.extend.padding')};
+  width: calc(100% - ${dt('drawer.extend.padding')} * 2);
+}
+
+/* Полноэкранный режим — drawer на весь экран, без отступов и без учёта размера */
+.p-drawer.p-component.p-drawer-full,
+.p-drawer.p-component.p-drawer-full.p-drawer-sm,
+.p-drawer.p-component.p-drawer-full.p-drawer-lg,
+.p-drawer.p-component.p-drawer-full.p-drawer-xlg {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+`;
+
+/**
+ * Кастомная CSS-стилизация для компонента p-datepicker.
+ * Подключается в map-tokens.ts: `import { datePickerCss } from './components/date-picker'`
+ */
+const datePickerCss = ({ dt }) => `
+
+.p-datepicker.p-datepicker {
+  display: inline-flex;
+  position: relative;
+  max-width: fit-content;
+}
+
+.p-datepicker-panel.p-datepicker-panel {
+  box-shadow: ${dt('datepicker.panel.shadow')};
+  overflow: hidden;
+}
+
+/* Скрываем нативный заголовок с кнопками выбора месяца/года;
+   кастомный заголовок (pTemplate="header") рендерится вне .p-datepicker-calendar */
+.p-datepicker-calendar .p-datepicker-header {
+  display: none;
+}
+
+.p-datepicker-custom-header.p-datepicker-header {
+  gap: ${dt('datepicker.title.gap')};
+  padding: ${dt('datepicker.header.padding')};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.p-datepicker-title {
+  display: flex;
+  align-items: center;
+  gap: ${dt('datepicker.title.gap')};
+  margin: 0 auto;
+}
+
+.p-datepicker-year-select {
+  min-width: ${dt('datepicker.extend.extSelectYear.minWidth')};
+}
+
+.p-datepicker-custom-header .p-button.p-button {
+  width: ${dt('datepicker.dropdown.width')};
+  height: ${dt('datepicker.dropdown.width')};
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p-datepicker-today.p-datepicker-today > .p-datepicker-day:not(.p-datepicker-day-selected) {
+  border: ${dt('form.borderWidth')} solid ${dt('datepicker.extend.extToday.borderColor')};
+}
+
+.p-datepicker-today.p-datepicker-today:hover > .p-datepicker-day:not(.p-datepicker-day-selected),
+.p-datepicker-day-preview.p-datepicker-day-preview:not(.p-datepicker-day-selected) {
+  background: ${dt('datepicker.extend.extToday.hoverBackground')};
+}
+
+.p-datepicker-day-preview.p-datepicker-day-preview:not(.p-datepicker-day-selected) {
+  color: ${dt('datepicker.date.color')};
+}
+
+.p-datepicker-day-view.p-datepicker-day-view {
+  width: stretch;
+  border-collapse: separate;
+  table-layout: auto;
+  margin: ${dt('datepicker.dayView.margin')};
+}
+
+/* ─── Weekday header text ─── */
+.p-datepicker-weekday {
+  font-family: ${dt('fonts.fontFamily.base')};
+  font-size: ${dt('fonts.fontSize.300')};
+  font-weight: ${dt('fonts.fontWeight.demibold')};
+}
+
+/* ─── Day cell text ─── */
+.p-datepicker-day {
+  font-family: ${dt('fonts.fontFamily.base')};
+  font-size: ${dt('fonts.fontSize.300')};
+  font-weight: ${dt('fonts.fontWeight.regular')};
+}
+
+/* ─── Скрываем нативный time picker (заменён кастомным в footer) ─── */
+.p-datepicker-time-picker.p-datepicker-time-picker:not(.p-datepicker-time-picker-custom) {
+  display: none;
+}
+
+.p-datepicker-buttonbar.p-datepicker-buttonbar .p-button.p-button {
+  background: transparent;
+  color: ${dt('button.colorScheme.light.text.primary.color')};
+  border: 0 none;
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-weight: ${dt('button.root.label.fontWeight')};
+  transition: background-color ${dt('button.root.transitionDuration')};
+}
+
+.p-datepicker-buttonbar.p-datepicker-buttonbar .p-button.p-button:not(:disabled):hover {
+  background: ${dt('button.colorScheme.light.text.primary.hoverBackground')};
+  color: ${dt('button.colorScheme.light.text.primary.color')};
+}
+
+.p-datepicker-buttonbar.p-datepicker-buttonbar .p-button.p-button:not(:disabled):active {
+  background: ${dt('button.colorScheme.light.text.primary.activeBackground')};
+  color: ${dt('button.colorScheme.light.text.primary.color')};
+}
+
+.p-datepicker-clear-icon {
+  display: flex;
+  align-items: center;
+  inset-inline-end: var(--p-form-field-padding-x);
+  color: ${dt('datepicker.inputIcon.color')};
+}
+
+.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-clear-icon {
+  inset-inline-end: calc((var(--p-form-field-padding-x) * 1.5) + var(--p-icon-size));
+}
+
+.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,
+.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon,
+.p-datepicker:has(.p-inputtext-lg) .p-datepicker-clear-icon .ti-x {
+  font-size: var(--p-form-field-lg-font-size);
+  width: var(--p-form-field-lg-font-size);
+  height: var(--p-form-field-lg-font-size);
+}
+
+/* ─── Clear icon: скрываем при пустом значении ─── */
+.p-datepicker.p-datepicker:not(.p-inputwrapper-filled) .p-datepicker-clear-icon,
+.p-datepicker.p-datepicker:has(.p-datepicker-input:placeholder-shown) .p-datepicker-clear-icon {
+  display: none;
+}
+
+/* ─── Custom time picker (InputNumber без кнопок) ─── */
+.p-datepicker-time-picker-custom.p-datepicker-time-picker-custom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${dt('datepicker.timePicker.gap')};
+  padding: ${dt('datepicker.timePicker.padding')};
+  border-top: ${dt('form.borderWidth')} solid ${dt('datepicker.panel.borderColor')};
+}
+
+.p-datepicker-time-picker-custom .p-datepicker-time-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${dt('datepicker.timePicker.buttonGap')};
+  width: auto;
+}
+
+.p-datepicker-time-picker-custom .p-datepicker-time-label {
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-size: ${dt('fonts.fontSize.100')};
+  font-weight: ${dt('fonts.fontWeight.regular')};
+  line-height: 1;
+  color: ${dt('datepicker.extend.extTimePicker.color')};
+}
+
+.p-datepicker-time-picker-custom .p-inputnumber,
+.p-datepicker-time-picker-custom .p-datepicker-time-input.p-datepicker-time-input {
+  width: ${dt('datepicker.extend.extTimePicker.minWidth')};
+  text-align: center;
+}
+
+.p-datepicker-time-picker-custom .p-datepicker-separator {
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-size: ${dt('fonts.fontSize.100')};
+  font-weight: ${dt('fonts.fontWeight.regular')};
+  line-height: 1;
+  color: ${dt('datepicker.extend.extTimePicker.color')};
+  margin-top: calc(${dt('fonts.fontSize.100')} + ${dt('datepicker.timePicker.buttonGap')});
+}
+
+:is(.p-datepicker-month-select, .p-datepicker-year-select) .p-select-dropdown {
+  color: ${dt('datepicker.inputIcon.color')};
+}
+
+:is(.p-datepicker-month-select, .p-datepicker-year-select) .p-select-label {
+  width: ${dt('sizing.24x')};
+}
+
+`;
+
+/**
+ * Кастомная CSS-стилизация для компонента p-accordion.
+ * Подключается в map-tokens.ts: `import { accordionCss } from './tokens/components/accordion'`
+ */
+const accordionCss = ({ dt }) => `
+  /* ─── Шрифт заголовка ─── */
+  .p-accordionheader {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+  }
+
+  /* ─── Размер иконки toggle ─── */
+  .p-accordionheader-toggle-icon,
+  .p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
+    width: ${dt('accordion.extend.extHeader.iconSize')};
+    height: ${dt('accordion.extend.extHeader.iconSize')};
+  }
+
+  /* ─── Лэйаут заголовка: иконка + текст ─── */
+  .p-accordionheader > div {
+    display: flex;
+    align-items: center;
+    gap: ${dt('accordion.extend.extHeader.gap')};
+  }
+
+  /* ─── Размер иконки в заголовке ─── */
+  .p-accordionheader > div > i {
+    font-size: ${dt('accordion.extend.extHeader.iconSize')};
+  }
+`;
+
+const badgeCss = ({ dt }) => `
+  /* ─── Badge extend: публикуем кастомные переменные в :root ─── */
+  :root {
+    --p-badge-extend-dot-success-background: ${dt('badge.extend.extDot.success.background')};
+    --p-badge-extend-dot-info-background:    ${dt('badge.extend.extDot.info.background')};
+    --p-badge-extend-dot-warn-background:    ${dt('badge.extend.extDot.warn.background')};
+    --p-badge-extend-dot-danger-background:  ${dt('badge.extend.extDot.danger.background')};
+    --p-badge-extend-dot-lg-size:            ${dt('badge.extend.extDot.lg.size')};
+    --p-badge-extend-dot-xlg-size:           ${dt('badge.extend.extDot.xlg.size')};
+    --p-badge-extend-padding:                ${dt('badge.extend.ext.padding')};
+  }
+
+  /* ─── Dot-вариант: бейдж без значения ─── */
+  .p-badge.p-badge-dot {
+    padding: var(--p-badge-extend-padding);
+  }
+
+  .p-badge.p-badge-dot.p-badge-success { background: var(--p-badge-extend-dot-success-background); }
+  .p-badge.p-badge-dot.p-badge-info    { background: var(--p-badge-extend-dot-info-background); }
+  .p-badge.p-badge-dot.p-badge-warn    { background: var(--p-badge-extend-dot-warn-background); }
+  .p-badge.p-badge-dot.p-badge-danger  { background: var(--p-badge-extend-dot-danger-background); }
+
+  .p-badge.p-badge-dot.p-badge-lg  { min-width: unset; width: var(--p-badge-extend-dot-lg-size);  height: var(--p-badge-extend-dot-lg-size); }
+  .p-badge.p-badge-dot.p-badge-xl  { min-width: unset; width: var(--p-badge-extend-dot-xlg-size); height: var(--p-badge-extend-dot-xlg-size); }
+`;
+
+/**
+ * Кастомная CSS-стилизация для компонента p-chip.
+ * Публикует extend-токены как CSS-переменные и применяет глобальные стили.
+ * Подключается в map-tokens.ts: `import { chipCss } from './components/chip'`
+ */
+const chipCss = ({ dt }) => `
+  /* ─── Chip extend: публикуем кастомные переменные в :root ─── */
+  :root {
+    --p-chip-extend-border-color: ${dt('chip.extend.borderColor')};
+    --p-chip-extend-border-width: ${dt('chip.extend.borderWidth')};
+  }
+
+  /* ─── Граница чипа ─── */
+  .p-chip {
+    border: var(--p-chip-extend-border-width) solid var(--p-chip-extend-border-color);
+  }
+
+  /* ─── Типографика лейбла ─── */
+  .p-chip-label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.400')};
+  }
+
+  /* ─── Сброс уменьшенного padding PrimeNG при наличии кнопки удаления ─── */
+  .p-chip:has(.p-chip-remove-icon) {
+    padding-inline-end: ${dt('chip.root.paddingX')};
+  }
+
+  /* ─── Focus ring иконки удаления ─── */
+  .p-chip-remove-icon:focus-visible {
+    outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('focusRing.extend.success')};
+  }
+
+  /* ─── Disabled состояние ─── */
+  .p-chip.p-disabled {
+    opacity: ${dt('opacity.500')};
+    pointer-events: none;
+  }
+
+  .p-chip.p-disabled .p-chip-remove-icon {
+    pointer-events: none;
+  }
+`;
+
+const dataTableCss = ({ dt }) => `
+  .p-datatable .p-datatable-thead > tr > th {
+    font-weight: ${dt('datatable.columnTitle.fontWeight')};
+  }
+
+  .p-datatable .p-datatable-tfoot > tr > td {
+    font-weight: ${dt('datatable.columnFooter.fontWeight')};
+  }
+
+  .p-datatable .p-datatable-sort-icon {
+    width: ${dt('datatable.sortIcon.size')};
+    height: ${dt('datatable.sortIcon.size')};
+  }
+
+  .p-datatable .p-datatable-loading-icon {
+    width: ${dt('datatable.loadingIcon.size')};
+    height: ${dt('datatable.loadingIcon.size')};
+  }
+
+  .p-datatable .p-datatable-row-toggle-button {
+    width: ${dt('datatable.rowToggleButton.size')};
+    height: ${dt('datatable.rowToggleButton.size')};
+  }
+
+  .p-datatable .p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
+    color: ${dt('text.hoverColor')};
+  }
+`;
+
+const dialogCss = ({ dt }) => `
+  .p-dialog .p-dialog-title {
+    font-family: ${dt('fonts.fontFamily.heading')};
+    font-size: ${dt('dialog.title.fontSize')};
+    font-weight: ${dt('dialog.title.fontWeight')};
+    line-height: ${dt('fonts.lineHeight.550')};
+  }
+
+  .p-dialog .p-dialog-content {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.500')};
+  }
+
+  .p-dialog .p-dialog-header {
+    border-bottom: ${dt('borderWidth.100')} solid ${dt('dialog.root.borderColor')};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .p-dialog .p-dialog-header-actions {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .p-dialog .p-dialog-header-actions .p-dialog-close-button.p-button-text:focus-visible,
+  .p-dialog .p-dialog-header-actions .p-dialog-close-button.p-button:focus-visible,
+  .p-dialog .p-button-text:focus-visible,
+  .p-dialog .p-button:focus-visible {
+    outline: 0 none;
+    outline-color: transparent;
+    box-shadow: none;
+  }
+
+  .p-dialog {
+    width: ${dt('overlay.width')};
+  }
+
+  .p-dialog.p-component.p-dialog-sm {
+    width: ${dt('sizing.80x')};
+  }
+
+  .p-dialog.p-component.p-dialog-lg {
+    width: ${dt('sizing.120x')};
+  }
+
+  .p-dialog.p-component.p-dialog-xlg {
+    width: ${dt('sizing.128x')};
+  }
+`;
+
+/**
+ * Кастомная CSS-стилизация для компонента p-divider.
+ * Публикует extend-токены как CSS-переменные и применяет глобальные стили.
+ * Подключается в map-tokens.ts: `import { dividerCss } from './components/divider'`
+ */
+const dividerCss = ({ dt }) => `
+  /* ─── Divider extend: публикуем кастомные переменные в :root ─── */
+  :root {
+    --p-divider-extend-content-gap:  ${dt('divider.extend.content.gap')};
+    --p-divider-extend-icon-size:    ${dt('divider.extend.iconSize')};
+  }
+
+  /* ─── Контент разделителя ─── */
+  .p-divider-content {
+    display: flex;
+    align-items: center;
+    gap: var(--p-divider-extend-content-gap);
+    font-family: ${dt('fonts.fontFamily.heading')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.demibold')};
+  }
+
+  .p-divider-content .ti {
+    font-size: var(--p-divider-extend-icon-size);
+  }
+
+  /* ─── Вертикальное выравнивание ─── */
+  .p-divider.p-divider-vertical.p-divider-top .p-divider-content {
+    align-items: flex-start;
+  }
+  .p-divider.p-divider-vertical.p-divider-bottom .p-divider-content {
+    align-items: flex-end;
+  }
+`;
+
+const inputnumberCss = ({ dt }) => `
+
+/* ─── Базовые стили ─── */
+.p-inputnumber .p-inputnumber-input {
+  font-family: ${dt('fonts.fontFamily.base')};
+}
+
+.p-inputnumber .p-inputnumber-input::placeholder {
+  font-family: ${dt('fonts.fontFamily.base')};
+}
+
+.p-floatlabel:has(.p-inputnumber) label {
+  font-family: ${dt('fonts.fontFamily.base')};
+}
+
+/* ─── Кнопки увеличения/уменьшения ─── */
+.p-inputnumber-button {
+  border-width: ${dt('inputnumber.extend.borderWidth')};
+}
+
+.p-inputnumber-horizontal .p-inputnumber-button {
+  min-height: ${dt('inputnumber.extend.extButton.height')};
+  border: ${dt('inputnumber.extend.borderWidth')} solid ${dt('inputnumber.button.borderColor')};
+}
+
+.p-inputnumber-horizontal .p-inputnumber-decrement-button {
+  border-right: none;
+}
+
+/* ─── Focus ─── */
+.p-inputnumber .p-inputnumber-input:enabled:focus {
+  box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')};
+}
+
+/* ─── Invalid + Focus ─── */
+.p-inputnumber.p-invalid .p-inputnumber-input:focus {
+  border-color: ${dt('inputtext.root.invalidBorderColor')};
+  box-shadow: 0 0 0 1px ${dt('inputtext.root.invalidBorderColor')};
+}
+
+/* ─── Disabled состояние ─── */
+.p-inputnumber-horizontal:has(.p-inputnumber-input:disabled) .p-inputnumber-button {
+  background: ${dt('inputtext.root.disabledBackground')};
+  color: ${dt('inputtext.root.disabledColor')};
+}
+
+/* ─── FloatLabel: кнопки на полную высоту поля ─── */
+.p-floatlabel:has(.p-inputnumber-horizontal) .p-inputnumber-button {
+  align-self: stretch;
+}
+
+/* ─── Extra Large ─── */
+.p-inputnumber.p-inputnumber-xlg .p-inputnumber-input {
+  font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+  padding: ${dt('inputtext.extend.extXlg.paddingY')} ${dt('inputtext.extend.extXlg.paddingX')};
+}
+`;
+
+const listboxCss = ({ dt }) => `
+  /* ─── 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: var(--p-listbox-extend-ext-option-gap);
+  }
+
+  /* Многострочный контент (иконка + 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-label-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--p-listbox-extend-ext-option-label-gap);
+  }
+
+  /* ─── Подпись элемента списка ─── */
+  .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-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')};
+  }
+`;
+
+const menuCss = ({ dt }) => `
+  .p-menu.p-component {
+    padding: ${dt('menu.extend.paddingY')} ${dt('menu.extend.paddingX')};
+  }
+
+  .p-menu .p-menu-item-content .p-menu-item-link .p-menu-item-label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.400')};
+  }
+
+  .p-menu .p-menu-item-content .menu-item-label {
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('menu.extend.extItem.caption.gap')};
+  }
+
+  .p-menu .p-menu-item-content .menu-item-caption {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    color: ${dt('menu.colorScheme.light.extend.extItem.caption.color')};
+  }
+
+  .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover,
+  .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-link,
+  .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-label,
+  .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {
+    background: ${dt('menu.colorScheme.light.item.focusBackground')};
+    color: ${dt('menu.colorScheme.light.item.focusColor')};
+  }
+
+  .p-menu .p-menu-item.p-menuitem-checked > .p-menu-item-content,
+  .p-menu .p-menu-item.p-focus > .p-menu-item-content {
+    background: ${dt('menu.extend.extItem.activeBackground')};
+    color: ${dt('menu.extend.extItem.activeColor')};
+  }
+
+  .p-menu .p-menu-item.p-menuitem-checked > .p-menu-item-content .p-menu-item-link,
+  .p-menu .p-menu-item.p-menuitem-checked > .p-menu-item-content .p-menu-item-label,
+  .p-menu .p-menu-item.p-focus > .p-menu-item-content .p-menu-item-link,
+  .p-menu .p-menu-item.p-focus > .p-menu-item-content .p-menu-item-label {
+    color: ${dt('menu.extend.extItem.activeColor')};
+  }
+
+  .p-menu .p-menu-item.p-menuitem-checked > .p-menu-item-content .p-menu-item-icon,
+  .p-menu .p-menu-item.p-focus > .p-menu-item-content .p-menu-item-icon {
+    color: ${dt('menu.colorScheme.light.extend.extItem.icon.activeColor')};
+  }
+
+  .p-menu .p-menu-item.p-menuitem-checked:not(.p-disabled) > .p-menu-item-content:hover {
+    background: ${dt('menu.colorScheme.light.item.focusBackground')};
+    color: ${dt('menu.colorScheme.light.item.focusColor')};
+  }
+
+  .p-menu .p-menu-item.p-menuitem-checked:not(.p-disabled) > .p-menu-item-content:hover .p-menu-item-icon {
+    color: ${dt('menu.colorScheme.light.item.focusColor')};
+  }
+
+  .p-menu .p-menu-submenu-label {
+    text-transform: uppercase;
+    font-size: ${dt('fonts.fontSize.200')};
+    font-family: ${dt('fonts.fontFamily.heading')};
+    line-height: ${dt('fonts.lineHeight.400')};
+  }
+`;
+
+const metergroupCss = ({ dt }) => `
+  .p-metergroup-label-text {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.200')};
+    color: ${dt('metergroup.extend.extLabel.color')};
+  }
+  .p-metergroup-label .p-metergroup-label-text + span {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.medium')};
+    color: ${dt('text.color')};
+  }
+  .p-metergroup-horizontal .p-metergroup-meter { min-height: 100%; }
+  .p-metergroup-vertical .p-metergroup-meter { min-width: 100%; }
+`;
+
+const paginatorCss = ({ dt }) => `
+  /* ─── Current page report ─── */
+  .p-paginator .p-paginator-current {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('paginator.currentPageReport.color')};
+  }
+
+  /* ─── Page number buttons ─── */
+  .p-paginator .p-paginator-page {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.250')};
+  }
+`;
+
+const panelmenuCss = ({ dt }) => `
+  .p-panelmenu {
+    gap: ${dt('panelmenu.extend.extPanel.gap')};
+  }
+
+  .p-panelmenu-panel {
+    padding: ${dt('panelmenu.extend.extPanel.gap')};
+  }
+
+  .p-panelmenu-header-content,
+  .p-panelmenu-item-content {
+    font-size: ${dt('fonts.fontSize.300')};
+  }
+
+  .p-panelmenu-submenu-icon {
+    font-size: ${dt('panelmenu.extend.iconSize')};
+  }
+
+  /* ─── Active & Focused States ─── */
+
+  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active > .p-panelmenu-item-content,
+  .p-panelmenu .p-panelmenu-item.p-focus > .p-panelmenu-item-content,
+  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content {
+    background: ${dt('panelmenu.extend.extItem.activeBackground')};
+    color: ${dt('panelmenu.extend.extItem.activeColor')};
+  }
+
+  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active > .p-panelmenu-item-content :is(.p-panelmenu-item-link, .p-panelmenu-item-label, .p-panelmenu-item-icon, .p-panelmenu-submenu-icon),
+  .p-panelmenu .p-panelmenu-item.p-focus > .p-panelmenu-item-content :is(.p-panelmenu-item-link, .p-panelmenu-item-label, .p-panelmenu-item-icon, .p-panelmenu-header-icon, .p-panelmenu-submenu-icon),
+  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content :is(.p-panelmenu-header-link, .p-panelmenu-header-label, .p-panelmenu-submenu-icon, .p-panelmenu-item-icon, .p-panelmenu-header-icon) {
+    color: ${dt('panelmenu.extend.extItem.activeColor')};
+  }
+
+  /* ─── Hover on Active States ─── */
+
+  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active:not(.p-disabled) > .p-panelmenu-item-content:hover,
+  .p-panelmenu .p-panelmenu-item.p-focus:not(.p-disabled) > .p-panelmenu-item-content:hover,
+  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content:hover {
+    background: ${dt('panelmenu.item.focusBackground')};
+    color: ${dt('panelmenu.item.focusColor')};
+  }
+
+  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-link, .p-panelmenu-item-label),
+  .p-panelmenu .p-panelmenu-item.p-focus:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-link, .p-panelmenu-item-label),
+  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content:hover :is(.p-panelmenu-header-link, .p-panelmenu-header-label) {
+    color: ${dt('panelmenu.item.focusColor')};
+  }
+
+  .p-panelmenu .p-panelmenu-item.p-panelmenu-item-active:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-icon, .p-panelmenu-submenu-icon),
+  .p-panelmenu .p-panelmenu-item.p-focus:not(.p-disabled) > .p-panelmenu-item-content:hover :is(.p-panelmenu-item-icon, .p-panelmenu-submenu-icon),
+  .p-panelmenu .p-panelmenu-header.p-focus .p-panelmenu-header-content:hover :is(.p-panelmenu-submenu-icon, .p-panelmenu-item-icon) {
+    color: ${dt('panelmenu.item.icon.focusColor')};
+  }
+
+  /* ─── Captions ─── */
+
+  .p-panelmenu .panelmenu-item-label {
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('panelmenu.extend.extItem.caption.gap')};
+  }
+
+  .p-panelmenu .panelmenu-item-caption {
+    font-size: ${dt('fonts.fontSize.200')};
+    line-height: ${dt('fonts.lineHeight.450')};
+    color: ${dt('panelmenu.extend.extItem.caption.color')};
+  }
+`;
+
+const progressbarCss = ({ dt }) => `
+  .p-progressbar-label {
+    font-family: ${dt('fonts.fontFamily.base')};
+  }
+`;
+
+const radiobuttonCss = ({ dt }) => `
+/* Focus ring с зеленым цветом для валидных состояний */
+.p-radiobutton:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box,
+.p-radiobutton-checked:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+  outline: none;
+  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.extend.success')};
+}
+
+/* Focus ring с красным цветом для состояний с ошибкой */
+.p-radiobutton.p-invalid .p-radiobutton-box,
+.p-radiobutton.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box,
+.p-radiobutton-checked.p-invalid .p-radiobutton-box,
+.p-radiobutton-checked.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.extend.invalid')};
+}
+`;
+
+/**
+ * Кастомная CSS-стилизация для компонента p-scrollpanel.
+ * Подключается в map-tokens.ts: `import { scrollPanelCss } from './tokens/components/scroll-panel'`
+ */
+const scrollPanelCss = ({ dt }) => `
+  /* ─── Полоса прокрутки ─── */
+  .p-scrollpanel-bar {
+    background: ${dt('scrollpanel.bar.background')};
+    border-radius: ${dt('scrollpanel.bar.borderRadius')};
+    transition-duration: ${dt('scrollpanel.root.transitionDuration')};
+  }
+
+  .p-scrollpanel-bar:focus-visible {
+    outline-width: ${dt('scrollpanel.bar.focusRing.width')};
+    outline-style: ${dt('scrollpanel.bar.focusRing.style')};
+    outline-color: ${dt('scrollpanel.bar.focusRing.color')};
+    outline-offset: ${dt('scrollpanel.bar.focusRing.offset')};
+    box-shadow: ${dt('scrollpanel.bar.focusRing.shadow')};
+  }
+`;
+
+/**
+ * Кастомная CSS-стилизация для компонента p-skeleton.
+ * Публикует extend-токены как CSS-переменные и применяет минимальную ширину.
+ * Подключается в map-tokens.ts: `import { skeletonCss } from './tokens/components/skeleton'`
+ */
+const skeletonCss = ({ dt }) => `
+  /* ─── Skeleton extend: публикуем кастомные переменные в :root ─── */
+  :root {
+    --p-skeleton-extend-min-width: ${dt('skeleton.extend.minWidth')};
+    --p-skeleton-extend-height:    ${dt('skeleton.extend.height')};
+  }
+
+  /* ─── Минимальная ширина ─── */
+  .p-skeleton {
+    min-width: var(--p-skeleton-extend-min-width);
+  }
+`;
+
+/**
+ * Кастомная CSS-стилизация для компонента p-slider.
+ * Подключается в map-tokens.ts: `import { sliderCss } from './components/slider'`
+ */
+const sliderCss = ({ dt }) => `
+  /* ─── Focus ring ползунка ─── */
+  .p-slider-handle:focus-visible {
+    outline: ${dt('slider.handle.focusRing.width')} ${dt('slider.handle.focusRing.style')} ${dt('focusRing.extend.success')};
+    outline-offset: ${dt('slider.handle.focusRing.offset')};
+    box-shadow: none;
+  }
+`;
+
+const stepperCss = ({ dt }) => `
+
+/* Caption - gap */
+.p-stepper .p-step-title {
+  display: flex;
+  flex-direction: column;
+  gap: ${dt('stepper.extend.extCaption.gap')};
+  line-height: ${dt('fonts.lineHeight.200')};
+  align-items: flex-start;
+  text-align: left;
+}
+
+/* Caption - secondary text */
+.p-stepper .p-step-title .caption-secondary {
+  display: flex;
+  justify-content: flex-start;
+  font-family: ${dt('fonts.fontFamily.base')};
+  font-size: ${dt('fonts.fontSize.200')};
+  font-weight: ${dt('fonts.fontWeight.regular')};
+  line-height: normal;
+  color: ${dt('text.mutedColor')};
+}
+
+/* Номер шага */
+.p-stepper .p-step-number {
+  font-family: ${dt('fonts.fontFamily.base')};
+  font-size: ${dt('fonts.fontSize.300')};
+  font-weight: ${dt('fonts.fontWeight.medium')};
+  line-height: ${dt('fonts.lineHeight.150')};
+}
+
+/* Border для номера шага */
+.p-stepper .p-step-number.p-step-number {
+  border-width: ${dt('stepper.extend.extStepNumber.borderWidth')};
+}
+
+/* Invalid состояние для step-number - только когда активен */
+.p-stepper .step-invalid.p-step-active .p-step-number {
+  background: ${dt('stepper.extend.extStepNumber.invalidBackground')};
+  color: ${dt('stepper.extend.extStepNumber.invalidColor')};
+  border-color: ${dt('stepper.extend.extStepNumber.invalidBorderColor')};
+}
+
+/* Step-number с иконкой */
+.p-stepper .p-step-number:has(i) {
+  background: ${dt('colorScheme.light.transparent')};
+  border-color: ${dt('colorScheme.light.transparent')};
+}
+
+/* Размер иконок в step-number */
+.p-stepper .p-step-number i {
+  font-size: ${dt('stepper.extend.extStepNumber.iconSize')};
+}
+
+/* Активное состояние - иконка в цвет фона */
+.p-stepper .p-step-active .p-step-number i {
+  color: ${dt('stepper.stepNumber.activeBackground')};
+}
+
+/* Прозрачный фон для панелей */
+.p-stepper .p-steppanel {
+  background: ${dt('colorScheme.light.transparent')};
+}
+`;
+
+const tabsCss = ({ dt }) => `
+
+/* Переопределение overflow для видимости активной линии */
+.p-tabs .p-tablist.p-tablist,
+.p-tabs .p-tablist-content.p-tablist-content,
+.p-tabs .p-tablist-viewport.p-tablist-viewport {
+  overflow: visible;
+}
+
+/* Типографика для label таба */
+.p-tabs .p-tablist .p-tab.p-tab {
+  display: flex;
+  align-items: center;
+  gap: ${dt('tabs.tab.gap')};
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-size: ${dt('fonts.fontSize.300')};
+  font-weight: ${dt('fonts.fontWeight.demibold')};
+}
+
+/* Стили для tablist с правильной границей */
+.p-tabs .p-tablist {
+  border-bottom: 0.15rem solid ${dt('tabs.tablist.borderColor')};
+}
+`;
+
+const tieredmenuCss = ({ dt }) => `
+  .p-tieredmenu {
+    width: min-content;
+  }
+
+  .p-tieredmenu-item-content {
+    font-size: ${dt('fonts.fontSize.300')};
+  }
+
+  .p-tieredmenu-submenu-icon {
+    font-size: ${dt('tieredmenu.extend.iconSize')};
+  }
+
+  /* ─── Selected (checked) item ─── */
+
+  .p-tieredmenu .p-tieredmenu-item.p-tieredmenu-item-checked > .p-tieredmenu-item-content {
+    background: ${dt('tieredmenu.item.activeBackground')};
+    color: ${dt('tieredmenu.item.activeColor')};
+  }
+
+  .p-tieredmenu .p-tieredmenu-item.p-tieredmenu-item-checked > .p-tieredmenu-item-content :is(.p-tieredmenu-item-link, .p-tieredmenu-item-label, .p-tieredmenu-item-icon, .p-tieredmenu-submenu-icon) {
+    color: ${dt('tieredmenu.item.activeColor')};
+  }
+
+  /* ─── Hover on selected ─── */
+
+  .p-tieredmenu .p-tieredmenu-item.p-tieredmenu-item-checked:not(.p-disabled) > .p-tieredmenu-item-content:hover {
+    background: ${dt('tieredmenu.item.focusBackground')};
+    color: ${dt('tieredmenu.item.focusColor')};
+  }
+
+  .p-tieredmenu .p-tieredmenu-item.p-tieredmenu-item-checked:not(.p-disabled) > .p-tieredmenu-item-content:hover :is(.p-tieredmenu-item-link, .p-tieredmenu-item-label) {
+    color: ${dt('tieredmenu.item.focusColor')};
+  }
+
+  .p-tieredmenu .p-tieredmenu-item.p-tieredmenu-item-checked:not(.p-disabled) > .p-tieredmenu-item-content:hover :is(.p-tieredmenu-item-icon, .p-tieredmenu-submenu-icon) {
+    color: ${dt('tieredmenu.item.icon.focusColor')};
+  }
+
+  /* ─── Captions ─── */
+
+  .p-tieredmenu .p-tieredmenu-item-caption {
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('tieredmenu.extend.extItem.caption.gap')};
+  }
+
+  .p-tieredmenu .p-tieredmenu-item-caption-text {
+    font-size: ${dt('fonts.fontSize.200')};
+    color: ${dt('tieredmenu.extend.extItem.caption.color')};
+  }
+`;
+
+const timelineCss = ({ dt }) => `
+
+/* ─── Типографика ─── */
+.p-timeline {
+  font-family: ${dt('fonts.fontFamily.base')};
+  font-size: ${dt('fonts.fontSize.300')};
+  line-height: ${dt('fonts.lineHeight.500')};
+  color: ${dt('text.color')};
+}
+
+/* ─── Маркер ─── */
+.p-timeline-event-marker {
+  border-width: ${dt('timeline.eventMarker.borderWidth')};
+  background: ${dt('timeline.eventMarker.background')};
+  border-color: ${dt('timeline.eventMarker.borderColor')};
+}
+
+.p-timeline-event-marker::before {
+  background: ${dt('timeline.eventMarker.content.background')};
+}
+
+/* ─── Коннектор ─── */
+.p-timeline-event-connector {
+  background: ${dt('timeline.eventConnector.color')};
+}
+
+/* ─── Стиль линии ─── */
+timeline[data-line="dashed"] .p-timeline-event-connector {
+  background: none;
+  border-left: ${dt('timeline.eventConnector.size')} dashed ${dt('timeline.eventConnector.color')};
+}
+
+timeline[data-line="dotted"] .p-timeline-event-connector {
+  background: none;
+  border-left: ${dt('timeline.eventConnector.size')} dotted ${dt('timeline.eventConnector.color')};
+}
+
+timeline[data-line="none"] .p-timeline-event-connector {
+  background: none;
+}
+
+/* Горизонтальная ориентация линии */
+timeline[data-line="dashed"] .p-timeline-horizontal .p-timeline-event-connector {
+  border-left: none;
+  border-top: ${dt('timeline.eventConnector.size')} dashed ${dt('timeline.eventConnector.color')};
+}
+
+timeline[data-line="dotted"] .p-timeline-horizontal .p-timeline-event-connector {
+  border-left: none;
+  border-top: ${dt('timeline.eventConnector.size')} dotted ${dt('timeline.eventConnector.color')};
+}
+
+/* ─── Маркер-иконка (без бордера и фона) ─── */
+.p-timeline-event-marker:has(i) {
+  border: none;
+  background: none;
+}
+
+.p-timeline-event-marker:has(i)::before {
+  display: none;
+}
+
+/* ─── Кастомный цвет маркера ─── */
+timeline[style*="--timeline-marker-color"] .p-timeline-event-marker {
+  border-color: var(--timeline-marker-color);
+}
+
+timeline[style*="--timeline-marker-color"] .p-timeline-event-marker i {
+  color: var(--timeline-marker-color);
+}
+`;
+
+const toastCss = ({ dt }) => `
+  /* Основной контейнер toast-сообщения */
+  .p-toast-message {
+    width: ${dt('toast.root.width')};
+    overflow: hidden;
+    border-width: ${dt('toast.root.borderWidth')};
+    border-radius: ${dt('toast.root.borderRadius')};
+    box-shadow: ${dt('toast.colorScheme.light.info.shadow')};
+    position: relative;
+  }
+
+  /* border-radius для контента toast-сообщения */
+  .p-toast .p-toast-message .p-toast-message-content {
+    border-radius: ${dt('toast.root.borderRadius')};
+  }
+
+  /* Текстовый блок toast */
+  .p-toast-message-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('toast.text.gap')};
+  }
+
+  /* Заголовок toast */
+  .p-toast-summary {
+    font-family: ${dt('fonts.fontFamily.base')};
+    line-height: ${dt('fonts.lineHeight.250')};
+  }
+
+  /* Детальное описание toast */
+  .p-toast-message .p-toast-detail {
+    font-family: ${dt('fonts.fontFamily.base')};
+    line-height: ${dt('fonts.lineHeight.250')};
+  }
+
+  /* Кнопка закрытия toast-сообщения */
+  .p-toast-message .p-toast-message-content .p-toast-close-button {
+    margin: 0;
+    padding: 0;
+    right: 0;
+  }
+
+  /* Общие стили border для кнопки закрытия всех типов toast */
+  .p-toast-message-info .p-toast-close-button,
+  .p-toast-message-success .p-toast-close-button,
+  .p-toast-message-warn .p-toast-close-button,
+  .p-toast-message-error .p-toast-close-button {
+    border: ${dt('toast.extend.extCloseButton.width')} solid;
+  }
+
+  /* Общие стили для акцентной линии всех типов toast */
+  .p-toast-message-info .p-toast-accent-line,
+  .p-toast-message-success .p-toast-accent-line,
+  .p-toast-message-warn .p-toast-accent-line,
+  .p-toast-message-error .p-toast-accent-line {
+    width: ${dt('toast.extend.extAccentLine.width')};
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: ${dt('toast.root.borderRadius')} 0 0 ${dt('toast.root.borderRadius')};
+  }
+
+  /* Стили для toast типа Info */
+  .p-toast-message-info .p-toast-message-icon {
+    color: ${dt('toast.extend.extInfo.color')};
+  }
+
+  .p-toast-message-info .p-toast-close-button {
+    color: ${dt('toast.extend.extInfo.closeButton.color')};
+    border-color: ${dt('toast.extend.extInfo.closeButton.borderColor')};
+  }
+
+  .p-toast-message.p-toast-message-info .p-toast-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('toast.colorScheme.light.info.closeButton.hoverBackground')};
+    border-color: ${dt('toast.extend.extInfo.closeButton.borderColor')};
+    color: ${dt('toast.extend.extInfo.closeButton.color')};
+  }
+
+  .p-toast-message-info .p-toast-accent-line {
+    background: ${dt('toast.extend.extInfo.color')};
+  }
+
+  /* Стили для toast типа Success */
+  .p-toast-message-success .p-toast-message-icon {
+    color: ${dt('toast.extend.extSuccess.color')};
+  }
+
+  .p-toast-message-success .p-toast-close-button {
+    color: ${dt('toast.extend.extSuccess.closeButton.color')};
+    border-color: ${dt('toast.extend.extSuccess.closeButton.borderColor')};
+  }
+
+  .p-toast-message.p-toast-message-success .p-toast-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('toast.colorScheme.light.success.closeButton.hoverBackground')};
+    border-color: ${dt('toast.extend.extSuccess.closeButton.borderColor')};
+    color: ${dt('toast.extend.extSuccess.closeButton.color')};
+  }
+
+  .p-toast-message-success .p-toast-accent-line {
+    background: ${dt('toast.extend.extSuccess.color')};
+  }
+
+  /* Стили для toast типа Warn */
+  .p-toast-message-warn .p-toast-message-icon {
+    color: ${dt('toast.extend.extWarn.color')};
+  }
+
+  .p-toast-message-warn .p-toast-close-button {
+    color: ${dt('toast.extend.extWarn.closeButton.color')};
+    border-color: ${dt('toast.extend.extWarn.closeButton.borderColor')};
+  }
+
+  .p-toast-message.p-toast-message-warn .p-toast-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('toast.colorScheme.light.warn.closeButton.hoverBackground')};
+    border-color: ${dt('toast.extend.extWarn.closeButton.borderColor')};
+    color: ${dt('toast.extend.extWarn.closeButton.color')};
+  }
+
+  .p-toast-message-warn .p-toast-accent-line {
+    background: ${dt('toast.extend.extWarn.color')};
+  }
+
+  /* Стили для toast типа Error */
+  .p-toast-message-error .p-toast-message-icon {
+    color: ${dt('toast.extend.extError.color')};
+  }
+
+  .p-toast-message-error .p-toast-close-button {
+    color: ${dt('toast.extend.extError.closeButton.color')};
+    border-color: ${dt('toast.extend.extError.closeButton.borderColor')};
+  }
+
+  .p-toast-message.p-toast-message-error .p-toast-close-button.p-button-text:not(:disabled):hover {
+    background: ${dt('toast.colorScheme.light.error.closeButton.hoverBackground')};
+    border-color: ${dt('toast.extend.extError.closeButton.borderColor')};
+    color: ${dt('toast.extend.extError.closeButton.color')};
+  }
+
+  .p-toast-message-error .p-toast-accent-line {
+    background: ${dt('toast.extend.extError.color')};
+  }
+`;
+
+const togglebuttonCss = ({ dt }) => `
+
+/* ─── Типографика ─── */
+.p-togglebutton.p-component {
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-weight: ${dt('fonts.fontWeight.demibold')};
+  line-height: ${dt('fonts.lineHeight.500')};
+}
+
+/* ─── Hover unchecked ─── */
+.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
+  border-color: ${dt('togglebutton.extend.hoverBorderColor')};
+}
+
+/* ─── Hover checked ─── */
+.p-togglebutton.p-togglebutton-checked:hover {
+  background: ${dt('togglebutton.extend.checkedHoverBackground')};
+  border-color: ${dt('togglebutton.extend.checkedHoverBorderColor')};
+  color: ${dt('togglebutton.extend.checkedHoverColor')};
+}
+
+/* ─── Small ─── */
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm {
+  line-height: ${dt('fonts.lineHeight.300')};
+}
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-label {
+  line-height: ${dt('fonts.lineHeight.250')};
+}
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-icon {
+  font-size: ${dt('togglebutton.extend.iconSize.sm')};
+}
+
+/* ─── Base (default) ─── */
+.p-togglebutton.p-component:not(.p-togglebutton-sm):not(.p-togglebutton-lg):not(.p-togglebutton-xlarge) .p-togglebutton-icon {
+  font-size: ${dt('togglebutton.extend.iconSize.md')};
+}
+
+/* ─── Large ─── */
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg {
+  line-height: ${dt('fonts.lineHeight.550')};
+  gap: ${dt('togglebutton.root.gap')};
+}
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg .p-togglebutton-content {
+  gap: ${dt('togglebutton.extend.ext.gap')};
+}
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg .p-togglebutton-icon {
+  font-size: ${dt('togglebutton.extend.iconSize.lg')};
+}
+
+/* ─── Extra Large ─── */
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-xlarge {
+  padding: ${dt('togglebutton.extend.extXlg.padding')};
+  font-size: ${dt('fonts.fontSize.500')};
+  line-height: ${dt('fonts.lineHeight.550')};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${dt('togglebutton.root.gap')};
+}
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-xlarge .p-togglebutton-content {
+  gap: ${dt('togglebutton.extend.ext.gap')};
+}
+.p-togglebutton.p-togglebutton.p-component.p-togglebutton-xlarge .p-togglebutton-icon {
+  font-size: ${dt('togglebutton.extend.iconSize.lg')};
+}
+
+/* ─── Icon-only base ─── */
+.p-togglebutton.p-togglebutton-icon-only {
+  padding: 0;
+  width: ${dt('togglebutton.extend.iconOnlyWidth')};
+  height: ${dt('togglebutton.extend.iconOnlyWidth')};
+  border-radius: ${dt('togglebutton.root.borderRadius')};
+}
+.p-togglebutton.p-togglebutton-icon-only .p-togglebutton-label {
+  display: none;
+}
+
+/* ─── Icon-only sm ─── */
+.p-togglebutton.p-togglebutton-sm.p-togglebutton-icon-only {
+  width: ${dt('togglebutton.extend.extSm.iconOnlyWidth')};
+  height: ${dt('togglebutton.extend.extSm.iconOnlyWidth')};
+}
+
+/* ─── Icon-only lg ─── */
+.p-togglebutton.p-togglebutton-lg.p-togglebutton-icon-only {
+  width: ${dt('togglebutton.extend.extLg.iconOnlyWidth')};
+  height: ${dt('togglebutton.extend.extLg.iconOnlyWidth')};
+}
+
+/* ─── Icon-only xlarge ─── */
+.p-togglebutton.p-togglebutton-xlarge.p-togglebutton-icon-only {
+  width: ${dt('togglebutton.extend.extXlg.iconOnlyWidth')};
+  height: ${dt('togglebutton.extend.extXlg.iconOnlyWidth')};
+}
+`;
+
+const toggleswitchCss = ({ dt }) => `
+  /* Focus ring для валидных состояний */
+  .p-toggleswitch:not(.p-disabled):not(.p-invalid):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
+    box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('focusRing.extend.success')};
+  }
+
+  /* Focus ring для состояния ошибки */
+  .p-toggleswitch.p-invalid:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
+    box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.extend.invalid')};
+  }
+`;
+
+const autocompleteCss = ({ dt }) => `
+  /* ─── Base ─── */
+  .p-autocomplete {
+    width: 100%;
+  }
+
+  .p-autocomplete:has(input:disabled) .p-autocomplete-input,
+  .p-autocomplete:has(input:disabled) .p-autocomplete-input-multiple,
+  .p-autocomplete:has(input:disabled) .p-autocomplete-dropdown {
+    border-color: ${dt('form.borderColor')};
+  }
+
+  /* ─── Инпут и границы ─── */
+  .p-autocomplete .p-autocomplete-input {
+    width: 100%;
+    padding: ${dt('autocomplete.root.paddingY')} ${dt('autocomplete.root.paddingX')};
+    line-height: ${dt('fonts.lineHeight.250')};
+  }
+
+  /* Монолитный вид: убираем стыкующиеся границы инпута и dropdown-кнопки.
+     border-inline-end-width не перезаписывается hover/focus, т.к. те меняют только border-color. */
+  .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+    border-inline-end-width: 0;
+  }
+
+  /* Dropdown: дублируем border-inline-start: 0 с повышенной специфичностью,
+     чтобы наш селектор гарантированно побеждал базовое правило PrimeNG. */
+  .p-autocomplete .p-autocomplete-dropdown {
+    border-inline-start: 0 none;
+  }
+
+  /* ─── States: Hover ─── */
+  .p-autocomplete.p-component:not(:has(input:disabled)):hover .p-inputtext.p-autocomplete-input,
+  .p-autocomplete.p-component:not(:has(input:disabled)):hover .p-autocomplete-dropdown,
+  .p-autocomplete.p-component:not(:has(input:disabled)):has(.p-autocomplete-input:hover) .p-autocomplete-dropdown {
+    border-color: ${dt('form.hoverBorderSecondaryColor')};
+  }
+
+  /* ─── States: Focus ─── */
+  .p-autocomplete:has(.p-autocomplete-input:focus) .p-autocomplete-dropdown {
+    border-color: ${dt('form.focusBorderSecondaryColor')};
+  }
+
+  /* ─── Иконки ─── */
+  .p-autocomplete-clear-icon,
+  .p-autocomplete-dropdown .p-icon {
+    color: var(--p-form-field-icon-color);
+  }
+
+  .p-autocomplete.p-component:has(.p-autocomplete-dropdown) .p-autocomplete-clear-icon {
+    inset-inline-end: ${dt('form.width.300')};
+  }
+
+  /* ─── Multiple: чипсы ─── */
+  .p-autocomplete .p-autocomplete-input-multiple {
+    line-height: ${dt('fonts.lineHeight.250')};
+    padding: ${dt('autocomplete.root.paddingY')} ${dt('autocomplete.root.paddingX')};
+  }
+
+  .p-autocomplete .p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
+    padding: calc(${dt('autocomplete.root.paddingY')} - 5px);
+  }
+
+  .p-autocomplete .p-autocomplete-input-chip {
+    padding-block-start: 0;
+    padding-block-end: 0;
+  }
+
+  .p-autocomplete .p-autocomplete-input-multiple [data-pc-section="input"] {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: transparent;
+    border: 0 none;
+    outline: 0 none;
+    padding: 0;
+    margin: 0;
+    line-height: inherit;
+  }
+
+  .p-autocomplete .p-autocomplete-chip,
+  .p-autocomplete-option {
+    gap: ${dt('autocomplete.extend.extOption.gap')};
+  }
+
+  .p-autocomplete-option-group {
+    gap: ${dt('autocomplete.extend.extOptionGroup.gap')};
+  }
+
+  .p-chip.p-chip:has(.p-chip-remove-icon) {
+    padding-inline-end: ${dt('chip.root.paddingX')};
+  }
+
+  /* ─── Sizes ─────────────────────────────────────────────────────────────────
+     Повторяем padding-block / padding-inline из PrimeNG inputtext-size классов,
+     но с повышенной специфичностью (.p-autocomplete.p-component + класс размера),
+     чтобы перебить base-padding из .p-autocomplete .p-autocomplete-input выше.
+  ──────────────────────────────────────────────────────────────────────────── */
+
+  /* sm */
+  .p-autocomplete.p-component .p-inputtext-sm.p-autocomplete-input,
+  .p-autocomplete.p-component .p-inputtext-sm.p-autocomplete-input-multiple {
+    font-size: ${dt('inputtext.root.sm.fontSize')};
+    padding-block: ${dt('inputtext.root.sm.paddingY')};
+    padding-inline: ${dt('inputtext.root.sm.paddingX')};
+  }
+
+  .p-autocomplete.p-component .p-inputtext-sm.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
+    padding-block: calc(${dt('inputtext.root.sm.paddingY')} - 4.75px);
+    padding-inline: calc(${dt('inputtext.root.sm.paddingY')} - 4.75px);
+  }
+
+  /* lg */
+  .p-autocomplete.p-component .p-inputtext-lg.p-autocomplete-input,
+  .p-autocomplete.p-component .p-inputtext-lg.p-autocomplete-input-multiple {
+    font-size: ${dt('inputtext.root.lg.fontSize')};
+    padding-block: ${dt('inputtext.root.lg.paddingY')};
+    padding-inline: ${dt('inputtext.root.lg.paddingX')};
+  }
+
+  .p-autocomplete.p-component .p-inputtext-lg.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
+    padding-block: calc(${dt('inputtext.root.lg.paddingY')} - 4.75px);
+    padding-inline: calc(${dt('inputtext.root.lg.paddingY')} - 4.75px);
+  }
+
+  /* xlg */
+  .p-autocomplete.p-component .p-inputtext-xlg.p-autocomplete-input,
+  .p-autocomplete.p-component .p-inputtext-xlg.p-autocomplete-input-multiple {
+    font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+    padding-block: ${dt('inputtext.extend.extXlg.paddingY')};
+    padding-inline: ${dt('inputtext.extend.extXlg.paddingX')};
+  }
+
+  .p-autocomplete.p-component .p-inputtext-xlg.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
+    padding-block: calc(${dt('inputtext.extend.extXlg.paddingY')} - 4.75px);
+    padding-inline: calc(${dt('inputtext.extend.extXlg.paddingY')} - 4.75px);
+  }
+
+  .p-autocomplete.p-component .p-inputtext-xlg .p-autocomplete-chip {
+    padding-top: ${dt('spacing.2x')};
+    padding-bottom: ${dt('spacing.2x')};
+    font-size: ${dt('fonts.fontSize.300')};
+  }
+`;
+
+const popoverCss = ({ dt }) => `
+  .p-popover.p-component::before {
+    border-width: 0.73rem;
+    margin-left: -0.86rem;
+  }
+
+  .p-popover.p-component::after {
+    margin-left: calc(-1 * ${dt('popover.extend.arrow.width')});
+  }
+`;
+
+const selectbuttonCss = ({ dt }) => `
+.p-selectbutton.p-component {
+  background: ${dt('selectbutton.colorScheme.light.extend.background')};
+  padding: ${dt('selectbutton.extend.paddingY')} ${dt('selectbutton.extend.paddingX')};
+  gap: ${dt('selectbutton.extend.gap')};
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-weight: ${dt('fonts.fontWeight.demibold')};
+}
+
+.p-selectbutton.p-component .p-togglebutton.p-component {
+  font-family: ${dt('fonts.fontFamily.heading')};
+  font-weight: ${dt('fonts.fontWeight.demibold')};
+  line-height: ${dt('fonts.lineHeight.500')};
+  height: ${dt('controls.iconOnly.700')};
+  border-radius: ${dt('selectbutton.extend.ext.borderRadius')};
+}
+
+.p-selectbutton.p-component .p-togglebutton .p-togglebutton-label,
+.p-selectbutton.p-component .p-togglebutton .p-togglebutton-content > span {
+  line-height: ${dt('fonts.lineHeight.400')};
+}
+
+.p-selectbutton.p-component .p-togglebutton.p-togglebutton-checked.p-component,
+.p-selectbutton.p-component .p-togglebutton.p-togglebutton-checked.p-component:hover {
+  background: ${dt('selectbutton.extend.checkedBackground')};
+  border-radius: ${dt('selectbutton.extend.ext.borderRadius')};
+  border-color: ${dt('selectbutton.extend.checkedBorderColor')};
+  color: ${dt('selectbutton.extend.checkedColor')};
+}
+
+.p-selectbutton.p-component .p-togglebutton.p-component:not(:disabled):not(.p-togglebutton-checked):hover {
+  border-radius: ${dt('selectbutton.extend.ext.borderRadius')};
+  border-color: ${dt('togglebutton.extend.hoverBorderColor')};
+}
+
+/* Size: small */
+.p-selectbutton.p-selectbutton-small.p-component .p-togglebutton.p-component {
+  line-height: ${dt('fonts.lineHeight.300')};
+  height: ${dt('controls.iconOnly.600')};
+}
+
+.p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-label,
+.p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-content > span {
+  line-height: ${dt('fonts.lineHeight.250')};
+}
+
+.p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-icon,
+.p-selectbutton.p-selectbutton-small.p-component .p-togglebutton i {
+  font-size: ${dt('selectbutton.extend.iconSize.sm')};
+}
+
+/* Size: base */
+.p-selectbutton.p-component:not(.p-selectbutton-small):not(.p-selectbutton-large):not(.p-selectbutton-xlarge) .p-togglebutton .p-togglebutton-icon,
+.p-selectbutton.p-component:not(.p-selectbutton-small):not(.p-selectbutton-large):not(.p-selectbutton-xlarge) .p-togglebutton i {
+  font-size: ${dt('selectbutton.extend.iconSize.md')};
+}
+
+/* Size: large */
+.p-selectbutton.p-selectbutton-large.p-component .p-togglebutton.p-component {
+  line-height: ${dt('fonts.lineHeight.550')};
+  height: ${dt('controls.iconOnly.850')};
+}
+
+.p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-label,
+.p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-content > span {
+  line-height: ${dt('fonts.lineHeight.550')};
+}
+
+.p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-icon,
+.p-selectbutton.p-selectbutton-large.p-component .p-togglebutton i {
+  font-size: ${dt('selectbutton.extend.iconSize.lg')};
+}
+
+/* Size: xlarge */
+.p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton.p-component {
+  font-size: ${dt('fonts.fontSize.600')};
+  line-height: ${dt('fonts.lineHeight.550')};
+  height: ${dt('controls.iconOnly.900')};
+}
+
+.p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-label,
+.p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-content > span {
+  line-height: ${dt('fonts.lineHeight.700')};
+}
+
+.p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-icon,
+.p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton i {
+  font-size: ${dt('selectbutton.extend.iconSize.xlg')};
+}
+`;
+
+const presetTokens = {
+    primitive: tokens.primitive,
+    semantic: tokens.semantic,
+    components: {
+        ...tokens.components,
+        avatar: {
+            ...tokens.components.avatar,
+            css: avatarCss
+        },
+        card: {
+            ...tokens.components.card,
+            css: cardCss
+        },
+        checkbox: {
+            ...tokens.components.checkbox,
+            css: checkboxCss
+        },
+        button: {
+            ...tokens.components.button,
+            css: buttonCss
+        },
+        message: {
+            ...tokens.components.message,
+            css: messageCss
+        },
+        progressspinner: {
+            ...tokens.components.progressspinner,
+            css: progressspinnerCss
+        },
+        inputotp: {
+            ...tokens.components.inputotp,
+            css: inputotpCss
+        },
+        inputtext: {
+            ...tokens.components.inputtext,
+            css: inputtextCss
+        },
+        inputmask: {
+            css: inputmaskCss
+        },
+        inputgroup: {
+            ...tokens.components.inputgroup,
+            css: inputgroupCss
+        },
+        tag: {
+            ...tokens.components.tag,
+            css: tagCss
+        },
+        textarea: {
+            ...tokens.components.textarea,
+            css: textareaCss
+        },
+        tooltip: {
+            ...tokens.components.tooltip,
+            css: tooltipCss
+        },
+        megamenu: {
+            ...tokens.components.megamenu,
+            css: megamenuCss
+        },
+        select: {
+            ...tokens.components.select,
+            css: selectCss
+        },
+        passwordCss: {
+            ...tokens.components.password,
+            css: passwordCss
+        },
+        carousel: {
+            ...tokens.components.carousel,
+            css: carouselCss
+        },
+        galleria: {
+            ...tokens.components.galleria,
+            css: galleriaCss
+        },
+        confirmdialog: {
+            ...tokens.components.confirmdialog,
+            css: confirmDialogCss
+        },
+        drawer: {
+            ...tokens.components.drawer,
+            css: drawerCss
+        },
+        datepicker: {
+            ...tokens.components.datepicker,
+            css: datePickerCss
+        },
+        accordion: {
+            ...tokens.components.accordion,
+            css: accordionCss
+        },
+        badge: {
+            ...tokens.components.badge,
+            css: badgeCss
+        },
+        chip: {
+            ...tokens.components.chip,
+            css: chipCss
+        },
+        datatable: {
+            ...tokens.components.datatable,
+            css: dataTableCss
+        },
+        dialog: {
+            ...tokens.components.dialog,
+            css: dialogCss
+        },
+        divider: {
+            ...tokens.components.divider,
+            css: dividerCss
+        },
+        inputnumber: {
+            ...tokens.components.inputnumber,
+            css: inputnumberCss
+        },
+        listbox: {
+            ...tokens.components.listbox,
+            css: listboxCss
+        },
+        menu: {
+            ...tokens.components.menu,
+            css: menuCss
+        },
+        metergroup: {
+            ...tokens.components.metergroup,
+            css: metergroupCss
+        },
+        paginator: {
+            ...tokens.components.paginator,
+            css: paginatorCss
+        },
+        panelmenu: {
+            ...tokens.components.panelmenu,
+            css: panelmenuCss
+        },
+        progressbar: {
+            ...tokens.components.progressbar,
+            css: progressbarCss
+        },
+        radiobutton: {
+            ...tokens.components.radiobutton,
+            css: radiobuttonCss
+        },
+        scrollpanel: {
+            ...tokens.components.scrollpanel,
+            css: scrollPanelCss
+        },
+        skeleton: {
+            ...tokens.components.skeleton,
+            css: skeletonCss
+        },
+        slider: {
+            ...tokens.components.slider,
+            css: sliderCss
+        },
+        stepper: {
+            ...tokens.components.stepper,
+            css: stepperCss
+        },
+        tabs: {
+            ...tokens.components.tabs,
+            css: tabsCss
+        },
+        tieredmenu: {
+            ...tokens.components.tieredmenu,
+            css: tieredmenuCss
+        },
+        timeline: {
+            ...tokens.components.timeline,
+            css: timelineCss
+        },
+        toast: {
+            ...tokens.components.toast,
+            css: toastCss
+        },
+        togglebutton: {
+            ...tokens.components.togglebutton,
+            css: togglebuttonCss
+        },
+        toggleswitch: {
+            ...tokens.components.toggleswitch,
+            css: toggleswitchCss
+        },
+        autocomplete: {
+            ...tokens.components.autocomplete,
+            css: autocompleteCss
+        },
+        popover: {
+            ...tokens.components.popover,
+            css: popoverCss
         },
-    },
+        selectbutton: {
+            ...tokens.components.selectbutton,
+            css: selectbuttonCss
+        }
+    }
 };
 
 const Preset = definePreset(Aura, presetTokens);