@cloud-ru/ds-popup-private 1.0.0

package/dist/esm/constants.js

@@ -0,0 +1,70 @@
+/**
+ * Тип media-блока в overlay-шапке.
+ *
+ * - `Image` — изображение во всю ширину (высота 184px), прижато к шапке (убирается
+ *   верхний отступ контент-блока). Горизонтальные паддинги body этим не меняются — они отдельно через `bodyPadding`.
+ * - `Icon`  — иконка с `padding-top: 24px`.
+ *
+ * Соответствие Figma: `bottomSheetMediaImage` (360×184) и `bottomSheetMediaIcon` (360×104).
+ */
+export const MEDIA_KIND = {
+    Image: 'image',
+    Icon: 'icon',
+};
+/**
+ * Ориентация кнопок футера, собранных из `approveButton` / `cancelButton` / `additionalButton`.
+ * Применяется только при ровно двух кнопках (см. `footerActionsOrientation`).
+ *
+ * - `Horizontal` — кнопки в ряд через space-between: secondary слева, primary справа, ширина по
+ *   контенту. Дефолт — точное соответствие Figma `bottomBar.buttonGroup` (cancel/confirm).
+ * - `Vertical`   — кнопки в столбик, full-width (primary сверху).
+ */
+export const FOOTER_ACTIONS_ORIENTATION = {
+    Vertical: 'vertical',
+    Horizontal: 'horizontal',
+};
+/**
+ * Стабильные `data-test-id` для слотов overlay-chrome (header / body / footer / media / close).
+ *
+ * Используются для e2e-локаторов в Playwright и Storybook play-функциях. Реэкспортируется из
+ * `@cloud-ru/ds-bottom-sheet`, чтобы потребитель (приложение) ссылался на те же id, что и наши тесты.
+ *
+ * Значения намеренно сохраняют префикс `bottom-sheet__` — на фазе выноса слоя из `@cloud-ru/ds-bottom-sheet`
+ * они переносятся 1:1 без смены поведения; переименование в `popup-private__*` — отдельная фаза.
+ *
+ * Figma-typo-мост (см. `.claude/rules/figma-integration.md`):
+ *   Figma `badgeHandle`          → код `handle` (показывается при `swipeEnabled`)
+ *   Figma `blackout`             → код `backdrop` / `showBackdrop`
+ *   Figma `topBar`               → код `header` / `onBackButtonClick`
+ *   Figma `bottomBar`            → код `footer`
+ *   Figma `+ slotMedia`          → код `media`
+ *   Figma `+ slotSubtitle`      → код `subtitle` (текст под title)
+ *   Figma `+ slotSecondTitle`    → код `slotSecondTitle` (search/segment, только sheet)
+ *   Figma `+ slotAfterHeadline`  → код `slotAfterTitle`
+ *   Figma `+ slotBottomBar`      → код `footer` (ReactNode)
+ *   Figma `buttonBefore` (48×48) → код auto-back-button по `onBackButtonClick`
+ *   Figma `buttonAfter`  (48×48) → код `actionButton` (ReactNode)
+ */
+export const TEST_IDS = {
+    root: 'bottom-sheet',
+    backdrop: 'bottom-sheet__backdrop',
+    handle: 'bottom-sheet__handle',
+    header: 'bottom-sheet__header',
+    title: 'bottom-sheet__title',
+    slotAfterTitle: 'bottom-sheet__slot-after-title',
+    subtitle: 'bottom-sheet__subtitle',
+    slotSecondTitle: 'bottom-sheet__slot-second-title',
+    backButton: 'bottom-sheet__back-button',
+    actionButton: 'bottom-sheet__action-button',
+    media: 'bottom-sheet__media',
+    closeButton: 'popup__close-button',
+    body: 'bottom-sheet__body',
+    footer: 'bottom-sheet__footer',
+    footerApprove: 'bottom-sheet__footer-approve',
+    footerCancel: 'bottom-sheet__footer-cancel',
+    footerAdditional: 'bottom-sheet__footer-additional',
+    // Два разных разделителя (topBar↔body и body↔footer) — разные id, чтобы каждый адресовался
+    // однозначно (без strict-mode-коллизии `getByTestId`).
+    dividerTop: 'bottom-sheet__divider-top',
+    dividerBottom: 'bottom-sheet__divider-bottom',
+};

package/dist/esm/context/overlaySurface.d.ts

@@ -0,0 +1,35 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+/** Поверхность overlay'я, в которой рендерятся общие слоты (`Header` / `Body` / `Footer` / `Media`). */
+export declare const OVERLAY_SURFACE: {
+    readonly Modal: "modal";
+    readonly Drawer: "drawer";
+    readonly Sheet: "sheet";
+};
+export type OverlaySurface = ValueOf<typeof OVERLAY_SURFACE>;
+/**
+ * Сегмент коллекции `popupPrivate.anatomy.*`, из которого слоты берут токены раскладки.
+ * Modal и Drawer(desktop) рисуются мастером `window`; Sheet — `bottomSheet`.
+ */
+export declare const SURFACE_TOKEN_SEGMENT: {
+    readonly modal: "window";
+    readonly drawer: "window";
+    readonly sheet: "bottomSheet";
+};
+export type SurfaceTokenSegment = ValueOf<typeof SURFACE_TOKEN_SEGMENT>;
+type OverlaySurfaceProviderProps = {
+    /** Поверхность, в которой рендерятся дочерние слоты. */
+    surface: OverlaySurface;
+    /** Только drawer: высота панели по контенту → `Body` (drawer-ветка) добавляет соответствующий класс. */
+    bodyHeightAuto?: boolean;
+    children: ReactNode;
+};
+/** Провайдер поверхности overlay'я. Frame (sheet / modal / drawer) оборачивает в него свои слоты. */
+export declare function OverlaySurfaceProvider({ surface, bodyHeightAuto, children }: OverlaySurfaceProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Текущая поверхность overlay'я. Без провайдера возвращает `'sheet'`. */
+export declare function useOverlaySurface(): OverlaySurface;
+/** Только drawer-ветка `Body`: высота панели по контенту (из `DrawerFrame`). */
+export declare function useOverlayBodyHeightAuto(): boolean;
+/** Токен-сегмент текущей поверхности (`window` / `bottomSheet`). Без провайдера — `bottomSheet`. */
+export declare function useSurfaceTokenSegment(): SurfaceTokenSegment;
+export {};

package/dist/esm/context/overlaySurface.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/** Поверхность overlay'я, в которой рендерятся общие слоты (`Header` / `Body` / `Footer` / `Media`). */
+export const OVERLAY_SURFACE = {
+    Modal: 'modal',
+    Drawer: 'drawer',
+    Sheet: 'sheet',
+};
+/**
+ * Сегмент коллекции `popupPrivate.anatomy.*`, из которого слоты берут токены раскладки.
+ * Modal и Drawer(desktop) рисуются мастером `window`; Sheet — `bottomSheet`.
+ */
+export const SURFACE_TOKEN_SEGMENT = {
+    [OVERLAY_SURFACE.Modal]: 'window',
+    [OVERLAY_SURFACE.Drawer]: 'window',
+    [OVERLAY_SURFACE.Sheet]: 'bottomSheet',
+};
+// Дефолт `'sheet'`: слоты без провайдера ведут себя как bottom-sheet.
+const OverlaySurfaceContext = createContext({
+    surface: OVERLAY_SURFACE.Sheet,
+    bodyHeightAuto: false,
+});
+/** Провайдер поверхности overlay'я. Frame (sheet / modal / drawer) оборачивает в него свои слоты. */
+export function OverlaySurfaceProvider({ surface, bodyHeightAuto = false, children }) {
+    return (_jsx(OverlaySurfaceContext.Provider, { value: { surface, bodyHeightAuto }, children: children }));
+}
+/** Текущая поверхность overlay'я. Без провайдера возвращает `'sheet'`. */
+export function useOverlaySurface() {
+    return useContext(OverlaySurfaceContext).surface;
+}
+/** Только drawer-ветка `Body`: высота панели по контенту (из `DrawerFrame`). */
+export function useOverlayBodyHeightAuto() {
+    return useContext(OverlaySurfaceContext).bodyHeightAuto;
+}
+/** Токен-сегмент текущей поверхности (`window` / `bottomSheet`). Без провайдера — `bottomSheet`. */
+export function useSurfaceTokenSegment() {
+    return SURFACE_TOKEN_SEGMENT[useOverlaySurface()];
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './context/overlaySurface.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './context/overlaySurface.js';
+export * from './types.js';

package/dist/esm/style.css

@@ -0,0 +1,332 @@
+.actions{
+  width:100%;
+}
+.actions > *{
+  max-width:100%;
+}
+
+.single{
+  justify-content:flex-end;
+}
+
+.compact{
+  align-self:flex-end;
+  justify-content:flex-end;
+  width:auto;
+}
+
+.actions.stackInverted{
+  flex-direction:column;
+}
+.root{
+  touch-action:pan-y;
+  overflow-y:auto;
+  overscroll-behavior:contain;
+  flex:1 1 auto;
+  box-sizing:border-box;
+  min-height:0;
+  padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+
+.root[data-no-padding]{
+  padding-top:0;
+  padding-right:0;
+  padding-left:0;
+}
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.root{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingTop, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingTop, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingRight, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingRight, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingBottom, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingBottom, var(--sn-primitive-dimension-0, 0px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingLeft, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingLeft, var(--sn-primitive-dimension-0, 0px)));
+  padding:0;
+  border:0 solid transparent;
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background:transparent;
+  outline:0;
+  min-width:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minWidth, var(--sn-primitive-dimension-32, 32px));
+  min-height:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minHeight, var(--sn-primitive-dimension-32, 32px));
+  border-radius:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-borderRadius, var(--sn-brand-anatomy-radius-window-buttonClosed-m, var(--sn-primitive-dimension-full, 10000px)));
+}
+.root .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root{
+}
+.root[data-loading] .stateLayer[data-state=borderOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=emptyVersionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=inversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyInversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+.root{
+  display:flex;
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+.root[data-surface=bottomSheet]{
+  touch-action:none;
+  flex-direction:column;
+  align-items:stretch;
+  justify-content:center;
+  padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.root[data-surface=window]{
+  align-items:center;
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.contentWrapper{
+  display:flex;
+  flex-direction:column;
+}
+[data-surface=bottomSheet] .contentWrapper{
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+}
+[data-surface=window] .contentWrapper{
+  flex:1 0 0;
+  align-items:flex-start;
+  justify-content:center;
+}
+.root{
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+.root[data-surface=bottomSheet]{
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-surface=window]{
+  align-items:flex-start;
+  align-self:stretch;
+  justify-content:center;
+  gap:var(--sn-popupPrivate-anatomy-window-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-window-header-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.root[data-surface=window]:not([data-with-before]){
+  gap:0;
+}
+
+.headlineWrapper{
+  display:flex;
+  align-items:center;
+}
+[data-surface=bottomSheet] .headlineWrapper{
+  touch-action:none;
+  gap:0;
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-before], [data-surface=bottomSheet] .headlineWrapper[data-with-after]{
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-before]{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingLeft, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-after]{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingRight, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=window] .headlineWrapper{
+  align-self:stretch;
+  gap:var(--sn-popupPrivate-anatomy-window-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  height:var(--sn-popupPrivate-anatomy-window-header-headline-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:0;
+}
+[data-surface=window] .headlineWrapper:not([data-with-before]){
+  padding-left:0;
+}
+
+.headline{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  min-width:0;
+}
+[data-surface=bottomSheet] .headline{
+  flex:1 1 auto;
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
+  padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
+}
+[data-surface=window] .headline{
+  flex:1 0 0;
+  gap:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=bottomSheet] .headlineWrapper:not([data-with-before]) .headline{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=bottomSheet] .headlineWrapper:not([data-with-after]) .headline{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=window] .headlineWrapper[data-with-before] .headline{
+  padding-left:0;
+}
+
+.title{
+  flex:0 1 auto;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.slotAfterTitle{
+  display:inline-flex;
+  flex:1 1 auto;
+  align-items:center;
+  min-width:0;
+}
+
+.actionButton{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+}
+
+.subtitleWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  box-sizing:border-box;
+}
+[data-surface=bottomSheet] .subtitleWrapper{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+[data-surface=window] .subtitleWrapper{
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.subtitle{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.secondWrapper{
+  box-sizing:border-box;
+}
+[data-surface=bottomSheet] .secondWrapper{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+}
+.wrapper{
+  touch-action:none;
+  overflow:hidden;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.wrapper[data-media-kind=icon]{
+  padding-top:var(--sn-popupPrivate-anatomy-window-media-icon-paddingTop, var(--sn-primitive-dimension-32, 32px));
+}
+
+.image{
+  display:block;
+  width:100%;
+  min-height:184px;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.icon{
+  display:block;
+  max-width:100%;
+  height:auto;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,95 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren, ReactNode } from 'react';
+import { FOOTER_ACTIONS_ORIENTATION, MEDIA_KIND } from './constants.js';
+/**
+ * Пропсы action-кнопки футера — объект пропсов `Button` из `@cloud-ru/ds-button`. `view` / `appearance` имеют
+ * дефолты по слоту (переопределяемы); `size` (m) и full-width задаёт `ButtonGroup`, поэтому исключены.
+ * `data-test-id` слота фиксирует `TEST_IDS` (через `WithSupportProps` у `ButtonGroup`).
+ *
+ * По умолчанию рендерится как `<button>`. Для CTA-ссылки передайте `as='a'` + `href` (`Button`
+ * полиморфен и отрендерит `<a>` — доступен middle-click / контекстное меню). Union `button | anchor`
+ * ниже раскрывает анкорные атрибуты. Для нестандартного футера остаётся `footer: ReactNode`.
+ */
+export type BottomSheetActionButton = Omit<ButtonProps<'button'>, 'fullWidth' | 'size'> | Omit<ButtonProps<'a'>, 'fullWidth' | 'size'>;
+export type MediaKind = ValueOf<typeof MEDIA_KIND>;
+export type FooterActionsOrientation = ValueOf<typeof FOOTER_ACTIONS_ORIENTATION>;
+export type PopupMediaProps = {
+    /** URL изображения / иконки. */
+    src: string;
+    /** Альтернативный текст (a11y). */
+    alt: string;
+    /**
+     * Режим:
+     * - `'image'` — изображение во всю ширину (высота `184px`), прижато к шапке (убирается
+     *   верхний отступ контент-блока). Горизонтальные паддинги body не затрагивает — для edge-to-edge body
+     *   используйте `bodyPadding={false}` отдельно.
+     * - `'icon'` — иконка с `padding-top: 24px`.
+     * @default 'image'
+     */
+    kind?: MediaKind;
+};
+export type PopupHeaderProps = WithSupportProps<{
+    /** Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). */
+    title?: ReactNode;
+    /** `id` заголовка — для связи с `aria-labelledby` dialog'а (accessible name). */
+    titleId?: string;
+    /** Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). */
+    slotAfterTitle?: ReactNode;
+    /** Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. */
+    subtitle?: ReactNode;
+    /**
+     * Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`.
+     * Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности.
+     */
+    slotSecondTitle?: ReactNode;
+    /**
+     * Callback клика на back-кнопку (слева в шапке).
+     * Наличие callback'а авто-рендерит `Button view='function' icon={<ArrowLeftSVG />}`.
+     */
+    onBackButtonClick?(): void;
+    /** Slot справа от headline-строки (любой `ReactNode`, обычно `Button` с иконкой). */
+    actionButton?: ReactNode;
+    /**
+     * Усечение строковых `title`/`subtitle` через `TruncateString` (число строк). Применяется только
+     * когда задано — по умолчанию текст не усекается. Актуально для window-поверхности (modal/drawer),
+     * где длинный заголовок иначе переносится на несколько строк.
+     */
+    truncate?: {
+        title?: number;
+        subtitle?: number;
+    };
+    /**
+     * Переопределение `data-test-id` слотов шапки. Каждый пропущенный ключ берётся из `TEST_IDS`.
+     * Потребитель-обёртка (drawer/modal) прокидывает сюда свои id, чтобы сохранить публичный контракт.
+     */
+    testIds?: PopupHeaderTestIds;
+    /** CSS-класс контейнера header'а. */
+    className?: string;
+}>;
+/** `data-test-id` слотов `PopupHeader` — для переопределения потребителем. */
+export type PopupHeaderTestIds = {
+    header?: string;
+    title?: string;
+    slotAfterTitle?: string;
+    subtitle?: string;
+    slotSecondTitle?: string;
+    backButton?: string;
+    actionButton?: string;
+};
+export type PopupBodyProps = WithSupportProps<PropsWithChildren<{
+    /** Содержимое body (альтернатива `children`). */
+    content?: ReactNode;
+    /**
+     * Горизонтальные паддинги body. При `false` контент идёт во всю ширину sheet'а (edge-to-edge) —
+     * для карт, изображений, списков без отступов. Соответствует Figma-оси `padding=false`.
+     * @default true
+     */
+    bodyPadding?: boolean;
+    /** CSS-класс контейнера body. */
+    className?: string;
+}>>;
+export type PopupFooterProps = WithSupportProps<PropsWithChildren<{
+    /** CSS-класс контейнера footer'а. */
+    className?: string;
+}>>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};