@gravity-ui/page-constructor 4.28.0-alpha.0 → 4.28.0

package/build/cjs/components/ReactPlayer/ReactPlayer.css

@@ -27,6 +27,13 @@ unpredictable css rules order in build */
   height: 64px;
   border-radius: 166px;
 }
+.pc-ReactPlayer__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-ReactPlayer__button:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-ReactPlayer__button_theme_blue {
   color: var(--g-color-base-background);
   background-color: var(--g-color-base-brand);

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -219,12 +219,12 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
                 ? undefined
-                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, config: {
+                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {
                 file: {
                     attributes: {
-                        pip: props.autoplay ? 'false' : undefined,
-                        playsinline: props.autoplay ? '' : undefined,
-                        disablepictureinpicture: props.autoplay ? '' : undefined,
+                        pip: isMobile ? 'false' : undefined,
+                        playsinline: isMobile ? '' : undefined,
+                        disablepictureinpicture: isMobile ? '' : undefined,
                     },
                 },
             } }),

package/build/cjs/components/Table/Table.css

@@ -13,7 +13,7 @@ unpredictable css rules order in build */
   display: flex;
 }
 .pc-table__row:first-child {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .pc-table__row:first-child .pc-table__cell {
   border-bottom-color: var(--g-color-line-generic-active);

package/build/cjs/components/Title/TitleItem.css

@@ -62,11 +62,19 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
   padding-right: 8px;
+  border-radius: var(--g-focus-border-radius);
 }
 .pc-title-item__link:hover, .pc-title-item__link:active {
   --pc-text-header-color: inherit;
   color: inherit;
 }
+.pc-title-item__link:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-title-item__link:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-title-item__link:hover {
   cursor: pointer;
 }

package/build/cjs/components/VideoBlock/VideoBlock.css

@@ -43,6 +43,13 @@ unpredictable css rules order in build */
   background-color: var(--g-color-base-brand);
   border-radius: 50%;
 }
+.pc-VideoBlock__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-VideoBlock__button:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-VideoBlock__icon {
   margin-left: 6px;
 }

package/build/cjs/components/VideoBlock/VideoBlock.d.ts

@@ -15,6 +15,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     playButton?: React.ReactNode;
     height?: number;
     fullscreen?: boolean;
+    autoplay?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -41,7 +41,7 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, } = props;
     const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
@@ -75,7 +75,7 @@ const VideoBlock = (props) => {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             if (!previewImg) {
-                iframe.src = `${src}?${(0, utils_1.getPageSearchParams)(attributes || {})}`;
+                iframe.src = `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, (attributes || {})), (autoplay ? exports.AUTOPLAY_ATTRIBUTES : {})))}`;
             }
             iframe.width = '100%';
             iframe.height = '100%';
@@ -87,7 +87,7 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg, autoplay]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -35,18 +35,22 @@ unpredictable css rules order in build */
   --pc-selected-tab-item-background-color-hover: var(
       --pc-monochrome-button-background-color-hover
   );
+  --pc-color-line-focus-light: var(--g-color-text-brand);
+  --pc-color-line-focus-dark: var(--g-color-text-light-primary);
 }
 .g-root_theme_light {
   --pc-color-base-silver: #eff2f8;
   --pc-color-base-gold: #ffdb4d;
   --pc-color-base-asphalt: #313538;
   --pc-color-base-copper: #ffe6c4;
+  --g-color-line-focus: var(--pc-color-line-focus-light);
 }
 .g-root_theme_dark {
   --pc-color-base-silver: #bcc0c4;
   --pc-color-base-gold: #ffde5d;
   --pc-color-base-asphalt: #474d52;
   --pc-color-base-copper: #7f7262;
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
 }
 .g-root.g-root_theme_dark {
   --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
@@ -95,7 +99,7 @@ unpredictable css rules order in build */
   margin: 0 0 12px;
 }
 .yfm_constructor.yfm_constructor p strong {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .yfm_constructor.yfm_constructor_size_s ul,
 .yfm_constructor.yfm_constructor_size_s ol,
@@ -124,6 +128,7 @@ unpredictable css rules order in build */
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .yfm_constructor a:focus {
   outline: 2px solid #ffdb4d;
@@ -132,6 +137,12 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.yfm_constructor a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.yfm_constructor a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
 .yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -103,6 +103,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
+    mediaView?: 'fit' | 'full';
     background?: ThemedHeaderBlockBackground;
     theme?: 'light' | 'dark';
     verticalOffset?: 's' | 'm' | 'l' | 'xl';

package/build/cjs/sub-blocks/BannerCard/BannerCard.css

@@ -4,6 +4,9 @@
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-banner-card_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title,
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle {
   color: var(--g-color-text-light-primary);

package/build/cjs/sub-blocks/Content/Content.css

@@ -91,6 +91,9 @@ unpredictable css rules order in build */
 .pc-content_size_l .pc-content__button {
   margin-top: 12px;
 }
+.pc-content_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-content_theme_dark .pc-content__title *,
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,

package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css

@@ -1,5 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-hubspot-form {
+  --g-color-line-focus: var(--pc-color-line-focus-light);
+}
 .pc-hubspot-form .submitted-message {
   padding-left: 10px;
 }
@@ -10,6 +13,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field > label {
   color: var(--g-color-text-primary);
   font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
   width: 200px;
   max-width: 100%;
@@ -77,7 +81,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=tel]:focus,
 .pc-hubspot-form .hs-form-field .input input[type=email]:focus,
 .pc-hubspot-form .hs-form-field .input textarea:focus {
-  border: 2px solid var(--g-color-base-brand);
+  border: 2px solid var(--g-color-line-focus);
   outline: none;
 }
 .pc-hubspot-form .hs-form-field .input textarea {
@@ -97,7 +101,7 @@ unpredictable css rules order in build */
   padding-right: 30px;
 }
 .pc-hubspot-form .hs-form-field .input select:focus {
-  border: 1px solid var(--g-color-line-generic-active);
+  border: 1px solid var(--g-color-line-focus);
 }
 .pc-hubspot-form .hs-form-field .input .hs-fieldtype-intl-phone.hs-input .hs-input {
   float: none;
@@ -139,7 +143,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:not(.hs-form-required) {
   color: var(--g-color-text-primary);
   font-size: var(--g-text-body-2-font-size);
-  line-height: 16px;
+  line-height: var(--g-text-body-2-line-height);
   padding-left: 7px;
   margin: 0;
   flex-grow: 1;
@@ -187,6 +191,10 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-checkbox-display input:checked ~ span:before {
   background-color: #ffeba0;
 }
+.pc-hubspot-form .hs-form-field .hs-form-booleancheckbox-display input[type=checkbox]:focus ~ span::before,
+.pc-hubspot-form .hs-form-field .hs-form-checkbox-display input[type=checkbox]:focus ~ span::before {
+  outline: 2px solid var(--g-color-line-focus);
+}
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:before {
   content: "";
   position: absolute;
@@ -229,7 +237,17 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
   font-weight: var(--g-text-body-font-weight);
-  margin: 0 0 20px;
+  margin: 20px 0;
+}
+.pc-hubspot-form .hs-richtext a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.pc-hubspot-form .hs-richtext a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.pc-hubspot-form .hs-richtext a:focus {
+  outline: 0;
+  border-radius: var(--g-focus-border-radius);
 }
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
@@ -238,6 +256,9 @@ unpredictable css rules order in build */
   font-weight: var(--g-text-body-font-weight);
   color: var(--g-color-text-danger);
 }
+.pc-hubspot-form .legal-consent-container {
+  padding-top: 8px;
+}
 .pc-hubspot-form .inputs-list {
   list-style: none;
   padding: 0;
@@ -301,9 +322,23 @@ unpredictable css rules order in build */
   white-space: nowrap;
   appearance: none;
 }
+.pc-hubspot-form .hs-button.primary:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 1px;
+}
+.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-hubspot-form .hs-button.primary:hover {
   background-color: var(--g-color-base-brand-hover);
 }
+.pc-hubspot-form .hs-button.primary:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 1px;
+}
+.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-hubspot-form .grecaptcha-badge {
   box-shadow: none !important;
   border: 1px solid var(--g-color-line-generic);
@@ -355,6 +390,9 @@ unpredictable css rules order in build */
 .pc-hubspot-form_mobile .hs-button.primary {
   width: 80%;
 }
+.pc-hubspot-form_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-hubspot-form_theme_dark .hs-form-field .input select {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTEgNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMTAuMDggMEw1LjUgNC4zNi45MSAwIDAgLjg2bDUuNSA1LjI1TDExIC44NnoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==");
 }

package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css

@@ -16,7 +16,7 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-1-line-height);
 }
 .pc-price-description__main-title {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .pc-price-description__main-title_color_cornflower {
   color: var(--g-color-base-brand);

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -23,11 +23,29 @@ unpredictable css rules order in build */
   margin: auto 10px;
 }
 .pc-price-details__foldable_title {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   cursor: pointer;
   display: flex;
+  align-items: center;
   font-weight: 400;
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-price-details__foldable_title:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-price-details__foldable_title:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-price-details__foldable_title_color_cornflower {
   color: var(--g-color-text-link);

package/build/cjs/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.js

@@ -28,7 +28,7 @@ const PriceDetails = (props) => {
         return react_1.default.createElement("div", { className: b('foldable_block') }, getPriceDetails());
     };
     const getFoldableTitle = () => {
-        return (react_1.default.createElement("div", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen },
+        return (react_1.default.createElement("button", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen, "aria-expanded": isOpened },
             foldableTitle,
             react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 14, type: 'vertical', className: b('arrow') })));
     };

package/build/esm/blocks/ContentLayout/ContentLayout.css

@@ -49,6 +49,9 @@ unpredictable css rules order in build */
 .pc-content-layout-block_background {
   padding: 64px;
 }
+.pc-content-layout-block_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 @media (max-width: 577px) {
   .pc-content-layout-block_background {
     padding: 32px;

package/build/esm/blocks/ContentLayout/ContentLayout.js

@@ -30,7 +30,7 @@ export const ContentLayoutBlock = (props) => {
     const isMobile = useContext(MobileContext);
     const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = useMemo(() => getTextWidth(textWidth), [textWidth]);
-    return (React.createElement("div", { className: b({ size, background: Boolean(background) }) },
+    return (React.createElement("div", { className: b({ size, theme, background: Boolean(background) }) },
         React.createElement(Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
         fileContent && (React.createElement(Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (React.createElement(FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
         background && (React.createElement("div", { className: b('background') },

package/build/esm/blocks/Header/Header.css

@@ -180,6 +180,18 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.pc-header-block_media-view_fit .pc-header-block__video > video,
+.pc-header-block_media-view_fit .pc-header-block__image {
+  object-fit: contain;
+  height: auto;
+  width: auto;
+  max-height: 100%;
+  max-width: 100%;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 @media (max-width: 1440px) {
   .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
     left: 0;

package/build/esm/blocks/Header/Header.js

@@ -18,7 +18,7 @@ const Background = ({ background, isMobile }) => {
 };
 const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 export const HeaderBlock = (props) => {
-    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
+    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, mediaView = 'full', } = props;
     const isMobile = useContext(MobileContext);
     const theme = useTheme();
     const hasRightSideImage = Boolean(image || video);
@@ -32,7 +32,11 @@ export const HeaderBlock = (props) => {
     const imageThemed = image && getThemedValue(image, theme);
     const videoThemed = video && getThemedValue(video, theme);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
-    return (React.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
+    return (React.createElement("header", { className: b({
+            ['has-media']: hasRightSideImage,
+            ['full-width']: fullWidth,
+            ['media-view']: mediaView,
+        }, className) },
         backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
         React.createElement(Grid, { containerClass: b('container-fluid') },

package/build/esm/blocks/Header/schema.d.ts

@@ -407,6 +407,10 @@ export declare const HeaderProperties: {
             optionName: string;
         })[];
     };
+    mediaView: {
+        type: string;
+        enum: string[];
+    };
     backLink: {
         type: string;
         required: string[];
@@ -887,6 +891,10 @@ export declare const HeaderBlock: {
                     optionName: string;
                 })[];
             };
+            mediaView: {
+                type: string;
+                enum: string[];
+            };
             backLink: {
                 type: string;
                 required: string[];

package/build/esm/blocks/Header/schema.js

@@ -32,6 +32,10 @@ export const HeaderProperties = {
     },
     image: withTheme(ImageProps),
     video: withTheme(VideoProps),
+    mediaView: {
+        type: 'string',
+        enum: ['fit', 'full'],
+    },
     backLink: {
         type: 'object',
         required: ['url', 'title'],

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -163,6 +163,10 @@ export declare const HeaderSliderBlock: {
                                 optionName: string;
                             })[];
                         };
+                        mediaView: {
+                            type: string;
+                            enum: string[];
+                        };
                         backLink: {
                             type: string;
                             required: string[];

package/build/esm/blocks/Icons/Icons.css

@@ -30,6 +30,16 @@ unpredictable css rules order in build */
   text-decoration: none;
   margin: 0 8px 24px;
 }
+.pc-icons-block a.pc-icons-block__item {
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-icons-block a.pc-icons-block__item:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-icons-block a.pc-icons-block__item:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-icons-block__image {
   max-width: 100%;
   margin: 0 auto;

package/build/esm/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -19,6 +19,14 @@ unpredictable css rules order in build */
   position: relative;
   padding-right: 24px;
   cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-QuestionsBlockItem__title:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-QuestionsBlockItem__title:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-QuestionsBlockItem__title a {
   outline: none;
@@ -37,12 +45,19 @@ unpredictable css rules order in build */
   position: absolute;
   right: 0;
   top: 0;
+  bottom: 0;
+  margin: auto;
   color: var(--g-color-text-primary);
 }
 .pc-QuestionsBlockItem__link {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
 }
+.pc-QuestionsBlockItem__link.pc-QuestionsBlockItem__link a {
+  outline-offset: -2px;
+  border-radius: calc(var(--g-focus-border-radius) + 2px);
+}
+
 .pc-QuestionsBlockItem__text {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);

package/build/esm/blocks/Slider/Arrow/Arrow.css

@@ -49,6 +49,13 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
+.pc-slider-block-arrow__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-slider-block-arrow__button:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);

package/build/esm/blocks/Slider/Slider.js

@@ -133,12 +133,12 @@ export const SliderBlock = (props) => {
     const renderAccessibleBar = (index) => {
         return (
         // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
-        React.createElement(Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+        React.createElement(Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 0 && (React.createElement("li", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
                 left: barPosition,
                 width: barWidth,
             } }))));
     };
-    const renderDot = (index) => {
+    const getCurrentSlideNumber = (index) => {
         const currentIndexDiff = index - currentIndex;
         let currentSlideNumber;
         if (0 <= currentIndexDiff && currentIndexDiff < slidesToShowCount) {
@@ -150,10 +150,16 @@ export const SliderBlock = (props) => {
         else {
             currentSlideNumber = index + 1;
         }
-        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": (slidesCountByBreakpoint > 1 &&
-                0 <= currentIndexDiff &&
-                currentIndexDiff < slidesToShowCount) ||
-                undefined, "aria-label": `Slide ${currentSlideNumber} of ${barSlidesCount}` }));
+        return currentSlideNumber;
+    };
+    const isVisibleSlide = (index) => {
+        const currentIndexDiff = index - currentIndex;
+        return (slidesCountByBreakpoint > 0 &&
+            0 <= currentIndexDiff &&
+            currentIndexDiff < slidesToShowCount);
+    };
+    const renderDot = (index) => {
+        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": isVisibleSlide(index) ? true : undefined, "aria-label": `Slide ${getCurrentSlideNumber(index)} of ${barSlidesCount}` }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {

package/build/esm/components/Button/Button.css

@@ -1,5 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-button-block {
+  --yc-button-outline-color: var(--g-color-line-focus);
+}
 .pc-button-block__content {
   display: flex;
   align-items: center;
@@ -40,6 +43,9 @@ unpredictable css rules order in build */
   color: var(--pc-monochrome-button-color);
 }
 
+.pc-button-block_theme_normal-contrast:focus::before, .pc-button-block_theme_raised:focus::before {
+  outline-offset: 1px;
+}
 .pc-button-block_size_s {
   --btn-image-margin: 10px;
 }

package/build/esm/components/ButtonTabs/ButtonTabs.css

@@ -26,4 +26,7 @@ unpredictable css rules order in build */
 }
 .pc-button-tabs__item.pc-button-tabs__item_active:hover {
   color: var(--pc-selected-tab-item-color);
+}
+.pc-button-tabs__item.pc-button-tabs__item_active:focus::before {
+  outline-offset: 1px;
 }

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -18,7 +18,7 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
     return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => {
         const isActive = id === activeTabId;
         return (React.createElement(Button, { text: title, className: b('item', { active: isActive }), key: title, size: tabSize, onClick: handleClick(id), extraProps: {
-                'aria-current': isActive,
+                'aria-current': isActive || undefined,
             } }));
     })));
 };

package/build/esm/components/CardBase/CardBase.d.ts

@@ -1,6 +1,5 @@
 import React, { HTMLAttributeAnchorTarget, ReactElement } from 'react';
-import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
-import { AnalyticsEventsBase } from '../../models/common';
+import { AnalyticsEventsBase, ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
 import './CardBase.css';
 export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     className?: string;

package/build/esm/components/CardBase/CardBase.js

@@ -1,7 +1,8 @@
 import React, { Children, Fragment } from 'react';
+import { Link } from '@gravity-ui/uikit';
 import { useAnalytics } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
-import { DefaultEventNames } from '../../models/common';
+import { DefaultEventNames, } from '../../models';
 import { block, getQaAttrubutes } from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
@@ -50,7 +51,10 @@ export const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },
-        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, title: urlTitle, "data-qa": qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: {
+                draggable: false,
+                onDragStart: (e) => e.preventDefault(),
+            }, qa: qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 Layout.Header = Header;
 Layout.Content = Content;