@anker-in/headless-ui 1.3.78 → 1.3.79

package/dist/cjs/biz-components/HeroBanner/HeroBanner.js

@@ -1 +1 @@
-"use strict";"use client";var ze=Object.create;var L=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,Pe=Object.prototype.hasOwnProperty;var Se=(t,s)=>{for(var o in s)L(t,o,{get:s[o],enumerable:!0})},re=(t,s,o,h)=>{if(s&&typeof s=="object"||typeof s=="function")for(let b of Le(s))!Pe.call(t,b)&&b!==o&&L(t,b,{get:()=>s[b],enumerable:!(h=Ce(s,b))||h.enumerable});return t};var B=(t,s,o)=>(o=t!=null?ze(Ie(t)):{},re(s||!t||!t.__esModule?L(o,"default",{value:t,enumerable:!0}):o,t)),Ee=t=>re(L({},"__esModule",{value:!0}),t);var Oe={};Se(Oe,{default:()=>Ae});module.exports=Ee(Oe);var e=require("react/jsx-runtime"),p=B(require("react")),N=B(require("gsap")),T=require("gsap/dist/ScrollTrigger"),I=B(require("jump.js")),_=require("react-responsive"),ne=require("react-intersection-observer"),le=B(require("../../helpers/ScrollLoadVideo.js")),l=require("../../components/index.js"),d=require("../../helpers/index.js"),V=require("class-variance-authority"),se=require("../../shared/Styles.js"),ie=require("../../hooks/useExposure.js"),H=require("../../shared/trackUrlRef.js"),pe=require("../../helpers/utils.js"),ue=require("../AiuiProvider/index.js"),ce=require("../../components/button.js"),me=require("../VideoModal/index.js"),de=B(require("./HeroBannerCarousel.js"));const f="image",g="hero_banner",Me=(0,V.cva)("hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Re=(0,V.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),De=(0,V.cva)("hero-banner-button-group lg-desktop:gap-x-3 flex flex-wrap items-center gap-x-2 gap-y-3",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),je=(0,V.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),_e=({size:t="base"})=>{const{width:s,height:o}=ce.sizeMap[t];return(0,e.jsx)("svg",{width:s,height:o,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},oe=p.default.forwardRef(({data:t,className:s,classNames:o={},onSecondaryClick:h,onPrimaryClick:b,onTertiaryClick:A,jumpOptions:fe={},...O},U)=>{const{locale:q}=(0,ue.useAiuiContext)(),P={...{duration:500,offset:0},...fe},z=a=>!a||!q?a:(0,pe.getLocalizedPath)(a,q),{label:G,title:i,subtitle:n,endDate:J,endDate_tz:ge,dateFormat:be,pcImage:y,padImage:F,mobileImage:C,pcVideo:xe,padVideo:ye,mobileVideo:W,isShowVideo:he,isVideoLoop:ve=!0,primaryButton:u,secondaryButton:r,tertiaryButton:c,theme:ke="light",size:S="default",titleSize:E,caption:Y=[],blockLink:Q,iconArray:Z,align:v="left",enableParallax:K=!0}=t,M=Array.isArray(Y)?Y:[],we=Array.isArray(Z)?Z:void 0,$e=(0,_.useMediaQuery)({query:"(max-width: 768px)"}),Be=(0,_.useMediaQuery)({query:"(max-width: 1024px)"}),[X,ee]=(0,p.useState)(!1),{ref:Ne,inView:te}=(0,ne.useInView)(),R=(0,p.useRef)(null),D=(0,p.useRef)(null),j=(0,p.useRef)(null),k=(0,p.useRef)(null),x=(0,p.useRef)(null),Te=i?.trim()||n?.trim()||y?.alt?.trim()||void 0,Ve=i!==void 0?i?.trim()||n?.trim()||y?.alt?.trim()||void 0:n&&n.trim()||"",He=n&&n.trim()||"";return(0,ie.useExposure)(x,{componentType:f,componentName:g,componentTitle:Ve,componentDescription:He}),(0,p.useImperativeHandle)(U,()=>x.current),(0,p.useEffect)(()=>{if(t.items&&t.items.length>0||!K)return;N.default.registerPlugin(T.ScrollTrigger);function a(){if(!k.current)return;const m=x.current?.clientHeight||100;window.innerHeight<=m?R.current=T.ScrollTrigger.create({trigger:x.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:w=>{const $=w.progress*40-20;N.default.set(k.current,{yPercent:$})}}):(j.current=T.ScrollTrigger.create({trigger:x.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:w=>{const $=w.progress*20-20;N.default.set(k.current,{yPercent:$})}}),D.current=T.ScrollTrigger.create({trigger:x.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:w=>{const $=w.progress*20;N.default.set(k.current,{yPercent:$})}}))}return te&&a(),()=>{R.current&&R.current.kill(),j.current&&j.current.kill(),D.current&&D.current.kill()}},[te,t.items,K]),t.items&&t.items.length>0?(0,e.jsx)(de.default,{data:t,className:s,classNames:o,onPrimaryClick:b,onSecondaryClick:h,onTertiaryClick:A,ref:U,...O}):(0,e.jsx)("div",{...O,ref:Ne,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:x,className:(0,d.cn)(ke==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":S==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":S==="sm"},s),children:[Q&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,H.trackUrlRef)(z(Q),`${f}_${g}`),"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}`,tabIndex:-1,"aria-hidden":"true","aria-label":Te}),(0,e.jsx)("div",{ref:k,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:he?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{"data-video-poster":"true",className:"laptop:w-full absolute inset-0 h-full transition-opacity duration-500",children:(0,e.jsx)(l.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:y?.alt||"",source:`${y?.url||""} , ${F?.url??(C?.url||"")} 1024, ${C?.url||""} 767`})}),(0,e.jsx)(le.default,{poster:void 0,src:$e?W?.url:Be?ye?.url||W?.url:xe?.url,className:"laptop:w-full absolute inset-0 h-full",videoClassName:"h-full object-cover",muted:!0,loop:ve,playsInline:!0,onPlaying:a=>{a.currentTarget.closest('[data-ui-component-id="HeroBanner"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:y?.alt||"",source:`${y?.url||""} , ${F?.url??(C?.url||"")} 1024, ${C?.url||""} 767`})}),(0,e.jsxs)("div",{className:Me({align:v}),children:[(0,e.jsxs)("div",{className:Re({align:v}),children:[G&&(0,e.jsx)(l.Text,{size:2,as:"p",className:(0,d.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:G}),i&&(0,e.jsx)(l.Heading,{as:E==="4"?"h1":"h2",html:i,className:(0,d.cn)("hero-banner-title",o.title),size:E?Number(E||"5"):S==="sm"?4:5}),n&&(0,e.jsx)(l.Text,{as:"p",size:2,className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",o.subtitle),html:n}),J&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(l.Countdown,{endDate:J,endDate_tz:ge,dateFormat:be,variant:"spacious",align:v})})]}),(0,e.jsxs)("div",{className:(0,d.cn)(De({align:v}),o.buttonGroup),children:[(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?(0,e.jsxs)(l.Button,{onClick:()=>ee(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",(0,e.jsx)(_e,{size:"lg"})]}):r?.text?(0,e.jsxs)(l.Button,{"aria-label":i??n,size:"lg",variant:"secondary",className:(0,d.cn)("hero-banner-secondary-button",o.secondaryButton),as:r?.isCustomSecondaryButton?"button":"a",href:(0,H.trackUrlRef)(z(r?.link),`${f}_${g}`),target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:a=>{if(r.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(r.link);m&&(0,I.default)(m,P)}r?.isCustomSecondaryButton&&h?.(t,a,r?.customSecondaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${r?.text}`,children:[r?.text,(0,e.jsx)("span",{className:"sr-only",children:i??n})]}):null,u&&u.text&&(0,e.jsx)(l.Button,{"aria-label":i??n,size:"lg",variant:"primary",className:(0,d.cn)("hero-banner-primary-button",o.primaryButton),as:u?.isCustomPrimaryButton?"button":"a",href:(0,H.trackUrlRef)(z(u.link),`${f}_${g}`),target:u?.target,rel:u?.target==="_blank"?u?.rel??"noopener noreferrer":u?.rel,onClick:a=>{if(u.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(u.link);m&&(0,I.default)(m,P)}u?.isCustomPrimaryButton&&b?.(t,a,u?.customPrimaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${u?.text}`,children:u.text})]}),c&&c.text&&(0,e.jsxs)(l.Button,{"aria-label":i??n,size:"lg",variant:"link",className:(0,d.cn)("hero-banner-tertiary-button w-auto p-0",o.tertiaryButton),as:c?.isCustomTertiaryButton?"button":"a",href:(0,H.trackUrlRef)(z(c.link),`${f}_${g}`),target:c?.target,rel:c?.target==="_blank"?c?.rel??"noopener noreferrer":c?.rel,onClick:a=>{if(c.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(c.link);m&&(0,I.default)(m,P)}c?.isCustomTertiaryButton&&A?.(t,a,c?.customTertiaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${c?.text}`,children:[c.text,(0,e.jsx)("span",{className:"sr-only",children:i??n})]})]}),(0,e.jsx)("div",{className:je({align:v}),children:we?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(l.Picture,{className:"!inline-block h-full !w-auto",imgClassName:"!w-auto h-full object-contain",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),M.length>0&&(0,e.jsx)("div",{className:(0,d.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",o.captionGroup),children:M.map((a,m)=>(0,e.jsxs)(p.default.Fragment,{children:[(0,e.jsx)(l.Text,{size:2,className:(0,d.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:a.title}),m<M.length-1&&(0,e.jsx)("div",{className:(0,d.cn)("bg-info-primary w-px")})]},a.title))}),X&&(0,e.jsx)(me.VideoModal,{visible:X,videoUrl:r?.isYoutubeVideo?void 0:r?.videoUrl?.url,youTubeId:r?.isYoutubeVideo?r?.youtubeId:void 0,onCloseModal:()=>ee(!1)})]})})});oe.displayName="HeroBanner";var Ae=(0,se.withLayout)(oe);
+"use strict";"use client";var He=Object.create;var z=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Ve=Object.getOwnPropertyNames;var ze=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Se=(t,s)=>{for(var o in s)z(t,o,{get:s[o],enumerable:!0})},ae=(t,s,o,h)=>{if(s&&typeof s=="object"||typeof s=="function")for(let b of Ve(s))!Le.call(t,b)&&b!==o&&z(t,b,{get:()=>s[b],enumerable:!(h=Ce(s,b))||h.enumerable});return t};var T=(t,s,o)=>(o=t!=null?He(ze(t)):{},ae(s||!t||!t.__esModule?z(o,"default",{value:t,enumerable:!0}):o,t)),Pe=t=>ae(z({},"__esModule",{value:!0}),t);var _e={};Se(_e,{default:()=>je});module.exports=Pe(_e);var e=require("react/jsx-runtime"),p=T(require("react")),$=T(require("gsap")),N=require("gsap/dist/ScrollTrigger"),L=T(require("jump.js")),x=require("./mediaResolver.js"),oe=require("react-intersection-observer"),ne=T(require("../../helpers/ScrollLoadVideo.js")),l=require("../../components/index.js"),m=require("../../helpers/index.js"),H=require("class-variance-authority"),le=require("../../shared/Styles.js"),se=require("../../hooks/useExposure.js"),C=require("../../shared/trackUrlRef.js"),ie=require("../../helpers/utils.js"),pe=require("../AiuiProvider/index.js"),ue=require("../../components/button.js"),ce=require("../VideoModal/index.js"),me=T(require("./HeroBannerCarousel.js"));const f="image",g="hero_banner",Ee=(0,H.cva)("hero-banner-content lg-desktop:gap-[32px] pointer-events-none absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Ie=(0,H.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Me=(0,H.cva)("hero-banner-button-group lg-desktop:gap-x-3 pointer-events-auto flex flex-wrap items-center gap-x-2 gap-y-3",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),De=(0,H.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Re=({size:t="base"})=>{const{width:s,height:o}=ue.sizeMap[t];return(0,e.jsx)("svg",{width:s,height:o,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},re=p.default.forwardRef(({data:t,className:s,classNames:o={},onSecondaryClick:h,onPrimaryClick:b,onTertiaryClick:j,jumpOptions:de={},a11yLabels:fe,..._},A)=>{const{locale:O}=(0,pe.useAiuiContext)(),U=t.mode!=="single"&&!!t.items&&t.items.length>0,S={...{duration:500,offset:0},...de},V=a=>!a||!O?a:(0,ie.getLocalizedPath)(a,O),{label:G,title:i,subtitle:n,endDate:J,endDate_tz:ge,dateFormat:be,pcImage:q,isShowVideo:xe,isVideoLoop:ye=!0,primaryButton:u,secondaryButton:r,tertiaryButton:c,theme:he="light",size:P="default",titleSize:E,caption:F=[],blockLink:W,iconArray:Y,align:v="left",enableParallax:Z=!0}=t,I=Array.isArray(F)?F:[],ve=Array.isArray(Y)?Y:void 0,ke=(0,x.useMediaTier)(),K=(0,x.buildPictureSource)(t),we=(0,x.resolveTierMedia)(t,ke,"video")?.url||"",[Q,X]=(0,p.useState)(!1),{ref:Be,inView:ee}=(0,oe.useInView)(),M=(0,p.useRef)(null),D=(0,p.useRef)(null),R=(0,p.useRef)(null),k=(0,p.useRef)(null),y=(0,p.useRef)(null),Te=i?.trim()||n?.trim()||q?.alt?.trim()||void 0,$e=i!==void 0?i?.trim()||n?.trim()||q?.alt?.trim()||void 0:n&&n.trim()||"",Ne=n&&n.trim()||"";return(0,se.useExposure)(y,{componentType:f,componentName:g,componentTitle:$e,componentDescription:Ne}),(0,p.useImperativeHandle)(A,()=>y.current),(0,p.useEffect)(()=>{if(U||!Z)return;$.default.registerPlugin(N.ScrollTrigger);function a(){if(!k.current)return;const d=y.current?.clientHeight||100;window.innerHeight<=d?M.current=N.ScrollTrigger.create({trigger:y.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:w=>{const B=w.progress*40-20;$.default.set(k.current,{yPercent:B})}}):(R.current=N.ScrollTrigger.create({trigger:y.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:w=>{const B=w.progress*20-20;$.default.set(k.current,{yPercent:B})}}),D.current=N.ScrollTrigger.create({trigger:y.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:w=>{const B=w.progress*20;$.default.set(k.current,{yPercent:B})}}))}return ee&&a(),()=>{M.current&&M.current.kill(),R.current&&R.current.kill(),D.current&&D.current.kill()}},[ee,t.items,Z]),U?(0,e.jsx)(me.default,{data:t,className:s,classNames:o,onPrimaryClick:b,onSecondaryClick:h,onTertiaryClick:j,a11yLabels:fe,ref:A,..._}):(0,e.jsx)("div",{..._,ref:Be,"data-ui-component-id":"HeroBanner",className:(0,m.cn)(o.root),children:(0,e.jsxs)("div",{ref:y,className:(0,m.cn)(he==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"tablet:aspect-[768/560] laptop:aspect-[1024/400] desktop:aspect-[1440/560] lg-desktop:aspect-[1920/800] aspect-[390/560]":P==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":P==="sm"},s),children:[W&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,C.trackUrlRef)(V(W),`${f}_${g}`),"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}`,tabIndex:-1,"aria-hidden":"true","aria-label":Te}),(0,e.jsx)("div",{ref:k,className:(0,m.cn)("absolute left-0 top-0 size-full"),children:xe?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ne.default,{poster:void 0,src:we,className:"laptop:w-full absolute inset-0 h-full",videoClassName:"h-full object-cover",muted:!0,loop:ye,playsInline:!0,onPlaying:a=>{a.currentTarget.closest('[data-ui-component-id="HeroBanner"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}}),(0,e.jsx)("div",{"data-video-poster":"true",className:"laptop:w-full pointer-events-none absolute inset-0 h-full transition-opacity duration-500",children:(0,e.jsx)(l.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:(0,x.resolveTierMedia)(t,"lgDesktop","image")?.alt||"",source:K})})]}):(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:(0,x.resolveTierMedia)(t,"lgDesktop","image")?.alt||"",source:K})}),(0,e.jsxs)("div",{className:Ee({align:v}),children:[(0,e.jsxs)("div",{className:Ie({align:v}),children:[G&&(0,e.jsx)(l.Text,{size:2,as:"p",className:(0,m.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:G}),i&&(0,e.jsx)(l.Heading,{as:E==="4"?"h1":"h2",html:i,className:(0,m.cn)("hero-banner-title",o.title),size:E?Number(E||"5"):P==="sm"?4:5}),n&&(0,e.jsx)(l.Text,{as:"p",size:2,className:(0,m.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",o.subtitle),html:n}),J&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(l.Countdown,{endDate:J,endDate_tz:ge,dateFormat:be,variant:"spacious",align:v})})]}),(0,e.jsxs)("div",{className:(0,m.cn)(Me({align:v}),o.buttonGroup),children:[(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?(0,e.jsxs)(l.Button,{onClick:()=>X(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",(0,e.jsx)(Re,{size:"lg"})]}):r?.text?(0,e.jsxs)(l.Button,{"aria-label":i??n,size:"lg",variant:"secondary",className:(0,m.cn)("hero-banner-secondary-button",o.secondaryButton),as:r?.isCustomSecondaryButton?"button":"a",href:(0,C.trackUrlRef)(V(r?.link),`${f}_${g}`),target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:a=>{if(r.link?.startsWith("#")){a.preventDefault();const d=document.querySelector(r.link);d&&(0,L.default)(d,S)}r?.isCustomSecondaryButton&&h?.(t,a,r?.customSecondaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${r?.text}`,children:[r?.text,(0,e.jsx)("span",{className:"sr-only",children:i??n})]}):null,u&&u.text&&(0,e.jsx)(l.Button,{"aria-label":i??n,size:"lg",variant:"primary",className:(0,m.cn)("hero-banner-primary-button",o.primaryButton),as:u?.isCustomPrimaryButton?"button":"a",href:(0,C.trackUrlRef)(V(u.link),`${f}_${g}`),target:u?.target,rel:u?.target==="_blank"?u?.rel??"noopener noreferrer":u?.rel,onClick:a=>{if(u.link?.startsWith("#")){a.preventDefault();const d=document.querySelector(u.link);d&&(0,L.default)(d,S)}u?.isCustomPrimaryButton&&b?.(t,a,u?.customPrimaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${u?.text}`,children:u.text})]}),c&&c.text&&(0,e.jsxs)(l.Button,{"aria-label":i??n,size:"lg",variant:"link",className:(0,m.cn)("hero-banner-tertiary-button w-auto p-0",o.tertiaryButton),as:c?.isCustomTertiaryButton?"button":"a",href:(0,C.trackUrlRef)(V(c.link),`${f}_${g}`),target:c?.target,rel:c?.target==="_blank"?c?.rel??"noopener noreferrer":c?.rel,onClick:a=>{if(c.link?.startsWith("#")){a.preventDefault();const d=document.querySelector(c.link);d&&(0,L.default)(d,S)}c?.isCustomTertiaryButton&&j?.(t,a,c?.customTertiaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${c?.text}`,children:[c.text,(0,e.jsx)("span",{className:"sr-only",children:i??n})]})]}),(0,e.jsx)("div",{className:De({align:v}),children:ve?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(l.Picture,{className:"!inline-block h-full !w-auto",imgClassName:"!w-auto h-full object-contain",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),I.length>0&&(0,e.jsx)("div",{className:(0,m.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] pointer-events-none absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",o.captionGroup),children:I.map((a,d)=>(0,e.jsxs)(p.default.Fragment,{children:[(0,e.jsx)(l.Text,{size:2,className:(0,m.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:a.title}),d<I.length-1&&(0,e.jsx)("div",{className:(0,m.cn)("bg-info-primary w-px")})]},a.title))}),Q&&(0,e.jsx)(ce.VideoModal,{visible:Q,videoUrl:r?.isYoutubeVideo?void 0:r?.videoUrl?.url,youTubeId:r?.isYoutubeVideo?r?.youtubeId:void 0,onCloseModal:()=>X(!1)})]})})});re.displayName="HeroBanner";var je=(0,le.withLayout)(re);

package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.d.ts

@@ -1,24 +1,23 @@
 import React from 'react';
-import type { HeroBannerProps } from './types.js';
+import type { HeroBannerA11yLabels, HeroBannerProps } from './types.js';
 import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
 interface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     data: HeroBannerProps['data'];
     classNames?: Record<string, string>;
+    a11yLabels?: HeroBannerA11yLabels;
     onPrimaryClick?: (data: any, e: any, id?: string) => void;
     onSecondaryClick?: (data: any, e: any, id?: string) => void;
     onTertiaryClick?: (data: any, e: any, id?: string) => void;
 }
 /**
- * HeroBannerCarousel — arrows-only Navigation Swiper wrapping HeroBannerSlide units.
+ * HeroBannerCarousel — Swiper carousel driven by the shared useCarouselPlayback
+ * 2-state machine (AUTOPLAYING / STOPPED; hover interactions removed 2026-09-23).
  *
- * Architecture:
- *  - DECISION-A007: Navigation only, loop=false, slidesPerView=1
- *  - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel
- *  - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount
- *  - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10
- *  - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race
+ * HeroBanner-specific layers kept here on top of the hook:
+ *  - DECISION-A003: ScrollLoadVideo videoRef as imperative pause/play channel
+ *  - 右下角三态视频按钮（暂停/播放/重播，>5s 门控），与轮播控制解耦（2026-10 交互重构）
+ *  - D19 multi-theme playhead switching
+ *  - hero_banner_* GA events (plan §8) fired off the hook's callbacks
  */
 declare const HeroBannerCarousel: React.ForwardRefExoticComponent<HeroBannerCarouselProps & React.RefAttributes<HTMLDivElement>>;
 export default HeroBannerCarousel;

package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js

@@ -1 +1 @@
-"use strict";"use client";var J=Object.create;var L=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(a,l)=>{for(var p in l)L(a,p,{get:l[p],enumerable:!0})},$=(a,l,p,f)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of U(l))!Y.call(a,c)&&c!==p&&L(a,c,{get:()=>l[c],enumerable:!(f=K(l,c))||f.enumerable});return a};var O=(a,l,p)=>(p=a!=null?J(X(a)):{},$(l||!a||!a.__esModule?L(p,"default",{value:a,enumerable:!0}):p,a)),ee=a=>$(L({},"__esModule",{value:!0}),a);var oe={};Z(oe,{default:()=>ie});module.exports=ee(oe);var e=require("react/jsx-runtime"),s=O(require("react")),_=require("swiper/react"),g=require("swiper/modules"),V=require("react-responsive"),F=O(require("../../helpers/ScrollLoadVideo.js")),m=require("../../helpers/index.js"),o=require("../../components/index.js"),se=require("swiper/css"),le=require("swiper/css/navigation"),pe=require("swiper/css/pagination");const te=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),ae=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),re=({data:a,isActive:l,videoRef:p,slideIndex:f,containerSize:c="default",onPrimaryClick:E,onSecondaryClick:I,onTertiaryClick:M})=>{const{pcVideo:d,padVideo:S,mobileVideo:v,pcImage:u,padImage:N,mobileImage:h,isVideoLoop:k=!0,isShowVideo:j,title:R,subtitle:B,label:b,endDate:T,endDate_tz:H,dateFormat:y,iconArray:z,caption:w,blockLink:P,primaryButton:t,secondaryButton:r,tertiaryButton:i,theme:C="light",align:x="left",titleSize:D}=a,W=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),Q=(0,V.useMediaQuery)({query:"(max-width: 1024px)"}),G=W?v?.url||d?.url||"":Q?S?.url||d?.url||v?.url||"":d?.url||v?.url||"";return(0,e.jsxs)("div",{"data-ui-component-id":"HeroBannerSlide",className:(0,m.cn)("text-info-primary relative w-full overflow-hidden",C==="dark"?"aiui-dark":"",c==="default"?"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]"),children:[P&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:P,tabIndex:-1,"aria-hidden":"true"}),j?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{"data-video-poster":"true",className:"absolute inset-0 size-full transition-opacity duration-500",children:(0,e.jsx)(o.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:f===0?"eager":"lazy",fetchPriority:f===0?"high":"auto",alt:u?.alt||"",source:`${u?.url||""} , ${N?.url??(h?.url||"")} 1024, ${h?.url||""} 767`})}),(0,e.jsx)(F.default,{videoRef:p,src:G,poster:void 0,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:k,playsInline:!0,onPlaying:n=>{n.currentTarget.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):(0,e.jsx)(o.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:u?.alt||"",source:`${u?.url||""} , ${N?.url??(h?.url||"")} 1024, ${h?.url||""} 767`}),(0,e.jsxs)("div",{className:(0,m.cn)("laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",x==="center"?"left-1/2 -translate-x-1/2 items-center text-center":"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]"),children:[(0,e.jsxs)("div",{className:(0,m.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",x==="center"?"text-center":"laptop:text-left"),children:[b&&(0,e.jsx)(o.Text,{size:2,as:"p",className:(0,m.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:b}),R&&(0,e.jsx)(o.Heading,{as:D==="4"?"h1":"h2",html:R,size:D?Number(D||"5"):c==="sm"?4:5}),B&&(0,e.jsx)(o.Text,{as:"p",size:2,className:"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",html:B}),T&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(o.Countdown,{endDate:T,endDate_tz:H,dateFormat:y,variant:"spacious",align:x})})]}),(t?.text||r?.text||i?.text)&&(0,e.jsxs)("div",{className:(0,m.cn)("lg-desktop:gap-3 flex flex-wrap items-center gap-2",x==="center"?"justify-center":"laptop:justify-start"),children:[r?.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",as:r?.isCustomSecondaryButton?"button":"a",href:r.link,target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:n=>r?.isCustomSecondaryButton&&I?.(a,n,r?.customSecondaryEventId),children:r.text}),t?.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"primary",as:t?.isCustomPrimaryButton?"button":"a",href:t.link,target:t?.target,rel:t?.target==="_blank"?t?.rel??"noopener noreferrer":t?.rel,onClick:n=>t?.isCustomPrimaryButton&&E?.(a,n,t?.customPrimaryEventId),children:t.text}),i?.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"link",className:"tablet:basis-auto basis-full",as:i?.isCustomTertiaryButton?"button":"a",href:i.link,target:i?.target,rel:i?.target==="_blank"?i?.rel??"noopener noreferrer":i?.rel,onClick:n=>i?.isCustomTertiaryButton&&M?.(a,n,i?.customTertiaryEventId),children:i.text})]}),z&&z.length>0&&(0,e.jsx)("div",{className:(0,m.cn)("flex items-center gap-2",x==="center"?"justify-center":"justify-start"),children:z.map(n=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:n?.pcImage?.alt||"",source:n?.pcImage?.url})},n?.pcImage?.url||n?.pcImage?.alt))})]}),w&&w.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:w.map((n,A)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(o.Text,{size:2,className:"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]",html:n.title}),A<w.length-1&&(0,e.jsx)("div",{className:"bg-info-primary w-px"})]},n.title))})]})},q=s.default.forwardRef(({data:a,className:l,classNames:p={},onPrimaryClick:f,onSecondaryClick:c,onTertiaryClick:E,...I},M)=>{const d=a.items||[],S=a.carousel,v=a.size??"default",u=(0,s.useRef)(null),[N,h]=(0,s.useState)(0),[k,j]=(0,s.useState)(null),B=(d[N]?.theme??"light")==="dark";(0,s.useEffect)(()=>{const t=u.current;!t||!k||t.pagination&&(t.pagination.el=k,t.pagination.init(),t.pagination.render(),t.pagination.update())},[k]);const b=(0,s.useRef)(d.map(()=>s.default.createRef())),T=(S?.showArrows??!0)&&d.length>1,H=S?.showDots??!0,y=S?.autoplaySeconds,z=y!==void 0&&y>0?[g.Navigation,g.Pagination,g.Autoplay]:[g.Navigation,g.Pagination],w=y!==void 0&&y>0?{delay:Math.max(y*1e3,3e3),disableOnInteraction:!1}:!1;(0,s.useEffect)(()=>{b.current.forEach((t,r)=>{r!==0&&t.current&&(t.current.pause(),t.current.currentTime=0)})},[]);const P=(0,s.useCallback)(t=>{const r=t.realIndex;b.current.forEach((C,x)=>{x!==r&&C.current&&(C.current.pause(),C.current.currentTime=0)});const i=b.current[r];i?.current&&i.current.paused&&i.current.play()?.catch(()=>{}),h(r)},[]);return(0,e.jsxs)("div",{ref:M,className:(0,m.cn)("hero-banner-carousel group relative w-full overflow-hidden",v==="default"?"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]",{"aiui-dark":d[N]?.theme==="dark"},l),...I,children:[(0,e.jsx)(_.Swiper,{onSwiper:t=>u.current=t,onSlideChange:P,modules:z,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:w,pagination:H?{clickable:!0,el:k,renderBullet:(t,r)=>`<span class="${r} banner-dot"></span>`}:!1,children:d.map((t,r)=>(0,e.jsx)(_.SwiperSlide,{children:({isActive:i})=>(0,e.jsx)(re,{data:t,isActive:i,slideIndex:r,videoRef:b.current[r],containerSize:v,onPrimaryClick:f,onSecondaryClick:c,onTertiaryClick:E})},r))}),T&&(0,e.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>u.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(te,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>u.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(ae,{})})]}),H&&(0,e.jsx)("div",{ref:j,style:{"--swiper-pagination-bottom":"0px"},className:(0,m.cn)("hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100",{"aiui-dark":B})})]})});q.displayName="HeroBannerCarousel";var ie=q;
+"use strict";"use client";var Ie=Object.create;var Q=Object.defineProperty;var je=Object.getOwnPropertyDescriptor;var qe=Object.getOwnPropertyNames;var Oe=Object.getPrototypeOf,$e=Object.prototype.hasOwnProperty;var Ue=(r,v)=>{for(var f in v)Q(r,f,{get:v[f],enumerable:!0})},ve=(r,v,f,_)=>{if(v&&typeof v=="object"||typeof v=="function")for(let T of qe(v))!$e.call(r,T)&&T!==f&&Q(r,T,{get:()=>v[T],enumerable:!(_=je(v,T))||_.enumerable});return r};var ge=(r,v,f)=>(f=r!=null?Ie(Oe(r)):{},ve(v||!r||!r.__esModule?Q(f,"default",{value:r,enumerable:!0}):f,r)),We=r=>ve(Q({},"__esModule",{value:!0}),r);var Ke={};Ue(Ke,{default:()=>Je});module.exports=We(Ke);var n=require("react/jsx-runtime"),a=ge(require("react")),X=require("swiper/react"),be=ge(require("../../helpers/ScrollLoadVideo.js")),E=require("../../helpers/index.js"),P=require("./mediaResolver.js"),c=require("../../components/index.js"),ye=require("../../hooks/useCarouselPlayback.js"),H=require("../../shared/CarouselControls.js"),he=require("../../shared/track.js"),O=require("../../shared/trackUrlRef.js"),xe=require("../../hooks/useExposure.js"),Xe=require("swiper/css");const Ge=({data:r,isActive:v,videoRef:f,slideIndex:_,containerSize:T="default",theme:Z="light",slideLabel:ee,linkRefId:k,onPrimaryClick:V,onSecondaryClick:d,onTertiaryClick:A})=>{const{pcImage:$,isVideoLoop:h=!0,isShowVideo:te,title:N,subtitle:F,label:z,endDate:R,endDate_tz:w,dateFormat:U,iconArray:b,caption:B,blockLink:M,primaryButton:u,secondaryButton:p,tertiaryButton:s,align:g="left",titleSize:D}=r,x=(0,P.useMediaTier)(),S=(0,P.buildPictureSource)(r),W=(0,P.resolveTierMedia)(r,"lgDesktop","image")?.alt||$?.alt||"",ne=(0,P.resolveTierMedia)(r,x,"video")?.url||"",re=!!S&&!/\.(mp4|mov|webm|m4v)(\?|$)/i.test(S);return(0,n.jsxs)("div",{"data-ui-component-id":"HeroBannerSlide",role:"group","aria-roledescription":"slide","aria-label":ee,className:(0,E.cn)("text-info-primary relative w-full overflow-hidden transition-colors duration-500",Z==="dark"&&"aiui-dark",T==="default"?"tablet:aspect-[768/560] laptop:aspect-[1024/400] desktop:aspect-[1440/560] lg-desktop:aspect-[1920/800] aspect-[390/560]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]"),children:[M&&(0,n.jsx)("a",{className:"absolute inset-0 z-10",href:k?(0,O.trackUrlRef)(M,k):M,tabIndex:-1,"aria-hidden":"true"}),te?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(be.default,{videoRef:f,src:ne,poster:void 0,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:h,playsInline:!0,onPlaying:i=>{i.currentTarget.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")},onWaiting:i=>{const C=i.currentTarget;if(C.currentTime>=.5)return;C.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.remove("opacity-0")}}),re&&(0,n.jsx)("div",{"data-video-poster":"true",className:"pointer-events-none absolute inset-0 size-full transition-opacity duration-500",children:(0,n.jsx)(c.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:_===0?"eager":"lazy",fetchPriority:_===0?"high":"auto",alt:W,source:S})})]}):(0,n.jsx)(c.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:W,source:S}),(0,n.jsxs)("div",{className:(0,E.cn)("laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] pointer-events-none absolute top-24 z-10 flex w-full flex-col gap-[24px] transition-colors duration-500",g==="center"?"left-1/2 -translate-x-1/2 items-center text-center":"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]"),children:[(0,n.jsxs)("div",{className:(0,E.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px] transition-colors duration-500",g==="center"?"text-center":"laptop:text-left"),children:[z&&(0,n.jsx)(c.Text,{size:2,as:"p",className:(0,E.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:z}),N&&(0,n.jsx)(c.Heading,{as:D==="4"?"h1":"h2",html:N,size:D?Number(D||"5"):T==="sm"?4:5}),F&&(0,n.jsx)(c.Text,{as:"p",size:2,className:"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",html:F}),R&&(0,n.jsx)("div",{className:"mt-3",children:(0,n.jsx)(c.Countdown,{endDate:R,endDate_tz:w,dateFormat:U,variant:"spacious",align:g})})]}),(u?.text||p?.text||s?.text)&&(0,n.jsxs)("div",{className:(0,E.cn)("lg-desktop:gap-3 pointer-events-auto flex flex-wrap items-center gap-2",g==="center"?"justify-center":"laptop:justify-start"),children:[p?.text&&(0,n.jsx)(c.Button,{size:"lg",variant:"secondary",as:p?.isCustomSecondaryButton?"button":"a",href:k?(0,O.trackUrlRef)(p.link,k):p.link,target:p?.target,rel:p?.target==="_blank"?p?.rel??"noopener noreferrer":p?.rel,onClick:i=>p?.isCustomSecondaryButton&&d?.(r,i,p?.customSecondaryEventId),children:p.text}),u?.text&&(0,n.jsx)(c.Button,{size:"lg",variant:"primary",as:u?.isCustomPrimaryButton?"button":"a",href:k?(0,O.trackUrlRef)(u.link,k):u.link,target:u?.target,rel:u?.target==="_blank"?u?.rel??"noopener noreferrer":u?.rel,onClick:i=>u?.isCustomPrimaryButton&&V?.(r,i,u?.customPrimaryEventId),children:u.text}),s?.text&&(0,n.jsx)(c.Button,{size:"lg",variant:"link",className:"tablet:basis-auto basis-full",as:s?.isCustomTertiaryButton?"button":"a",href:k?(0,O.trackUrlRef)(s.link,k):s.link,target:s?.target,rel:s?.target==="_blank"?s?.rel??"noopener noreferrer":s?.rel,onClick:i=>s?.isCustomTertiaryButton&&A?.(r,i,s?.customTertiaryEventId),children:s.text})]}),b&&b.length>0&&(0,n.jsx)("div",{className:(0,E.cn)("flex items-center gap-2",g==="center"?"justify-center":"justify-start"),children:b.map(i=>(0,n.jsx)("div",{className:"h-12",children:(0,n.jsx)(c.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:i?.pcImage?.alt||"",source:i?.pcImage?.url})},i?.pcImage?.url||i?.pcImage?.alt))})]}),B&&B.length>0&&(0,n.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] pointer-events-none absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:B.map((i,C)=>(0,n.jsxs)(a.default.Fragment,{children:[(0,n.jsx)(c.Text,{size:2,className:"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]",html:i.title}),C<B.length-1&&(0,n.jsx)("div",{className:"bg-info-primary w-px"})]},i.title))})]})},Ye={prevSlide:"Previous slide",nextSlide:"Next slide",pauseAutoplay:"Pause autoplay",playAutoplay:"Play autoplay",pauseVideo:"Pause video",playVideo:"Play video",slideStatus:"Slide",carouselLabel:"Banner carousel"},fe=a.default.forwardRef(({data:r,className:v,classNames:f={},a11yLabels:_,onPrimaryClick:T,onSecondaryClick:Z,onTertiaryClick:ee,...k},V)=>{const d=r.items||[],A=r.carousel,$=A?.size??r.size??"default",h={...Ye,..._},te=(0,a.useRef)(null),[N,F]=(0,a.useState)(null),[z,R]=(0,a.useState)(null),[w,U]=(0,a.useState)(null),b=(0,a.useRef)(d);(0,a.useEffect)(()=>{b.current=d});const B=e=>e!==void 0&&e!==999&&e>=5,M=e=>e!==void 0&&e!==999&&e>=1&&e<=30,u=A?.autoplaySeconds,p=e=>{const t=e?.autoplaySeconds;return M(t)?t:B(u)?u:void 0},s=d.length>1&&d.some(e=>p(e)!==void 0),g=(0,a.useRef)(d.map(()=>a.default.createRef())),D=(A?.showArrows??!0)&&d.length>1,x=(0,a.useCallback)((e,t)=>{(0,he.gaTrack)({event:"ga4Event",event_name:e,event_parameters:t})},[]),S=(0,a.useCallback)(e=>b.current[e]?.isShowVideo?"video":"image",[]),W=(0,a.useCallback)((e,t)=>{t==="swipe"&&x("hero_banner_swipe",{to_index:e}),x("hero_banner_slide_view",{index:e,total:b.current.length,media_type:S(e),trigger:t})},[x,S]),ne=(0,a.useCallback)((e,t,o)=>{x("hero_banner_arrow_click",{direction:e,from_index:t,to_index:o})},[x]),re=(0,a.useCallback)((e,t)=>{x(e?"hero_banner_pause":"hero_banner_resume",{index:t,media_type:S(t)})},[x,S]),i=(0,a.useCallback)(e=>{g.current.forEach((o,y)=>{y!==e&&o.current&&(o.current.pause(),o.current.currentTime=0)});const t=g.current[e];t?.current&&(t.current.currentTime=0,t.current.play()?.catch(()=>{}))},[]),{rootRef:C,activeIndex:l,playbackState:Se,resetNonce:Te,announcement:ke,activeFrameIntervalSec:se,isTimerRunning:Ce,handleSwiperInit:we,handleSlideChange:Le,handleTransitionEnd:Ee,handleSliderFirstMove:_e,goToSlide:le,handlePausePlayClick:Ve,notifyVideoPlaying:ce,handleFocus:Pe,handleBlur:Ne}=(0,ye.useCarouselPlayback)({frameCount:d.length,resolveFrameIntervalSec:e=>p(d[e]),isAutoplayEnabled:s,swiperRef:te,slideStatusLabel:h.slideStatus,onSlideMediaSync:i,onSlideChange:W,onArrowNavigate:ne,delaysCountdownForVideo:e=>!!b.current[e]?.isShowVideo,onPauseToggle:(e,t)=>{re(e,t);const o=g.current[t]?.current;o&&(e?o.pause():o.ended||o.play()?.catch(()=>{}))}}),Be=(0,a.useCallback)(e=>{C.current=e,typeof V=="function"?V(e):V&&(V.current=e)},[V,C]),He=r.title?.trim()||r.subtitle?.trim()||r.pcImage?.alt?.trim()||void 0,Ae=r.subtitle&&r.subtitle.trim()||"";(0,xe.useExposure)(C,{componentType:"image",componentName:"hero_banner",componentTitle:He,componentDescription:Ae}),(0,a.useEffect)(()=>{F(null),R(null);const e=b.current[l],t=g.current[l]?.current;if(!e?.isShowVideo||!t)return;const o=()=>F(t.ended?"ended":t.paused?"paused":"playing"),y=()=>R(Number.isFinite(t.duration)?t.duration:null),G=()=>{o(),ce(l)};return o(),y(),t.addEventListener("playing",G),t.addEventListener("pause",o),t.addEventListener("ended",o),t.addEventListener("loadedmetadata",y),()=>{t.removeEventListener("playing",G),t.removeEventListener("pause",o),t.removeEventListener("ended",o),t.removeEventListener("loadedmetadata",y)}},[l,ce]),(0,a.useEffect)(()=>{const e=b.current[l];if(!e?.isShowVideo||!e?.isMultiThemeEnabled)return;const t=g.current[l]?.current;if(!t)return;const o=(m,L,K,ie)=>{if(!(!m||typeof L!="number"||typeof K!="number"||typeof ie!="number"))return ie>=L&&ie<K?m:void 0};let y=null;const G=m=>{y=m,U(L=>L&&L.index===l&&L.theme===m?L:{index:l,theme:m})},pe=m=>{G(o(e.theme_1,e.star_time_1,e.end_time_1,m)??o(e.theme_2,e.star_time_2,e.end_time_2,m)??e.theme??"light")},Y=t;let j=0,q=0;const ae=typeof Y.requestVideoFrameCallback=="function",De=()=>ae?q!==0:j!==0,oe=()=>{if(!De())if(ae){const m=(L,K)=>{pe(K.mediaTime),q=Y.requestVideoFrameCallback(m)};q=Y.requestVideoFrameCallback(m)}else{const m=()=>{pe(t.currentTime),j=requestAnimationFrame(m)};j=requestAnimationFrame(m)}},J=()=>{ae?(Y.cancelVideoFrameCallback?.(q),q=0):(cancelAnimationFrame(j),j=0)},me=()=>{J(),y&&U({index:l,theme:y})};return t.addEventListener("play",oe),t.addEventListener("pause",J),t.addEventListener("ended",me),!t.paused&&!t.ended&&oe(),()=>{J(),t.removeEventListener("play",oe),t.removeEventListener("pause",J),t.removeEventListener("ended",me)}},[l]),(0,a.useEffect)(()=>{g.current.forEach((e,t)=>{t!==0&&e.current&&(e.current.pause(),e.current.currentTime=0)})},[]),(0,a.useEffect)(()=>{b.current.length!==0&&x("hero_banner_slide_view",{index:0,total:b.current.length,media_type:S(0),trigger:"initial"})},[x,S]);const Fe=!!d[l]?.isShowVideo,de=se!==void 0,I=!de&&Fe&&z!==null&&z>5&&N!=="ended"&&N!==null,ze=de||I,Re=I?N==="paused":Se==="STOPPED",Me=()=>{if(!I){Ve();return}const e=g.current[l]?.current;e&&(e.paused?e.play()?.catch(()=>{}):e.pause())},ue=w&&w.index===l?w.theme:d[l]?.theme;return(0,n.jsxs)("div",{ref:Be,role:"region","aria-roledescription":"carousel","aria-label":h.carouselLabel,onFocus:Pe,onBlur:Ne,className:(0,E.cn)("hero-banner-carousel group relative w-full overflow-hidden",$==="default"?"tablet:aspect-[768/560] laptop:aspect-[1024/400] desktop:aspect-[1440/560] lg-desktop:aspect-[1920/800] aspect-[390/560]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]",f.root,v),...k,children:[(0,n.jsx)(X.Swiper,{onSwiper:we,onSlideChange:Le,onSlideChangeTransitionEnd:Ee,onSliderFirstMove:_e,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,children:d.map((e,t)=>{const o=w&&w.index===t?w.theme:e.theme??"light";return(0,n.jsx)(X.SwiperSlide,{children:({isActive:y})=>(0,n.jsx)(Ge,{data:e,isActive:y,slideIndex:t,slideLabel:`${h.slideStatus} ${t+1} / ${d.length}`,videoRef:g.current[t],containerSize:$,theme:o,linkRefId:`image_hero_banner_${t+1}`,onPrimaryClick:T,onSecondaryClick:Z,onTertiaryClick:ee})},t)})}),D&&(0,n.jsx)(H.CarouselArrows,{onPrev:()=>le("prev"),onNext:()=>le("next"),prevLabel:h.prevSlide,nextLabel:h.nextSlide}),s&&(0,n.jsx)(H.CarouselProgressControls,{frameCount:d.length,activeIndex:l,resetNonce:Te,activeFrameIntervalSec:se,isAutoplayEnabled:s,isTimerRunning:Ce,classPrefix:"hero-banner",theme:ue}),ze&&(0,n.jsx)(H.CarouselCornerToggle,{isPaused:Re,onToggle:Me,pausedLabel:I?h.playVideo:h.playAutoplay,playingLabel:I?h.pauseVideo:h.pauseAutoplay,classPrefix:"hero-banner",theme:ue}),(0,n.jsx)("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:ke})]})});fe.displayName="HeroBannerCarousel";var Je=fe;

package/dist/cjs/biz-components/HeroBanner/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './HeroBanner.js';
 export type { JumpOptions } from './HeroBanner.js';
+export type { HeroBannerProps, HeroBannerSlideData, HeroBannerCarouselConfig, HeroBannerA11yLabels, HeroBannerMediaTier, HeroBannerTieredMedia, HeroBannerTieredMediaFields, HeroBannerMultiThemeFields, } from './types.js';
+export { resolveTierMedia, buildPictureSource } from './mediaResolver.js';
+export type { MediaTier, MediaKind, TieredMediaFields, TieredMediaSources } from './mediaResolver.js';

package/dist/cjs/biz-components/HeroBanner/index.js

@@ -1 +1 @@
-"use strict";var a=Object.create;var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var i=(e,o)=>{for(var r in o)t(e,r,{get:o[r],enumerable:!0})},m=(e,o,r,f)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of u(o))!d.call(e,p)&&p!==r&&t(e,p,{get:()=>o[p],enumerable:!(f=s(o,p))||f.enumerable});return e};var j=(e,o,r)=>(r=e!=null?a(x(e)):{},m(o||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),l=e=>m(t({},"__esModule",{value:!0}),e);var y={};i(y,{default:()=>n.default});module.exports=l(y);var n=j(require("./HeroBanner.js"));
+"use strict";var p=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var m=(e,r)=>{for(var o in r)a(e,o,{get:r[o],enumerable:!0})},s=(e,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of B(r))!M.call(e,i)&&i!==o&&a(e,i,{get:()=>r[i],enumerable:!(d=l(r,i))||d.enumerable});return e};var u=(e,r,o)=>(o=e!=null?p(H(e)):{},s(r||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),T=e=>s(a({},"__esModule",{value:!0}),e);var f={};m(f,{buildPictureSource:()=>n.buildPictureSource,default:()=>t.default,resolveTierMedia:()=>n.resolveTierMedia});module.exports=T(f);var t=u(require("./HeroBanner.js")),n=require("./mediaResolver.js");

package/dist/cjs/biz-components/HeroBanner/mediaResolver.d.ts

@@ -0,0 +1,58 @@
+import type { Media } from '../../types/props.js';
+/**
+ * 5-breakpoint media tiers, mapped to the Tailwind preset boundaries:
+ *   lgDesktop ≥1920 | desktop 1440-1919 | laptop 1025-1439 | tablet 768-1024 | mobile <768
+ */
+export type MediaTier = 'lgDesktop' | 'desktop' | 'laptop' | 'tablet' | 'mobile';
+export type MediaKind = 'image' | 'video';
+/**
+ * Structured per-tier media bag. `media.sources[tier]` takes precedence over
+ * the flat fields for the same tier.
+ */
+export interface TieredMediaSources {
+    sources?: Partial<Record<MediaTier, {
+        image?: Media;
+        video?: Media;
+    }>>;
+}
+/**
+ * All media-bearing fields the resolver understands. Both HeroBannerProps['data']
+ * and HeroBannerSlideData structurally satisfy this interface.
+ */
+export interface TieredMediaFields {
+    /** Legacy PC tier (≥1025) — mapped to the `laptop` tier */
+    pcImage?: Media;
+    /** Legacy pad tier (768-1024) — mapped to the `tablet` tier */
+    padImage?: Media;
+    /** Legacy mobile tier (<768) — mapped to the `mobile` tier */
+    mobileImage?: Media;
+    pcVideo?: Media;
+    padVideo?: Media;
+    mobileVideo?: Media;
+    /** New-tier flat fields (CMS parity) */
+    lgDesktopImage?: Media;
+    desktopImage?: Media;
+    lgDesktopVideo?: Media;
+    desktopVideo?: Media;
+    /** Optional structured form — takes precedence over flat fields */
+    media?: TieredMediaSources;
+}
+/**
+ * Resolve the effective media for a tier, walking the tier fallback chain.
+ * Returns undefined when nothing in the chain resolves.
+ */
+export declare const resolveTierMedia: (data: TieredMediaFields, tier: MediaTier, kind: MediaKind) => Media | undefined;
+/**
+ * Build a Picture `source` string covering all 5 tiers. Only tiers that
+ * resolve are emitted; unresolved tiers simply fall through to the next
+ * matching <source> (which the resolver chain already filled where possible).
+ * Legacy 3-field data produces output that renders pixel-identically to the
+ * legacy hand-written descriptor.
+ */
+export declare const buildPictureSource: (data: TieredMediaFields) => string;
+/**
+ * SSR-safe 5-tier detection matching the Tailwind preset boundaries exactly.
+ * When no query matches (SSR / tests with all-false mock) the desktop-most
+ * tier is returned, mirroring the legacy "default to PC" behavior.
+ */
+export declare const useMediaTier: () => MediaTier;

package/dist/cjs/biz-components/HeroBanner/mediaResolver.js

@@ -0,0 +1 @@
+"use strict";"use client";var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},b=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of n(t))!m.call(e,p)&&p!==i&&a(e,p,{get:()=>t[p],enumerable:!(o=l(t,p))||o.enumerable});return e};var k=e=>b(a({},"__esModule",{value:!0}),e);var I={};c(I,{buildPictureSource:()=>D,resolveTierMedia:()=>s,useMediaTier:()=>f});module.exports=k(I);var r=require("react-responsive");const u={lgDesktop:["lgDesktop","desktop","laptop","tablet","mobile"],desktop:["desktop","lgDesktop","laptop","tablet","mobile"],laptop:["laptop","desktop","lgDesktop","tablet","mobile"],tablet:["tablet","mobile","laptop","desktop","lgDesktop"],mobile:["mobile","tablet","laptop","desktop","lgDesktop"]},M={lgDesktop:["lgDesktop","desktop","laptop","tablet","mobile"],desktop:["desktop","lgDesktop","laptop","tablet","mobile"],laptop:["laptop","desktop","lgDesktop","tablet","mobile"],tablet:["tablet","laptop","mobile","desktop","lgDesktop"],mobile:["mobile","tablet","laptop","desktop","lgDesktop"]},g=(e,t,i)=>{const o=e.media?.sources?.[t]?.[i];if(o)return o;if(i==="image")switch(t){case"lgDesktop":return e.lgDesktopImage;case"desktop":return e.desktopImage;case"laptop":return e.pcImage;case"tablet":return e.padImage;case"mobile":return e.mobileImage}switch(t){case"lgDesktop":return e.lgDesktopVideo;case"desktop":return e.desktopVideo;case"laptop":return e.pcVideo;case"tablet":return e.padVideo;case"mobile":return e.mobileVideo}},s=(e,t,i)=>{const o=(i==="image"?u:M)[t];for(const p of o){const d=g(e,p,i);if(d?.url)return d}},T=[{tier:"lgDesktop"},{tier:"desktop",breakpoint:1919},{tier:"laptop",breakpoint:1439},{tier:"tablet",breakpoint:1024},{tier:"mobile",breakpoint:767}],D=e=>{const t=[];for(const{tier:i,breakpoint:o}of T){const p=s(e,i,"image")?.url;p&&t.push(o?`${p} ${o}`:p)}return t.join(", ")},f=()=>{const e=(0,r.useMediaQuery)({query:"(max-width: 767px)"}),t=(0,r.useMediaQuery)({query:"(min-width: 768px) and (max-width: 1024px)"}),i=(0,r.useMediaQuery)({query:"(min-width: 1025px) and (max-width: 1439px)"}),o=(0,r.useMediaQuery)({query:"(min-width: 1440px) and (max-width: 1919px)"});return e?"mobile":t?"tablet":i?"laptop":o?"desktop":"lgDesktop"};

package/dist/cjs/biz-components/HeroBanner/types.d.ts

@@ -1,9 +1,70 @@
 import type { ButtonProps } from '../../components/button.js';
 import type { Media, Theme } from '../../types/props.js';
 type TitleSizeType = '5' | '4' | '3' | '2' | '1';
+/** 5-breakpoint media tier keys (Tailwind preset boundaries). */
+export type HeroBannerMediaTier = 'lgDesktop' | 'desktop' | 'laptop' | 'tablet' | 'mobile';
 /**
- * Carousel navigation configuration for HeroBanner. v1: arrows only.
- * autoplay, dots, and progress are intentionally EXCLUDED from v1.
+ * Structured per-tier media. `media.sources[tier]` takes precedence over the
+ * flat fields (`lgDesktopImage`/`desktopImage`/legacy `pcImage`/`padImage`/`mobileImage`).
+ */
+export interface HeroBannerTieredMedia {
+    sources: Partial<Record<HeroBannerMediaTier, {
+        image?: Media;
+        video?: Media;
+    }>>;
+}
+/** New-tier flat fields + structured media, shared by banner data and slides. */
+export interface HeroBannerTieredMediaFields {
+    /** ≥1920 image (CMS flat field) */
+    lgDesktopImage?: Media;
+    /** 1440-1919 image (CMS flat field) */
+    desktopImage?: Media;
+    /** ≥1920 video (CMS flat field) */
+    lgDesktopVideo?: Media;
+    /** 1440-1919 video (CMS flat field) */
+    desktopVideo?: Media;
+    /** Structured 5-tier media — takes precedence over the flat fields */
+    media?: HeroBannerTieredMedia;
+}
+/** Video multi-theme window (D19): times are seconds relative to the video playhead. */
+export interface HeroBannerMultiThemeFields {
+    /** Enable playhead-driven theme switching for this video frame @default false */
+    isMultiThemeEnabled?: boolean;
+    theme_1?: 'light' | 'dark';
+    /** Window 1 start (seconds, inclusive) */
+    star_time_1?: number;
+    /** Window 1 end (seconds, exclusive) */
+    end_time_1?: number;
+    theme_2?: 'light' | 'dark';
+    /** Window 2 start (seconds, inclusive) */
+    star_time_2?: number;
+    /** Window 2 end (seconds, exclusive) */
+    end_time_2?: number;
+}
+/**
+ * Accessibility label overrides for HeroBanner carousel controls.
+ * All labels default to English; override per-locale as needed.
+ */
+export interface HeroBannerA11yLabels {
+    /** Accessible name for the previous-slide arrow @default 'Previous slide' */
+    prevSlide?: string;
+    /** Accessible name for the next-slide arrow @default 'Next slide' */
+    nextSlide?: string;
+    /** Accessible name for the pause button while autoplaying @default 'Pause autoplay' */
+    pauseAutoplay?: string;
+    /** Accessible name for the play button while stopped @default 'Play autoplay' */
+    playAutoplay?: string;
+    /** Accessible name for the corner video button while the video is playing @default 'Pause video' */
+    pauseVideo?: string;
+    /** Accessible name for the corner video button while the video is paused @default 'Play video' */
+    playVideo?: string;
+    /** Slide status noun, used as `{slideStatus} {n} / {total}` @default 'Slide' */
+    slideStatus?: string;
+    /** Accessible name for the carousel region @default 'Banner carousel' */
+    carouselLabel?: string;
+}
+/**
+ * Carousel navigation configuration for HeroBanner.
  */
 export interface HeroBannerCarouselConfig {
     /**
@@ -12,15 +73,32 @@ export interface HeroBannerCarouselConfig {
      * @default true
      */
     showArrows?: boolean;
+    /**
+     * Unified size applied to all carousel frames (CMS 轮播配置 → 尺寸).
+     * Takes precedence over top-level data.size in carousel mode.
+     */
+    size?: 'default' | 'sm';
+    /**
+     * @deprecated The legacy Swiper bullet dots are replaced by the fixed
+     * segmented progress + pause/play control cluster. This field is kept for
+     * type compatibility only and no longer affects rendering.
+     */
     showDots?: boolean;
+    /**
+     * @deprecated Loop is always enabled; this field is ignored.
+     */
     loop?: boolean;
+    /**
+     * 全局默认自动轮播间隔（秒）。`999` / 缺省 / `<5` = 不自动轮播（静态展示首帧）。
+     * 可被单帧 `items[i].autoplaySeconds`（1-30 秒）覆盖。
+     */
     autoplaySeconds?: number;
 }
 /**
  * Per-slide data for HeroBanner carousel mode.
  * Mirrors the single-banner data shape; no nested carousels allowed in v1.
  */
-export interface HeroBannerSlideData {
+export interface HeroBannerSlideData extends HeroBannerTieredMediaFields, HeroBannerMultiThemeFields {
     title: string;
     subtitle: string;
     pcImage: Media;
@@ -62,6 +140,11 @@ export interface HeroBannerSlideData {
         customTertiaryEventId?: string;
     } & Omit<ButtonProps, 'children'>;
     theme?: Theme;
+    /**
+     * 单帧轮播间隔（秒），覆盖全局默认间隔。可选范围 1-30 秒，不允许 999；
+     * 缺省/无效值时回退全局 `carousel.autoplaySeconds`。
+     */
+    autoplaySeconds?: number;
     size?: 'default' | 'sm';
     titleSize?: TitleSizeType;
     align?: 'left' | 'center';
@@ -90,6 +173,16 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
         pcVideo?: Media;
         padVideo?: Media;
         mobileVideo?: Media;
+        /** ≥1920 image (CMS flat field) */
+        lgDesktopImage?: Media;
+        /** 1440-1919 image (CMS flat field) */
+        desktopImage?: Media;
+        /** ≥1920 video (CMS flat field) */
+        lgDesktopVideo?: Media;
+        /** 1440-1919 video (CMS flat field) */
+        desktopVideo?: Media;
+        /** Structured 5-tier media — takes precedence over the flat fields */
+        media?: HeroBannerTieredMedia;
         isShowVideo?: boolean;
         /** 视频是否循环播放 */
         isVideoLoop?: boolean;
@@ -127,7 +220,11 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
         } & Omit<ButtonProps, 'children'>;
         /** 主题 */
         theme?: Theme;
-        /** 大小, 默认default,单banner, 可选sm, 用于多banner场景 */
+        /**
+         * 大小, 默认default,单banner。default 使用 5 档固定高度表（560/560/400/560/800）。
+         * `sm`（多 banner 场景的旧等比高度）保留可用。
+         * @deprecated 变体 `sm` 已废弃，仅存量兼容保留；新页面请使用 `default`。
+         */
         size?: 'default' | 'sm';
         titleSize?: TitleSizeType;
         /** 内容对齐方式 */
@@ -137,8 +234,14 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
             title: string;
         }>;
         /**
-         * Carousel slide items. When present and non-empty, activates carousel mode.
-         * Single-banner mode is used when this field is absent or empty.
+         * 展示模式（CMS 配置）。'single' 时强制单帧渲染并忽略 items——
+         * 兼容线上"轮播数据未清"的脏数据场景（1505）。
+         */
+        mode?: 'single' | 'carousel';
+        /**
+         * Carousel slide items. When present and non-empty, activates carousel mode
+         * (unless mode === 'single'). Single-banner mode is used when this field is
+         * absent or empty.
          * DECISION-002: items absence = legacy single-banner path.
          */
         items?: HeroBannerSlideData[];
@@ -153,8 +256,13 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
          */
         enableParallax?: boolean;
     };
-    onSecondaryClick?: (data: any, e: any, customPrimaryEventId?: string) => void;
-    onPrimaryClick?: (data: any, e: any, customSecondaryEventId?: string) => void;
+    onSecondaryClick?: (data: any, e: any, customSecondaryEventId?: string) => void;
+    onPrimaryClick?: (data: any, e: any, customPrimaryEventId?: string) => void;
     onTertiaryClick?: (data: any, e: any, customTertiaryEventId?: string) => void;
+    /**
+     * Accessibility label overrides for carousel controls (arrows, pause/play,
+     * replay, live announcements). Defaults are English.
+     */
+    a11yLabels?: HeroBannerA11yLabels;
 }
 export {};

package/dist/cjs/biz-components/HeroBanner/types.js

@@ -1 +1 @@
-"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var d=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of s(t))!l.call(e,o)&&o!==r&&n(e,o,{get:()=>t[o],enumerable:!(i=a(t,o))||i.enumerable});return e};var m=e=>d(n({},"__esModule",{value:!0}),e);var u={};module.exports=m(u);
+"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var l=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of s(e))!d.call(t,i)&&i!==r&&n(t,i,{get:()=>e[i],enumerable:!(o=a(e,i))||o.enumerable});return t};var m=t=>l(n({},"__esModule",{value:!0}),t);var u={};module.exports=m(u);

package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.d.ts

@@ -1,21 +1,21 @@
 import React from 'react';
-import type { SecondaryBannerData, SecondaryBannerSemanticName, JumpOptions } from './index.js';
+import type { SecondaryBannerA11yLabels, SecondaryBannerData, SecondaryBannerSemanticName, JumpOptions } from './index.js';
 import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
 interface SecondaryBannerCarouselProps extends React.HTMLAttributes<HTMLElement> {
     data: SecondaryBannerData;
     classNames?: Partial<Record<SecondaryBannerSemanticName, string>>;
     jumpOptions?: JumpOptions;
+    a11yLabels?: SecondaryBannerA11yLabels;
 }
 /**
- * SecondaryBannerCarousel — arrows-only Navigation Swiper wrapping SecondaryBanner slides.
+ * SecondaryBannerCarousel — Swiper carousel sharing HeroBanner's playback
+ * state machine (useCarouselPlayback, plan §3/§9 Iter 3).
  *
- * Architecture:
- *  - DECISION-A007: Navigation only, loop=false, slidesPerView=1
- *  - DECISION-A005: isActive pass-through to SecondaryBanner; querySelectorAll for video pause
- *  - DECISION-008:  SecondaryBanner.isActive => autoPlay={isActive ?? true}
- *  - DECISION-A006: arrow buttons at z-[20], above any overlay
+ * Frames are image-only this round: no video play-once/replay/multi-theme —
+ * the hook's video-specific surface stays unwired. The legacy
+ * `carousel.autoplaySeconds` keeps its old semantics (`> 0` enables, clamped
+ * to ≥3s); `showDots`/`loop` are deprecated and ignored (fixed segmented
+ * progress + pause/play cluster, loop always on).
  */
 declare const SecondaryBannerCarousel: React.ForwardRefExoticComponent<SecondaryBannerCarouselProps & React.RefAttributes<HTMLElement>>;
 export default SecondaryBannerCarousel;

package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.js

@@ -1 +1 @@
-"use strict";"use client";var I=Object.create;var h=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var W=(t,i)=>{for(var o in i)h(t,o,{get:i[o],enumerable:!0})},L=(t,i,o,f)=>{if(i&&typeof i=="object"||typeof i=="function")for(let c of q(i))!J.call(t,c)&&c!==o&&h(t,c,{get:()=>i[c],enumerable:!(f=H(i,c))||f.enumerable});return t};var E=(t,i,o)=>(o=t!=null?I(V(t)):{},L(i||!t||!t.__esModule?h(o,"default",{value:t,enumerable:!0}):o,t)),$=t=>L(h({},"__esModule",{value:!0}),t);var Q={};W(Q,{default:()=>K});module.exports=$(Q);var e=require("react/jsx-runtime"),r=E(require("react")),v=require("swiper/react"),l=require("swiper/modules"),x=require("../../helpers/index.js"),_=E(require("./index.js")),B=require("./index.js"),Y=require("swiper/css"),Z=require("swiper/css/navigation"),ee=require("swiper/css/pagination");const F=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),G=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),N=r.default.forwardRef(({data:t,className:i,classNames:o,jumpOptions:f,...c},T)=>{const m=t.items||[],S=t.carousel,M=t.size??"base",p=(0,r.useRef)(null),[z,R]=(0,r.useState)(0),[y,j]=(0,r.useState)(null);(0,r.useEffect)(()=>{const n=p.current;!n||!y||n.pagination&&(n.pagination.el=y,n.pagination.init(),n.pagination.render(),n.pagination.update())},[y]);const k=(m[z]?.theme??"light")==="dark";(0,r.useEffect)(()=>{const n=()=>{const a=p.current;if(a)if(document.visibilityState==="hidden")a.autoplay?.stop();else{a.autoplay?.start();const u=a.realIndex??0;g.current.forEach((s,w)=>{s.current&&s.current.querySelectorAll("video").forEach(b=>{w!==u&&b.pause()})})}};return document.addEventListener("visibilitychange",n),()=>document.removeEventListener("visibilitychange",n)},[]);const g=(0,r.useRef)(m.map(()=>r.default.createRef())),A=(S?.showArrows??!0)&&m.length>1,C=S?.showDots??!0,d=S?.autoplaySeconds??void 0,P=d!=null&&d>0?[l.Navigation,l.Pagination,l.Autoplay]:[l.Navigation,l.Pagination],D=d!=null&&d>0?{delay:Math.max(d*1e3,3e3),disableOnInteraction:!1}:!1,O=(0,r.useCallback)(n=>{const a=n.realIndex;g.current.forEach((s,w)=>{w!==a&&s.current&&s.current.querySelectorAll("video").forEach(b=>{b.pause(),b.currentTime=0})});const u=g.current[a];u?.current&&u.current.querySelectorAll("video").forEach(s=>{s.paused&&s.play()?.catch(()=>{})}),R(a)},[]);return(0,e.jsxs)("section",{ref:T,className:(0,x.cn)("secondary-banner-carousel group relative w-full overflow-hidden",(0,B.secondaryBannerVariants)({size:M}),{"aiui-dark":k},i),...c,children:[(0,e.jsx)(v.Swiper,{onSwiper:n=>p.current=n,onSlideChange:O,modules:P,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:D,pagination:C?{clickable:!0,el:y,renderBullet:(n,a)=>`<span class="${a} banner-dot"></span>`}:!1,children:m.map((n,a)=>(0,e.jsx)(v.SwiperSlide,{children:({isActive:u})=>(0,e.jsx)("div",{ref:g.current[a],children:(0,e.jsx)(_.default,{data:n,isActive:u,classNames:o,jumpOptions:f})})},a))}),A&&(0,e.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>p.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(F,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>p.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(G,{})})]}),C&&(0,e.jsx)("div",{ref:j,style:{"--swiper-pagination-bottom":"0px"},className:(0,x.cn)("secondary-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100",{"aiui-dark":k})})]})});N.displayName="SecondaryBannerCarousel";var K=N;
+"use strict";"use client";var ue=Object.create;var h=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,Se=Object.prototype.hasOwnProperty;var ye=(r,o)=>{for(var l in o)h(r,l,{get:o[l],enumerable:!0})},D=(r,o,l,f)=>{if(o&&typeof o=="object"||typeof o=="function")for(let u of pe(o))!Se.call(r,u)&&u!==l&&h(r,u,{get:()=>o[u],enumerable:!(f=de(o,u))||f.enumerable});return r};var H=(r,o,l)=>(l=r!=null?ue(me(r)):{},D(o||!r||!r.__esModule?h(l,"default",{value:r,enumerable:!0}):l,r)),ve=r=>D(h({},"__esModule",{value:!0}),r);var he={};ye(he,{default:()=>ge});module.exports=ve(he);var i=require("react/jsx-runtime"),a=H(require("react")),b=require("swiper/react"),w=require("../../helpers/index.js"),z=require("../../hooks/useCarouselPlayback.js"),S=require("../../shared/CarouselControls.js"),O=H(require("./index.js")),$=require("./index.js"),Ce=require("swiper/css");const fe={prevSlide:"Previous banner",nextSlide:"Next banner",pauseAutoplay:"Pause autoplay",playAutoplay:"Play autoplay",pauseVideo:"Pause video",playVideo:"Play video",slideStatus:"Slide",carouselLabel:"Banner carousel"},q=a.default.forwardRef(({data:r,className:o,classNames:l,jumpOptions:f,a11yLabels:u,...j},y)=>{const s=r.items||[],L=r.carousel,P=L?.size??r.size??"base",c={...fe,...u},J=(0,a.useRef)(null),d=(0,a.useRef)(s.map(()=>a.default.createRef())),C=L?.autoplaySeconds,g=s.length>1&&C!=null&&C>0,B=g?Math.max(C,3):void 0,_=(0,a.useCallback)(()=>B,[B]),U=(0,a.useCallback)(e=>{d.current.forEach((t,m)=>{m!==e&&t.current&&t.current.querySelectorAll("video").forEach(A=>{A.pause(),A.currentTime=0})});const n=d.current[e];n?.current&&n.current.querySelectorAll("video").forEach(t=>{t.currentTime=0,t.play()?.catch(()=>{})})},[]),{rootRef:R,activeIndex:p,playbackState:W,resetNonce:Y,announcement:G,activeFrameIntervalSec:V,isTimerRunning:K,handleSwiperInit:Q,handleSlideChange:X,handleTransitionEnd:Z,handleSliderFirstMove:ee,goToSlide:N,goToSlideIndex:ne,handlePausePlayClick:re,handleFocus:ae,handleBlur:te}=(0,z.useCarouselPlayback)({frameCount:s.length,resolveFrameIntervalSec:_,isAutoplayEnabled:g,swiperRef:J,slideStatusLabel:c.slideStatus,onSlideMediaSync:U,onPauseToggle:(e,n)=>{d.current[n]?.current?.querySelectorAll("video")?.forEach(m=>{e?m.pause():m.ended||m.play()?.catch(()=>{})})}}),oe=(0,a.useCallback)(e=>{R.current=e,typeof y=="function"?y(e):y&&(y.current=e)},[y,R]),T=(0,a.useCallback)(e=>{const n=s[e];return n?[n.pcImage,n.padImage,n.mobileImage].some(t=>t?.mimeType?.startsWith("video/")):!1},[s])(p),[E,x]=(0,a.useState)(null),[M,F]=(0,a.useState)(null);(0,a.useEffect)(()=>{if(x(null),F(null),!T)return;const e=d.current[p]?.current?.querySelector("video");if(!e)return;const n=()=>x(e.ended?"ended":e.paused?"paused":"playing"),t=()=>F(Number.isFinite(e.duration)?e.duration:null);return n(),t(),e.addEventListener("play",n),e.addEventListener("pause",n),e.addEventListener("ended",n),e.addEventListener("loadedmetadata",t),()=>{e.removeEventListener("play",n),e.removeEventListener("pause",n),e.removeEventListener("ended",n),e.removeEventListener("loadedmetadata",t)}},[p,T]);const I=V!==void 0,v=!I&&T&&M!==null&&M>5&&E!=="ended"&&E!==null,se=I||v,ie=v?E==="paused":W==="STOPPED",le=()=>{if(!v){re();return}const e=d.current[p]?.current?.querySelector("video");e&&(e.paused?e.play()?.catch(()=>{}):e.pause())},k=s[p]?.theme??"light",ce=(L?.showArrows??!0)&&s.length>1;return(0,i.jsxs)("section",{ref:oe,role:"region","aria-roledescription":"carousel","aria-label":c.carouselLabel,onFocus:ae,onBlur:te,className:(0,w.cn)("secondary-banner-carousel group relative w-full overflow-hidden",(0,$.secondaryBannerVariants)({size:P}),o),...j,children:[(0,i.jsx)(b.Swiper,{onSwiper:Q,onSlideChange:X,onSlideChangeTransitionEnd:Z,onSliderFirstMove:ee,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,children:s.map((e,n)=>(0,i.jsx)(b.SwiperSlide,{children:({isActive:t})=>(0,i.jsx)("div",{ref:d.current[n],role:"group","aria-roledescription":"slide","aria-label":`${c.slideStatus} ${n+1} / ${s.length}`,className:(0,w.cn)({"aiui-dark":e.theme==="dark"}),children:(0,i.jsx)(O.default,{data:{...e,size:P},isActive:t,classNames:l,jumpOptions:f})})},n))}),ce&&(0,i.jsx)(S.CarouselArrows,{onPrev:()=>N("prev"),onNext:()=>N("next"),prevLabel:c.prevSlide,nextLabel:c.nextSlide}),g&&(0,i.jsx)(S.CarouselProgressControls,{frameCount:s.length,activeIndex:p,resetNonce:Y,activeFrameIntervalSec:V,isAutoplayEnabled:g,isTimerRunning:K,onSegmentClick:ne,segmentLabel:e=>`${c.slideStatus} ${e+1} / ${s.length}`,classPrefix:"secondary-banner",theme:k}),se&&(0,i.jsx)(S.CarouselCornerToggle,{isPaused:ie,onToggle:le,pausedLabel:v?c.playVideo:c.playAutoplay,playingLabel:v?c.pauseVideo:c.pauseAutoplay,classPrefix:"secondary-banner",theme:k}),(0,i.jsx)("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:G})]})});q.displayName="SecondaryBannerCarousel";var ge=q;

package/dist/cjs/biz-components/SecondaryBanner/index.d.ts

@@ -3,18 +3,60 @@ import type { Media as MediaType, Theme } from '../../types/props.js';
 import type { ButtonProps } from '../../components/button.js';
 export type SecondaryBannerSemanticName = 'root' | 'title' | 'superTitle' | 'subtitle' | 'content' | 'buttonGroup' | 'primaryButton' | 'secondaryButton';
 /**
- * Carousel navigation configuration for SecondaryBanner. v1: arrows only.
- * autoplay, dots, and progress are intentionally EXCLUDED from v1.
+ * Accessibility label overrides for the SecondaryBanner carousel controls.
+ * All labels default to English; override per-locale as needed.
+ */
+export interface SecondaryBannerA11yLabels {
+    /** Accessible name for the previous-slide arrow @default 'Previous banner' */
+    prevSlide?: string;
+    /** Accessible name for the next-slide arrow @default 'Next banner' */
+    nextSlide?: string;
+    /** Accessible name for the pause button while autoplaying @default 'Pause autoplay' */
+    pauseAutoplay?: string;
+    /** Accessible name for the play button while stopped @default 'Play autoplay' */
+    playAutoplay?: string;
+    /** Accessible name for the corner video button while the video is playing @default 'Pause video' */
+    pauseVideo?: string;
+    /** Accessible name for the corner video button while the video is paused @default 'Play video' */
+    playVideo?: string;
+    /** Slide status noun, used as `{slideStatus} {n} / {total}` @default 'Slide' */
+    slideStatus?: string;
+    /** Accessible name for the carousel region @default 'Banner carousel' */
+    carouselLabel?: string;
+}
+/**
+ * Carousel navigation configuration for SecondaryBanner.
+ * Iter 3: the carousel shares HeroBanner's playback state machine
+ * (useCarouselPlayback) and renders the fixed segmented progress + pause/play
+ * control cluster.
  */
 export interface SecondaryBannerCarouselConfig {
     /**
-     * Show prev/next arrow navigation controls.
+     * Show prev/next arrow navigation controls (≥1025 only).
      * Only used when data.items has 2+ slides.
      * @default true
      */
     showArrows?: boolean;
+    /**
+     * Unified size applied to all carousel frames (CMS 轮播配置 → 尺寸).
+     * Takes precedence over top-level data.size in carousel mode.
+     */
+    size?: 'sm' | 'base' | 'lg' | 'xlg';
+    /**
+     * @deprecated The legacy Swiper bullet dots are replaced by the fixed
+     * segmented progress + pause/play control cluster. This field is kept for
+     * type compatibility only and no longer affects rendering.
+     */
     showDots?: boolean;
+    /**
+     * @deprecated Loop is always enabled; this field is ignored.
+     */
     loop?: boolean;
+    /**
+     * Autoplay interval in seconds (frames are image-only, so a single interval
+     * applies to every frame). `> 0` enables autoplay (clamped to ≥3s);
+     * absent / ≤ 0 disables it and renders a static first frame.
+     */
     autoplaySeconds?: number;
 }
 /**
@@ -132,9 +174,9 @@ export interface SecondaryBannerData {
      */
     items?: SecondaryBannerSlideData[];
     /**
-     * Display mode: 'single' renders the first frame only; 'carousel' activates Swiper.
-     * Mirrors the CMS `mode` field (single | carousel). Defaults to single-banner path
-     * when absent (backward-compatible with legacy data that has no mode field).
+     * Display mode hint mirrored from the CMS `mode` field (single | carousel).
+     * Carousel activation is driven by `items` presence (DECISION-002, same as
+     * HeroBanner); this field is informational and kept for CMS compatibility.
      */
     mode?: 'single' | 'carousel';
     /**
@@ -159,6 +201,11 @@ export interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement>
      * @default true
      */
     isActive?: boolean;
+    /**
+     * Accessibility label overrides for carousel controls (arrows, pause/play,
+     * live announcements). Defaults are English.
+     */
+    a11yLabels?: SecondaryBannerA11yLabels;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<SecondaryBannerProps & React.RefAttributes<HTMLElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;